/* Dark theme for the homepage and the main navigation pages (see themedRoutes in home-theme.js).
   Every other route keeps its original palette. */
.custom-navbar .home-theme-choice { display:none; flex-shrink:0; align-items:center; gap:7px; margin:0 16px 0 0; white-space:nowrap; cursor:pointer; color:#393580; font:600 13px 'Instrument Sans',sans-serif; }
html[data-theme-route] .custom-navbar .home-theme-choice { display:inline-flex; }
@media (max-width:575px) { .custom-navbar .home-theme-choice { gap:5px; margin-right:8px; font-size:12px; } }
.home-theme-choice input[type=checkbox] { appearance:auto; width:18px; height:18px; margin:0; accent-color:#6860ce; cursor:pointer; }
.home-theme-choice input:focus-visible { outline:3px solid #48c9c5; outline-offset:4px; }
/* Mid-size desktops: checkbox + moon only; the words stay available to screen readers and as a tooltip. */
@media (min-width:992px) and (max-width:1399px) {
    .custom-navbar .home-theme-choice { margin-right:10px; }
    .home-theme-choice .home-theme-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (min-width:992px) and (max-width:1023px) { .custom-navbar .home-theme-choice { margin-right:6px; } }
:is(.navbar-brand,.steps-logo) .brand-logo-dark { display:none; } /* beats the header's .navbar-brand img { display:block } */

/*
 * Dark theme.
 * - Neutral white page surfaces turn dark.
 * - Pastel panels become deep shades of the same hue; their text maps purple -> lavender,
 *   near-black -> light, grey -> muted.
 * - Strong brand colours (purple sections, teal cards, purple buttons) stay as they are.
 *   White items on teal keep their look; cards on the purple section use the navy surface.
 */
html[data-cico-dark] {
    --body-bg:#0f1121;
    --hd-surface:#181b30;
    --hd-raised:#22264a;
    --hd-border:#2d3257;
    --hd-text:#eceef8;
    --hd-muted:#b3b7d4;
    --hd-heading:#b4b3ff; /* brand purple, lifted for dark backgrounds */
    --hd-ring:rgba(180,179,255,.4);
    --hd-band:#151829; /* replaces the light grey-lavender page bands (#ececf5 / #f0f0f7) */
    --hd-card:#1e2240; /* replaces white cards that sit on those bands */
    background:var(--body-bg);
}

/* Header */
html[data-cico-dark] .custom-navbar { background:var(--hd-surface); border-bottom-color:var(--hd-border); box-shadow:0 2px 10px rgba(0,0,0,.35); color:var(--hd-text); }
html[data-cico-dark] .brand-logo-light { display:none; }
/* Same display and box as the light logo (inline on desktop, block below 992px) so the header never shifts. */
html[data-cico-dark] .brand-logo-dark { display:inline; aspect-ratio:182/39; object-fit:contain; }
@media (max-width:991px) { html[data-cico-dark] .navbar-brand .brand-logo-dark { display:block; } }
html[data-cico-dark] .custom-navbar .home-theme-choice { color:var(--hd-heading); }
/* The header sets menu links to #111 between 992px and 1130px; keep them light on the dark bar. */
html[data-cico-dark] .custom-navbar .navbar-nav .nav-link { color:var(--hd-text); }
html[data-cico-dark] .custom-navbar .navbar-nav .nav-link:is(:hover,.active) { color:#fff; }
html[data-cico-dark] .custom-navbar .desktop-header-action.nav-link { color:var(--hd-heading); }
html[data-cico-dark] .custom-navbar :is(.cart-icon,.menu-toggle img) { filter:brightness(0) invert(.92); }
html[data-cico-dark] .custom-navbar .language-selector .dropdown-toggle { color:var(--hd-muted) !important; }
html[data-cico-dark] .custom-navbar .language-selector .dropdown-menu { background:var(--hd-surface); border:1px solid var(--hd-border); }
html[data-cico-dark] .custom-navbar .language-selector .dropdown-item { color:var(--hd-text); }
html[data-cico-dark] .custom-navbar .language-selector .dropdown-item:is(:hover,:focus) { background:var(--hd-raised); color:#fff; }
html[data-cico-dark] .custom-navbar .login-btn { border-color:var(--hd-heading); color:var(--hd-heading); }
html[data-cico-dark] .custom-navbar .login-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* Hero quick navigation: the white frame darkens; the teal card inside keeps its colours. */
html[data-cico-dark] .drop-down-icon img { filter:brightness(0) invert(.78); }
html[data-cico-dark] .info-card-back { background:var(--hd-surface); box-shadow:0 0 0 1px var(--hd-border),0 10px 30px rgba(0,0,0,.45); }

/* Headings and text that sit directly on the page background */
html[data-cico-dark] :is(.registreerFiets > .container > h2,.registered-section h2,.cicopassSteps > .container > h2,.register-section-text p,.faq-left h2) { color:var(--hd-heading); }
html[data-cico-dark] :is(.registreerFiets .lead,.faq-left p) { color:var(--hd-muted); }

/* Pastel panels as deep shades of the same colour */
html[data-cico-dark] .fiets-card-1 { background-color:#3a2431; }
html[data-cico-dark] :is(.fiets-card-2,.bottomCard1) { background-color:#2f2a22; }
html[data-cico-dark] :is(.fiets-card-3,.cp-partner-card) { background-color:#12363d; }
html[data-cico-dark] .bg-steps { background-color:#15333a; }
html[data-cico-dark] .cicopass-vision { background-color:#26231d !important; } /* overrides an inline style */
html[data-cico-dark] .testimonial-card { background-color:#35302a; }
html[data-cico-dark] :is(.fiets-card-1 h4,.fiets-card-2 h4,.cp-partner .cp-partner-eyebrow,.cp-partner h2,.bottomCard1 p) { color:var(--hd-heading); }
html[data-cico-dark] :is(.fiets-card-3 :is(h4,p),.bg-steps :is(h4,div)) { color:var(--hd-text); }
html[data-cico-dark] :is(.fiets-card-1 p,.fiets-card-2 p,.cp-partner-card) { color:var(--hd-muted); }
/* Tom section text colours are inline styles (and Bootstrap's .text-muted), so these need !important. */
html[data-cico-dark] .cicopass-vision :is(h2,h3) { color:var(--hd-heading) !important; }
html[data-cico-dark] .testimonial-card h6 { color:var(--hd-text) !important; }
html[data-cico-dark] .testimonial-card :is(p,.text-muted) { color:var(--hd-muted) !important; }
html[data-cico-dark] .bg-steps .step-number { background-color:rgba(255,255,255,.1); color:var(--hd-text); }

/* "Why register" cards on the purple section use the same navy surface as the rest of the theme. */
html[data-cico-dark] .je-fiets-boxes { background-color:var(--hd-surface); box-shadow:0 0 0 1px rgba(180,179,255,.18),0 8px 20px rgba(0,0,0,.25) !important; } /* beats Bootstrap .shadow-sm */
html[data-cico-dark] .je-fiets-boxes p { color:var(--hd-text); }
html[data-cico-dark] .je-fiets-boxes span { color:var(--hd-muted); }
html[data-cico-dark] .je-fiets-icon-back { background:rgba(83,195,191,.16); }

/* Faded side bikes: white photos at 30% turn muddy grey on dark, so fade them less. */
html[data-cico-dark] .slider-images img:not(.active) { opacity:.55; }

/* Purple buttons on the dark page get a soft ring and lighten (not darken) on hover. */
html[data-cico-dark] :is(.control-btn,.register-section-text .btn) { box-shadow:0 0 0 1px var(--hd-ring); }
html[data-cico-dark] :is(.control-btn,.register-section-text .btn):hover { background-color:#4b4bb3; }

/* Brand strip: logos are white-backed images, so show them on equal white tiles. */
html[data-cico-dark] .brandsArea_bx77 { background:transparent; }
html[data-cico-dark] .brandLogo_bx77 { background:#fff; padding:24px; border-radius:16px; }

/* FAQ panel */
html[data-cico-dark] .faq-section .container { background-color:var(--hd-surface); box-shadow:0 0 0 1px var(--hd-border); }
html[data-cico-dark] .faq-item { border-bottom-color:var(--hd-border); }
html[data-cico-dark] .faq-item:hover { background-color:rgba(180,179,255,.06); }
html[data-cico-dark] .faq-item.active,
html[data-cico-dark] .faq-item.faq-active .faq-answer { background-color:var(--hd-raised) !important; }
html[data-cico-dark] .faq-question { color:var(--hd-text); }
html[data-cico-dark] .faq-question .icon { color:var(--hd-heading); }
html[data-cico-dark] .faq-answer { color:var(--hd-muted); }
html[data-cico-dark] .view-more a { border-color:var(--hd-heading); color:var(--hd-heading); }
html[data-cico-dark] .view-more a:hover { background-color:var(--primary); border-color:var(--primary); color:#fff; }

/* "Live Chat With Tom" popup: purple header stays; body, bubbles and input go dark.
   Bootstrap's .bg-light/.text-dark utilities use !important, so the bubble rules do too. */
html[data-cico-dark] .chat-popup { background:var(--hd-surface); color:var(--hd-text); box-shadow:0 0 0 1px var(--hd-border),0 10px 30px rgba(0,0,0,.5); }
html[data-cico-dark] .chat-popup .bg-light { background-color:var(--hd-raised) !important; }
html[data-cico-dark] .chat-popup .text-dark { color:var(--hd-text) !important; }
html[data-cico-dark] .chat-popup .typing-indicator { background-color:var(--hd-raised); color:var(--hd-muted); }
html[data-cico-dark] .chat-popup .typing-dot { background-color:var(--hd-muted); }
html[data-cico-dark] .chat-popup .form-control { background-color:var(--body-bg); border-color:var(--hd-border); color:var(--hd-text); }
html[data-cico-dark] .chat-popup .form-control::placeholder { color:var(--hd-muted); }
html[data-cico-dark] .chat-popup .form-control:focus { border-color:var(--hd-heading); box-shadow:0 0 0 .2rem rgba(180,179,255,.25); }
html[data-cico-dark] .chat-popup .btn-outline-primary { border-color:var(--hd-heading); color:var(--hd-heading); }
html[data-cico-dark] .chat-popup .btn-outline-primary:hover { background-color:var(--primary); border-color:var(--primary); color:#fff; }

/* Mobile bottom navigation */
html[data-cico-dark] .mobile-bottom-nav { background:var(--hd-surface); border-top-color:var(--hd-border); box-shadow:0 -3px 15px rgba(0,0,0,.4); }
html[data-cico-dark] .mobile-bottom-nav .bottom-item { color:var(--hd-muted); }
html[data-cico-dark] .mobile-bottom-nav .bottom-item.active { color:var(--hd-heading); }

/* ===================== Navigation pages ===================== */

/* Breadcrumb bar */
html[data-cico-dark] .breadCrumb { background:var(--hd-band); border-bottom:1px solid var(--hd-border); }
html[data-cico-dark] .breadCrumb :is(a,span) { color:var(--hd-muted); }
html[data-cico-dark] .breadCrumb :is(span:last-child,.cico-breadcrumb-current) { color:var(--hd-text); }

/* Light panel pictures with a curved bottom edge: same shape, recoloured to the band colour. */
html[data-cico-dark] :is(.main-page-section,.main-faq-page) { background-image:url('../images/searchBikeBG-dark.png'); }
html[data-cico-dark] :is(.product-section,.main-contact-page,.main-login-page) { background-image:url('../images/Product-banner-dark.png'); }

/* Plain light bands (the shop sets its band colour inline, hence !important) */
html[data-cico-dark] :is(.search-bike-section,.hack-bike-section,.cycleSlider) { background-color:var(--hd-band) !important; }
/* BikeShield page: its "registered bikes" block is a light band with a white oval (productDetails.css). */
html[data-cico-dark] #app:has(.product-section) .registered-section { background-color:var(--hd-band); }
html[data-cico-dark] #app:has(.product-section) .registered-section::before { background:var(--body-bg); }

/* White cards on those bands */
html[data-cico-dark] :is(.fiets-card,.bike-card,.search-section,.option-card,.contact-section,.form-container,.cicoCard_ab12) { background-color:var(--hd-card); border-color:var(--hd-border); box-shadow:0 0 0 1px var(--hd-border),0 10px 24px rgba(0,0,0,.25); }
/* Photo areas on bike/product cards: a dark frame instead of a white box. */
html[data-cico-dark] .bike-image { background-color:var(--hd-band); border-color:var(--hd-border); }
/* Pastel picture frames inside the register cards: deep shades, like the homepage cards. */
html[data-cico-dark] .fiets-card-img1 { background-color:#2f2a22; }
html[data-cico-dark] .fiets-card-img { background-color:#12363d; }

/* Form fields (the contact form uses plain inputs without a class) */
html[data-cico-dark] :is(#app,.main-login-page) :is(.form-control,.form-select,textarea,.contact-section input) { background-color:var(--body-bg); border:1px solid var(--hd-border); color:var(--hd-text); }
html[data-cico-dark] :is(#app,.main-login-page) :is(.form-control,.form-select,textarea,.contact-section input)::placeholder { color:var(--hd-muted); opacity:1; }
html[data-cico-dark] :is(#app,.main-login-page) :is(.form-control,.form-select,textarea,.contact-section input):focus { border-color:var(--hd-heading); box-shadow:0 0 0 .2rem rgba(180,179,255,.25); outline:none; }
/* Radzen dropdowns (bicycleregistration.css forces a light background with !important) */
html[data-cico-dark] .rz-dropdown { background:var(--body-bg) !important; border:1px solid var(--hd-border) !important; color:var(--hd-text) !important; }
html[data-cico-dark] .rz-dropdown :is(.rz-dropdown-label,.rz-inputtext) { color:var(--hd-text) !important; }
html[data-cico-dark] .rz-dropdown .rz-placeholder { color:var(--hd-muted) !important; }
html[data-cico-dark] .rz-dropdown-panel { background:var(--hd-surface); border:1px solid var(--hd-border); }
html[data-cico-dark] .rz-dropdown-panel :is(.rz-dropdown-item,.rz-dropdown-item span) { color:var(--hd-text); }
html[data-cico-dark] .rz-dropdown-panel .rz-dropdown-item:hover { background:var(--hd-raised); }

/* Lost & Found dashboard: its own colour variables plus hard-coded white panels. Map popups stay light. */
html[data-cico-dark] .lf-page { --lf-ink:var(--hd-text); --lf-muted:var(--hd-muted); --lf-line:var(--hd-border); --lf-cf-border:var(--hd-border); --lf-cf-brand-pale:#12362f; background:var(--body-bg); }
html[data-cico-dark] :is(.lf-shell,.lf-filters,.lf-results-summary,.lf-map-card,.lf-empty,.lf-explanation,.lf-insight,.lf-site-services,.lf-footer-space) { background:var(--hd-card); border-color:var(--hd-border); }
html[data-cico-dark] .lf-hero { background:radial-gradient(circle at 88% 0%,rgba(180,179,255,.12),transparent 29%),linear-gradient(135deg,var(--hd-card) 0%,var(--hd-surface) 100%); }
html[data-cico-dark] .lf-workspace { background:var(--hd-band); }
html[data-cico-dark] :is(.lf-sync-card,.lf-source-pills span) { background:rgba(15,17,33,.6); border-color:var(--hd-border); }
html[data-cico-dark] :is(.lf-sync-card button,.lf-control,.lf-expand-button,.lf-insight button) { background:var(--body-bg); border-color:var(--hd-border); color:var(--hd-text); }
html[data-cico-dark] :is(.lf-filter-icon,.lf-insight-icon,.lf-deduped) { background:var(--hd-raised); }
html[data-cico-dark] .lf-readonly-note { background:var(--hd-surface); border-color:var(--hd-border); }
html[data-cico-dark] .lf-toggle-track { background:#3a3f63; }
html[data-cico-dark] .lf-filter-off .lf-map::after { background:rgba(15,17,33,.9); }
html[data-cico-dark] .lf-site-services .je-fiets-boxes { background-color:var(--hd-surface); }
html[data-cico-dark] .lf-field label { color:var(--hd-text); }
html[data-cico-dark] :is(.lf-map-toggle span,.lf-deduped) { color:var(--hd-muted); }
html[data-cico-dark] .lf-reset-button { color:#5fd3b0; }
html[data-cico-dark] .lf-sync-card { color:var(--hd-text); }
html[data-cico-dark] .lf-sync-card small { color:var(--hd-muted); }
html[data-cico-dark] .lf-site-services .je-fiets-boxes { border-color:var(--hd-border); }

/* Native controls (date picker icons, checkboxes) follow the dark scheme on themed pages. */
html[data-cico-dark] :is(#app,.main-login-page) :is(input,select,textarea) { color-scheme:dark; }

/* Bike search: "only missing or stolen" filter pill */
html[data-cico-dark] .btn-filter { background:var(--hd-card); border:1px solid var(--hd-border); }
html[data-cico-dark] .btn-filter label { color:var(--hd-heading); }

/* ---- Page text: purple -> lavender, near-black -> light, grey -> muted ---- */

/* Page titles and intro text on the dark bands */
html[data-cico-dark] :is(.contactText > span,.main-page-section h1,.search-bike-content h1,.search-bike-section > .container > p b,.search-bike-section h6,.search-bike-section h6 a,.product-info :is(h1,h2,h3),.contactText :is(h1,h2,h3),.loginCardSection > h1) { color:var(--hd-text); }
html[data-cico-dark] :is(.contactText p,.loginCardSection > p,.product-info p,.search-bike-section > .container > p) { color:var(--hd-muted); }
html[data-cico-dark] .hack-title { color:var(--hd-heading); }
html[data-cico-dark] .hack-description { color:var(--hd-muted); }
html[data-cico-dark] .hack-description strong { color:var(--hd-text); }

/* BikeShield product block (Bootstrap colour utilities use !important) */
html[data-cico-dark] .product-info .text-dark { color:var(--hd-text) !important; }
html[data-cico-dark] .product-info .text-muted { color:var(--hd-muted) !important; }
html[data-cico-dark] .product-info .old-price { color:var(--hd-muted); }
html[data-cico-dark] .product-info :is(hr,.price,.quantity) { border-color:var(--hd-border); }
html[data-cico-dark] .informatiText h1,
html[data-cico-dark] .sticker-content h2 { color:var(--hd-heading); }
html[data-cico-dark] :is(.informatiText p,.sticker-content li) { color:var(--hd-muted); }
html[data-cico-dark] .sticker-content li { border-color:var(--hd-border); }
html[data-cico-dark] #app:has(.product-section) hr { border-color:var(--hd-border); opacity:1; }

/* "Reduce theft" block shared by several pages */
html[data-cico-dark] .sticker-content-section h1 { color:var(--hd-heading); }
html[data-cico-dark] .sticker-content-section p { color:var(--hd-muted); }
html[data-cico-dark] .sticker-content-section h3 { color:var(--hd-text); }

/* Cards: titles, body text, meta */
html[data-cico-dark] :is(.bike-card-body h6,.hack-card-title,.option-card h6,.contact-section h5,.fiets-card-body1 h5,.fiets-card-body1 .arrow1) { color:var(--hd-heading); }
html[data-cico-dark] .fiets-card-body1 { border-color:var(--hd-heading); }
html[data-cico-dark] :is(.bike-card-body p,.bike-card-body p strong,.bike-card-body p span,.hack-card-text,.hack-card-date,.fiets-card-body1 p,.contact-section .response-note) { color:var(--hd-muted); }
html[data-cico-dark] .bike-card-body .fw-bold { color:var(--hd-text); }
html[data-cico-dark] .bike-card-body .text-muted { color:var(--hd-muted) !important; }
html[data-cico-dark] .bike-card-body .badge.bg-light { background-color:var(--hd-raised) !important; color:var(--hd-text) !important; }

/* Form labels and helper text */
html[data-cico-dark] :is(.contact-section label,.form-container label) { color:var(--hd-text); }
html[data-cico-dark] .search-section label { color:var(--hd-heading); }
html[data-cico-dark] :is(.search-section .or-text,.form-container .form-check-label,.form-container .forgot,.social-login p) { color:var(--hd-muted); }
html[data-cico-dark] .form-container .register-link { color:var(--hd-text); }
html[data-cico-dark] .form-container .btn-link { color:var(--hd-heading); }

/* Login / register tabs */
html[data-cico-dark] .form-container .nav-tabs { border-bottom-color:var(--hd-border); }
html[data-cico-dark] .form-container .nav-tabs .nav-link { color:var(--hd-muted); background:transparent; }
html[data-cico-dark] .form-container .nav-tabs .nav-link.active { color:var(--hd-heading); border-bottom-color:var(--hd-heading); }

/* ---- Detail pages ---- */

/* Bike detail (lost-found-catalog.css variables); the purple hero keeps its colours. */
html[data-cico-dark] :is(.lf-catalog,.lf-detail) { --lf-page:var(--body-bg); --lf-card:var(--hd-card); --lf-ink:var(--hd-text); --lf-muted:var(--hd-muted); --lf-line:var(--hd-border); --lf-accent-soft:var(--hd-raised); }
html[data-cico-dark] .lf-detail-field { background:var(--hd-surface); border-color:var(--hd-border); }
html[data-cico-dark] .lf-filter-note { background:var(--hd-surface); }
html[data-cico-dark] :is(.lf-catalog-filters,.lf-catalog-results,.lf-detail-card) { background:var(--hd-card); }
html[data-cico-dark] .lf-detail-field small { color:var(--hd-heading); }
/* Stolen / found / missing lists (/BMS/...) */
html[data-cico-dark] .lf-catalog-hero { background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--lf-accent) 16%,transparent),transparent 30%),var(--hd-card); }
html[data-cico-dark] :is(.lf-catalog-control select,.lf-catalog-control input,.lf-contact-form :is(input,textarea,select)) { background:var(--body-bg); border-color:var(--hd-border); color:var(--hd-text); color-scheme:dark; }
html[data-cico-dark] :is(.lf-catalog-control select,.lf-catalog-control input)::placeholder { color:var(--hd-muted); }
html[data-cico-dark] :is(.lf-bike-card,.lf-catalog-pagination button,.lf-contact-dialog) { background:var(--hd-card); border-color:var(--hd-border); }
html[data-cico-dark] .lf-catalog-clear { background:var(--hd-raised); color:var(--hd-heading); }
html[data-cico-dark] .lf-catalog-total { border-color:var(--hd-border); }
/* Photo areas: dark frame instead of white/grey boxes */
html[data-cico-dark] :is(.lf-bike-media,.lf-detail-gallery img) { background:var(--hd-band); }

/* FAQ page */
html[data-cico-dark] .faq-page-content h1,
html[data-cico-dark] .faq-title { color:var(--hd-text); }
html[data-cico-dark] .faq-title i { color:var(--hd-heading); border-color:var(--hd-heading); }
html[data-cico-dark] .accordion-item { background:var(--hd-card); border-bottom-color:var(--hd-border); }
html[data-cico-dark] :is(.accordion-button,.accordion-button:not(.collapsed)) { background-color:var(--hd-card); color:var(--hd-text); }
html[data-cico-dark] .accordion-button::after { background-image:url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4b3ff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 011 0L8 9.293l5.354-4.647a.5.5 0 11.707.707l-6 5.5a.5.5 0 01-.707 0l-6-5.5a.5.5 0 010-.707z'/%3E%3C/svg%3E"); }
html[data-cico-dark] .accordion-body { background-color:var(--hd-card); color:var(--hd-muted); }

/* Blog article */
html[data-cico-dark] .hack-bike-section > .container > h1 { color:var(--hd-heading) !important; } /* inline colour */
html[data-cico-dark] .blog-content :is(h2,h3,h4,strong) { color:var(--hd-text); }
html[data-cico-dark] .blog-content :is(p,li) { color:var(--hd-muted); }
html[data-cico-dark] .hack-bike-section > .container > a { color:var(--hd-muted) !important; } /* inline colour */

/* Partner sign-up: step bar and form */
html[data-cico-dark] .steps-container { background:var(--hd-surface); border-bottom-color:var(--hd-border); }
html[data-cico-dark] .step h5 { color:var(--hd-heading); }
html[data-cico-dark] .step p { color:var(--hd-muted); }
html[data-cico-dark] .divider { background-color:var(--hd-border); }
html[data-cico-dark] .steps-btn { border-color:var(--hd-heading); color:var(--hd-heading); }
html[data-cico-dark] .steps-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-cico-dark] .regForm h1 { color:var(--hd-text); }
html[data-cico-dark] .regForm p { color:var(--hd-muted); }

/* ---- Pop-ups on dark pages ---- */

/* Radzen dialogs and the shopping bag side panel */
html[data-cico-dark] {
    --rz-dialog-background-color:var(--hd-surface);
    --rz-dialog-title-background-color:var(--hd-surface);
    --rz-dialog-title-color:var(--hd-text);
    --rz-dialog-title-border:1px solid var(--hd-border);
    --rz-dialog-close-color:var(--hd-muted);
    --rz-dialog-close-hover-color:#fff;
}
html[data-cico-dark] :is(.rz-dialog,.rz-dialog-side,.rz-dialog-side-content,.rz-dialog-side-titlebar) { background-color:var(--hd-surface); color:var(--hd-text); --bs-border-color:var(--hd-border); --bs-body-color:var(--hd-text); }
html[data-cico-dark] :is(.rz-dialog-title,.rz-dialog-side-title) { color:var(--hd-text); }
html[data-cico-dark] :is(.rz-dialog,.rz-dialog-side) :is(h3,h4,h5) { color:var(--hd-heading); } /* e.g. product name in the shopping bag */

/* Bootstrap modals (bike search pop-ups) */
html[data-cico-dark] .modal-content { background-color:var(--hd-surface); color:var(--hd-text); border:1px solid var(--hd-border); --bs-border-color:var(--hd-border); }
html[data-cico-dark] :is(.modal-header,.modal-footer) { border-color:var(--hd-border); }
html[data-cico-dark] .modal-content hr { border-color:var(--hd-border); opacity:1; }
html[data-cico-dark] .modal-content .btn-close { filter:invert(1) grayscale(1) brightness(1.6); }

/* Inside pop-ups: Bootstrap's purple/black text utilities use !important */
html[data-cico-dark] :is(.modal-content,.rz-dialog,.rz-dialog-side) :is(.text-primary,.modal-title) { color:var(--hd-heading) !important; }
html[data-cico-dark] :is(.modal-content,.rz-dialog,.rz-dialog-side) .text-dark { color:var(--hd-text) !important; }
html[data-cico-dark] :is(.modal-content,.rz-dialog,.rz-dialog-side) .text-muted { color:var(--hd-muted) !important; }
html[data-cico-dark] :is(.modal-content,.rz-dialog,.rz-dialog-side) :is(input:not([type=checkbox]):not([type=radio]),select) { background-color:var(--body-bg); border:1px solid var(--hd-border); color:var(--hd-text); color-scheme:dark; }

/* BikeShield code boxes (Radzen security code) */
html[data-cico-dark] .rz-security-code-input { background-color:var(--body-bg) !important; border-color:var(--hd-heading) !important; color:var(--hd-text) !important; }

/* ---- Checkout (section-bg-light layout) ---- */
html[data-cico-dark] .section-bg-light { background-color:var(--hd-band); color:var(--hd-text); --bs-border-color:var(--hd-border); --bs-table-color:var(--hd-text); --bs-table-bg:transparent; }
html[data-cico-dark] .section-bg-light .breadCrumb { background:transparent; border:0; }
html[data-cico-dark] .section-bg-light .bg-white { background-color:var(--hd-card) !important; box-shadow:0 0 0 1px var(--hd-border) !important; }
html[data-cico-dark] .section-bg-light :is(h1,h2,h3,h4,h5,.section-title,.title,.form-label,label,.table,.value,.field) { color:var(--hd-text); }
html[data-cico-dark] .section-bg-light .text-dark { color:var(--hd-text) !important; }
html[data-cico-dark] .section-bg-light .text-primary { color:var(--hd-heading) !important; }
html[data-cico-dark] .section-bg-light :is(.text-muted,.text-silver-darker,.desc) { color:var(--hd-muted) !important; }
html[data-cico-dark] .section-bg-light :is(hr,.table td,.table th) { border-color:var(--hd-border); }

/* Contact page: the form card floats over the next section (position:absolute in Style.css).
   With the white logo tiles in dark mode, keep the logos below the card and give the FAQ some room. */
html[data-cico-dark] #app:has(.main-contact-page) .brandsArea_bx77 { margin-bottom:48px; }
@media (min-width:769px) { html[data-cico-dark] #app:has(.main-contact-page) .brandsArea_bx77 { margin-top:96px; } }
@media (max-width:768px) { html[data-cico-dark] #app:has(.main-contact-page) .brandsArea_bx77 { margin-top:32px; } }

/* Register with BikeShield: step 2 box (RegisterType.razor) */
html[data-cico-dark] .fiets-box { background-color:var(--hd-card); box-shadow:0 0 0 1px var(--hd-border),0 10px 24px rgba(0,0,0,.25); }
html[data-cico-dark] .fiets-form h5 { color:var(--hd-heading); }
html[data-cico-dark] .fiets-form label { color:var(--hd-text); }
html[data-cico-dark] .fiets-form .btn-link { color:var(--hd-heading); }
html[data-cico-dark] .fiets-form .btn-link span { color:var(--hd-text) !important; } /* inline #000 on "OR" */

/* BMS lists: purple links and counts lifted for the dark cards */
html[data-cico-dark] :is(.lf-results-back,.lf-catalog-pagination button) { color:var(--hd-heading); }
html[data-cico-dark] .lf-catalog-total strong { color:color-mix(in srgb,var(--lf-accent) 55%,white); }

/* BikeShield page: information divider and the sticker illustration (dark copy keeps the stickers intact) */
html[data-cico-dark] .informati-section .container { border-bottom-color:var(--hd-border); }
html[data-cico-dark] .sticker-box { background-image:url('../images/prod-stckr-dark.png'); }

/* ---- Registration journey (/registration-design/...) ----
   --rj-navy is both a text colour and a panel/button colour there, so it stays; text rules are overridden instead. */
html[data-cico-dark] .rj-page { --rj-bg:var(--body-bg); --rj-border:var(--hd-border); --rj-muted:var(--hd-muted); --rj-mint-soft:#12362f; --rj-link:var(--hd-heading); color:var(--hd-text); }
html[data-cico-dark] .rj-page:is(.rj-catalog-page,.rj-account-page) { background-color:var(--hd-band); background-image:url('../images/Product-banner-dark.png'); }
html[data-cico-dark] .rj-topbar { background:rgba(24,27,48,.94); }
html[data-cico-dark] .rj-brand-link img[src$="cico-pass-logo.png"] { content:url('../images/logowhite.png'); } /* CicoPass logo only; dealer logos stay */
html[data-cico-dark] .rj-exit { border-color:var(--hd-border); color:var(--hd-heading); }
html[data-cico-dark] :is(.rj-brand-name,.rj-progress .active,.rj-intro h1,.rj-select.native select,.rj-bike-card,.rj-results-state strong,.rj-input input,.rj-confirm-page .rj-completion-hint) { color:var(--hd-text); }
html[data-cico-dark] :is(.rj-eyebrow,.rj-results-header span,.rj-summary-label,.rj-bike-copy > small,.rj-manual-card small,.rj-secure-note i,.rj-status,.rj-location-row > i,.rj-protection i,.rj-progress .complete b) { color:#5fd3c8; }
/* Cards and panels */
html[data-cico-dark] :is(.rj-filter-card,.rj-results-card,.rj-selection-summary,.rj-auth-card,.rj-confirm-card,.rj-bike-card,.rj-bike-copy) { background:var(--hd-card); }
html[data-cico-dark] .rj-confirm-header { background:linear-gradient(100deg,var(--hd-card) 55%,var(--hd-raised)); }
html[data-cico-dark] :is(.rj-select.muted,.rj-clear-filters,.rj-summary-grid span,.rj-catalog-reference,.rj-detail-grid > span,.rj-location-row,.rj-confirm-actions,.rj-preview-notice,.rj-catalog-page .rj-manual-card,.rj-summary-image) { background:var(--hd-surface); }
html[data-cico-dark] :is(.rj-heading-icon,.rj-report-number,.rj-catalog-page .rj-heading-icon,.rj-catalog-page .rj-select.is-filtered) { background:var(--hd-raised); }
html[data-cico-dark] :is(.rj-select,.rj-catalog-page .rj-select,.rj-input) { background:var(--body-bg); border-color:var(--hd-border); }
html[data-cico-dark] .rj-input input::placeholder { color:var(--hd-muted); }
html[data-cico-dark] :is(.rj-main-photo,.rj-photo-placeholder,.rj-summary-placeholder) { background:var(--hd-band); border-color:var(--hd-border); }
html[data-cico-dark] :is(.rj-bike-placeholder i,.rj-summary-placeholder i) { background:var(--hd-raised); }
html[data-cico-dark] :is(.rj-results-header,.rj-bike-meta,.rj-detail-grid > span) { border-color:var(--hd-border); }
html[data-cico-dark] .rj-auth-tabs button { background:transparent; }
html[data-cico-dark] .rj-confirm-actions button.secondary { background:var(--body-bg); color:var(--hd-text); border-color:var(--hd-border); }
/* The navy "next step" panel sits on a navy page, so give it an outline */
html[data-cico-dark] .rj-next-panel { box-shadow:0 0 0 1px var(--hd-border); }
html[data-cico-dark] .rj-page label { color:var(--hd-text); }
html[data-cico-dark] :is(.rj-photo-controls strong,.rj-photo-controls > div > span) { color:var(--hd-heading); }
html[data-cico-dark] :is(.rj-photo-controls p,.rj-photo-controls small,.rj-bike-placeholder small,.rj-secure-note,.rj-secure-note span,.rj-secure-note strong) { color:var(--hd-muted); }
html[data-cico-dark] .rj-progress .complete { color:#5fd3c8; }
html[data-cico-dark] .rj-photo-stage { background:var(--hd-band); border-color:var(--hd-border); }
html[data-cico-dark] .rj-page :is(input[type=date],.rj-selection-summary > input,.rj-select.native > input) { background:var(--body-bg); border:1px solid var(--hd-border); color:var(--hd-text); color-scheme:dark; }
html[data-cico-dark] .rj-photo-empty span { color:var(--hd-heading); }
html[data-cico-dark] .rj-bike-image { background:var(--hd-band); } /* photo area: dark frame */

/* ===================== Customer portal (my-bikes.css: /mijn-fietsen, /mijn-bestellingen, bike editor) ===================== */
html[data-cico-dark] .my-bikes-page { background:var(--body-bg); color:var(--hd-text); }

/* White cards, panels and dialogs */
html[data-cico-dark] :is(.my-bikes-card,.my-bikes-empty,.my-bikes-success,.my-bikes-form,.customer-sidebar,.my-orders-card,.my-bikes-picker,.my-bikes-detail,.my-bikes-shield-dialog,.my-bike-action-dialog,.my-orders-tools,.my-orders-no-results,.bike-editor-summary,.customer-quick-form,.customer-quick-info,.bike-editor-card,.my-bikes-picker-item,.my-bikes-detail-tabs button.is-active) { background:var(--hd-card); border-color:var(--hd-border); }

/* Soft tints, hovers and secondary surfaces */
html[data-cico-dark] :is(.my-orders-card-foot,.my-bikes-detail-tabs button,.my-bikes-detail-table > div:nth-child(odd),.customer-quick-stages button,.my-bikes-detail-id,.my-bike-action-dialog .my-bike-action-check,.my-bikes-form input[readonly],.customer-quick-form input[readonly]) { background:var(--hd-surface); border-color:var(--hd-border); }
html[data-cico-dark] :is(.my-bikes-secondary:hover,.customer-sidebar-nav a:hover,.customer-sidebar-nav a:focus-visible,.my-bikes-picker-item:hover,.my-bikes-picker-item:focus-visible,.my-bikes-picker-item.is-selected,.my-bikes-picker-add:hover,.my-orders-detail-toggle:hover,.my-orders-product-icon,.my-bikes-score-track,.customer-quick-stages b,.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight) { background:var(--hd-raised); }
html[data-cico-dark] .bike-editor-profile-chooser { background:rgba(24,27,48,.92); border-color:var(--hd-border); }
html[data-cico-dark] .my-bike-action-map { background:var(--hd-band); }

/* Borders and dividers */
html[data-cico-dark] :is(.my-bikes-score,.my-bikes-card dl div,.my-bikes-form-head,.customer-sidebar-brand,.my-orders-product,.my-orders-card-foot,.my-bikes-picker h2,.my-bikes-detail-header,.my-bikes-detail-specs,.my-bikes-detail-specs dl > div,.my-bikes-detail-tab-panel,.my-bikes-history-list article,.my-bikes-accessory-list > div,.my-orders-tabs,.my-orders-filters label,.my-orders-card-actions + .my-orders-products,.bike-editor-slider-controls,.bike-editor-summary-body dl div,.bike-editor-gallery img,.rz-dropdown-panel) { border-color:var(--hd-border); }

/* Form fields */
html[data-cico-dark] :is(.my-bikes-form input,.my-bikes-shield-dialog input,.my-bike-action-dialog label > input:not([type=checkbox]),.my-bike-action-dialog textarea,.my-orders-filters input,.my-orders-filters select,.customer-quick-form input,.bike-editor-fields input,.bike-editor-fields select,.bike-editor-photo input) { background:var(--body-bg); color:var(--hd-text); border-color:var(--hd-border); color-scheme:dark; }
html[data-cico-dark] :is(.my-bikes-form input[readonly],.customer-quick-form input[readonly]) { background:var(--hd-surface); color:var(--hd-muted); }

/* Outline-style buttons (white with purple text in light mode) */
html[data-cico-dark] :is(.my-bikes-secondary,.my-orders-detail-toggle,.my-bikes-shield-dialog-actions button,.bike-editor-slider-controls button) { background:var(--body-bg); color:var(--hd-heading); border-color:var(--hd-border); }
html[data-cico-dark] .my-bike-action-cancel { background:var(--body-bg); color:var(--hd-text); border-color:var(--hd-border); }

/* Photo placeholders */
html[data-cico-dark] :is(.my-bikes-photo,.my-bikes-detail-photo,.bike-editor-summary-photo,.my-bikes-picker-image) { background:linear-gradient(130deg,#133239,var(--hd-card)); color:var(--hd-heading); }

/* Tinted badges and panels: deep versions of the same hue */
html[data-cico-dark] :is(.my-bikes-status,.my-bikes-form-head span,.my-bikes-success-mark,.customer-sidebar-help,.my-orders-status.is-paid,.customer-quick-shield,.customer-quick-form-head span,.bike-editor-card-title > span,.bike-editor-success) { background:#12362f; }
html[data-cico-dark] :is(.my-bikes-detail-score,.bike-editor-summary-score,.my-orders-status.is-pending,.my-bikes-photo-status.is-missing) { background:#2f2a1d; border-color:#4a3f22; }
html[data-cico-dark] :is(.my-bikes-error,.my-orders-status.is-failed,.my-bikes-photo-status.is-stolen,.my-bike-action-warning,.my-bike-action-message,.bike-editor-error) { background:#3a2027; }

/* Text: purple -> lavender */
html[data-cico-dark] :is(.my-bikes-heading h1,.my-bikes-count strong,.my-bikes-score-top,.my-bikes-card h2,.my-bikes-empty h2,.my-bikes-success h2,.my-bikes-back,.my-bikes-form-head h2,.my-bikes-signup a,.customer-sidebar-brand strong,.customer-sidebar-nav a:hover,.customer-sidebar-nav a:focus-visible,.my-orders-card h2,.my-orders-product-icon,.my-orders-card-foot strong,.my-orders-empty-icon,.my-bikes-picker h2,.my-bikes-picker-item,.my-bikes-picker-image,.my-bikes-picker-add,.my-bikes-detail-header h2,.my-bikes-detail-name p,.my-bikes-detail-category,.my-bikes-detail-score strong,.my-bikes-detail-id > .bi,.my-bikes-detail-id-status,.my-bikes-detail-id-link,.my-bikes-shield-dialog-head h2,.my-bikes-detail-specs h3,.my-bikes-more-actions h3,.my-bikes-history-list strong,.my-bikes-accessory-list .bi,.my-bike-quick-actions h3,.my-bike-action-dialog h3,.my-orders-tabs button:hover,.my-orders-tabs button.is-active,.bike-editor-summary-body h2,.bike-editor-profile-chooser,.customer-quick-heading h2,.customer-quick-stages b,.customer-quick-copy h2,.customer-quick-shield h3,.customer-quick-shield button,.customer-quick-form-head h2,.customer-quick-info h2,.bike-editor-card-title h2,.bike-editor-fields .rz-dropdown-trigger,.my-bike-history-toggle,.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight) { color:var(--hd-heading); }
html[data-cico-dark] .my-orders-tabs button.is-active { border-color:var(--hd-heading); }

/* Text: near-black -> light */
html[data-cico-dark] :is(.my-bikes-page .my-bikes-page-title,.my-bikes-no-photo,.my-bikes-card dd,.my-bikes-form label,.my-orders-product strong,.my-bikes-detail-category strong,.my-bikes-detail-id strong,.my-bikes-shield-dialog label,.my-bikes-detail-specs dd,.my-bikes-detail-tabs button,.my-bikes-detail-table dt,.my-bikes-detail-table dd,.my-bike-action-dialog .my-bike-action-bike,.my-bike-action-dialog label,.my-bike-action-dialog .my-bike-action-check,.bike-editor-summary-body dd,.bike-editor-summary-score,.customer-quick-stages button,.customer-quick-copy li strong,.customer-quick-form label,.bike-editor-fields label,.bike-editor-photo label,.bike-editor-fields .rz-dropdown-label,.my-bike-history li) { color:var(--hd-text); }

/* Text: grey -> muted */
html[data-cico-dark] :is(.my-bikes-count,.my-bikes-score p,.my-bikes-notice,.customer-sidebar-nav a .bi,.my-bikes-detail-id small,.my-bikes-tab-note,.my-bikes-accessory-list small,.my-orders-tabs button,.my-orders-no-results,.bike-editor-summary-score small,.bike-editor-summary-body p,.customer-quick-heading p,.customer-quick-info p,.bike-editor-card-title p,.my-bike-history li time,.my-bike-history li span,.bike-editor-photo small,.bike-editor-photo-note) { color:var(--hd-muted); }

/* Text: teal -> bright teal for dark backgrounds */
html[data-cico-dark] :is(.my-bikes-kicker,.my-bikes-score .my-bikes-score-next,.my-bikes-status,.my-bikes-form-head span,.my-bikes-success-mark,.customer-sidebar-help strong,.my-orders-overline,.my-orders-status.is-paid,.customer-quick-form-head span,.bike-editor-success) { color:#5fd3c8; }

/* Customer portal loader (customer-loader.css / BicycleLoader.razor) */
html[data-cico-dark] .cp-loader { --cp-loader-purple:var(--hd-heading); --cp-loader-line:var(--hd-border); background:var(--hd-card); border-color:var(--hd-border); box-shadow:none; }
html[data-cico-dark] .cp-loader.cp-loader--overlay { background:rgba(15,17,33,.8); } /* keeps its backdrop blur: frosted over the page */
html[data-cico-dark] .cp-loader-ring-track { stroke:var(--hd-border); }
html[data-cico-dark] :is(.cp-loader-disc,.cp-loader-crank) { fill:var(--hd-raised); }
html[data-cico-dark] .cp-loader-disc { filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
html[data-cico-dark] :is(.cp-loader-shield,.cp-loader-check) { stroke:var(--hd-raised); }
html[data-cico-dark] .cp-loader-check { stroke:#fff; }
html[data-cico-dark] .cp-loader-emblem linearGradient[id$="-ring"] stop:first-child { stop-color:var(--hd-heading); }
html[data-cico-dark] .cp-loader .cp-loader-kicker { color:#5fd3c8; }
html[data-cico-dark] .cp-loader .cp-loader-hint { color:var(--hd-muted); }
html[data-cico-dark] .cp-loader-skeleton span { background:var(--hd-raised); }
html[data-cico-dark] .cp-loader-skeleton .cp-sk-card { background:var(--hd-card); border-color:var(--hd-border); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    html[data-cico-dark] .cp-loader.cp-loader--overlay { background:rgba(15,17,33,.94); } /* solid fallback without blur */
}