/* V35 optional dark mode — additive only; current site remains the default/normal theme. */
.theme-toggle{width:38px;height:38px;flex:0 0 38px;border:1px solid #ffffff38;border-radius:50%;background:#0b0b0bcc;color:#f5f5f2;display:grid;place-items:center;cursor:pointer;font-size:17px;line-height:1;transition:transform .2s,border-color .2s,background .2s;color .2s;z-index:3}.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--primary);color:var(--primary);outline:none}.theme-toggle:active{transform:scale(.94)}
/* Only surfaces that were plain light/white in the normal design are converted. Image/gradient overlays are never touched. */
html[data-theme="dark"] .theme-light-surface{background-color:#111318!important;color:#f5f5f2!important;border-color:#ffffff24!important}
html[data-theme="dark"] .theme-light-surface.theme-white-surface{background-color:#15171c!important}
html[data-theme="dark"] .theme-light-surface .theme-dark-text{color:#f5f5f2!important}
html[data-theme="dark"] .theme-light-surface .theme-muted-text{color:#b8bcc6!important}
html[data-theme="dark"] .theme-light-surface input,html[data-theme="dark"] .theme-light-surface select,html[data-theme="dark"] .theme-light-surface textarea{color:#f5f5f2!important;border-color:#ffffff35!important}
html[data-theme="dark"] .theme-light-surface input::placeholder,html[data-theme="dark"] .theme-light-surface textarea::placeholder{color:#aeb2bb!important}
html[data-theme="dark"] .theme-light-surface svg,html[data-theme="dark"] .theme-light-surface svg *{--theme-symbol:#f5f5f2}
html[data-theme="dark"] .theme-light-surface [style*="border"]{border-color:#ffffff30}
/* Keep the project's single primary blue and intentional black/white CTA contrast unchanged. */
html[data-theme="dark"] .nav-book,html[data-theme="dark"] [class*="primary"],html[data-theme="dark"] [class*="accent"]{--primary:#14b8a6}
@media(max-width:1024px){.theme-toggle{margin-left:auto}.site-header>.login+.theme-toggle{margin-left:0}}
@media(max-width:560px){.theme-toggle{width:36px;height:36px;flex-basis:36px;font-size:16px}.site-header{gap:10px}}
@media(prefers-reduced-motion:reduce){.theme-toggle{transition:none}}

/* V36 — targeted dark-mode visibility fixes only. */
/* Three-colour rule in dark mode: black surfaces, white copy, single blue primary. */
html[data-theme="dark"] .theme-light-surface .theme-muted-text,
html[data-theme="dark"] .theme-light-surface p,
html[data-theme="dark"] .theme-light-surface small{color:#f5f5f2!important;-webkit-text-fill-color:#f5f5f2!important}

/* Services / section 04: preserve the arrival-to-ride animation after its light surface turns dark. */
html[data-theme="dark"] .services-page .svc-transfer{background:#0b0b0b!important;color:#f5f5f2!important}
html[data-theme="dark"] .services-page .svc-transfer .transfer-head>span,
html[data-theme="dark"] .services-page .svc-transfer .transfer-line small,
html[data-theme="dark"] .services-page .svc-transfer .transfer-note{color:#f5f5f2!important;-webkit-text-fill-color:#f5f5f2!important}
html[data-theme="dark"] .services-page .svc-transfer .transfer-line{border-top-color:#f5f5f2!important}
html[data-theme="dark"] .services-page .svc-transfer .transfer-line>div:not(.moving-dot):before{background:#14b8a6!important;border-color:#f5f5f2!important}
html[data-theme="dark"] .services-page .svc-transfer .moving-dot{color:#14b8a6!important;-webkit-text-fill-color:#14b8a6!important;text-shadow:0 0 14px #14b8a6}
html[data-theme="dark"] .services-page .svc-transfer em{color:#14b8a6!important;-webkit-text-fill-color:#14b8a6!important}

/* Safety Deposit (Explore): make the hero lock read as one clean lock symbol. */
.safety-page .lock{background:#f5f5f2;border:2px solid #14b8a6;box-shadow:0 0 0 1px #0b0b0b,0 0 24px #14b8a644}
.safety-page .lock i{border-color:#14b8a6;border-bottom:0;background:transparent}
.safety-page .lock b{background:#0b0b0b;border-radius:5px 5px 2px 2px}
html[data-theme="dark"] .safety-page .lock{background:#f5f5f2!important;border-color:#14b8a6!important}
html[data-theme="dark"] .safety-page .lock i{border-color:#14b8a6!important;border-bottom:0!important}
html[data-theme="dark"] .safety-page .lock b{background:#0b0b0b!important}

/* Home 2: light sections converted to dark keep copy, route/spec artwork and motion fully visible. */
html[data-theme="dark"] .h2-page .planner,
html[data-theme="dark"] .h2-page .compare,
html[data-theme="dark"] .h2-page .calculator{background:#0b0b0b!important;color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .planner-copy h2,
html[data-theme="dark"] .h2-page .compare-copy h2,
html[data-theme="dark"] .h2-page .calc-copy h2{color:#f5f5f2!important;-webkit-text-fill-color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .planner-copy p,
html[data-theme="dark"] .h2-page .compare-copy p,
html[data-theme="dark"] .h2-page .calc-copy p,
html[data-theme="dark"] .h2-page .stop small,
html[data-theme="dark"] .h2-page .spec small,
html[data-theme="dark"] .h2-page .calc-scale{color:#f5f5f2!important;-webkit-text-fill-color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .planner-copy>span,
html[data-theme="dark"] .h2-page .compare-copy>span,
html[data-theme="dark"] .h2-page .calc-copy>span{color:#14b8a6!important;-webkit-text-fill-color:#14b8a6!important}
html[data-theme="dark"] .h2-page .city-line{background:repeating-linear-gradient(90deg,transparent 0 62px,#f5f5f21f 63px 64px),repeating-linear-gradient(0deg,transparent 0 62px,#f5f5f218 63px 64px)!important}
html[data-theme="dark"] .h2-page .route-scooter{background:#f5f5f2!important;color:#14b8a6!important}
html[data-theme="dark"] .h2-page .stop{border-left-color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .halo{border-color:#f5f5f244!important;box-shadow:0 0 0 70px #f5f5f20c,0 0 0 140px #f5f5f208!important}
html[data-theme="dark"] .h2-page .outline-scooter i{border-color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .outline-scooter span{border-color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .outline-scooter span:after{background:#f5f5f2!important}
html[data-theme="dark"] .h2-page .saving-line i{background:#f5f5f2!important}
html[data-theme="dark"] .h2-page .calc-stage input{accent-color:#14b8a6!important}


/* V44 — requested scooter colour handling + single site primary.
   Normal mode keeps the existing scooter treatment. Dark mode changes only
   scooter artwork colours for contrast; image/text overlays are untouched. */
:root{--primary:#14b8a6}
html[data-theme="dark"]{--primary:#14b8a6}

/* Home 1 scooter cards: light wheels/body details in dark mode, one teal accent. */
html[data-theme="dark"] .fleet-section .scooter-card{background:#0b0b0b!important;color:#f5f5f2!important;border-color:#ffffff24!important}
html[data-theme="dark"] .fleet-section .card-top p,
html[data-theme="dark"] .fleet-section .specs span{color:#f5f5f2!important}
html[data-theme="dark"] .fleet-section .specs b{color:#f5f5f2!important}
html[data-theme="dark"] .fleet-section .mini-scooter i{border-color:#f5f5f2!important}
html[data-theme="dark"] .fleet-section .mini-scooter span,
html[data-theme="dark"] .fleet-section .mini-scooter span:after{background:#f5f5f2!important}
html[data-theme="dark"] .fleet-section .mini-scooter.s1 span{background:var(--primary)!important}
html[data-theme="dark"] .fleet-section .mini-scooter.s1 span:after{background:#f5f5f2!important}
html[data-theme="dark"] .fleet-section .card-top>b{border-color:#f5f5f2!important;color:#f5f5f2!important}
html[data-theme="dark"] .fleet-section .scooter-card:first-child .card-top>b{background:var(--primary)!important;border-color:var(--primary)!important;color:#0b0b0b!important}

/* Home 2 scooter artwork: no overlay changes, only artwork colours. */
html[data-theme="dark"] .h2-page .m2-scooter .wheel{border-color:#f5f5f2!important;box-shadow:inset 0 0 0 8px #0b0b0b!important}
html[data-theme="dark"] .h2-page .m2-scooter .body{background:var(--primary)!important}
html[data-theme="dark"] .h2-page .m2-scooter .stem,
html[data-theme="dark"] .h2-page .m2-scooter .handle{background:#f5f5f2!important}
html[data-theme="dark"] .h2-page .route-scooter{background:#f5f5f2!important;color:var(--primary)!important}
html[data-theme="dark"] .h2-page .outline-scooter i,
html[data-theme="dark"] .h2-page .outline-scooter span{border-color:#f5f5f2!important}
html[data-theme="dark"] .h2-page .outline-scooter span:after{background:#f5f5f2!important}