/* Distributor portal — the layer on top of the shared kit. */

/* ---------- sign-in ---------- */
.auth-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0;
}
.auth-steps li {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--rad-sm);
  border: 1px solid var(--line); background: var(--panel);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.auth-steps li span {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--line); color: var(--faint); font-size: 9px;
}
.auth-steps li.is-active { border-color: var(--cyan); color: var(--cyan); }
.auth-steps li.is-active span { background: var(--cyan); color: #02121a; }
.auth-steps li.is-done { color: var(--ok); border-color: #4ad9a440; }
.auth-steps li.is-done span { background: var(--ok); color: #02121a; }
.auth-lede { margin: 0 0 16px; color: var(--dim); font-size: 13px; }
.otp-input {
  font-family: var(--mono); font-size: 22px; letter-spacing: .5em;
  text-align: center; padding: 12px;
}
.login-foot { margin: 16px 0 0; font-size: 11.5px; text-align: center; }

/* ---------- top bar ---------- */
.wallet-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid #56cdec40; background: var(--cyan-soft);
  font-family: var(--mono); font-size: 11px; color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.wallet-chip.is-low { border-color: #e8b55240; background: var(--warn-bg); color: var(--warn); }

/* ---------- catalogue ---------- */
.cat-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--panel2);
}
.cat-toolbar .field { margin: 0; min-width: 150px; }
.cat-grid {
  display: grid; gap: 16px; padding: 18px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.prod {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--rad); overflow: hidden;
  transition: border-color .12s;
}
.prod:hover { border-color: #56cdec55; }
.prod-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel2); }
.prod-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-flag {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: #000000aa; backdrop-filter: blur(4px);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
}
.prod-stock {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
}
.prod-stock.is-ok { background: #0d3328cc; color: var(--ok); }
.prod-stock.is-low { background: #33280fcc; color: var(--warn); }
.prod-stock.is-out { background: #38191acc; color: var(--bad); }
.prod-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prod-brand { font-family: var(--display); font-size: 17px; letter-spacing: .03em; text-transform: uppercase; }
.prod-meta { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; }
.prod-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tier {
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim); cursor: pointer;
}
.tier:hover { border-color: var(--cyan); color: var(--cyan); }
.tier.is-active { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.tier:disabled { opacity: .38; cursor: not-allowed; }
.prod-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.prod-price b { font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: .02em; }
.prod-price span { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.prod-disc { color: var(--ok); font-family: var(--mono); font-size: 10.5px; }
.prod-actions { display: flex; gap: 8px; }
.prod-actions .btn { flex: 1; }

/* ---------- cart ---------- */
.cart-line {
  display: grid; grid-template-columns: 54px 1fr auto auto; gap: 14px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line2);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line img { width: 54px; height: 34px; object-fit: cover; border-radius: 5px; }
.cart-qty { width: 84px; }
.cart-total {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
  padding: 16px 0 0; border-top: 1px solid var(--line); margin-top: 8px;
}
.cart-total b { font-family: var(--display); font-size: 24px; font-weight: 400; }

/* ---------- codes ---------- */
.code-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line2);
}
.code-row:last-child { border-bottom: 0; }
.code-idx { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.code-value {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .06em;
  word-break: break-all;
}
.code-value.is-masked { color: var(--faint); }
.code-pin { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 3px; }

/* ---------- misc ---------- */
.upload-zone {
  border: 1px dashed var(--line); border-radius: var(--rad-sm);
  padding: 22px; text-align: center; color: var(--faint);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.upload-zone:hover { border-color: var(--cyan); color: var(--cyan); }
.upload-zone.is-filled { border-style: solid; border-color: #4ad9a440; color: var(--ok); }
.thumb { width: 62px; height: 39px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); display: block; }

@media (max-width: 900px) {
  .inv-meta { grid-template-columns: repeat(2, 1fr); }
  .inv-parties, .inv-banks, .inv-signs, .inv-foot { grid-template-columns: 1fr; }
}