/* ════════════════════════════════════════════════════════════════════════
   booking-theme.css — the e-bike booking flow in the house style (2026-09-20)

   Owner: "make the booking flow more our style and theme. styles more like the
   webpage and take inspiration from my lifeledger page ... these should be data
   driven solutions".

   WHAT THIS IS. The panel was the old map app's neutral carbon + mint. A guest
   now arrives from the storefront (deep-water ink, aqua, DM Sans), so the panel
   takes the storefront's ink and aqua, and from Life Ledger it takes the ledger
   manners: mono uppercase eyebrows, tabular figures, hairline rules, corner
   brackets on the cards that matter, and brass for money. Two accents with two
   jobs: AQUA is "tap this", BRASS is "this is a price".

   HOW. The panel is painted almost entirely through the app's --c-* tokens, so
   the tokens are re-pointed INSIDE #booking-panel only. Nothing outside the
   panel changes; remove this file's <link> and the old look is back.

   WHAT THE NUMBERS SAID (Pulse, 36 h to 2026-09-20; 11 of 15 flows on phones),
   and what was measured on a 375 x 812 phone before this file existed:
     - Duration & price: 4 of 11 left, dwell up to 167 s. The first price sat
       517 px down the screen under three banners and the "Most popular" row
       was off-screen. -> the cards become one compact rate table, notes shrink.
     - Pay: 4 of 4 left without typing a name or an email. The name field sat
       1,045 px down a 1,591 px page, under a 285 px sticky bar whose Pay button
       was always in reach. -> index.html puts the contact fields FIRST; here
       the sticky bar is cut to the agreement line and the button.
   Counts, reserves, prices, holds and Stripe are untouched by this file.
   ════════════════════════════════════════════════════════════════════════ */

#booking-panel{
  /* the app's tokens, re-pointed for this panel only */
  --c-carbon:#04202B; --c-navy:#04202B;
  --c-graphite:#0A2F3D;
  --c-steel:#6B93A3;              /* used as TEXT 29 times in ebike-booking.js: must stay readable on ink */
  --c-silver:#A9C4CE; --c-chrome:#E4F1F5; --c-platinum:#F2FAFC; --c-snow:#F6FBFC; --c-text:#E4F1F5;
  --c-muted:#86A5B1;
  --c-volt:#5FE3E0; --c-ocean:#5FE3E0; --c-volt-dim:#12B5BE; --c-aqua:#12B5BE; --c-volt-glow:rgba(95,227,224,.25);
  --c-green:#2FC6B4;
  --c-border:rgba(95,227,224,.16);
  /* the panel's own */
  --bk-ink:#04202B; --bk-ink-2:#0D3E4F; --bk-raise:#0A2F3D; --bk-raise-2:#0F3A4A;
  --bk-rule:rgba(95,227,224,.16); --bk-rule-strong:rgba(95,227,224,.38);
  --bk-aqua:#5FE3E0; --bk-aqua-deep:#12B5BE;
  --bk-brass:#E3C17C; --bk-brass-2:#C9A86A;
  --bk-mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,Menlo,monospace;
  color:var(--c-chrome);
  background:
    linear-gradient(rgba(95,227,224,.030) 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,rgba(95,227,224,.030) 1px,transparent 1px) 0 0/32px 100%,
    radial-gradient(120% 55% at 50% -8%,#0D3E4F 0%,rgba(13,62,79,0) 62%),
    #04202B;
  font-variant-numeric:tabular-nums;
}

