/* Buy-leads store fixes — additive layer.
   Loaded AFTER search-redesign.css, so this file mostly adds selectors for markup that
   index.v6.js introduces. It overrides four existing rules, each marked OVERRIDE inline:
   the box of the now-shadowed #statesDropdown, the #orderSummary backdrop, and two
   hardcoded dark fills that search-redesign.css pins with !important (.state-container
   and .app-shell inputs) which are unreadable under data-theme="light".

   Every colour comes from the tokens already declared in search-redesign.css
   (--accent #8B5CF6, --card-bg, --card-border, --success, --danger, …), so the whole
   layer follows :root[data-theme="light"] with no separate light-mode block.

   Rollback: remove the <link> to this file from index.html.
*/

/* ---------- 1 · step rail ---------------------------------------------------- */
.step-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.step-rail::-webkit-scrollbar { display: none; }

.step-rail li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted-color);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.step-rail li + li::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--card-border);
  margin-right: 2px;
  align-self: center;
}
.step-rail li.is-done {
  color: var(--text-color);
  border-color: var(--card-border);
  background: rgba(139, 92, 246, 0.10);
}
.step-rail li.is-current {
  color: var(--pill-active-fg);
  border-color: var(--accent);
  background: var(--pill-active-bg);
}
.step-rail .step-note {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.7;
}

/* ---------- 2 · state list --------------------------------------------------- */
/* The <select> stays in the DOM as the flow's source of truth; only its box is hidden. */
#statesDropdown.is-shadowed {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.state-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
/* Only cap the height where there is room for a second column; on a phone a nested
   scroller inside the page traps the swipe, so the list just flows with the document. */
@media (min-width: 700px) {
  .state-list {
    max-height: 320px;
    overflow-y: auto;
  }
}

.state-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.state-row:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
}
.state-row:active:not(:disabled) { transform: scale(0.995); }
.state-row.is-selected {
  border-color: var(--accent);
  background: var(--pill-active-bg);
}
.state-row.is-soldout {
  opacity: 0.45;
  cursor: not-allowed;
}

.state-code {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(139, 92, 246, 0.16);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.state-name {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-count {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-color);
}
.state-count small {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted-color);
}
.state-row.is-soldout .state-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-color);
}

.sold-out-toggle {
  width: auto;            /* opt out of the global button{width:100%} */
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 12px;
  min-height: 36px;
  border: 1px dashed var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sold-out-toggle:hover {
  color: var(--text-color);
  border-color: var(--accent);
}

/* ---------- 3 · result card -------------------------------------------------- */
/* OVERRIDE: search-redesign.css ends with
     .app-shell .state-container { background: rgb(17, 19, 24) !important; }
   an unconditional dark fill that beats its own :root[data-theme="light"] .state-container
   rule. In light theme that left the result card dark while --text-color switched to
   #0F172A, so the card's own text was near-invisible. Pre-existing (v5 has it too); it
   only becomes obvious now the card carries more than two lines. */
:root[data-theme="light"] .app-shell .state-container {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.result-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.result-head .state-flag img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--card-border);
}
.result-titles { min-width: 0; }
.result-titles h2 {
  margin: 0 0 3px;
  font-size: 20px;
  line-height: 1.2;
}
.result-sub,
.result-stock {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-color);
}
.result-stock { color: var(--success); }
.result-hint {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(139, 92, 246, 0.08);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-color);
}

.qty-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qty-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-color);
}
.qty-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
/* OVERRIDE: search-redesign.css pins every .app-shell input with
     { width:100% !important; height:56px !important; border-radius:999px !important;
       background: rgb(26,29,34) !important }
   a hardcoded dark fill that ignores the theme. The quantity field opts out so it can sit
   beside its running total and stay readable in light theme. Scoped to this one input. */
.app-shell .qty-row #lead-input {
  flex: 0 0 96px;
  width: auto !important;
  height: 48px !important;
  min-height: 48px;
  padding: 0 12px !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
  font: inherit;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;
}
.qty-total {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  min-height: 48px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
}
.qty-total-calc {
  font-size: 12px;
  color: var(--muted-color);
}
.qty-total-sum {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.qty-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qty-preset {
  width: auto;            /* opt out of the global button{width:100%} */
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.qty-preset:hover {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.10);
}

.qty-after {
  margin: 0;
  font-size: 12px;
  color: var(--muted-color);
}
.qty-after.is-short { color: var(--danger); }

#content .add-button {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- 5 · dead end ----------------------------------------------------- */
.dead-end {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dead-loading {
  margin: 0;
  font-size: 13px;
  color: var(--muted-color);
}
.dead-head h2 {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.25;
}
.dead-scope {
  margin: 0;
  font-size: 12px;
  color: var(--muted-color);
}
.dead-reason {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 95, 143, 0.45);
  background: rgba(255, 95, 143, 0.08);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-color);
}
.dead-reason strong { color: var(--danger); font-weight: 600; }

