/* ==========================================================================
   Simran Elite Cabs v2 — ONE theme: black canvas, gold accents, white panels.
   (No light/dark switch. The booking panel, cards and details sit on white.)
   ========================================================================== */

/* ---- canvas variables (everything on the black page) ---- */
:root{
  --bg:#0a0a0b;
  --ink:#f7efdb;
  --ink-2:#ece2c9;
  --muted:#b9ae92;
  --muted-2:#8a8168;
  --line:#2b2820;
  --card:#17150f;
  --card-2:#1f1c14;
  --yellow:#F5B301;
  --yellow-dark:#e0a400;
  --yellow-ink:#f5c542;
  --yellow-soft:#2a2410;
  --green:#28c466;
  --danger:#ff6b70;
  --shadow:0 10px 34px -12px rgba(0,0,0,.7);
  --shadow-lg:0 22px 60px -22px rgba(0,0,0,.85);
  --page-bg:#050506;
  --gold-grad:linear-gradient(135deg,#ffd35a,#f5b301 55%,#d99a00);
}

/* ---- white panels: same component CSS, light variables ---- */
.book-card,.flow-body,.sheet,.sum-card,.opt-row,.extra-row,.rs-row,

.pay-opt,.confirm,.sp-banner,.promo,.gate-btn,.annpanel,.rd-pad .rd-map,.toast-light{
  --bg:#ffffff;
  --ink:#111217;
  --ink-2:#1c1d22;
  --muted:#6f727c;
  --muted-2:#757985;
  --line:#ececf0;
  --card:#f4f4f6;
  --card-2:#eceef1;
  --yellow-ink:#8a5d00;
  --yellow-soft:#fff6de;
  --danger:#e5484d;
  --shadow:0 8px 30px -12px rgba(17,18,23,.18);
  color:var(--ink);
}
/* a card that lives inside a white panel is a soft grey tile, not a second white box */
.flow-body .opt-row,.flow-body .extra-row,.flow-body .rs-row,.flow-body .sum-card,.flow-body .pd,.flow-body .me-card{background:var(--card);}
.flow-body .opt-row.sel,.flow-body .extra-row.sel,.flow-body .rs-row.sel{background:#fff;}

/* ---- canvas ---- */
html,body{background:#050506;}
body{color:var(--ink);}
.app{background:var(--bg);box-shadow:0 0 80px -20px rgba(245,179,1,.12);}
@media(min-width:460px){ .app{border:1px solid #1d1b14;} }
@media(min-width:860px){ body{background:#050506;} .app{border:0;box-shadow:none;background:#0a0a0b;} }
::selection{background:var(--yellow);color:#111;}

/* old switches that no longer exist */
.theme-toggle,.guide-pill,.guide{display:none!important;}

/* ==========================================================================
   MOBILE HOME — black hero with the cab as a backdrop, white booking panel
   ========================================================================== */
#scr-home{position:relative;}
.hero-bg{position:absolute;left:0;right:0;top:0;height:420px;overflow:hidden;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 80% 20%,rgba(245,179,1,.28),transparent 60%),linear-gradient(180deg,#111008 0%,#0a0a0b 100%);}
.hero-bg img{position:absolute;right:-60px;top:120px;width:100%;max-width:none;opacity:.9;filter:drop-shadow(0 18px 30px rgba(0,0,0,.65));}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.45) 55%,rgba(10,10,11,.1) 100%),linear-gradient(180deg,transparent 55%,#0a0a0b 100%);}
#scr-home>*:not(.hero-bg){position:relative;z-index:1;}
.topbar{padding:22px 20px 6px;}
.tb-logo{height:52px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));}
.flag-chip{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;}
.btn-yel{background:var(--gold-grad);color:#111;}
.greet-block{padding:14px 22px 0;}
.greet .hi{color:var(--yellow);font-weight:700;letter-spacing:.02em;font-size:13px;}
.greet-block .name{color:#fff;font-size:27px;max-width:11em;}
/* the big headline is only used on desktop; on mobile the greeting carries the message */
.home-hero{margin-top:30px;}
.book-card{margin:0 16px;padding:20px 18px 18px;background:#fff;border-radius:26px;box-shadow:0 26px 60px -24px rgba(0,0,0,.9),0 0 0 1px rgba(245,179,1,.35);color:var(--ink);}
.book-card::after{display:none;}
.book-card h3{color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-.01em;}
.book-card .bc-sub{color:var(--muted);margin-bottom:14px;}
.triptype{background:var(--card);}
.triptype button{color:var(--muted);}
.triptype button.on{background:#111217;color:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.4);}

/* direction — "Pickup from airport" / "Drop to airport" */
.dir-select{gap:8px;margin-bottom:14px;}
.dir-opt{background:var(--card);border:1.5px solid transparent;padding:11px 10px;gap:9px;border-radius:14px;align-items:center;}
.dir-opt.on{background:#fff8e1;border-color:var(--yellow);box-shadow:0 6px 16px -10px rgba(245,179,1,.9);}
.dir-radio{display:none;}
.dir-ic{width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 0 0 1px var(--line);}
.dir-opt.on .dir-ic{background:var(--yellow);box-shadow:none;}
.dir-ic svg{width:18px;height:18px;fill:currentColor;stroke:none!important;color:var(--muted);}
.dir-opt.on .dir-ic svg{color:#111;}
.dir-ic svg.land,.dir-ic svg.off{transform:none;}
.dir-txt b{color:var(--ink);font-size:12.5px;line-height:1.2;}
.dir-txt small{color:var(--muted);font-size:10.5px;}

/* location fields */
.book-card .loc-field{background:var(--card);border:1.5px solid transparent;padding:13px 14px;}
.book-card .loc-field:hover{border-color:#e5e5ea;}
.book-card .loc-label{color:var(--muted);}
.book-card .loc-val{color:var(--ink);}
.book-card .loc-val.ph{color:var(--muted-2);}
.loc-dot.pick{background:#fff1c9;} .loc-dot.pick svg{stroke:#b57d00;}
.loc-dot.drop{background:#dff5e6;} .loc-dot.drop svg{stroke:#159a48;}
.loc-swap{background:#111217;border:3px solid #fff;}
.loc-swap svg{stroke:var(--yellow);}
.myloc-chip{background:var(--card);color:var(--ink);}
.myloc-chip svg{stroke:#b57d00;}
.when-block .loc-field{background:var(--card);}
.when-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 2px 8px;}
.rt-link{color:var(--ink);}
.rt-link u,.rt-link span{color:#8a5d00;}
.return-block .ret-route{color:var(--ink);} .ret-route span{color:#b57d00;}
.ret-note{color:var(--muted);}
.ret-off{background:#dff5e6;color:#159a48;}
.fare-preview{background:#fff8e1;} .fare-preview span{color:var(--muted);} .fare-preview b{color:#8a5d00;} .fare-preview small{color:var(--muted);}
.book-btn{background:var(--gold-grad);color:#111;box-shadow:0 12px 24px -12px rgba(245,179,1,.9);border-radius:16px;padding:17px;}
.book-btn svg{stroke:#111;}
.loc-error{background:#fdecec;color:#b32d2e;} .loc-error svg{stroke:#b32d2e;}

/* date / time tiles (Orbi-style) */
.dt-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px;}
.tile{display:flex;align-items:center;gap:10px;text-align:left;background:var(--card);border:1.5px solid transparent;border-radius:14px;padding:12px;cursor:pointer;color:var(--ink);font:inherit;min-width:0;transition:border-color .15s,background .15s;}
.tile:hover{border-color:#e3e3e8;} .tile:active{transform:scale(.98);}
.tile-ic{width:32px;height:32px;border-radius:50%;background:#fff1c9;display:flex;align-items:center;justify-content:center;flex:none;}
.tile-ic svg{width:17px;height:17px;stroke:#b57d00;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tile-tx{display:flex;flex-direction:column;min-width:0;}
.tile small,.tile-tx small{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);display:block;}
.tile b,.tile-tx b{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.tile b.ph,.tile-tx b.ph{color:var(--muted-2);font-weight:600;}
/* tiles inside the flow (no icon) */
.flow-body .tile{flex-direction:column;align-items:flex-start;gap:0;padding:13px 14px;}
.flow-body .tile b{font-size:15.5px;}

/* ---- modern inputs ---- */
.fi{display:block;margin:0 0 12px;}
.fi>span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 2px 6px;}
.fi>span i{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted-2);margin-left:6px;}
.fi input,.fi textarea,.fi select{display:block;width:100%;box-sizing:border-box;background:var(--card);border:1.5px solid transparent;border-radius:14px;padding:15px 14px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s;}
.fi textarea{resize:vertical;min-height:84px;line-height:1.45;font-weight:500;}
.fi input::placeholder,.fi textarea::placeholder{color:var(--muted-2);font-weight:500;}
.fi input:focus,.fi textarea:focus,.fi select:focus{background:#fff;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(245,179,1,.2);}
.fi-row{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;align-items:start;}
.fi-hint{font-size:12px;color:var(--muted);line-height:1.55;margin:2px 2px 14px;}
.fi-mail input{border-color:#f2dc9b;background:#fffaf0;}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:14px;padding:6px;height:54px;box-sizing:border-box;}
.stepper button{width:42px;height:42px;border-radius:11px;border:none;background:#fff;color:var(--ink);font-size:22px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);}
.stepper button:active{transform:scale(.94);background:var(--yellow);}
.stepper b{font-size:18px;font-weight:800;}
.phone-row{display:flex;gap:8px;}
.phone-row select{flex:none;width:auto;max-width:42%;background:var(--card);border:1.5px solid transparent;border-radius:14px;padding:15px 10px;font:inherit;font-size:15px;font-weight:700;color:var(--ink);outline:none;}
.phone-row input{flex:1;min-width:0;background:var(--card);border:1.5px solid transparent;border-radius:14px;padding:15px 14px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);outline:none;}
.phone-row select:focus,.phone-row input:focus{background:#fff;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(245,179,1,.2);}

/* tags (add-ons) */
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:99px;background:#fff1c9;color:#7a5200;border:1px solid #f5dc8f;}
.extra-row.sel .tag{background:var(--yellow);color:#111;border-color:var(--yellow);}

/* "coming home after a long time" card */
.assist-card{background:linear-gradient(160deg,#fff8e1,#fff);border:1.5px solid #f2dc9b;border-radius:20px;padding:16px;margin-top:16px;}
.as-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.as-head .sp-ic{width:52px;height:52px;flex:none;}
.as-head .sp-ic svg{width:100%;height:100%;}
.as-head .sp-tx b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:5px;}
.as-head .sp-tx b em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;background:var(--yellow);color:#111;border-radius:99px;padding:3px 8px;margin-left:8px;vertical-align:2px;}
.as-head .sp-tx span{display:block;font-size:12.8px;line-height:1.55;color:var(--muted);}
.as-sur{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted);padding:10px 2px 2px;cursor:pointer;}
.as-sur input{width:20px;height:20px;accent-color:#111217;flex:none;margin-top:1px;}
.as-sur b{color:var(--ink);}

/* ==========================================================================
   FLOW screens — dark header, white panel body
   ========================================================================== */
#scr-flow{background:#0a0a0b;}
.flow-head h2{color:#fff;}
.flow-head .step-of{color:var(--yellow);}
.flow-head .back{background:rgba(255,255,255,.1);}
.flow-head .back svg{stroke:#fff;}
.flow-progress .fp{background:#2c2a22;}
.flow-progress .fp.done{background:#8a6a14;} .flow-progress .fp.on{background:var(--yellow);}
.flow-body{background:#fff;margin:8px 12px 0;border-radius:24px;padding:18px 16px 120px;box-shadow:0 20px 50px -24px rgba(0,0,0,.9);}
.flow-cta{background:linear-gradient(to top,#0a0a0b 72%,rgba(10,10,11,0));}
.flow-cta .pp-l{color:var(--muted);} .flow-cta .pp-v{color:var(--yellow);}
.flow-cta .big-btn{background:var(--gold-grad);color:#111;box-shadow:0 10px 24px -12px rgba(245,179,1,.8);}
.flow-cta .big-btn.ghost{background:#26241c;color:#fff;box-shadow:none;}
.flow-body .leg-title,.flow-body .sec-h{color:var(--ink);}
.flow-body .big-btn{background:#111217;color:#fff;}
.flow-body .big-btn.yellow{background:var(--gold-grad);color:#111;}
.flow-body .big-btn.ghost{background:var(--card);color:var(--ink);}
.pay-opt{background:#fff;border:1.5px solid var(--line);}
.pay-opt .pi{background:#111217;}
.pay-opt.online{border-color:var(--yellow);background:#fff8e1;}
.pay-opt.online .pi{background:var(--gold-grad);color:#111;} .pay-opt.online .pi svg{stroke:#111!important;}
.pay-opt.support{background:#eefaf2;border-color:#bfe8cd;}
.pay-opt.support .pi{background:#159a48;} .pay-opt.support .pi svg{stroke:#fff!important;fill:none;}
.pay-opt.support .pm-t{color:#0f5c2c;} .pay-opt.support .pm-s.g{color:#2e7a4b;}
.pay-opt .pm-t{color:var(--ink);}
.cf-h{color:var(--ink);}
.cf-fine{font-size:11.8px;color:var(--muted);text-align:center;margin:16px 6px 0;line-height:1.6;}
.confirm .bid{color:#8a5d00;}
.paid-steps li b{color:var(--ink);}

/* ==========================================================================
   Sheets (calendar, time, login) — white
   ========================================================================== */
.sheet-back{background:rgba(0,0,0,.72);}
.sheet{background:#fff;}
.mail-hero{background:linear-gradient(160deg,#fff8e1,#fff);border:1.5px solid #f2dc9b;border-radius:18px;padding:14px;margin:0 0 14px;box-shadow:0 10px 24px -16px rgba(245,179,1,.9);}
.mh-top{display:flex;gap:11px;align-items:center;margin-bottom:10px;}
.mh-ic{width:40px;height:40px;border-radius:12px;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;flex:none;}
.mh-ic svg{width:22px;height:22px;stroke:#111;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mh-top b{display:block;font-size:15.5px;font-weight:800;} .mh-top small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px;}
.mail-hero input{display:block;width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #f2dc9b;border-radius:14px;padding:16px 14px;font:inherit;font-size:17px;font-weight:700;color:var(--ink);outline:none;}
.mail-hero input:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(245,179,1,.22);}
.mail-hero .auth-hint{display:block;margin-top:8px;font-size:11.5px;color:var(--muted);}
.auth-wait{text-align:center;padding:26px 0 14px;}
.spin{width:38px;height:38px;border-radius:50%;border:4px solid #f3e3b0;border-top-color:var(--yellow);margin:0 auto 14px;animation:spin .8s linear infinite;}
.tm-disp{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 14px;}
.tm-disp b{font-size:44px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.tm-ap{display:flex;flex-direction:column;gap:4px;}
.tm-ap button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:6px 12px;font-weight:800;font-size:13px;cursor:pointer;color:var(--muted);}
.tm-ap button.on{background:#111217;color:#fff;border-color:#111217;}
.tm-l{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 2px 7px;}
.tm-grid{display:grid;gap:7px;}
.tm-grid.h{grid-template-columns:repeat(6,1fr);} .tm-grid.m{grid-template-columns:repeat(6,1fr);}
.tm-c{border:1.5px solid transparent;background:var(--card);border-radius:11px;padding:11px 0;font:inherit;font-size:15px;font-weight:700;cursor:pointer;color:var(--ink);}
.tm-c.on{background:var(--yellow);border-color:var(--yellow);color:#111;box-shadow:0 6px 14px -8px rgba(245,179,1,.9);}
.cancel-warn{background:#fff4d6;color:#7a5200;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.5;margin:0 0 14px;}
.cancel-ok{background:#e9f7ee;color:#1d6b3a;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.5;margin:0 0 14px;}
.cancel-note{font-size:12px;color:var(--muted);text-align:center;margin:12px 4px 0;}

/* rides / ride detail on the black canvas */
.page-t{color:#fff;} .page-s{color:var(--muted);}
.ride-sec{color:var(--yellow);}
.rd-back h2{color:#fff;} .rd-back button{background:rgba(255,255,255,.1);color:#fff;}
.ride-st{margin:6px 0 2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.ride-drv{font-size:12px;font-weight:700;color:var(--muted);}
.pill-btn.gold{background:var(--gold-grad);color:#111;border-color:transparent;}
.rd-drv{border:1.5px solid #f2dc9b;background:#fffaf0;}
.rd-driver{display:flex;align-items:center;gap:12px;}
.rd-dmain{flex:1;min-width:0;} .rd-dmain b{display:block;font-size:16px;} .rd-dmain small{color:var(--muted);}
.rd-call{display:flex;align-items:center;gap:6px;background:#159a48;color:#fff;border-radius:99px;padding:10px 16px;font-weight:800;font-size:14px;text-decoration:none;flex:none;}
.rd-call svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.rd-line a{color:#159a48;font-weight:800;}
.chip.g{background:#dff5e6;color:#159a48;}

/* sections on the black home page */
.section-t h4{color:#fff;}
.section-t a{color:var(--yellow);}
.home-sections{position:relative;z-index:1;}
.qr-card,.fleet-c,.xp-card,.hiw-card{box-shadow:0 14px 30px -18px rgba(0,0,0,.9);}
.annbar{background:#000;border-bottom:1px solid #1d1b14;position:relative;z-index:3;}

/* bottom nav */
.botnav{background:#14130f;border:1px solid #2b2820;}
.botnav .nav-i{color:#9a9078;}
.botnav .nav-i.on{background:var(--yellow);color:#111;}

/* ==========================================================================
   DESKTOP — black website, white booking panel
   ========================================================================== */
@media(min-width:860px){
  .hero-bg{display:none;}
  .dtopnav{background:rgba(8,8,9,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid #1f1d15;}
  .dtop-logo{height:62px;}
  .dtop-inner{padding:10px 40px;}
  .dtop-links a{color:#f3ead7;} .dtop-links a:hover{color:var(--yellow);opacity:1;}
  .dtop-links a[data-scr].on,.dtop-links a.on{border-color:var(--yellow);}
  .dtop-country{background:#1b1912;color:#f3ead7;} .dtop-country select{color:#f3ead7;} .dtop-country select option{color:#111;}
  .dtop-cta{background:var(--gold-grad);color:#111;}
  .btn-ghost{background:#1b1912;color:#f3ead7;}
  .home-hero{padding:56px 40px 28px;gap:54px;margin-top:0;}
  .dhero-head{color:#fff;font-size:56px;}
  .dhero-head .hl{color:var(--yellow);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .dhero-sub{color:var(--muted);}
  #bookCard{background:#fff;border:0;box-shadow:0 34px 80px -28px rgba(0,0,0,.95),0 0 0 1px rgba(245,179,1,.4);margin:0;}
  #bookCard h3{color:var(--ink);}
  #bookCard .dir-opt{background:var(--card);} #bookCard .dir-opt.on{background:#fff8e1;}
  #bookCard .dir-txt b{color:var(--ink);} #bookCard .dir-txt small{color:var(--muted);}
  #bookCard .dir-ic{color:inherit;}
  .dhero-visual{background:radial-gradient(90% 90% at 70% 30%,rgba(245,179,1,.26),transparent 62%),linear-gradient(135deg,#17150d,#0b0b0c)!important;border:1px solid #2a2417;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);}
  .dhero-map{opacity:.12;}
  .dhero-car{filter:drop-shadow(0 28px 40px rgba(0,0,0,.7));}
  .dhero-badge{background:#fff;color:#111;}
  .section-t h4{color:#fff;}
  .trust-strip{background:#13110b;border:1px solid #26231a;} .trust-ic{background:#1f1c13;} .trust-ic svg{stroke:var(--yellow);}
  .trust-t{color:#fff;}
  .promo{background:linear-gradient(120deg,#2a2410,#4a3a10);}
  .dfooter{background:#000;border-top:1px solid #1f1d15;}
  .dfoot-brand img{filter:none;height:64px;}
  /* flow & other pages: centered white card on black */
  #scr-flow{max-width:600px;}
  .flow-body{margin:8px 0 0;}
  .flow-cta{background:transparent;}
  .dt-tiles{gap:12px;}
  .page-t{color:#fff;}
}
@media(max-width:380px){ .tb-logo{height:44px;} .dir-txt small{display:none;} }

/* ==========================================================================
   Location picker — no flicker (stable scrollbar, no entrance animation, dimmed desktop backdrop)
   ========================================================================== */
#scr-locpicker{animation:none!important;transition:none!important;overflow-y:scroll;scrollbar-gutter:stable;overscroll-behavior:contain;
  background:#0a0a0b;}
#scr-locpicker *{transition:none!important;}
#lpList{min-height:46vh;}
body.lp-open{overflow:hidden;}
body.lp-open .app{overflow:hidden;}
@media(min-width:860px){
  #scr-locpicker{inset:0 auto 0 50%!important;left:50%!important;transform:translateX(-50%);width:520px;max-width:520px!important;height:100vh;box-shadow:0 0 0 100vmax rgba(0,0,0,.72);border-radius:0;}
}
.sheet,.sheet *{will-change:auto;}

/* standalone list cards sit on the black canvas as white panels */



/* toasts: always a dark pill with light text, whatever the page behind it */
.toast{background:#17181c!important;color:#fff!important;border:1px solid rgba(245,179,1,.45);box-shadow:0 10px 30px rgba(0,0,0,.55);}
.toast span{color:#fff!important;}
.toast svg{stroke:#f5b301!important;}

/* ==========================================================================
   Responsive polish
   ========================================================================== */
/* tablets: use the width, no phone frame */
@media(min-width:600px) and (max-width:859px){
  .app{max-width:640px;border-radius:28px;}
}
/* desktop hero: visual sits at the top, beside the headline, and stays in view */
@media(min-width:860px){
  .home-hero{align-items:start!important;}
  .dhero-visual{height:600px!important;position:sticky;top:104px;}
}
/* small phones */
@media(max-width:380px){
  .topbar{padding-left:16px;padding-right:16px;}
  .topbar-actions,.auth-slot{gap:6px;}
  .flag-chip{width:36px;height:36px;font-size:16px;}
  .btn-ghost,.btn-yel{padding:8px 11px;font-size:12px;}
  .tb-logo{height:40px;}
  .book-card{padding:18px 14px;}
  .dt-tiles{gap:8px;}
  .book-card .tile{padding:10px;gap:8px;}
  .book-card .tile-ic{display:none;}
  .tile small,.tile-tx small{font-size:9.5px;letter-spacing:.05em;}
  .tile b,.tile-tx b{font-size:13.5px;}
  .flow-body{padding-left:14px;padding-right:14px;}
  .dir-opt{padding:10px;gap:8px;}
  .dir-ic{width:30px;height:30px;}
}

/* ==========================================================================
   Account, rides & info pages — dark charcoal panels with gold accents
   (white is reserved for the booking card, the booking steps and sheets)
   ========================================================================== */
.ride-big,.ride-row,.rd-card,.addr-card,.contact-card,.faq-item,.push-card,.promo-box,.acct-tile,.sugg{
  background:linear-gradient(180deg,#17160f,#121109);border:1px solid #2c2818;color:var(--ink);box-shadow:0 14px 30px -20px rgba(0,0,0,.9);}
.acct-hero{background:radial-gradient(120% 140% at 50% 0%,rgba(245,179,1,.16),transparent 60%),linear-gradient(180deg,#17160f,#0f0e09);border:1px solid #2c2818;border-radius:24px;padding:26px 18px 22px;margin-bottom:14px;}
.acct-av{box-shadow:0 0 0 4px rgba(245,179,1,.22),0 12px 30px -10px rgba(245,179,1,.5);}
.acct-name{color:#fff;} .acct-mail{color:#b9ad90;}
.acct-tile{color:#f3ead7;border-radius:18px;transition:border-color .2s,transform .12s;}
.acct-tile:hover{border-color:rgba(245,179,1,.6);}
.acct-tile svg{stroke:var(--yellow);}
.acct-tabs{border-bottom-color:#26231a;}
.acct-tabs button{color:#b9ad90;} .acct-tabs button.on{color:#fff;border-bottom-color:var(--yellow);}
.acct-h,.acct-sec{color:#fff;} .acct-sub{color:#b9ad90;}
.sugg h4{color:#fff;} .sugg p{color:#b9ad90;}
.sugg button{background:var(--gold-grad);color:#111;}
.set-list{border-top:1px solid #26231a;} .set-list>*{border-color:#26231a;}
.me-card,.pd{background:#17160f;border:1px solid #2c2818;color:var(--ink);}
.ride-big{border-radius:22px;} .ride-big h4{color:#fff;}
.ride-big .rb-map{border-radius:16px;}
.rd-card,.ride-row{color:var(--ink);}
/* the "Account"/page titles must clear the sticky desktop nav */
@media(min-width:860px){ .screen>.page-h,.screen>h2,.acct-top,#scr-account>*:first-child{scroll-margin-top:110px;} #scr-account,#scr-rides,#scr-services{padding-top:28px;} }

.lo-card{background:radial-gradient(120% 140% at 50% 0%,rgba(245,179,1,.12),transparent 60%),linear-gradient(180deg,#17160f,#0f0e09);border:1px solid #2c2818;color:var(--ink);}
.lo-card h3,.lo-card h2{color:#fff;} .lo-card p{color:#b9ad90;}
@media(min-width:860px){ .lo-card{max-width:none;width:100%;} }

/* info cards: dark charcoal with gold accents; illustrations sit on a cream tile so their dark line-art stays visible */
.xp-card,.hiw-card,.qr-card,.fleet-c,.fleet-full-c,.stop-card{background:linear-gradient(180deg,#17160f,#110f09);border:1px solid #2c2818;color:#f3ead7;}
.xp-card:hover,.qr-card:hover,.fleet-c:hover{border-color:rgba(245,179,1,.55);}
.xp-t,.qr-route,.fleet-c .fn,.fleet-full-c .fn,.hiw-card b,.stop-card b{color:#fff;}
.xp-d,.qr-meta,.fleet-c .fmeta,.hiw-card p,.hiw-card span{color:#b9ad90;}
.qr-price,.fleet-c .fm,.fleet-full-c .fm{color:var(--yellow);} .qr-price span{color:#b9ad90;}
.xp-ill{background:#eeeff2;border-radius:16px;padding:8px;width:92px;height:70px;display:flex;align-items:center;justify-content:center;margin-left:auto;}
.xp-ill svg{max-width:100%;max-height:100%;}
.xp-btn{background:var(--gold-grad)!important;color:#111!important;}
.fleet-c .fmeta svg,.fleet-full-c .fmeta svg{stroke:var(--yellow);}
.qr-ic{background:#1f1c12;} .qr-ic svg{stroke:var(--yellow);}

/* ---- verified-stops section: black & gold, not green ---- */
/* verified stops / safety */
.safe-wrap{margin:30px 22px 0;border-radius:var(--r-xl);padding:24px 18px 22px;background:#0e0d09;color:#f6efdc;position:relative;overflow:hidden;}
.safe-wrap::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(245,179,1,.12);pointer-events:none;}
.safe-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(245,179,1,.16);color:#f5b301;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:100px;}
.safe-num{font-size:11px;font-weight:800;color:#f5b301;}
.safe-ic{width:40px;height:40px;border-radius:12px;background:rgba(245,179,1,.16);display:flex;align-items:center;justify-content:center;flex:none;}
.safe-ic svg{width:20px;height:20px;stroke:#f5b301;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.vbadge{display:inline-flex;align-items:center;gap:5px;background:#f5b301;color:#1a1200;font-size:10.5px;font-weight:800;padding:5px 9px;border-radius:100px;white-space:nowrap;}
.stop-ticks span::before{content:"✓ ";color:#f5b301;font-weight:800;}
.safe-wrap{background:linear-gradient(180deg,#14110a,#0b0a07);border:1px solid #2c2818;}
.free-break,.safe-card,.safe-step,.stop-card{border-color:#2c2818;}
.vbadge{background:var(--gold-grad);}

/* ---- promo code: readable inside the white booking panel ---- */
.flow-body .promo-box{background:transparent;border:0;box-shadow:none;color:#111217;}
.flow-body .promo-toggle{background:#fff8e6;color:#111217;border:1.5px dashed #e0b73c;}
.flow-body .promo-toggle i{color:#8a5d00;opacity:1;}
.flow-body .promo-row input{background:#fff;color:#111217;border:1.5px solid #d6d6dc;}
.flow-body .promo-row .btn-yel{background:var(--gold-grad);color:#111;}
.promo-row .btn-yel{color:#111!important;}

/* ---- announcement bar: always ONE line, fixed height, no jumping ---- */
.annbar{height:42px;min-height:42px;padding:0 34px 6px;gap:8px;justify-content:center;}
.annbar .ann-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;line-height:1;font-size:12.5px;}
.annbar .ann-ic{flex:none;}
@media(max-width:380px){ .annbar .ann-txt{font-size:11.5px;} .annbar{padding:0 26px 6px;} }

/* ---- ride choice: cars take ~70%, the help card ~30% ---- */
.veh-list{gap:12px;}
.veh-list .opt-row.veh{padding:14px;gap:14px;min-height:112px;align-items:center;}
.veh-list .opt-veh{width:132px;height:90px;flex:none;border-radius:14px;overflow:hidden;}
.veh-list .opt-veh img{width:100%;height:100%;object-fit:cover;}
.veh-list .opt-row.veh b,.veh-list .opt-row.veh .ov-n{font-size:18px;}
@media(max-width:380px){ .veh-list .opt-veh{width:104px;height:76px;} .veh-list .opt-row.veh{padding:11px;gap:10px;min-height:96px;} }
.assist-card{padding:12px 14px;margin-top:12px;}
.as-head{margin-bottom:6px;align-items:center;}
.as-head .sp-ic{width:38px;height:38px;}
.as-head .sp-tx b{font-size:15px;margin-bottom:2px;}
.as-head .sp-tx span{font-size:12.3px;line-height:1.4;}
.as-sur{padding:8px 2px 0;font-size:13px;align-items:center;}
.assist-more{margin-top:10px;}

/* recommended highlight: gold, matching the theme (no green) */
.rec-dot{background:var(--yellow);box-shadow:0 0 0 4px rgba(245,179,1,.22);}
.opt-row.veh.rec{outline:2px solid rgba(245,179,1,.7);outline-offset:3px;}
.rec-badge{background:var(--gold-grad)!important;color:#111!important;border-color:transparent!important;}
.rec-badge svg{stroke:#111;}
.safe-sub{color:#f5b301;}
.stop-top small{color:#b9ad90;}
.stop-ticks span{color:#f3ead7;}
.fam-c svg{stroke:#f5b301;}
.safe-wrap p,.safe-wrap .safe-p,.safe-wrap .safe-lead{color:#cbbf9f;}
.safe-step span,.safe-step p{color:#b9ad90;}
.free-break{background:rgba(245,179,1,.08);border-color:rgba(245,179,1,.22);}
.free-break b{color:#f5b301;}
.safe-step span.d{color:#b9ad90;}

/* ---- ride & receipt buttons: clear on the dark cards ---- */
.pill-btn{background:#2f2b1d;color:#fff;border:1px solid #5a4e2a;font-weight:700;}
.ride-btns .pill-btn:first-child,.rr-btns .pill-btn:first-child{background:var(--gold-grad);color:#111;border-color:transparent;}
.ride-btns .pill-btn.gold{background:var(--gold-grad);color:#111;}
.pill-btn svg{stroke:currentColor;}
.rd-btns .big-btn,.rd-btns .big-btn.ghost{background:#2f2b1d;color:#fff;border:1px solid #5a4e2a;}
.rd-btns .big-btn.yellow{background:var(--gold-grad);color:#111;border-color:transparent;}
.rd-btns .big-btn svg{stroke:currentColor;}
.cancel-note{color:#b9ad90;}
.rd-btns .big-btn:first-child{background:var(--gold-grad);color:#111;border-color:transparent;}

/* ---- admin-uploaded pictures for Explore cards & How-it-works steps ---- */
.xp-ill.has-img{width:92px;height:70px;padding:0;overflow:hidden;background:none;border-radius:16px;}
.xp-ill.has-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hiw-ill.has-img{padding:0;}
.hiw-ill.has-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- hero slider ---- */
/* mobile: clean full-colour photo band, text sits in a soft dark fade at the bottom of the photo */
.hero-bg{height:400px;}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 22%,rgba(10,10,11,0) 40%,rgba(10,10,11,.78) 68%,#0a0a0b 100%)!important;}
.greet-block{margin-top:96px;}
.greet-block .hi,.greet-block .name{text-shadow:0 2px 14px rgba(0,0,0,.75);}
.hs{position:absolute;inset:0;overflow:hidden;}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.hs-slide.on{opacity:1;z-index:1;}
.hs-slide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 30%;filter:none;opacity:1;}
.hero-fit-contain .hs-slide img{object-fit:contain;}
.hs-cap,.hs-ctl{display:none;}
@media(prefers-reduced-motion:reduce){.hs-slide{transition:none;}}

/* laptop: whole photo shown (3:2, nothing cropped) with the advert text in a panel underneath */
@media(min-width:860px){
  .dhero-visual{display:block!important;height:auto!important;position:sticky;top:104px;}
  .hs.hs-d{position:relative;inset:auto;overflow:hidden;display:grid;border-radius:inherit;}
  .hs-d .hs-slide{grid-area:1/1;position:relative;inset:auto;display:flex;flex-direction:column;background:#0e0d0a;}
  .hs-d .hs-slide img{position:static;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;}
  .hero-fit-contain .hs-d .hs-slide img{object-fit:contain;background:#111;}
  .hs-d .hs-cap{display:block;position:static;padding:22px 30px 78px;opacity:0;transform:translateY(8px);transition:opacity .8s .2s ease,transform .8s .2s ease;border-top:1px solid #2a2417;background:linear-gradient(180deg,#14120c,#0e0d0a);}
  .hs-d .hs-slide.on .hs-cap{opacity:1;transform:none;}
  .hs-tag{display:inline-block;background:var(--gold-grad,#f5b301);color:#111;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:100px;margin-bottom:12px;}
  .hs-title{font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:8px;}
  .hs-text{font-size:15px;line-height:1.5;color:#cfc9b8;max-width:46ch;margin:0;}
  .hs-d .hs-ctl{display:flex;align-items:center;gap:14px;position:absolute;left:30px;right:30px;bottom:22px;z-index:3;}
  .hs-dots{display:flex;gap:8px;flex:1;}
  .hs-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s;}
  .hs-dot.on{width:30px;border-radius:6px;background:var(--yellow,#f5b301);}
  .hs-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,11,.55);cursor:pointer;display:grid;place-items:center;}
  .hs-arrow svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .hs-arrow:hover{background:var(--yellow,#f5b301);} .hs-arrow:hover svg{stroke:#111;}
  .dhero-badge{bottom:auto!important;top:20px;left:20px;z-index:4!important;}
}

/* Confirm & pay: green = pay online (main action), gold = ask support */
.pay-opt.online{background:#eefaf2;border-color:#159a48;}
.pay-opt.online .pi{background:#159a48;color:#fff;} .pay-opt.online .pi svg{stroke:#fff!important;}
.pay-opt.online .pm-t{color:#0f5c2c;} .pay-opt.online .pm-s{color:#2e7a4b;}
.pay-opt.support{background:#fff8e1;border-color:var(--yellow);}
.pay-opt.support .pi{background:var(--gold-grad);} .pay-opt.support .pi svg{stroke:#111!important;fill:none;}
.pay-opt.support .pm-t{color:#111;} .pay-opt.support .pm-s,.pay-opt.support .pm-s.g{color:#7a5a00;}