/* ZenDrive · app screens (member). Reuses the landing design language. */
:root{
  --white:#ffffff; --paper:#f6f4f1; --paper-2:#efeae4; --ink:#15110e; --ink-soft:#403a34;
  --charcoal:#161310; --charcoal-2:#211c18;
  --red:#e60012;            /* fills + large text only */
  --red-ink:#c2000d;        /* AA-safe red for TEXT on light */
  --red-on-dark:#ff5a63;    /* AA-safe red on dark */
  --line:rgba(20,17,14,.12); --line-2:rgba(20,17,14,.07); --line-light:rgba(255,255,255,.16);
  /* warm, desaturated status palette */
  --st-req:#8a5a1c; --st-conf:#5f7a52; --st-done:#6e6862; --st-cancel:#e60012; --st-noshow:#6e1419;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:8px; --r-lg:16px;
  --shadow:0 1px 2px rgba(20,17,14,.05),0 12px 34px -16px rgba(20,17,14,.22);
  --shadow-lg:0 30px 80px -30px rgba(20,17,14,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
.tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(246,244,241,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-2)}
.topbar__in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;height:64px;padding:0 clamp(16px,4vw,40px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.16em;font-size:14px;text-transform:uppercase;text-decoration:none}
.brand b{color:var(--red-ink);font-weight:700}
.brand svg{width:20px;height:20px;fill:var(--red)}
.topbar__sp{flex:1}
.topbar__user{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--charcoal);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:14px}

/* ---- shell ---- */
.shell{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:232px 1fr;gap:clamp(20px,3vw,44px);padding:clamp(24px,4vw,44px) clamp(16px,4vw,40px) 80px}
.rail{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:2px}
.rail a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:var(--r);color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500;transition:background .2s,color .2s}
.rail a:hover{background:var(--paper-2)}
.rail a.is-on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.rail a.is-on::before{content:"";width:3px;height:18px;background:var(--red);border-radius:3px;margin-left:-14px;margin-right:11px}
.rail svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

