/* ════════════════════════════════════════════════════════════════════════ 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 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:12px; font-weight:600; letter-spacing:.12em; color:var(--bk-aqua); margin-bottom:2px; /* 2026-10-02: 12px floor for caps kickers (was 9px .2em) */ } #booking-panel #booking-close{ background:rgba(95,227,224,.08); border:1px solid var(--bk-rule); color:var(--c-chrome); width:44px; height:44px; flex:0 0 auto; } /* 2026-10-02 ONE way out: ✕ closes; the step-back lives in this header, named for where it goes (bkChromeSync), and only on steps 2–6. tc-back.js's own ◂ Back bar above the header is off for this panel (data-tcb="off"). */ #booking-panel #booking-header{ gap:12px; } #booking-panel #booking-header h2{ flex:1 1 auto; } #booking-panel .bk-head-back{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-height:44px; min-width:44px; padding:0 14px 0 10px; border-radius:999px; border:1px solid var(--bk-rule-strong); background:rgba(95,227,224,.06); color:var(--c-chrome); font-family:inherit; font-size:15px; font-weight:600; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent; } #booking-panel .bk-head-back[hidden]{ display:none; } #booking-panel .bk-head-back svg{ width:16px; height:16px; flex:0 0 auto; } #booking-panel .bk-head-back:hover{ background:rgba(95,227,224,.14); } #booking-panel .bk-head-back:focus-visible{ outline:2px solid var(--bk-brass); outline-offset:2px; } #booking-panel #booking-header.bk-head--stepping .booking-review-badge{ display:none; } /* the reviews badge shows on Date and Done; steps 2–6 need its room for the back */ #booking-panel .booking-step .bk-back-btn[onclick="bkBack()"]{ display:none; } /* the header back does this now */ #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); } /* 2026-10-02: the labels were 12px MONOSPACE CAPS with letter-spacing — on a phone "LENGTH" and "EXTRAS" ran into one word (the owner's Android shot; Android has no Consolas, its monospace is wider still). The page's own face, sentence case, no tracking: "Length" is ~38px in a 46px column at 360px, ~9px of air between neighbours. */ #booking-panel .bk-step-dot .bk-dot-label{ font-family:inherit; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; line-height:1.25; color:#6B93A3; margin-top:6px; } #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:12px; width:44px; height:44px; font-size:16px; } #booking-panel .cal-nav-btn:hover{ background:rgba(95,227,224,.10); } #booking-panel .cal-weekdays{ font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.04em; color:#6B93A3; } #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{ display:none; } /* retired 2026-10-02: the cell's one slot is .cal-mark */ /* ── CALM CELLS (2026-10-02, the owner's 1:44 PM phone shot of the Date step: "wtf is this! talk about ai slop"). Every cell said "2 left" in a monospace badge that touched the cell border, on an amber "limited" tint, because the online cap is 2 bikes a day. Now: the date, and ONE mark in a fixed slot under it (bkColorCell in ebike-booking.js): an aqua dot = open · "1 left" in brass = the last bike · struck through = full (not tappable). No tinted cells; today has a ring; the selected day is the aqua fill. Same font as the page (no monospace), 12px floor. ───── */ #booking-panel .cal-day{ background:transparent; color:var(--c-platinum); font-size:15px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; } #booking-panel .cal-day .cal-mark{ order:2; display:block; height:14px; line-height:14px; margin-top:3px; font-size:12px; font-weight:700; letter-spacing:0; white-space:nowrap; color:var(--bk-brass); } #booking-panel .cal-day.avail-high .cal-mark::before{ content:""; display:block; width:6px; height:6px; margin:4px auto 0; border-radius:50%; background:var(--bk-aqua); } #booking-panel .cal-day.avail-high, #booking-panel .cal-day.avail-low{ background:transparent; color:var(--c-platinum); } #booking-panel .cal-day.avail-none, #booking-panel .cal-day.blocked{ background:transparent; color:#5E7F8C; text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:rgba(134,165,177,.75); } #booking-panel .cal-day.past{ color:#2F5566; background:transparent; } #booking-panel .cal-day.today{ border-color:rgba(95,227,224,.45); } #booking-panel .cal-day.selected{ background:var(--bk-aqua); color:#04202B; border-color:var(--bk-aqua); } /* after the state rules: the pick is always the aqua fill */ #booking-panel .cal-day.selected .cal-mark{ color:#04202B; } #booking-panel .cal-day.selected.avail-high .cal-mark::before{ background:#04202B; } #booking-panel .cal-day.selected.avail-none .cal-mark{ color:#FFB59E; } /* a price-test day ("$15") or a weekday ±% (legacy books only) takes the same slot, never a 7px corner badge */ #booking-panel .cal-day .cal-dow-badge, #booking-panel .cal-day .cal-deal-badge{ position:static; order:2; display:block; height:14px; line-height:14px; margin-top:3px; padding:0; font-size:12px; font-weight:700; letter-spacing:0; border-radius:0; background:none; box-shadow:none; } #booking-panel .cal-day .cal-deal-badge, #booking-panel .cal-day .cal-dow-badge.premium{ color:var(--bk-brass); } #booking-panel .cal-day .cal-dow-badge.discount, #booking-panel .cal-day .cal-dow-badge.discount-soft{ color:var(--bk-aqua); } #booking-panel .cal-day.selected .cal-deal-badge, #booking-panel .cal-day.selected .cal-dow-badge{ background:none; box-shadow:none; color:#04202B; } #booking-panel .cal-day:has(.cal-deal-badge) .cal-mark:empty, #booking-panel .cal-day:has(.cal-dow-badge) .cal-mark:empty{ display:none; } #booking-panel .cal-day.avail-low .cal-deal-badge, #booking-panel .cal-day.avail-low .cal-dow-badge, #booking-panel .cal-day.avail-none .cal-dow-badge{ display:none; } #booking-panel .cal-day.avail-none .cal-mark{ display:block !important; } /* the legend draws each state exactly as a cell does (bkCalLegendInit) */ #booking-panel .cal-legend{ font-family:inherit; font-size:12px; letter-spacing:0; text-transform:none; color:#86A5B1; gap:16px; margin-top:10px; flex-wrap:wrap; } #booking-panel .cal-legend span{ display:inline-flex; align-items:center; gap:6px; } #booking-panel .cal-legend span::before{ content:none; display:none; } #booking-panel .cal-legend i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--bk-aqua); } #booking-panel .cal-legend b{ color:var(--bk-brass); font-weight:700; } #booking-panel .cal-legend s{ color:#5E7F8C; font-weight:600; text-decoration-thickness:1.5px; text-decoration-color:rgba(134,165,177,.75); } #booking-panel #bk-date-hint{ font-size:12px !important; color:#86A5B1 !important; margin-top:8px !important; } @media (max-width:380px){ #booking-panel .cal-grid{ gap:3px; } } /* 7 cells reach 44px on a 360px phone */ #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:12px !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 (2026-10-02: hidden, not ellipsised — a cut line is a clipped line) */ #booking-panel #bk-tier-premium-note{ display:none !important; } } /* ── 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); } /* ══ 2026-10-02 · EVERY STEP TO THE HOUSE STANDARD (UI_STANDARD §3 §5). Steps 3–7 had never been swept (the page list stopped at the Time step). The brand face everywhere — monospace stays only in the two section eyebrows (the header's TODO CULEBRA and .bk-eyebrow), as the Deep Water Ledger pick says — a 12px floor, 44px targets. Checked with node tools/ui-sweep.js --pages booking-steps (tc-bk-1-date … tc-bk-7-done, + the owner's Android 412x915 / 360x800). ══ */ /* a