/* ============================================================
   Booking wizard — layout + Look B (Sunrise) production styles
   ============================================================ */

/* ---- App bar ---- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: .7rem 0;
}
.phone-link {
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; color:var(--navy); text-decoration:none; font-size:.92rem; white-space:nowrap;
}
.phone-link:hover { color: var(--cyan-ink); }
/* "Find my booking" app-bar link (C3) — unobtrusive, visible on desktop + mobile, ≥44px tap. */
.appbar-find {
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:700; color:var(--navy); text-decoration:none; font-size:.86rem; white-space:nowrap;
  padding:.55rem .15rem;
}
.appbar-find:hover { color: var(--cyan-ink); }

/* ---- Hero band (hidden by default, shown for look B) ---- */
.hero-band { display:none; }
.eyebrow-on-band { color: var(--gold-soft); }
.band-title { color:#fff; font-size: clamp(1.6rem,4vw,2.4rem); margin:0; }

/* ---- Wizard layout ---- */
.wizard-wrap { padding-top: 1.75rem; padding-bottom: 4rem; }

.stepper-wrap { padding: .9rem 1rem; margin-bottom: 1rem; overflow-x:auto; }
.stepper { min-width: max-content; }
@media (min-width:992px){ .stepper { min-width: 0; } }

.step-panel { margin-bottom: 1rem; }
.step-h { font-size: clamp(1.4rem, 3vw, 1.9rem); margin:0; }

/* ---- Lake chip ---- */
.lake-chip {
  display:flex; align-items:center; gap:.55rem;
  background: var(--bg-blue); border:1px solid var(--line);
  border-radius: var(--r-pill); padding:.4rem .9rem .4rem .8rem;
}
.lake-chip b { display:block; font-family:'Farro',sans-serif; color:var(--navy); font-size:.92rem; line-height:1.1; }
.lake-chip small { color: var(--ink-soft); font-size:.72rem; }

/* ---- Calendar ---- */
.cal { }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.cal-month { font-family:'Farro',sans-serif; font-weight:700; color:var(--navy); font-size:1.1rem; white-space:nowrap; }
.cal-nav {
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;color:var(--navy);font-size:1.3rem;line-height:1;cursor:pointer;
}
.cal-nav:hover { border-color:var(--navy); }
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-dow span { text-align:center; font-size:.68rem; font-weight:800; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background:#fff; color:var(--ink);
  font-weight:700; font-size:.95rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; position:relative;
  transition: all .12s ease;
}
.cal-cell .cc-tag { font-size:.56rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.cal-cell.empty { visibility:hidden; }

/* open day */
.cal-cell.open { border-color:#cdddf3; color:var(--navy); }
.cal-cell.open .cc-tag { color:var(--cyan-ink); }
.cal-cell.open:hover { border-color:var(--navy); box-shadow: var(--shadow-sm); transform: translateY(-1px); background:#f7fbff; }

/* on hold (soft-held) */
.cal-cell.hold { background: var(--warn-soft); border-color:#f0dcb6; color:#8a5a14; cursor:not-allowed; }
.cal-cell.hold .cc-tag { color:#9a6a1d; }

/* booked / confirmed */
.cal-cell.taken { background:#eef1f6; border-color:#e0e6ef; color:var(--ink-faint); cursor:not-allowed; }
.cal-cell.taken .cc-tag { color:var(--ink-faint); }

/* past / outside notice */
.cal-cell.past { background:repeating-linear-gradient(135deg,#f4f6fa 0 6px,#eef1f6 6px 12px); border-color:#e8ecf3; color:#b9c2d0; cursor:not-allowed; }

.cal-cell.selected { background:var(--navy)!important; border-color:var(--navy)!important; color:#fff!important; box-shadow:0 8px 18px rgba(37,69,116,.28); }
.cal-cell.selected .cc-tag { color:#bcd3f5!important; }

.cal-legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:1rem; font-size:.78rem; color:var(--ink-soft); }
.cal-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.cal-legend i { width:14px;height:14px;border-radius:5px;display:inline-block; border:1.5px solid; }
.lg-open { background:#fff; border-color:#cdddf3; }
.lg-hold { background:var(--warn-soft); border-color:#f0dcb6; }
.lg-taken{ background:#eef1f6; border-color:#e0e6ef; }
.lg-past { background:repeating-linear-gradient(135deg,#f4f6fa 0 4px,#eef1f6 4px 8px); border-color:#e8ecf3; }

.cal-empty { text-align:center; padding:2.5rem 1rem; }
.cal-empty .ce-ico { font-size:2.2rem; margin-bottom:.5rem; }

/* ---- Field rows + steppers ---- */
.field-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.stepper-ctl { display:inline-flex; align-items:center; gap:.25rem; background:var(--bg-off); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.25rem; }
.stepper-ctl button {
  width:44px;height:44px;border:0;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  color:var(--navy);font-size:1.4rem;line-height:1;font-weight:700;cursor:pointer; flex:none;
  display:grid;place-items:center;
}
.stepper-ctl button:hover:not(:disabled){ border-color:var(--navy); background:var(--navy); color:#fff; }
.stepper-ctl button:disabled { opacity:.35; cursor:not-allowed; }
.stepper-ctl output { min-width:34px; text-align:center; font-weight:800; font-size:1.15rem; color:var(--navy); }

.capacity-note {
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem; padding:.7rem .9rem; border-radius:var(--r-sm);
  background: var(--ok-soft); color:#1c6b46; font-weight:600; font-size:.92rem;
}
.capacity-note.full { background: var(--warn-soft); color:#8a5a14; }
.capacity-note .cap-ico { font-weight:800; }

.license-note {
  display:flex; gap:.6rem; align-items:flex-start;
  margin-top:.9rem; padding:.8rem .9rem; border-radius:var(--r-sm);
  background:#f4f1e0; color:#6f6829; font-size:.9rem;
}
.license-note svg { flex:none; margin-top:1px; color:var(--gold); }

/* ---- Segmented radio ---- */
.seg-radio { display:flex; gap:.5rem; flex-wrap:wrap; }
.seg-radio label { flex:1 1 0; min-width:90px; cursor:pointer; }
.seg-radio input { position:absolute; opacity:0; pointer-events:none; }
.seg-radio span {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  text-align:center; padding:.7rem .5rem; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:#fff; font-weight:700; color:var(--ink-soft);
}
.seg-radio span svg { flex:none; }
.seg-radio input:checked + span { border-color:var(--navy); background:var(--navy); color:#fff; }
.seg-radio input:focus-visible + span { outline:3px solid var(--cyan); outline-offset:2px; }

/* ---- Review card ---- */
.review-card { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.rev-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line-soft); }
.rev-row:last-child { border-bottom:0; }
.rev-row .rv-k { color:var(--ink-soft); font-weight:600; font-size:.9rem; }
.rev-row .rv-v { font-weight:700; color:var(--navy); text-align:right; }
.rev-row.total { background:var(--bg-blue); }
.rev-row.total .rv-v { font-size:1.25rem; }
.rev-edit { font-size:.78rem; color:var(--cyan-ink); font-weight:800; text-decoration:none; margin-left:.5rem; white-space:nowrap; }

/* ---- Deposit callout ---- */
.deposit-callout {
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-blue); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.2rem;
}
.deposit-callout .dc-amt {
  font-family:'Farro',sans-serif; font-weight:700; font-size:1.6rem; color:var(--navy);
  background:#fff; border:2px solid var(--gold); border-radius:12px; padding:.4rem .7rem; flex:none;
}

/* ---- Consent ---- */
.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-soft); cursor:pointer; }
.consent input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--navy); }
.consent a { color:var(--cyan-ink); font-weight:700; }
/* "trip terms" opens the in-page modal — a <button> styled as an inline link (#8). */
.terms-link { background:none; border:0; padding:0; margin:0; font:inherit; font-weight:700;
  color:var(--cyan-ink); text-decoration:underline; cursor:pointer; }
.terms-link:hover { color:var(--navy); }

/* ---- Trip-terms modal (#8) ---- */
body.terms-open { overflow:hidden; }
.terms-modal { position:fixed; inset:0; z-index:120; background:rgba(20,28,46,.5);
  display:grid; place-items:center; padding:1rem; }
.terms-modal[hidden] { display:none; }
.terms-dialog { width:100%; max-width:540px; max-height:88vh; display:flex; flex-direction:column;
  padding:0; overflow:hidden; }
.terms-head { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.terms-x { background:none; border:0; font-size:1.6rem; line-height:1; color:var(--ink-faint); cursor:pointer; width:40px; height:40px; flex:none; }
.terms-body { padding:1.1rem 1.3rem; overflow-y:auto; overscroll-behavior:contain; }
.terms-body h4 { font-size:1rem; margin:1.1rem 0 .4rem; color:var(--navy); }
.terms-body h4:first-child { margin-top:0; }
.terms-body p { font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin:0 0 .6rem; }
.terms-list { margin:0 0 .4rem; padding-left:1.1rem; line-height:1.6; font-size:.92rem; color:var(--ink-soft); }
.terms-list li { margin-bottom:.45rem; }
.terms-foot { padding:1rem 1.3rem; border-top:1px solid var(--line); background:var(--bg-off); display:flex; justify-content:flex-end; }
@media (max-width:560px) {
  .terms-dialog { max-height:92vh; }
  .terms-head, .terms-body, .terms-foot { padding-left:1rem; padding-right:1rem; }
  .terms-foot .btn { width:100%; }
}

/* ---- Nav ---- */
.wiz-nav { display:flex; align-items:center; gap:.6rem; margin-top:.25rem; }

/* ---- Summary rail ---- */
/* The sticky wrapper holds BOTH the card and the foot note so the card can't
   slide down over the foot text as you scroll (the foot is part of the sticky
   block, not a static sibling below it). */
.summary-rail { position:sticky; top:78px; }
.summary { overflow:hidden; }
/* Gentle fade-in when the rail reveals on step 2 (display:none→block re-runs it). */
#summaryRail:not([hidden]) { animation: fwpRailIn .28s ease both; }
@keyframes fwpRailIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* Step 1 has no rail. Hide the empty aside at EVERY size (so on mobile the nav sits directly
   under the panel with no blank gap); on desktop also center the lone panel. Step 2+ restores it. */
#wizardRoot.wiz-step1 aside { display:none; }
@media (min-width:992px){
  #wizardRoot.wiz-step1 > .row { justify-content:center; }
}
.sum-head { display:flex; gap:.8rem; align-items:center; padding:1rem; background:var(--bg-blue); border-bottom:1px solid var(--line); }
.sum-photo { width:64px; height:64px; flex:none; }
.sum-body { padding:1.1rem 1.2rem 1.3rem; }
.sum-line { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; font-size:.95rem; }
.sum-line span { color:var(--ink-soft); }
.sum-line b { color:var(--navy); text-align:right; }
.sum-line.sub { font-size:.86rem; }
.sum-line.sub b { color:var(--ink-soft); }
.sum-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:.5rem; padding-top:.6rem; border-top:2px solid var(--line); }
.sum-total span { font-weight:700; color:var(--navy); }
.sum-total b { font-family:'Farro',sans-serif; font-size:1.5rem; color:var(--navy); }
.sum-deposit { display:flex; gap:.6rem; align-items:flex-start; margin-top:.9rem; padding:.7rem .8rem; background:#f4f1e0; border-radius:var(--r-sm); font-size:.82rem; color:#6f6829; }
.sum-deposit .sd-dot { font-family:'Farro',sans-serif; font-weight:700; background:#fff; border:1.5px solid var(--gold); color:var(--navy); padding:.1rem .45rem; border-radius:7px; flex:none; }
.sum-foot { font-size:.78rem; text-align:center; margin-top:.7rem; }

/* ---- Confirmation ---- */
.confirm-screen { min-height:100vh; display:flex; align-items:center; padding:3rem 0; background:
  radial-gradient(900px 400px at 50% -5%, #e7f4ff, transparent 60%), var(--bg-blue); }
.confirm-card { max-width:640px; margin:0 auto; padding:2.5rem; text-align:center; }
.confirm-logo { height:64px; width:auto; display:block; margin:0 auto 1.25rem; }
.confirm-check { width:74px;height:74px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 1.2rem; animation:pop .4s ease; }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }
.timeline { text-align:left; max-width:420px; margin:0 auto; }
.tl-step { display:flex; gap:.9rem; align-items:flex-start; padding:.5rem 0; position:relative; }
.tl-step:not(:last-child)::before { content:""; position:absolute; left:9px; top:24px; bottom:-6px; width:2px; background:var(--line); }
.tl-step .tl-dot { width:20px;height:20px;border-radius:50%;border:3px solid var(--line);background:#fff;flex:none;margin-top:2px;z-index:1; }
.tl-step.done .tl-dot { background:var(--ok); border-color:var(--ok); }
.tl-step.done:not(:last-child)::before { background:var(--ok); }
.tl-step.next .tl-dot { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(1,193,241,.18); }
.tl-step b { color:var(--navy); display:block; }
.tl-step small { color:var(--ink-soft); }
.confirm-ref { display:inline-block; margin-top:1.4rem; font-size:.85rem; color:var(--ink-soft); background:var(--bg-off); padding:.4rem .9rem; border-radius:var(--r-pill); }
.confirm-ref b { color:var(--navy); font-family:ui-monospace,monospace; }

/* ============================================================
   LOOK B — "Sunrise": navy hero band, gold accents, soft cards
   ============================================================ */
body[data-look="b"] { background:#eef5ff; }
body[data-look="b"] .hero-band {
  display:block; position:relative;
  background: linear-gradient(135deg, #2a4d80 0%, #1b3358 100%);
  padding: 2.2rem 0 2.6rem;
}
body[data-look="b"] .hero-wave {
  position:absolute; left:0; right:0; bottom:-1px; height:40px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,30 C150,60 300,0 450,24 C600,48 750,8 900,28 C1050,48 1150,18 1200,30 L1200,60 L0,60 Z' fill='%23eef5ff'/></svg>") no-repeat; background-size:cover;
}
body[data-look="b"] .wizard-wrap { margin-top:-1rem; }
body[data-look="b"] .step-panel { border-radius: var(--r-lg); box-shadow: var(--shadow); }
body[data-look="b"] .summary { border-radius: var(--r-lg); box-shadow: var(--shadow); }
body[data-look="b"] .stepper-wrap { background:transparent; border:0; box-shadow:none; padding:.4rem 0 .6rem; }
body[data-look="b"] .btn-navy { background: var(--gold); box-shadow:0 6px 16px rgba(159,151,79,.3); }
body[data-look="b"] .btn-navy:hover { background:#8c8442; }
body[data-look="b"] .cal-cell.selected { background:var(--gold)!important; border-color:var(--gold)!important; box-shadow:0 8px 18px rgba(159,151,79,.3); }
body[data-look="b"] .cal-cell.selected .cc-tag { color:#f4efd6!important; }
body[data-look="b"] .stepper .node.active .dot { background:var(--gold); border-color:var(--gold); }
body[data-look="b"] .seg-radio input:checked + span { background:var(--gold); border-color:var(--gold); }

/* small screens */
@media (max-width: 991px){
  .summary-rail { position:static; }
  .sum-photo { width:54px; height:54px; }
}

/* phones — robust down to 360px */
@media (max-width: 575px){
  .appbar { padding:.55rem 0; }
  /* C15: keep the tap-to-call phone visible on phones; shrink so it never wraps at 360px. */
  .phone-link { font-size:.8rem; gap:.25rem; }
  .phone-link svg { width:14px; height:14px; }
  .appbar-find { font-size:.8rem; }
  .wizard-wrap { padding-top:1.1rem; padding-bottom:2.5rem; }
  .step-panel.fw-card-pad,
  .stepper-wrap { padding:1.1rem; }
  .step-panel { border-radius:14px; }
  /* let the date/lake header stack cleanly */
  .lake-chip { width:100%; justify-content:flex-start; }
  .cal-grid, .cal-dow { gap:4px; }
  .cal-cell { font-size:.85rem; border-radius:8px; }
  .cal-cell .cc-tag { font-size:.5rem; }
  .field-row { gap:.6rem; }
  .field-row .form-label { font-size:.88rem; }
  .seg-radio label { min-width:0; }
  .deposit-callout { flex-direction:column; align-items:flex-start; gap:.6rem; }
  .confirm-card { padding:1.6rem 1.2rem; }
  .confirm-logo { height:54px; }
  .wiz-nav .btn-lg { padding:.8rem 1.1rem; font-size:1rem; }
  /* Stepper: dots for every step but the label only for the active one, so the
     4-node indicator always fits without clipping "Review" or h-scrolling. */
  .stepper { min-width:0; gap:.3rem; justify-content:space-between; }
  .stepper .node { gap:.35rem; }
  .stepper .node .lbl { display:none; }
  .stepper .node.active .lbl { display:inline; }
}
@media (max-width: 400px){
  .cal-cell .cc-tag { display:none; }   /* keep the number legible; legend carries meaning */
  .band-title { font-size:1.4rem; }
  /* Reclaim horizontal space so the 7 day-cells stay ≥44px tappable at 360px
     (acceptance gate). Trim the card's own gutters + grid gap; leave the
     Bootstrap container/row gutters alone so the row's negative margins don't
     overflow the viewport. */
  .step-panel.fw-card-pad { padding-left:.7rem; padding-right:.7rem; }
  .cal-grid, .cal-dow { gap:3px; }
  .cal-cell { min-height:44px; }
}

/* ---- Production additions (Phase 2) ---- */
.hp-field { position:absolute!important; left:-9999px!important; top:auto; width:1px; height:1px; overflow:hidden; }

/* closed day — tappable, routes to call/text Paul (R12) */
.cal-cell.closed { background:#fff; border:1.5px dashed #d7e0ef; color:var(--ink-soft); cursor:pointer; }
.cal-cell.closed:hover { border-color:var(--navy); background:#f7fbff; }
/* blackout — hard unavailable */
.cal-cell.blackout { background:#f1eef1; border-color:#e6dfe6; color:var(--ink-faint); cursor:not-allowed; }

/* #16: small tooltip anchored to a tapped/hovered closed day (positioned by booking.js). */
.cal-closed-note { position:absolute; z-index:50; max-width:230px; margin:0; padding:.55rem .75rem; border-radius:10px; background:var(--navy); color:#fff; font-size:.82rem; line-height:1.45; box-shadow:var(--shadow-lg); }
.cal-closed-note a { color:#fff; font-weight:700; text-decoration:underline; }

.field-error { color:#c0392b; font-size:.82rem; margin-top:.35rem; }
/* Invalid name/contact field: a clearly RED box — border + (even while focused) a red outline,
   overriding theme.css's cyan :focus-visible ring so the error reads red, not cyan (#13). */
.form-control.is-invalid { border-color:#c0392b; }
.form-control.is-invalid:focus-visible { outline-color:#c0392b; }
.book-status { font-weight:600; }

/* ============================================================
   Deposit page (/deposit/{token}) — ported from deposit.html.
   Shares theme.css tokens; demo state-switcher + mock-Stripe overlay dropped
   (real hosted Checkout redirects away). Mobile-first to 360px.
   ============================================================ */
.deposit-body { background: radial-gradient(900px 420px at 50% -8%, #e7f4ff, transparent 60%), var(--bg-blue); min-height:100vh; }
.pay-wrap { max-width:560px; margin:0 auto; padding:1.75rem 0 4rem; }

.trip-card { overflow:hidden; }
.trip-photo { height:120px; background:linear-gradient(135deg,#2a4d80,#01c1f1); }
.trip-meta { padding:1.1rem 1.3rem; }
.meta-line { display:flex; justify-content:space-between; gap:1rem; padding:.28rem 0; font-size:.95rem; }
.meta-line span { color:var(--ink-soft); }
.meta-line b { color:var(--navy); text-align:right; }

.deposit-panel { padding:1.5rem; }
@media(min-width:576px){ .deposit-panel{ padding:2rem; } }
.amt-big { font-family:'Farro',sans-serif; font-weight:700; font-size:3rem; color:var(--navy); line-height:1; }

/* countdown */
.countdown { display:flex; gap:.6rem; justify-content:center; margin:1rem 0 0; }
.cd-cell { background:var(--navy); color:#fff; border-radius:12px; padding:.6rem .2rem; min-width:64px; flex:1; max-width:96px; text-align:center; }
.cd-cell b { font-family:'Farro',sans-serif; font-size:1.6rem; display:block; line-height:1; }
.cd-cell small { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.deadline-note { font-size:.85rem; color:var(--ink-soft); }

/* status icons */
.status-ico { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1rem; }
.si-ok { background:var(--ok-soft); color:var(--ok); }
.si-warn { background:var(--warn-soft); color:var(--warn); }
.si-gold { background:#f4f1e0; color:var(--gold); }
.si-navy { background:#e7f0ff; color:var(--navy); }

/* finalizing spinner */
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid #cfe0f7; border-top-color:var(--navy); animation:fwp-spin .8s linear infinite; }
@keyframes fwp-spin { to { transform:rotate(360deg); } }

/* receipt + balance note */
.receipt { border:1px dashed var(--line); border-radius:var(--r); padding:1rem 1.2rem; text-align:left; background:var(--bg-off); }
.receipt .r-row { display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; font-size:.92rem; }
.receipt .r-row span { color:var(--ink-soft); }
.receipt .r-row b { color:var(--navy); }
.balance-note { display:flex; gap:.7rem; align-items:flex-start; background:var(--bg-blue); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1.1rem; text-align:left; font-size:.9rem; color:var(--ink-soft); }
.balance-note .bn-ico { flex:0 0 auto; color:var(--cyan-ink); line-height:0; margin-top:1px; }

.lock-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4rem; font-size:.8rem; color:var(--ink-faint); margin-top:.8rem; }
.stripe-badge { display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color:#635bff; }

/* inline notes */
.deposit-note { font-size:.88rem; border-radius:var(--r-sm); padding:.7rem .9rem; }
.note-info { background:var(--bg-blue); color:var(--ink-soft); border:1px solid var(--line); }
.note-warn { background:var(--warn-soft); color:var(--warn); border:1px solid #f0e3bf; }

@media (max-width:575px){
  .pay-wrap { padding:1.1rem 0 2.5rem; }
  .deposit-panel { padding:1.4rem 1.15rem; }
  .amt-big { font-size:2.5rem; }
  .countdown { gap:.4rem; }
  .cd-cell { min-width:0; }
  .trip-meta { padding:1rem 1.1rem; }
}