/* ============================================================
   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:inline-flex; align-items:center; gap:.6rem;
  background: var(--bg-blue); border:1px solid var(--line);
  border-radius: var(--r-pill); padding:.45rem 1rem .45rem .85rem;
}
.lake-chip .pill-dot { flex:none; align-self:center; }
.lake-chip > div { display:flex; flex-direction:column; justify-content:center; }
.lake-chip b { font-family:'Farro',sans-serif; color:var(--navy); font-size:.92rem; line-height:1.2; }
.lake-chip small { color: var(--ink-soft); font-size:.72rem; line-height:1.25; }

/* ---- 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%; }
  /* #15: center the section titles + body text on phones; the bulleted list reads centered with
     its markers inline (list-style-position:inside) instead of hanging off the left margin. */
  .terms-body { text-align:center; }
  .terms-list { list-style-position:inside; padding-left:0; }
}

/* ---- 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; border-radius:10px; background:url("/assets/img/lake-square.jpg") center/cover no-repeat; background-color:#2a4d80; }
.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:.7rem; align-items:center; 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:.3rem .5rem; border-radius:8px; flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem; font-size:1rem; line-height:1; }
.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} }
/* #8: the "your date is held" line under the confirmation heading. */
.confirm-held { font-family:'Farro',sans-serif; font-weight:700; color:var(--navy); font-size:1.1rem; }
.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); }
/* #11: the active "Paul confirms" dot gently pulses so the step feels live (motion-reduced: static). */
.tl-step.next .tl-dot { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(1,193,241,.18); animation:fwpTlPulse 2.2s ease-in-out infinite; }
@keyframes fwpTlPulse { 0%,100%{ box-shadow:0 0 0 4px rgba(1,193,241,.18); } 50%{ box-shadow:0 0 0 8px rgba(1,193,241,.05); } }
@media (prefers-reduced-motion: reduce){ .tl-step.next .tl-dot { animation:none; } }
.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;
  /* Lake-horizon photo behind a navy gradient overlay (keeps the white band title + gold eyebrow legible).
     Same shot used as the email banner. JPEG = universal for a CSS background. */
  background: linear-gradient(135deg, rgba(37,69,116,.82) 0%, rgba(27,51,88,.9) 100%),
              url("/assets/img/email/lake-banner.jpg") center/cover no-repeat;
  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; }
  /* #13: when the rail sits below the form (not the desktop sidebar), center the "Your trip" head. */
  .sum-head { flex-direction:column; text-align:center; }
}

/* 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; }
  /* #2: let the date/lake header stack cleanly — content-width chip (not full-bleed), left-aligned. */
  .lake-chip { width:auto; max-width:100%; align-self: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; }
  /* #16: center the whole timeline chunk. Cap its width (its rows are otherwise wide enough to fill
     the card, which would defeat centering) and auto-margin it — the green→cyan→empty dots stay in a
     single left-hand column, the text stays left, and the block sits centered in the card. */
  .timeline { display:block; width:auto; max-width:16rem; margin-inline:auto; text-align:left; }
  .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; }
/* #12/#14: center the Turnstile widget within the Review step (it renders a fixed-width iframe). */
.step-panel .cf-turnstile { display:flex; justify-content:center; }

/* ============================================================
   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:url("/assets/img/email/lake-banner.jpg") center/cover no-repeat; background-color:#2a4d80; }
.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){
  /* #1: a little breathing room so the trip card + deposit panel don't touch the screen edges. */
  .pay-wrap { padding:1.1rem 1rem 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; }
}

/* ----------------------------------------------------------------
   Wizard step slide transition (direction-aware, ~280ms)
   Forward:  outgoing exits left  (.sp-exit-left),  incoming from right (.sp-enter-right)
   Back:     outgoing exits right (.sp-exit-right), incoming from left  (.sp-enter-left)
   Clip overflow on the steps column only while a slide is in progress
   (the .sp-sliding class is added/removed in JS) so absolutely-positioned
   children (calendar tooltip) are not clipped at rest.
   On prefers-reduced-motion the JS skips all of this and swaps instantly.
---------------------------------------------------------------- */
#bookForm.sp-sliding { overflow: hidden; }

.sp-exit-left  { animation: spExitLeft  340ms ease forwards; }
.sp-exit-right { animation: spExitRight 340ms ease forwards; }
.sp-enter-right { animation: spEnterRight 340ms cubic-bezier(.22,.61,.36,1) forwards; }
.sp-enter-left  { animation: spEnterLeft  340ms cubic-bezier(.22,.61,.36,1) forwards; }

@keyframes spExitLeft  { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX(-9%); } }
@keyframes spExitRight { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX( 9%); } }
@keyframes spEnterRight{ from { opacity:0; transform:translateX( 8%); } to { opacity:1; transform:translateX(0);    } }
@keyframes spEnterLeft { from { opacity:0; transform:translateX(-8%); } to { opacity:1; transform:translateX(0);    } }