/* ── header ─────────────────────────────────────────────────────────────── */
#booking-panel #booking-header{
  background:rgba(4,32,43,.90); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bk-rule); padding:12px 16px 12px 18px;
}
#booking-panel #booking-header h2{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.15; color:var(--c-platinum); min-width:0; white-space:nowrap; }
#booking-panel #booking-header h2::before{
  content:"TODO CULEBRA"; display:block;   /* short on purpose: a longer eyebrow pushed the close button off a 375 px screen */
  font-family:var(--bk-mono); font-size:9px; font-weight:600; letter-spacing:.2em; color:var(--bk-aqua); margin-bottom:3px;
}
#booking-panel #booking-close{ background:rgba(95,227,224,.08); border:1px solid var(--bk-rule); color:var(--c-chrome); }
#booking-panel #booking-close:hover{ background:rgba(95,227,224,.16); }
#booking-panel .booking-review-badge{ background:rgba(227,193,124,.10); border-color:rgba(227,193,124,.34); color:var(--c-chrome); }
#booking-panel #booking-header + div{ height:1px !important; background:linear-gradient(90deg,transparent,var(--bk-aqua) 18%,var(--bk-aqua) 82%,transparent) !important; opacity:.7; }
#booking-panel .booking-content{ padding:14px 16px 16px; }

/* ── where you are ──────────────────────────────────────────────────────── */
#booking-panel .bk-steps{ margin-bottom:14px; padding:0 2px; }
#booking-panel .bk-step-dot .bk-dot{ width:8px; height:8px; background:#1E4C5E; border:0; }
#booking-panel .bk-step-dot.done .bk-dot{ background:var(--bk-aqua-deep); }
#booking-panel .bk-step-dot.active .bk-dot{ width:12px; height:12px; background:var(--bk-aqua); box-shadow:0 0 0 4px rgba(95,227,224,.16); }
#booking-panel .bk-step-dot .bk-dot-label{ font-family:var(--bk-mono); font-size:8.5px; letter-spacing:.12em; color:#5E8797; margin-top:5px; }
#booking-panel .bk-step-dot.done .bk-dot-label{ color:#7FB9C2; }
#booking-panel .bk-step-dot.active .bk-dot-label{ color:var(--bk-aqua); font-weight:700; }
#booking-panel .bk-step-bar{ top:4px; height:1px; }
#booking-panel .bk-step-bar-bg{ background:#1E4C5E; opacity:1; }
#booking-panel .bk-step-bar-fill{ background:var(--bk-aqua-deep); }
#booking-panel .bk-step-title{ font-size:20px; font-weight:800; letter-spacing:-.015em; color:var(--c-platinum); text-align:left; margin:2px 0 12px; text-wrap:balance; }

