/* ============================================================
   Variant LOAN (/loan) — slide-specific styles
   "How much unsecured debt do you have?" — Figma node 748:1166
   Source: figma.com/design/HsUjOISBKfPo4pNu8awGws (Mobile - V1)

   /loan render-aliases to the shared variant-shell-g, so these rules
   are scoped to .debt-step (the slide wrapper). That class only exists
   in the unsecuredDebt slide, which only renders when "unsecuredDebt"
   is in the flow — and only variant-loan.json has it. Result: these
   styles are inert for variants G and O (and every other variant).
   ============================================================ */

/* Slide layout — 26px rhythm between title / qualify list / grid / button
   (Figma "Loan Amount Container" gap = 26px). */
.debt-step {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: stretch;
}
/* Heading color/weight (#241c11 / 500) already come from variant-g.css;
   just drop the base 40px margin so the flex gap controls spacing. */
.debt-step h2.form-h2 {
  margin-bottom: 0;
}

/* ── Qualify list (includes / excludes) — Figma node 748:1324 ───── */
.debt-qualify {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.debt-qualify-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.4px;
  color: #241c11;
}
.debt-qualify-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

/* ── Option grid — two columns, 16px gaps — Figma node 748:1355 ──── */
.debt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.debt-card {
  display: block;
  cursor: pointer;
  text-decoration: none;
}
/* Radio hidden but accessible (focus reaches it via :focus-within below) */
.debt-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.debt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 10px 12px;
  border: 2px solid #e2e8e8;
  border-radius: 12px;
  background: #fff;
  transition: 0.2s;
}
.debt-label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -1px;
  color: #241c11;
  text-align: center;
  white-space: nowrap;
}
/* Hover / selected reuse the Loan Purpose (.choice-card) palette:
   teal #135b52 border + #f0fdf4 fill + matching shadow. */
.debt-card:hover .debt-box,
.debt-card:focus-within .debt-box {
  border-color: #135b52;
  background: #f0fdf4;
  box-shadow: 0 10px 24px rgba(19, 91, 82, 0.1);
}
.debt-card input[type="radio"]:checked + .debt-box {
  border-color: #135b52;
  background: #f0fdf4;
  box-shadow: 0 10px 24px rgba(19, 91, 82, 0.1);
}

/* Keep the mid-range labels on one line on narrow phones. */
@media (max-width: 400px) {
  .debt-label {
    font-size: 16px;
  }
  .debt-box {
    padding: 10px 8px;
  }
}