/* =============================================================
   THE VACATION CODE — BOOKING FUNNEL COMPONENT LAYER
   Owns the tour booking flow (public/tour-book.php) and the
   shared checkout chrome (public/checkout.php).

   Replaces the 480-line inline <style> block and the 281 inline
   style="" attributes that used to live in tour-book.php, none
   of which were on tokens.

   RULES (from tokens.css):
     · --w-* vars only. No raw hex.
     · 3 radii, 3 shadows.
     · Every interactive control clears a 44px hit target.
     · Nothing may overflow its container at 320px.

   Namespace: .bkg-*
   ============================================================= */

/* ── Shell & page grid ───────────────────────────────────────── */

.bkg-wrap {
  max-width: 1140px;
  margin: var(--sp-8) auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-6);
  align-items: start;
}

.bkg-main {
  min-width: 0;                      /* lets the column actually shrink */
  background: var(--w-surface);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-card);
  padding: var(--sp-8);
  box-shadow: var(--w-shadow-rest);
}

@media (max-width: 960px) {
  .bkg-wrap { grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-4) auto; }
  .bkg-main { padding: var(--sp-5); border-radius: var(--w-r-input); }
}

@media (max-width: 480px) {
  .bkg-main {
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ── Step rail ───────────────────────────────────────────────
   The old .step-indicator was `grid-template-columns: repeat(4, 1fr)`
   with a 44px label in each cell. At 375px that needs ~600px and
   steps 3-4 were simply painted off-screen — the traveller could not
   see how far they had to go.

   This rail is width-proof by construction: the connector line
   flexes, the numbered node never shrinks, and the label collapses
   to the active step only once there is no room for all of them.  */

.bkg-rail {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2);
  background: var(--w-bg);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-btn);
  list-style: none;
}

.bkg-rail-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--w-ink-2);
  font-size: var(--text-sm);
  font-weight: 750;
  white-space: nowrap;
}

/* the active step is the one allowed to consume the free space */
.bkg-rail-step[aria-current="step"] { flex: 1 1 auto; }

.bkg-rail-node {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--w-line);
  color: var(--w-ink-2);
  font-size: var(--text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.bkg-rail-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* connector — flexes to fill, so the rail always spans exactly 100% */
.bkg-rail-link {
  flex: 1 1 auto;
  min-width: var(--sp-2);
  height: 2px;
  border-radius: 2px;
  background: var(--w-line);
  transition: background var(--duration-base) var(--ease-out);
}

.bkg-rail-step[aria-current="step"] .bkg-rail-node {
  background: var(--w-brand);
  color: var(--w-surface);
}
.bkg-rail-step[aria-current="step"] .bkg-rail-label { color: var(--w-ink); }

.bkg-rail-step.is-done .bkg-rail-node { background: var(--w-secondary); color: var(--w-surface); }
.bkg-rail-step.is-done .bkg-rail-label { color: var(--w-ink); }
.bkg-rail-link.is-done { background: var(--w-secondary); }

/* Below 640px only the current step keeps its wording. The nodes stay,
   so the traveller still sees "3 of 4 circles filled" — position is
   never lost, which is the thing the old rail actually broke. */
@media (max-width: 640px) {
  .bkg-rail-step:not([aria-current="step"]) .bkg-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ── Trust strip ─────────────────────────────────────────────
   Was flex-wrap + space-between with four items totalling 701px in a
   685px box: it always wrapped, and the orphan on row two sat under a
   stretched first row. A grid can't orphan — every cell is one track. */

.bkg-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3);
  background: var(--w-bg);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-input);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}

.bkg-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--w-ink);
  line-height: 1.3;
}

.bkg-trust-item svg { flex: 0 0 auto; width: 15px; height: 15px; }

@media (max-width: 900px) { .bkg-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* On a phone the strip was costing ~290px above the first field.
   Reassurance matters, but not four rows of it before the form starts. */
@media (max-width: 560px) {
  .bkg-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .bkg-trust-item { font-size: var(--text-2xs); gap: var(--sp-1); }
  .bkg-trust-item svg { width: 13px; height: 13px; }
}

/* ── Step heading ────────────────────────────────────────────── */

.bkg-step { display: none; }
.bkg-step.is-active { display: block; }

.bkg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1.5px solid var(--w-line);
}

.bkg-kicker {
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-ink-2);
  margin-bottom: var(--sp-2);
}

.bkg-head h2 {
  margin: 0 0 var(--sp-1);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  text-wrap: balance;
}