.dead-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dead-action {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 56px;
  padding: 11px 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.14);
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dead-action:hover { background: rgba(139, 92, 246, 0.22); }
.dead-action-label { font-size: 14px; font-weight: 600; }
.dead-action-detail { font-size: 11px; color: var(--muted-color); }

.dead-ages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dead-ages-title {
  flex: 1 0 100%;
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-color);
}
.dead-age {
  width: auto;            /* opt out of the global button{width:100%} */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.dead-age:hover { border-color: var(--accent); }
.dead-age strong { color: var(--accent); font-weight: 600; }

/* ---------- 4 · checkout, 6 · insufficient funds ----------------------------- */
/* OVERRIDE: search-redesign.css gives #orderSummary a 0.92-alpha backdrop, so the filter
   stack behind it showed through the receipt. A checkout screen is a commitment step —
   it gets an opaque ground. */
#orderSummary {
  background: var(--bg-color);
}

.checkout {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checkout h2 {
  margin: 0;
  font-size: 20px;
}

.checkout-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
}
.checkout-item .state-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  flex: 0 0 auto;
}
.checkout-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.checkout-item-body h3 {
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 1.3;
}
.checkout-bank,
.checkout-line,
.checkout-scope {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-color);
}
/* Lender names run long ("AMERICAN COMMUNITY BANK  TR"). On the confirm step the customer
   needs to read which product they are buying, so this wraps to two lines rather than
   clipping mid-word; the short lines below it stay on one line. */
.checkout-bank {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.checkout-line,
.checkout-scope {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-item-sum {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  padding-right: 22px;
}
.checkout-item .delete-order {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: 4px;
}
.checkout-item .delete-order:hover { opacity: 1; }

.receipt,
.wallet-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
}
.receipt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted-color);
}
.receipt-row span:last-child { color: var(--text-color); }
.receipt-row.is-discount span:last-child { color: var(--success); }
.receipt-row.is-discount em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.8;
}
.receipt-row.is-total {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}
.wallet-title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-color);
}
.checkout-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted-color);
}

.funds-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 95, 143, 0.45);
  border-radius: 14px;
  background: rgba(255, 95, 143, 0.08);
}
.funds-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--danger);
}
.funds-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted-color);
}
.funds-actions { display: flex; gap: 10px; }
.funds-topup {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.funds-topup:hover { background: var(--accent-strong); }

.funds-reduce {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 95, 143, 0.25);
}
.funds-reduce-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted-color);
}
.funds-reduce-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 56px;
  padding: 11px 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.funds-reduce-btn:hover { border-color: var(--accent); }
.funds-reduce-qty { font-size: 15px; font-weight: 600; }
.funds-reduce-detail { font-size: 11px; color: var(--muted-color); }

.checkout .confirm-order {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.checkout .confirm-order:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.checkout .go-back {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--muted-color);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.checkout .go-back:hover { color: var(--text-color); border-color: var(--accent); }

/* ---------- narrow phones ---------------------------------------------------- */
@media (max-width: 340px) {
  .qty-row { flex-direction: column; }
  .qty-row #lead-input { flex: 0 0 auto; width: 100%; }
  .state-name { font-size: 14px; }
}

/* ---------- panel notes (fix 1) ---------------------------------------------- */
/* Small qualifier beside a panel title: "applies to everything below", "optional". */
.control-card .panel-title .panel-note {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-color);
  opacity: 0.85;
}

/* Struck-through list price beside the discounted one on the result card. */
.result-stock s {
  opacity: 0.65;
  margin-left: 2px;
}

/* ---------- light theme: the remaining hardcoded control ------------------------ */
/* OVERRIDE: the same late !important block pins .app-shell select to rgb(26,29,34),
   which left the City dropdown as a black pill on a white card under
   data-theme="light". background-COLOR only, so the select keeps its own arrow.
   Pre-existing (v5 has it); folded in here since the fixes already touch this screen. */
:root[data-theme="light"] .app-shell select {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--card-border) !important;
}