/* ── the one button style ───────────────────────────────────────────────── */
#booking-panel .bk-book-btn,
#booking-panel #bk-date-continue{
  background:linear-gradient(180deg,#6FEAE6 0%,#22BEC6 100%) !important; color:#04202B !important;
  border:0 !important; border-radius:14px !important; padding:15px 14px !important;
  font-size:15.5px !important; font-weight:800 !important; letter-spacing:.005em;
  box-shadow:0 10px 24px -12px rgba(95,227,224,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
#booking-panel .bk-book-btn:hover, #booking-panel #bk-date-continue:hover{ opacity:1; filter:brightness(1.05); }
#booking-panel .bk-book-btn:focus-visible, #booking-panel #bk-date-continue:focus-visible,
#booking-panel .bk-dur-card:focus-visible, #booking-panel .bk-time-btn:focus-visible,
#booking-panel .cal-day:focus-visible, #booking-panel .bk-contact-field:focus-visible{ outline:2px solid var(--bk-brass); outline-offset:2px; }
#booking-panel .bk-back-btn{ color:#8FB2BE; font-size:12.5px; padding:10px 8px; }
#booking-panel .bk-promo-apply, #booking-panel .bk-access-code-apply{ background:transparent; color:var(--bk-aqua); border:1px solid var(--bk-rule-strong); border-radius:10px; }

/* ── date ───────────────────────────────────────────────────────────────── */
#booking-panel .cal-month{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
#booking-panel .cal-nav-btn{ border:1px solid var(--bk-rule); border-radius:10px; width:36px; height:36px; }
#booking-panel .cal-nav-btn:hover{ background:rgba(95,227,224,.10); }
#booking-panel .cal-weekdays{ font-family:var(--bk-mono); font-size:9.5px; letter-spacing:.14em; color:#5E8797; }
#booking-panel .cal-day{ border-radius:12px; border-width:1px; }
#booking-panel .cal-day.past{ color:#33596A; }
#booking-panel .cal-day.avail-high{ background:rgba(95,227,224,.10); color:var(--c-platinum); }
#booking-panel .cal-day.avail-low{ background:rgba(245,184,75,.12); color:#F8D48F; }
#booking-panel .cal-day.avail-none{ background:rgba(255,122,80,.10); color:#C98A78; }
#booking-panel .cal-day:hover{ border-color:var(--bk-rule-strong); }
#booking-panel .cal-day.selected{ background:var(--bk-aqua); color:#04202B; border-color:var(--bk-aqua); box-shadow:0 8px 18px -10px rgba(95,227,224,.7); }
/* a sold-out day that is somehow still the selection must LOOK sold out, never like a good pick */
#booking-panel .cal-day.selected.avail-none{ background:rgba(255,122,80,.16); color:#FFB59E; border-color:rgba(255,122,80,.6); box-shadow:none; }
#booking-panel .cal-day .cal-avail{ font-family:var(--bk-mono); font-size:7.5px; letter-spacing:.04em; bottom:3px; }
#booking-panel .cal-legend{ font-family:var(--bk-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#6B93A3; }
#booking-panel .cal-legend .cl-high::before{ background:rgba(95,227,224,.45); }
#booking-panel .cal-legend .cl-low::before{ background:rgba(245,184,75,.55); }
#booking-panel .cal-legend .cl-none::before{ background:rgba(255,122,80,.55); }
#booking-panel #bk-date-moved{ margin:10px 0 0; padding:9px 12px; border:1px solid rgba(227,193,124,.34); border-left:2px solid var(--bk-brass); border-radius:10px; background:rgba(227,193,124,.07); font-size:12px; line-height:1.45; color:var(--c-silver); }
#booking-panel #bk-date-moved b{ color:var(--bk-brass); }
#booking-panel #bk-date-moved a{ color:var(--bk-aqua); }

/* ── time ───────────────────────────────────────────────────────────────── */
#booking-panel #bk-date-display{ text-align:left !important; font-family:var(--bk-mono); font-size:10.5px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--bk-aqua) !important; margin:-6px 0 12px !important; }
#booking-panel .bk-time-btn{ border:1px solid var(--bk-rule); border-radius:12px; padding:12px 8px; background:var(--bk-raise); }
#booking-panel .bk-time-btn:hover{ background:var(--bk-raise-2); border-color:var(--bk-rule-strong); }
#booking-panel .bk-time-btn.selected{ background:var(--bk-aqua); color:#04202B; border-color:var(--bk-aqua); }

/* ── how long: one rate table, prices first ─────────────────────────────── */
#booking-panel .bk-s3-flow{ display:flex; flex-direction:column; }
#booking-panel .bk-s3-flow > *{ order:6; }
#booking-panel .bk-s3-flow > .bk-step-title{ order:1; }
#booking-panel .bk-s3-flow > .bk-note-assure{ order:2; }
#booking-panel .bk-s3-flow > #bk-opener-note{ order:3; }
#booking-panel .bk-s3-flow > .bk-tier-toggle, #booking-panel .bk-s3-flow > #bk-tier-premium-note{ order:4; }
#booking-panel .bk-s3-flow > .bk-dur-grid{ order:5; }
#booking-panel .bk-s3-flow > .bk-back-btn{ order:9; }
#booking-panel .bk-note-assure{
  background:none !important; border:0 !important; border-left:2px solid var(--bk-aqua-deep) !important; border-radius:0 !important;
  padding:1px 0 1px 10px !important; margin:0 0 10px !important;
}
#booking-panel .bk-note-assure > div:first-child{ font-size:12px !important; margin-bottom:1px !important; color:var(--c-chrome) !important; font-weight:700 !important; }
#booking-panel .bk-note-assure > div:last-child{ font-size:11px !important; color:var(--c-muted) !important; line-height:1.35 !important; }
#booking-panel #bk-opener-note{
  background:rgba(227,193,124,.07) !important; border:1px solid rgba(227,193,124,.30) !important; border-left:2px solid var(--bk-brass) !important;
  border-radius:10px !important; padding:7px 10px !important; margin:0 0 10px !important; font-size:11.5px !important;
}
#booking-panel #bk-opener-note b{ color:var(--bk-brass) !important; }
#booking-panel .bk-note-pair{ background:rgba(95,227,224,.05) !important; border:1px solid var(--bk-rule) !important; border-radius:12px !important; margin:10px 0 0 !important; }
#booking-panel .bk-note-pair > div:first-child, #booking-panel .bk-note-pair > div:first-child span{ color:var(--c-chrome) !important; }
#booking-panel .bk-note-pair > div:first-child span:last-child{ font-family:var(--bk-mono); font-size:9px !important; letter-spacing:.12em; text-transform:uppercase; color:var(--bk-aqua) !important; }
#booking-panel .bk-tier-toggle{ margin-bottom:10px !important; }
#booking-panel .bk-tier-toggle button{ border-radius:12px !important; padding:9px 8px !important; }
#booking-panel #bk-tier-premium-note{ color:#9DB8C2 !important; margin:-4px 0 10px !important; }