.bkg-head p {
  margin: 0;
  color: var(--w-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.bkg-head-badge {
  flex: 0 0 auto;
  background: var(--w-brand-soft);
  color: var(--w-brand);
  border-radius: var(--w-r-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}

/* The badge was being squeezed to "~2 …" next to a wrapping h2.
   Below 560px it drops under the heading at full width instead. */
@media (max-width: 560px) {
  .bkg-head { flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .bkg-head-badge { align-self: flex-start; }
}

/* ── Cards ───────────────────────────────────────────────────── */

.bkg-card {
  background: var(--w-surface);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-card);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}

.bkg-card.is-accent {
  background: var(--w-brand-soft);
  border-color: var(--w-brand);
}

@media (max-width: 560px) {
  .bkg-card { padding: var(--sp-4); border-radius: var(--w-r-input); margin-bottom: var(--sp-4); }
}

.bkg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.bkg-card-head-l { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

.bkg-card-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--token-radius-md);
  display: grid;
  place-items: center;
  background: var(--w-bg);
  color: var(--w-brand);
}
.bkg-card-icon svg { width: 18px; height: 18px; }

.bkg-card-title { display: block; font-size: var(--text-base); font-weight: 800; color: var(--w-ink); }
.bkg-card-sub   { display: block; font-size: var(--text-xs); color: var(--w-ink-2); margin-top: 1px; line-height: 1.4; }

.bkg-tag {
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--w-r-pill);
  background: var(--w-bg);
  color: var(--w-ink-2);
  white-space: nowrap;
}
.bkg-tag.is-brand { background: var(--w-brand-soft); color: var(--w-brand); }

/* ── Fields ──────────────────────────────────────────────────── */

.bkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

/* auto-fit collapses to one column on its own — no breakpoint needed */

.bkg-field { display: flex; flex-direction: column; min-width: 0; }

.bkg-field > label {
  font-size: var(--text-sm);
  font-weight: 750;
  color: var(--w-ink);
  margin-bottom: var(--sp-2);
}

.bkg-field input,
.bkg-field select,
.bkg-field textarea {
  width: 100%;
  min-height: 48px;                  /* was 39px — under the 44px minimum */
  box-sizing: border-box;
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-input);
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--text-md);         /* 16px — stops iOS zooming the page */
  font-weight: 600;
  color: var(--w-ink);
  background: var(--w-surface);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.bkg-field textarea { min-height: 84px; resize: vertical; }

.bkg-field input::placeholder,
.bkg-field textarea::placeholder { color: var(--w-ink-3); font-weight: 500; }

.bkg-field input:focus-visible,
.bkg-field select:focus-visible,
.bkg-field textarea:focus-visible {
  outline: none;
  border-color: var(--w-brand);
  box-shadow: 0 0 0 3px var(--w-brand-soft);
}

.bkg-field .bkg-hint { font-size: var(--text-xs); color: var(--w-ink-2); margin-top: var(--sp-1); line-height: 1.4; }

/* validation */
.bkg-field input.is-invalid,
.bkg-field select.is-invalid,
.bkg-field textarea.is-invalid {
  border-color: var(--w-danger);
  box-shadow: 0 0 0 3px var(--token-danger-soft);
}

.bkg-field-error {
  display: block;
  color: var(--w-danger);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-top: var(--sp-1);
}

/* phone: code + number, code never collapses */
.bkg-phone { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); gap: var(--sp-2); }

/* ── Choice controls ─────────────────────────────────────────
   The native 18px checkbox was the single worst tap target in the
   funnel. The control keeps its 20px look but the whole row is the
   hit area, so it clears 44px everywhere. */

.bkg-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  background: var(--w-surface);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-input);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.bkg-choice:hover { border-color: var(--w-brand); }

.bkg-choice input[type="checkbox"],
.bkg-choice input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--w-brand);
  cursor: pointer;
}

.bkg-choice:has(input:checked) {
  border-color: var(--w-brand);
  background: var(--w-brand-soft);
}

.bkg-choice-body { flex: 1; min-width: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--w-ink); }
.bkg-choice-body strong { display: block; font-weight: 800; }
.bkg-choice-body .bkg-choice-note { color: var(--w-ink-2); font-size: var(--text-xs); }

.bkg-choice-price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.bkg-choice-price b { display: block; font-size: var(--text-base); color: var(--w-brand); font-weight: 850; }
.bkg-choice-price span { font-size: var(--text-2xs); color: var(--w-ink-2); }

.bkg-choice-list { display: grid; gap: var(--sp-3); }

/* ── Buttons & step navigation ───────────────────────────────── */