.page-h{margin-bottom:22px}
.page-h .ey{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);font-weight:600;display:block;margin-bottom:7px}
.page-h h1{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.muted{color:var(--ink-soft)}

/* ---- membership card (signature object) ---- */
.mcard{position:relative;background:linear-gradient(155deg,#211c18,#0f0d0b 70%);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-lg);overflow:hidden;aspect-ratio:1.62/1;max-width:480px;display:flex;flex-direction:column}
.mcard::after{content:"ZENDRIVE";position:absolute;right:-6px;bottom:-14px;font-family:var(--serif);font-size:108px;font-weight:600;letter-spacing:-.03em;color:rgba(255,255,255,.035);pointer-events:none}
.mcard__top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.mcard__route{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);white-space:nowrap}
.mcard__brand{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.66);font-weight:600;text-transform:uppercase}
.mcard__brand b{color:var(--red-on-dark)}
.mcard__num{margin-top:auto;display:flex;align-items:baseline;gap:10px;position:relative;z-index:1}
.mcard__num .big{font-family:var(--serif);font-size:clamp(4.6rem,12vw,7rem);line-height:.85;font-weight:500}
.mcard__num .of{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:rgba(255,255,255,.74)}
.mcard__num .lab{font-size:12.5px;color:rgba(255,255,255,.8);align-self:flex-end;margin-bottom:8px;letter-spacing:.02em}
.mcard__foot{margin-top:18px;display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;font-size:12.5px}
.mcard__name{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:600}
.mcard__sub{color:rgba(255,255,255,.74);margin-top:3px}
.mcard__valid{text-align:right;color:rgba(255,255,255,.84)}

/* ---- generic panels ---- */
.grid2{display:grid;grid-template-columns:minmax(0,480px) minmax(330px,1fr);gap:24px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.panel h2,.panel h3{font-size:1.15rem;margin-bottom:4px}
.panel .sub{font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.stack{display:flex;flex-direction:column;gap:14px}

/* next ride */
.nextride{display:flex;align-items:center;gap:16px}
.nextride__date{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;min-width:64px}
.nextride__date .d{font-family:var(--serif);font-size:1.5rem;line-height:1}
.nextride__date .m{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.nextride__info{flex:1;min-width:0}
.nextride__info .r{font-weight:600}
.nextride__info .t{font-size:13px;color:var(--ink-soft);margin-top:2px}

/* status badge: icon + label, never color alone */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid currentColor;background:#fff}
.badge svg{width:13px;height:13px}
.badge--req{color:var(--st-req)} .badge--conf{color:var(--st-conf)} .badge--done{color:var(--st-done)}
.badge--cancel{color:var(--st-cancel)} .badge--noshow{color:var(--st-noshow)}

/* ledger */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--line-2);font-size:14px}
.ledger li:first-child{border-top:0}
.ledger .when{color:var(--ink-soft);font-size:12.5px}
.ledger .delta{font-weight:700;font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums}
.ledger .plus{color:var(--st-conf)} .ledger .minus{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;border:1px solid transparent;border-radius:var(--r);padding:13px 22px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:46px;transition:transform .2s var(--ease),background .2s,border-color .2s;background:var(--ink);color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 12px 26px -14px rgba(230,0,18,.7)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--paper)}
.btn--block{width:100%}
.btn--lg{padding:16px 28px;font-size:16px}

.banner{display:flex;gap:12px;align-items:center;background:#fff7e8;border:1px solid #e7d2a6;color:#7a5a16;border-radius:var(--r);padding:13px 16px;font-size:14px;margin-top:18px}
.banner .btn{margin-left:auto}

/* ===== booking form ===== */
.book{max-width:560px}
.seg{display:flex;background:var(--paper-2);border-radius:var(--r);padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;font-family:var(--sans);font-weight:600;font-size:14.5px;padding:12px;border-radius:6px;cursor:pointer;color:var(--ink-soft);min-height:44px}
.seg button[aria-checked=true]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.field{margin-top:18px}
.field>label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field input,.field select{width:100%;font-size:16px;font-family:var(--sans);padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--ink-soft);margin-top:7px}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:14.5px;width:100%}
.chip a{margin-left:auto;font-size:12.5px;color:var(--red-ink);font-weight:600;text-decoration:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stepper button{width:46px;height:46px;border:0;background:#fff;font-size:20px;cursor:pointer;color:var(--ink)}
.stepper button:disabled{color:var(--line);cursor:not-allowed}
.stepper .val{min-width:46px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.toggle{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px;border:1px dashed var(--line);border-radius:var(--r);font-size:14.5px}
.toggle input{width:20px;height:20px;accent-color:var(--red)}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sugg button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 13px;font-size:13px;cursor:pointer;font-weight:600}
.usebar{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--charcoal);color:#fff;border-radius:var(--r);padding:14px 18px}
.usebar .u{font-size:13.5px} .usebar .u b{font-family:var(--serif)}
.note{font-size:12.5px;color:var(--ink-soft);margin-top:14px}

/* ===== dispatch ===== */
.disp{max-width:1180px}
.nowstrip{display:flex;gap:16px;flex-wrap:wrap;background:var(--charcoal);color:#fff;border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--shadow-lg)}
.nowstrip .blk{flex:1;min-width:190px}
.nowstrip .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:5px}
.nowstrip .v{font-family:var(--serif);font-size:1.35rem}
.nowstrip .vsub{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}
.nowstrip .cd{color:var(--red-on-dark)}
.tl{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.slot{display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--st-conf);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.slot--req{border-left-color:var(--st-req)}
.slot--conflict{border-left-color:var(--red);background:#fdecec}
.slot__time{font-family:var(--serif);font-size:1.15rem}
.slot__time .gap{display:block;font-size:11px;color:var(--ink-soft);font-family:var(--sans);margin-top:3px}
.slot__who .n{font-weight:600}
.slot__who .m{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.slot__act{display:flex;gap:8px;align-items:center}
.mini{display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:9px 13px;cursor:pointer;min-height:40px;text-decoration:none!important;color:var(--ink)}
.mini--red{background:var(--red);color:#fff;border-color:var(--red)}
.mini:disabled{opacity:.5;cursor:not-allowed}
.gate{font-size:12px;color:var(--st-cancel);margin-top:6px;display:flex;gap:6px;align-items:center}

@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;padding-bottom:2px}
  .rail a{flex:0 0 auto;white-space:nowrap}
  .rail a.is-on::before{display:none}
  .grid2{grid-template-columns:1fr}
  .slot{grid-template-columns:64px 1fr;grid-template-areas:"t w" "a a"}
  .slot__time{grid-area:t}.slot__who{grid-area:w}.slot__act{grid-area:a;justify-content:flex-end}
}

/* ===== buy / pass page ===== */
.btn--sm{padding:9px 16px;font-size:14px;min-height:38px}
.wrap-mid{max-width:980px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px) 90px}
.buyhero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:start}
.buyhero__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:#ddd}
.buyhero__media img{width:100%;height:100%;object-fit:cover;display:block}
.buyhero .ey{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);font-weight:600}
.buyhero h1{font-size:clamp(2rem,4vw,2.8rem);margin:8px 0 0}
.priceblk{margin:18px 0 6px;display:flex;align-items:baseline;gap:10px}
.priceblk .big{font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.6rem);line-height:1}
.priceblk .per{font-size:1rem;color:var(--ink-soft);font-weight:600}
.price-sub{color:var(--ink-soft);font-size:14.5px}
.explain{margin:16px 0;padding:14px 16px;background:var(--paper-2);border-radius:var(--r);font-size:14.5px;line-height:1.6}
.anchor{font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.buy-cta{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:340px}
.txt-owner{font-size:13px;color:var(--ink-soft);text-align:center}
.txt-owner a{color:var(--red-ink);font-weight:600;text-decoration:none}
.meter{margin-top:18px;max-width:340px}
.meter__bar{height:6px;border-radius:6px;background:var(--paper-2);overflow:hidden}
.meter__bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--tan,#b9824f),var(--red))}
.meter small{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-soft)}
.section{margin-top:clamp(40px,6vw,72px)}
.section h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:18px}
.includes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.includes li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.includes svg{flex:0 0 auto;width:18px;height:18px;color:var(--red-ink);margin-top:1px}
.trust{display:flex;gap:16px;align-items:center;background:var(--charcoal);color:#fff;border-radius:var(--r-lg);padding:22px 24px}
.trust__ph{width:60px;height:60px;border-radius:50%;background:var(--charcoal-2);display:grid;place-items:center;font-family:var(--serif);font-size:1.5rem;flex:0 0 auto}
.trust__b{font-size:14px;color:rgba(255,255,255,.78);line-height:1.55}
.trust__b b{color:#fff}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:15px;min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red-ink);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq p{margin:10px 0 0;color:var(--ink-soft);font-size:14.5px}

/* ===== checkout ===== */
.co{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,44px);align-items:start}
.co-sum{position:sticky;top:88px}
.express{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.btn--apple{background:#000;color:#fff} .btn--gpay{background:#fff;color:var(--ink);border:1px solid var(--line)}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:12.5px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.cardrow{display:grid;grid-template-columns:1fr 96px 82px;gap:10px}
.lockcue{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.derisk{background:#f1f7f1;border:1px solid #cfe3cf;color:#3a5a3a;border-radius:var(--r);padding:12px 14px;font-size:13px;margin-top:16px}
.sum-row{display:flex;justify-content:space-between;font-size:14.5px;padding:9px 0;border-top:1px solid var(--line-2)}
.sum-row:first-of-type{border-top:0}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.sum-total b{font-family:var(--serif);font-size:1.8rem}

/* ===== my bookings ===== */
.tabs{display:inline-flex;gap:4px;background:var(--paper-2);border-radius:var(--r);padding:4px;margin-bottom:20px}
.tabs button{border:0;background:transparent;font-weight:600;font-size:14px;padding:9px 18px;border-radius:6px;cursor:pointer;color:var(--ink-soft)}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.bkitem{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:12px}
.bkitem__d{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.bkitem__d .d{font-family:var(--serif);font-size:1.4rem;line-height:1}
.bkitem__d .m{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.bkitem__m .r{font-weight:600}
.bkitem__m .s{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.bkitem__a{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.bkitem__a button.mini{color:#15110e}  /* fix: Storefront made the Cancel button text white-on-white */

/* ===== success ===== */
.done{max-width:560px;margin:0 auto;text-align:center;padding-top:clamp(20px,5vw,50px)}
.done__ring{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:#eef5ee;display:grid;place-items:center;color:var(--st-conf)}
.done__ring svg{width:34px;height:34px}
.done h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.done .recap{text-align:left;margin:24px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.done .recap .row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line-2);font-size:14.5px}
.done .recap .row:first-child{border-top:0}
.done .recap .row .k{color:var(--ink-soft)}

@media(max-width:760px){
  .buyhero{grid-template-columns:1fr}
  .co{grid-template-columns:1fr}.co-sum{position:static;order:-1}
  .includes{grid-template-columns:1fr}
  /* Booking card on a phone: date + trip up top, then ONE tidy action row under a hairline —
     status pill left, Reschedule/Cancel right, all vertically centered (the Cancel form is
     display:contents so its button sits in the same flex row instead of floating). */
  .bkitem{grid-template-columns:56px 1fr;grid-template-areas:"d m" "a a";gap:12px 14px;padding:16px}
  .bkitem__d{grid-area:d}.bkitem__m{grid-area:m}
  .bkitem__a{grid-area:a;justify-content:flex-end;align-items:center;border-top:1px solid var(--line);padding-top:12px}
  .bkitem__a .badge{margin-right:auto}
  .cardrow{grid-template-columns:1fr 1fr}
  .usebar{flex-direction:column;align-items:stretch;gap:12px;text-align:left}
  .usebar .btn{width:100%}
  .chip a{padding-block:12px}
}

/* ===== auth / login ===== */
.authcard{max-width:420px;margin:clamp(10px,4vw,40px) auto 0}
.remember{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);margin-top:14px}
.remember input{width:17px;height:17px;accent-color:var(--red)}
.authalt{text-align:center;font-size:13.5px;color:var(--ink-soft);margin-top:18px}
.authalt a{color:var(--red-ink);font-weight:600;text-decoration:none}
.rail a.rail__out{margin-top:10px;border-top:1px solid var(--line-2);border-radius:0;padding-top:16px;color:var(--ink-soft)}
.rail a.rail__out:hover{background:transparent;color:var(--red-ink)}
@media(max-width:860px){.rail a.rail__out{border-top:0;padding-top:11px;margin-top:0}}

/* ===== overview / profile / orders ===== */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.tile .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.tile .v{font-family:var(--serif);font-size:2rem;margin-top:8px;line-height:1}
.tile .vsub{font-size:13px;color:var(--ink-soft);margin-top:4px}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.qcard{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s}
.qcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.qcard svg{width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:1.7}
.qcard b{font-size:1.05rem;font-family:var(--serif);font-weight:500}
.qcard span{font-size:13px;color:var(--ink-soft)}
.section-h{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:26px 0 14px}
.order{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:12px}
.order__m .r{font-weight:600}
.order__m .s{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.order__a{display:flex;gap:10px;align-items:center}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:760px){.tiles,.qcards{grid-template-columns:1fr}.order{grid-template-columns:1fr;gap:12px}.order__a{justify-content:flex-start}.formgrid{grid-template-columns:1fr}}

/* ===== deep-test fixes (mobile reflow · tap targets · text-zoom · print · motion) ===== */
.row2 input[type=date],.row2 input[type=time]{min-width:0}
.mcard__route{font-size:clamp(1.05rem,4.6vw,1.35rem);white-space:nowrap}
.ledger li{flex-wrap:wrap;gap:2px 8px}
.co{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}   /* rem min collapses under text-zoom (1.4.4) */
.remember input{width:21px;height:21px}
@media(max-width:760px){
  .row2{grid-template-columns:1fr}                 /* fixes 320px reflow on book.html */
  .mini{min-height:44px;padding:11px 14px}
  .tabs button{min-height:44px}
  .faq summary{min-height:44px}
  .remember{min-height:44px}
  .note a,.authalt a,.txt-owner a{display:inline-block;padding:6px 2px}
}
@media(max-width:380px){                            /* fixes pass.html topbar overflow at 320 */
  .topbar__in{gap:10px;padding:0 14px}
  .topbar .brand{font-size:12px;letter-spacing:.1em}
  .topbar .btn--sm{padding:9px 11px;font-size:13px}
}
@media print{
  .topbar,.rail,.banner .btn,.express{display:none}
  .mcard,.usebar,.trust,.nowstrip{background:#15110e !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .btn--red,.btn{border:1px solid #15110e;color:#15110e !important;background:#fff !important;box-shadow:none}
  .shell{display:block}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ===== visual-regression fixes (regressions from prior fix round) ===== */
.ledger .delta{margin-left:auto}                                   /* keep delta right-aligned even when it wraps at 320 */
@media(max-width:400px){ .mcard{aspect-ratio:auto;min-height:200px} }   /* card grows to fit the name on small phones (line-clamp regression) */
@media(max-width:800px){ .co-sum{position:static;order:-1} }            /* checkout summary stays ABOVE Pay in the 761-798px single-column band */

/* ===== plugin: WooCommerce My Account integration ===== */
.zd-app{font-family:var(--sans)}
.zd-app .page-h h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.2rem);letter-spacing:-.02em;margin:0}
.zd-app .panel h3{font-family:var(--serif)}
.zd-notice{background:#fdecec;border:1px solid #f3c2c2;color:#b00010;border-radius:var(--r);padding:12px 16px;margin-bottom:18px;font-size:14px}
.zd-notice--ok{background:#eef5ee;border-color:#cfe3cf;color:#3a5a3a}
.seg label{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:12px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink-soft)}
.seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.book select{width:100%;font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-family:var(--sans);color:var(--ink)}

/* ===== plugin: "choose a pass" gallery (no-active-pass empty state) ===== */
/* Storefront underlines links inside the account content with a higher-specificity
   selector than .zd-app .btn, so every button-styled <a> (Book a transfer, View my pass,
   the old "Choose a pass", etc.) rendered underlined. !important guarantees the override
   on both <a> and <span> buttons (consistent with the Woo-override layer in woo-brand.css). */
.zd-app .btn{text-decoration:none !important}
.choose{max-width:900px}
.choose__lead{max-width:580px;margin:-6px 0 22px}
.choose-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.lcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.lcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.lcard:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lcard__media{position:relative;display:block;aspect-ratio:1000/650;background:var(--paper-2);overflow:hidden}
.lcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease)}
.lcard:hover .lcard__media img{transform:scale(1.045)}
.lcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,11,.62),rgba(15,13,11,0) 52%)}
.lcard__route{position:absolute;left:16px;bottom:12px;z-index:1;color:#fff;font-family:var(--serif);font-size:1.3rem;letter-spacing:-.01em;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.lcard__body{display:flex;flex-direction:column;gap:10px;padding:15px 17px 17px;flex:1}
.lcard__price{display:flex;align-items:baseline;gap:7px}
.lcard__price .big{font-family:var(--serif);font-size:1.5rem;line-height:1}
.lcard__price .per{font-size:13px;color:var(--ink-soft)}
.lcard__feat{font-size:13px;color:var(--ink-soft)}
.lcard .btn{margin-top:auto}
.choose__credit{margin-top:18px;max-width:640px;font-size:11.5px;color:var(--ink-soft);line-height:1.55}
@media(max-width:600px){.choose-grid{grid-template-columns:1fr}}

/* ===== plugin: multi-pass picker on Book a transfer ===== */
.passpick{display:flex;align-items:center;gap:10px;margin:-6px 0 18px;flex-wrap:wrap}
.passpick label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.passpick select{font-size:15px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-family:var(--sans);color:var(--ink);max-width:100%}

/* audit C15: disabled primary CTA is unmistakable + an enable hint */
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.zd-needtime{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:8px}