#booking-panel .bk-dur-grid{ gap:0; border:1px solid var(--bk-rule); border-radius:16px; background:rgba(10,47,61,.72); }
#booking-panel .bk-dur-card{ border:0; border-radius:0; background:none; padding:11px 14px; gap:11px; border-bottom:1px solid var(--bk-rule); align-items:center; }
#booking-panel .bk-dur-card:last-child{ border-bottom:0; }
#booking-panel .bk-dur-body{ min-width:0; }
#booking-panel .bk-dur-card:hover{ background:rgba(95,227,224,.06); box-shadow:none; }
#booking-panel .bk-dur-card:active{ background:rgba(95,227,224,.12); }
#booking-panel .bk-dur-card.selected{ background:rgba(95,227,224,.10); box-shadow:inset 2px 0 0 var(--bk-aqua); }
#booking-panel .bk-dur-icon{ font-size:19px; width:24px; text-align:center; flex:0 0 auto; }
#booking-panel .bk-dur-label{ font-size:14px; font-weight:700; color:var(--c-platinum); letter-spacing:-.005em; }
#booking-panel .bk-dur-desc{ font-size:11px; color:var(--c-muted); line-height:1.35; margin-top:1px; }
#booking-panel .bk-dur-rate{ font-size:10.5px; color:#7FA0AD; }
#booking-panel .bk-dur-rate-pop, #booking-panel .bk-dur-rate-save{ color:#8FD9D6; }
#booking-panel .bk-dur-price{ font-size:18px; font-weight:800; color:var(--bk-brass); letter-spacing:-.01em; white-space:nowrap; text-align:right; }
#booking-panel .bk-dur-price span{ font-family:var(--bk-mono); font-size:9px !important; font-weight:600 !important; letter-spacing:.06em; color:#9C8A5F; margin-left:1px; }
/* the "first-2 price" tag ebike-booking.js paints under a price keeps its own gold */
#booking-panel .bk-dur-price span[style*="display:block"]{ font-size:8px !important; font-weight:700 !important; letter-spacing:.08em !important; margin:2px 0 0; }
#booking-panel .bk-dur-ribbon{ top:-7px; right:12px; background:var(--bk-brass); color:#04202B; font-family:var(--bk-mono); font-size:8.5px; letter-spacing:.14em; padding:2px 8px; border-radius:6px; box-shadow:none; }
#booking-panel #bk-dur-24hr{ background:rgba(227,193,124,.05); }
#booking-panel #bk-multiday-nudge{ background:none !important; border:1px dashed var(--bk-rule-strong) !important; border-radius:12px !important; }
@media (max-width:480px){
  /* On a phone the price column already says what the "rate" lines repeat. The one
     line that is NEWS (the ferry timing on the 6-hour row, which carries its own
     style attribute) and the pair price on the overnight row both stay. */
  #booking-panel .bk-dur-card .bk-dur-rate:not([style]){ display:none; }
  /* helmet / lock / map / battery are listed again on the pay step and on the storefront */
  #booking-panel .bk-note-assure > div:last-child{ display:none; }
  /* the e-moped button already says what this line says: one line, never two */
  #booking-panel #bk-tier-premium-note{ font-size:10px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
}