.bkg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;                  /* primary CTAs were 39px */
  padding: var(--sp-3) var(--sp-6);
  border: 1.5px solid transparent;
  border-radius: var(--w-r-btn);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.bkg-btn:active { transform: translateY(1px); }
.bkg-btn:focus-visible { outline: 2px solid var(--w-brand); outline-offset: 2px; }
.bkg-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.bkg-btn-primary { background: var(--w-brand); color: var(--w-surface); }
.bkg-btn-primary:hover:not([disabled]) { background: var(--w-brand-hover); }

.bkg-btn-ghost { background: transparent; color: var(--w-ink-2); border-color: var(--w-line); }
.bkg-btn-ghost:hover { color: var(--w-ink); border-color: var(--w-ink-3); }

.bkg-btn-dashed {
  width: 100%;
  background: transparent;
  color: var(--w-brand);
  border: 1.5px dashed var(--w-line);
}
.bkg-btn-dashed:hover { border-color: var(--w-brand); background: var(--w-brand-soft); }

.bkg-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  flex-wrap: wrap;   /* the pay label carries a full amount and cannot always share a row */
}

/* Back sits left, Continue right. When there is no Back the primary
   still needs to sit right, hence the auto margin rather than a
   justify-content flip that would move it on the one-button steps. */
.bkg-nav > .bkg-btn-primary:only-child { margin-left: auto; }

@media (max-width: 560px) {
  .bkg-nav { margin-top: var(--sp-6); }
  /* Continue is the primary action — give it the width, keep Back small */
  .bkg-nav .bkg-btn-primary { flex: 1 1 auto; }
}

/* ── Traveller rows ──────────────────────────────────────────── */

.bkg-traveller {
  position: relative;
  background: var(--w-bg);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.bkg-traveller.is-lead { background: var(--w-surface); border-color: var(--w-brand); }

.bkg-traveller-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.bkg-traveller-title { font-size: var(--text-base); font-weight: 800; color: var(--w-ink); }

/* was a 28px text button in the corner */
.bkg-traveller-remove {
  min-height: 46px;   /* 44 rounded to 43 with this line-height */
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 0;
  border-radius: var(--token-radius-sm);
  color: var(--w-danger);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 750;
  cursor: pointer;
}
.bkg-traveller-remove:hover { background: var(--token-danger-soft); }

@media (max-width: 560px) {
  .bkg-traveller { padding: var(--sp-4); }
}

/* ── Banners ─────────────────────────────────────────────────── */

.bkg-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--w-r-input);
  border: 1.5px solid var(--w-line);
  background: var(--w-bg);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.bkg-banner-body { flex: 1 1 260px; min-width: 0; }
.bkg-banner strong { font-weight: 800; }

.bkg-banner.is-info   { background: var(--w-brand-soft); border-color: var(--w-brand); color: var(--w-ink); }
.bkg-banner.is-warn   { background: var(--token-warning-soft); border-color: var(--token-warning); }
.bkg-banner.is-danger { background: var(--token-danger-soft); border-color: var(--w-danger); color: var(--w-danger); font-weight: 700; }

.bkg-banner-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Legal / terms ───────────────────────────────────────────── */

.bkg-legal { font-size: var(--text-xs); color: var(--w-ink-2); line-height: 1.6; }

/* inline legal links were 15px tall — pad them into a real target */
.bkg-legal a {
  display: inline-block;
  padding: var(--sp-3) 2px;   /* 12 + 20 + 12 = 44px inline */
  line-height: 22px;
  color: var(--w-brand);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Sidebar summary ─────────────────────────────────────────── */

.bkg-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: grid; gap: var(--sp-4); }

@media (max-width: 960px) { .bkg-aside { position: static; } }

.bkg-summary {
  background: var(--w-surface);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-card);
  overflow: hidden;
}

.bkg-summary-body { padding: var(--sp-5); }

.bkg-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.bkg-line .lbl { color: var(--w-ink-2); min-width: 0; }
.bkg-line .val { font-weight: 750; color: var(--w-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.bkg-line-total { border-top: 1.5px solid var(--w-line); margin-top: var(--sp-3); padding-top: var(--sp-3); font-size: var(--text-md); }
.bkg-line-total .val { font-size: var(--text-xl); font-weight: 900; color: var(--w-ink); }

/* departure ⇄ return — the year sat unaligned under a stray separator */
.bkg-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  background: var(--w-bg);
  border-radius: var(--w-r-input);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.bkg-date-cell { min-width: 0; }
.bkg-date-cell.is-end { text-align: right; }
.bkg-date-lbl { display: block; font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-ink-2); margin-bottom: var(--sp-1); }
.bkg-date-day { display: block; font-size: var(--text-xl); font-weight: 850; color: var(--w-ink); line-height: 1.1; }
.bkg-date-year { display: block; font-size: var(--text-xs); color: var(--w-ink-2); margin-top: 2px; }
.bkg-dates-sep { color: var(--w-ink-3); display: grid; place-items: center; }

/* ── Mobile pay bar ──────────────────────────────────────────
   On a phone the summary is a screen away from the CTA. This keeps
   the amount and the action together in the thumb zone. */

.bkg-paybar { display: none; }

@media (max-width: 960px) {
  .bkg-paybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--w-surface);
    border-top: 1.5px solid var(--w-line);
    box-shadow: var(--w-shadow-overlay);
  }

  .bkg-paybar-figure { min-width: 0; flex: 1 1 auto; }
  .bkg-paybar-lbl { display: block; font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--w-ink-2); }
  .bkg-paybar-amt { display: block; font-size: var(--text-lg); font-weight: 900; color: var(--w-ink); font-variant-numeric: tabular-nums; }
  .bkg-paybar .bkg-btn { flex: 0 0 auto; }

  /* keep the last card clear of the bar and of the app tab bar */
  .bkg-wrap { padding-bottom: 96px; }
}

/* ── Print (voucher / confirmation) ──────────────────────────── */

@media print {
  .bkg-rail, .bkg-paybar, .bkg-nav { display: none !important; }
  .bkg-main { border: 0; box-shadow: none; padding: 0; }
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bkg-rail-node,
  .bkg-rail-link,
  .bkg-btn,
  .bkg-choice,
  .bkg-field input,
  .bkg-field select,
  .bkg-field textarea { transition: none; }
  .bkg-btn:active { transform: none; }
}

/* ── Optional details ────────────────────────────────────────
   Emergency contact, dietary needs and special requests are genuinely
   optional. Collapsed, they stop costing ~340px of the first screen. */

.bkg-optional {
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-card);
  background: var(--w-surface);
  margin-bottom: var(--sp-5);
}

.bkg-optional > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-4);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--w-ink);
  list-style: none;
}

.bkg-optional > summary::-webkit-details-marker { display: none; }

.bkg-optional > summary::after {
  content: '';
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--w-ink-2);
  border-bottom: 2px solid var(--w-ink-2);
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}

.bkg-optional[open] > summary::after { transform: rotate(-135deg); }
.bkg-optional > summary span { font-weight: 600; color: var(--w-ink-2); }
.bkg-optional > summary:focus-visible { outline: 2px solid var(--w-brand); outline-offset: -2px; }

/* the card inside carries its own frame — drop the double border */
.bkg-optional .booking-form-card { border: 0; margin: 0; padding: 0 var(--sp-4) var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  .bkg-optional > summary::after { transition: none; }
}

/* screen-reader-only, for the rail's "Step N of M" */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Traveller chips (per-person add-on picker) ──────────────
   Was a 15px checkbox in a 6px-padded row: ~27px tall. */

.bkg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--w-surface);
  border: 1.5px solid var(--w-line);
  border-radius: var(--w-r-input);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--w-ink);
  cursor: pointer;
}

.bkg-chip input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--w-brand);
  cursor: pointer;
}

.bkg-chip:has(input:checked) { border-color: var(--w-brand); background: var(--w-brand-soft); }

/* ── Final pay CTA ───────────────────────────────────────────
   The confirm button is the most important target on the funnel;
   give it more than the 48px floor and full width on a phone. */

.bkg-btn-pay {
  min-height: 56px;
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--text-lg);
}

@media (max-width: 560px) {
  /* .bkg-nav already flexes the primary; a hard 100% overflowed the row
     because Back sits beside it */
  .bkg-btn-pay { padding: var(--sp-4) var(--sp-3); font-size: var(--text-base); }
}

/* Below ~420px "Confirm & Pay ₹ 6,09,960" cannot share a row with Back at
   any sane font size. Give it its own full-width row, above Back so it
   lands in the thumb zone. */
@media (max-width: 420px) {
  .bkg-btn-pay { flex: 1 0 100%; order: -1; white-space: normal; }
  .bkg-nav .bkg-btn-ghost { flex: 1 1 auto; }
}

/* On a phone the banner body takes a full row, so its two buttons wrapped to
   one each and the draft prompt cost ~370px before the form even started.
   Sharing a row puts them back to one. */
@media (max-width: 560px) {
  .bkg-banner-actions { width: 100%; }
  .bkg-banner-actions .bkg-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-3); }
}