/* ── extras ─────────────────────────────────────────────────────────────── */
#booking-panel .bk-addon-card{ border:1px solid var(--bk-rule); background:var(--bk-raise); border-radius:14px; }
#booking-panel .bk-addon-card.selected{ border-color:var(--bk-aqua); background:rgba(95,227,224,.09); }
#booking-panel .bk-addon-card.bk-addon-hero{ border:1px solid var(--bk-rule-strong); background:linear-gradient(135deg,rgba(95,227,224,.10),rgba(13,62,79,.2)); box-shadow:none; }
#booking-panel .bk-addon-card.bk-addon-hero .bk-addon-price, #booking-panel .bk-addon-price{ color:var(--bk-brass); }
#booking-panel .bk-addon-most-added{ background:var(--bk-brass); color:#04202B; font-family:var(--bk-mono); letter-spacing:.12em; box-shadow:none; }
#booking-panel .bk-addon-qty-btn{ border:1px solid var(--bk-rule-strong); background:transparent; }

/* ── how many bikes ─────────────────────────────────────────────────────── */
#booking-panel #bk-running-total{ background:none !important; border-left:2px solid var(--bk-brass); border-radius:0 !important; text-align:left !important; padding:2px 0 2px 10px !important; margin-bottom:4px !important; }
#booking-panel #bk-running-price{ color:var(--bk-brass) !important; font-size:16px !important; font-weight:800 !important; }
#booking-panel .bk-bike-counter{ padding:18px 0 12px; gap:26px; }
#booking-panel .bk-bike-btn{ width:52px; height:52px; border:1px solid var(--bk-rule-strong); background:var(--bk-raise); font-size:24px; }
#booking-panel .bk-bike-btn:hover{ background:var(--bk-raise-2); }
#booking-panel .bk-bike-num{ font-size:56px; font-weight:800; letter-spacing:-.03em; color:var(--c-platinum); }
#booking-panel .bk-bike-avail{ font-size:12px; }

/* ── confirm & pay: who is riding first, then the ledger ────────────────── */
#booking-panel .bk-eyebrow{ font-family:var(--bk-mono); font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bk-aqua); margin:0 0 7px; }
#booking-panel #bk-recap{ position:relative; margin:0 0 14px; padding:12px 14px; background:rgba(10,47,61,.72); border:1px solid var(--bk-rule); border-radius:4px; }
#booking-panel #bk-recap[hidden]{ display:none; }
#booking-panel #bk-recap::before, #booking-panel #bk-recap::after,
#booking-panel .bk-summary::before, #booking-panel .bk-summary::after{ content:""; position:absolute; width:14px; height:14px; pointer-events:none; }
#booking-panel #bk-recap::before, #booking-panel .bk-summary::before{ top:-1px; left:-1px; border-top:2px solid var(--bk-aqua); border-left:2px solid var(--bk-aqua); }
#booking-panel #bk-recap::after, #booking-panel .bk-summary::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--bk-aqua); border-right:2px solid var(--bk-aqua); }
#booking-panel #bk-recap-what{ font-size:13.5px; font-weight:600; color:var(--c-chrome); line-height:1.4; }
#booking-panel #bk-recap-money{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid var(--bk-rule); }
#booking-panel #bk-recap-today{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--bk-brass); line-height:1; }
#booking-panel #bk-recap-today small{ font-family:var(--bk-mono); font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#9C8A5F; margin-left:6px; }
#booking-panel #bk-recap-rest{ font-size:12px; color:var(--c-muted); }

#booking-panel #bk-contact-block{ margin:0 0 14px; }
#booking-panel .bk-contact-field{ border:1px solid var(--bk-rule-strong); border-radius:12px; padding:14px 13px; font-size:16px; background:rgba(4,32,43,.6); margin-bottom:9px; }
#booking-panel .bk-contact-field::placeholder{ color:#6B93A3; }
#booking-panel .bk-contact-field:focus{ border-color:var(--bk-aqua); background:rgba(4,32,43,.85); }
#booking-panel .bk-contact-assure{ font-size:11px; color:var(--c-muted); line-height:1.4; margin:2px 0 0; }
#booking-panel #bk-pay-nudge{ background:rgba(227,193,124,.07) !important; border:1px solid rgba(227,193,124,.30) !important; border-left:2px solid var(--bk-brass) !important; color:var(--c-silver) !important; font-size:12px !important; line-height:1.5 !important; margin:0 0 14px !important; }
#booking-panel #bk-pay-nudge b{ color:var(--bk-brass) !important; }

#booking-panel .bk-summary{ position:relative; background:rgba(10,47,61,.72); border:1px solid var(--bk-rule); border-radius:4px; padding:14px; }
#booking-panel .bk-sum-row{ font-size:12.5px; padding:5px 0; }
#booking-panel .bk-sum-row > span:first-child{ font-family:var(--bk-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7FA0AD; align-self:center; }
#booking-panel .bk-sum-row > span:last-child{ color:var(--c-chrome); text-align:right; }
#booking-panel .bk-sum-row.total{ border-top:1px solid var(--bk-rule-strong); padding-top:10px; margin-top:6px; }
#booking-panel .bk-sum-row.total > span:first-child{ font-size:11px; color:var(--c-chrome); }
#booking-panel .bk-sum-row.total > span:last-child{ font-size:19px; font-weight:800; color:var(--bk-brass); }
#booking-panel .bk-sum-row.bk-sum-deposit{ border-top:1px dashed var(--bk-rule-strong); }
#booking-panel .bk-sum-row.bk-sum-deposit > span{ color:var(--bk-aqua) !important; }
#booking-panel .bk-sum-row.bk-sum-balance > span{ color:var(--bk-brass) !important; }
#booking-panel .bk-note-value{ background:none !important; border:1px solid var(--bk-rule) !important; border-radius:12px !important; }

/* the bar that follows the thumb: the agreement and the button, nothing else */
#booking-panel .bk-sticky-pay{ background:rgba(4,32,43,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--bk-rule-strong); padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
#booking-panel .bk-waiver-agree{ background:none; border:1px solid var(--bk-rule); border-radius:10px; color:var(--c-chrome); font-size:11.5px; padding:8px 10px; }
#booking-panel .bk-waiver-agree:has(input:checked){ border-color:var(--bk-aqua-deep); background:rgba(95,227,224,.08); }
#booking-panel .bk-waiver-agree input{ width:18px; height:18px; }
#booking-panel .bk-waiver-box{ background:rgba(10,47,61,.72); border:1px solid var(--bk-rule); }

/* ── booked ─────────────────────────────────────────────────────────────── */
#booking-panel .bk-conf-card{ border:1px solid var(--bk-rule-strong); border-radius:4px; background:rgba(10,47,61,.72); }

@media (min-width:768px){
  #booking-panel .booking-content{ max-width:520px; }
  #booking-panel .bk-step-title{ font-size:22px; }
}
@media (prefers-reduced-motion:reduce){
  #booking-panel, #booking-panel *{ transition:none !important; animation:none !important; }
}