/* Carmo storefront dark mode (carmonl) — v1, 2026-09-06 (fase 1) */

.carmo-theme-toggle-item {
  display: inline-block;
}

.carmo-theme-toggle {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.carmo-theme-toggle:hover,
.carmo-theme-toggle:focus {
  text-decoration: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --carmo-bg: #101214;
  --carmo-surface: #181b1f;
  --carmo-surface-2: #20242a;
  --carmo-text: #f2f4f6;
  --carmo-text-muted: #b4bbc4;
  --carmo-border: #343a42;
  --carmo-accent: #ff7a00;
  --carmo-accent-hover: #ffa24a;
  --carmo-input-bg: #15181c;
  --carmo-input-text: #ffffff;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #mainWrapper,
html[data-theme="dark"] #contentMainWrapper,
html[data-theme="dark"] .centerColumn {
  background-color: var(--carmo-bg);
  color: var(--carmo-text);
}

html[data-theme="dark"] .header-container,
html[data-theme="dark"] .header-top,
html[data-theme="dark"] .header-content,
html[data-theme="dark"] .nav-maincontainer,
html[data-theme="dark"] .sticky-header-wrapper,
html[data-theme="dark"] #vakantie {
  background-color: var(--carmo-surface);
  color: var(--carmo-text);
  border-color: var(--carmo-border);
}

html[data-theme="dark"] .top-link a,
html[data-theme="dark"] .custom_links a,
html[data-theme="dark"] .language-switcher label,
html[data-theme="dark"] .currency_top label,
html[data-theme="dark"] .redirect-store a {
  color: var(--carmo-text);
}

html[data-theme="dark"] a {
  color: var(--carmo-accent);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
  color: var(--carmo-accent-hover);
}

html[data-theme="dark"] #whysideboxContent .mijnfontawesome-vakjes,
html[data-theme="dark"] #whysideboxContent .mijnfontawesome-vakjes strong {
  color: var(--carmo-accent) !important;
}

html[data-theme="dark"] .box_heading h2 {
  background-color: var(--carmo-surface-2) !important;
  color: var(--carmo-accent) !important;
}

html[data-theme="dark"] #oneallsociallogin {
  display: none !important;
}

html[data-theme="dark"] .sideBoxContent,
html[data-theme="dark"] .centerBoxContents,
html[data-theme="dark"] .productListing-data,
html[data-theme="dark"] .product-col,
html[data-theme="dark"] .homepageBrandsLi a,
html[data-theme="dark"] .single-banner,
html[data-theme="dark"] .owl-item .item,
html[data-theme="dark"] .categoryListBoxContents,
html[data-theme="dark"] .centerBoxWrapper {
  background-color: var(--carmo-surface);
  color: var(--carmo-text);
  border-color: var(--carmo-border);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-search input.input-text {
  background-color: var(--carmo-input-bg);
  color: var(--carmo-input-text);
  border-color: var(--carmo-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-search input.input-text::placeholder {
  color: var(--carmo-text-muted);
}

html[data-theme="dark"] button,
html[data-theme="dark"] .button,
html[data-theme="dark"] .cssButton {
  border-color: var(--carmo-border);
}

html[data-theme="dark"] .form-search .button,
html[data-theme="dark"] .carmo-theme-toggle {
  background-color: var(--carmo-surface-2);
  color: var(--carmo-text);
}

/* Merklogo's blijven bewust volledig licht (principe: geen inversie) */
html[data-theme="dark"] .homepageBrandsLi a {
  background: linear-gradient(180deg, #f6f8fb 0%, #eaf0f5 100%) !important;
  border-color: #c8d1db !important;
}

html[data-theme="dark"] .homepageBrandsLi:hover a,
html[data-theme="dark"] .homepageBrandsLi a:hover {
  background: #fff3e8 !important;
  border-color: var(--carmo-accent) !important;
}

html[data-theme="dark"] .homepageBrandsLi img {
  filter: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .productListing-odd,
html[data-theme="dark"] .productListing-even,
html[data-theme="dark"] .newproductlisting {
  background: linear-gradient(180deg, #141920 0%, #12171d 100%) !important;
  border: 1px solid #2a323c !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .productListing-odd:hover,
html[data-theme="dark"] .productListing-even:hover,
html[data-theme="dark"] .newproductlisting:hover {
  border-color: #3a4653 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .productListing-data,
html[data-theme="dark"] .productListing-data .short-description,
html[data-theme="dark"] .productListing-data .product_name,
html[data-theme="dark"] .productlisting_price,
html[data-theme="dark"] .newproductlisting .short-description,
html[data-theme="dark"] .newproductlisting .product_name {
  color: var(--carmo-text) !important;
}

/* Productfoto's krijgen een lichte kaart, geen inversie (principe 2 uit de spec) */
html[data-theme="dark"] .productListing-data .listingProductImage,
html[data-theme="dark"] .newproductlisting img {
  background-color: #1b222b !important;
  border: 1px solid #303a46 !important;
  border-radius: 6px !important;
  padding: 6px !important;
}

html[data-theme="dark"] .footer-container,
html[data-theme="dark"] .footer-top,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .copyright,
html[data-theme="dark"] .newsletter_bg {
  background-color: var(--carmo-surface);
  color: var(--carmo-text);
  border-color: var(--carmo-border);
}

/* v2, 2026-09-06 (Task 2): hoofdmenu-dropdown (#nav li ul a, alle niveaus) had
   een hardcoded witte achtergrond met donkergrijze tekst (rgb(255,255,255) /
   rgb(43,43,43)) — zichtbaar op elke pagina inclusief de homepage bij het
   openen van een menu (bv. TUNING, WEBSHOP). Gevonden via browseraudit,
   selectors bevestigd in de live stylesheet (.header-container #nav li ul a,
   .header-container #nav li ul li a.parent, .header-container #nav li ul a:hover).
   v3, 2026-09-06 (taakreview-fix): #navColumnOne/#navColumnTwo hier verwijderd —
   dat zijn stock Zen Cart sidebox-kolomcontainers (stylesheet.css:94), geen
   onderdeel van het #nav-dropdown-mechanisme, en niet apart geaudit. */
html[data-theme="dark"] .header-container #nav li ul a,
html[data-theme="dark"] .header-container .header #nav li ul a,
html[data-theme="dark"] .header-container #nav ul li ul a,
html[data-theme="dark"] .header-container #nav li ul li a.parent {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .header-container #nav li ul a:hover,
html[data-theme="dark"] .header-container .header #nav li ul a:hover {
  background-color: var(--carmo-surface-2) !important;
  color: var(--carmo-accent) !important;
}

/* v4, 2026-09-06 (Task 3): categoriepagina's + zoekresultaten.
   Alle vier hieronder zelf bevestigd via getComputedStyle() op een geopende,
   dark-mode-geactiveerde pagina (Webshop cPath=4318 met subcategorieën,
   Bobine's cPath=4318_1087 zonder subcategorieën, en de drie secties van
   advanced_search_result met keyword=CDI). Geen speculatieve selectors. */

/* .main-breadcrumb (rgb(245,245,245)) — de brede lichte balk direct onder de
   hoofdnavigatie op elke categorie-/zoekresultatenpagina (bevat titel +
   broodkruimel), op zowel Webshop (met subcats) als Bobine's (kaal) en de
   zoekresultatenpagina bevestigd. */
html[data-theme="dark"] .main-breadcrumb {
  background-color: var(--carmo-surface) !important;
  background-image: none !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* .carmo-merkfilter (merkfilter-vloot, zie MEMORY.md) — het "Merk"-filterblok
   boven de productlisting: container rgb(250,250,250), niet-actieve pills wit
   met oranje tekst, "meer merken"-toggle wit, label/teller donkergrijze tekst.
   Bevestigd op Bobine's én op de "producten"-sectie van de zoekresultatenpagina
   (identieke component, dus dezelfde regel raakt beide). */
html[data-theme="dark"] .carmo-merkfilter {
  background-color: var(--carmo-surface) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .carmo-merkfilter__label {
  color: var(--carmo-text) !important;
}

html[data-theme="dark"] .carmo-merkfilter__n {
  color: var(--carmo-text-muted) !important;
}

html[data-theme="dark"] .carmo-merkfilter__pill,
html[data-theme="dark"] .carmo-merkfilter__pill--meer {
  background-color: var(--carmo-surface-2) !important;
  border-color: var(--carmo-border) !important;
}

/* actieve pill (is-actief) blijft oranje/wit — bewust niet aangeraakt, was al
   goed leesbaar (rgb(255,102,0) bg met witte tekst). */

/* select2 sorteer-dropdown ("Sorteren op:" op de kale Bobine's-listing) — het
   zichtbare .select2-choice-vak en het geopende .select2-drop-paneel waren
   allebei wit met zwarte tekst; .select2-search input bleek al gedekt door de
   generieke input-regel hierboven (geverifieerd, geen fix nodig). */
html[data-theme="dark"] .select2-choice {
  background-color: var(--carmo-input-bg) !important;
  color: var(--carmo-input-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .select2-drop {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .select2-results {
  color: var(--carmo-text) !important;
}

/* v5, 2026-09-06 (Task 4): productdetailpagina — hoofdfoto + tabblad-omschrijving.
   Zelf bevestigd op drie producten van verschillende merken (Electrex #491,
   MWR #4393, Carmo #4298/#667 incl. thumbnail-strip en waitlist-badge) met
   getComputedStyle() op een dark-mode-geactiveerde pagina. Thumbnail-strip
   (.additionalImages/.carmoThumbSwap) en de waitlist-badge (#stock-notify)
   bleken bij inspectie GEEN probleem (transparante achtergrond resp. al een
   consistente lichte kaart) — bewust niet aangeraakt. */

/* Productdetailpagina — hoofdfoto + thumbnails krijgen een lichte kaart */
html[data-theme="dark"] .product_image {
  background-color: #1b222b !important;
  border: 1px solid #303a46 !important;
  border-radius: 6px !important;
  padding: 10px !important;
}

html[data-theme="dark"] .product_image img {
  background-color: #ffffff;
  border-radius: 4px;
}

/* CKEditor-omschrijving (tabblad "Beschrijving") — lichte kaart i.p.v. inversie,
   !important nodig om eventuele inline stijlen uit oude CKEditor-content te overrulen */
html[data-theme="dark"] .tabcontent {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .tabcontent p,
html[data-theme="dark"] .tabcontent span,
html[data-theme="dark"] .tabcontent li,
html[data-theme="dark"] .tabcontent td {
  color: var(--carmo-text) !important;
  background-color: transparent !important;
}

/* v6, 2026-09-06 (Task 5): winkelwagen + checkout-formulieren (cart, login/
   gastcheckout, verzendmethode incl. Sendcloud-servicepointpopup, betaalmethode,
   bevestiging). Elke selector hieronder is zelf bevestigd met getComputedStyle()
   op een dark-mode-geactiveerde pagina tijdens een echte testorder-doorloop
   (PP12 motorbike capacitor, t/m de bevestigingspagina, NIET afgerekend).

   Buiten bereik, bewust niet aangepakt: het gastcheckout-adresformulier
   (main_page=create_account&guest=1, incl. het adres-autocomplete-widget) draait
   in een eigen same-origin maar zelfstandige SSO-iframe-app (eigen <head>, eigen
   inline stylesheets, Google Sign-In) die de edify-CSS niet laadt — bevestigd met
   iframe.contentDocument.styleSheets. Dit bestand kan die pagina niet bereiken;
   zie memory "create-account-new-flow.md — SSO iframe". De XCover-verzekeringstoggle
   en het DAP/invoerkosten-vinkje kwamen in deze testorder (NL-adres, klein pakket)
   niet in beeld — niet gefixt omdat niet waargenomen, geen aanname toegepast.

   v7-vervolg (zelfde dag): .split-login .buttons-set (de knoppenbalk "Aanmelden" /
   "Wachtwoord vergeten" / "Inloggen" onder elke loginkaart) over het hoofd gezien
   in de eerste versie — pas ontdekt bij de herverificatie ná installatie. Direct
   op v7 gepatcht was geen optie: Cloudflare had v7.css binnen enkele minuten al
   gecachet (cf-cache-status: HIT), dus vandaar deze v8 in plaats van een in-place
   edit op v7 (zelfde regel als bij elke andere stylesheet-wijziging hier). */

/* Winkelwagen — subtotaalregel (rgb(249,249,249) wit vlak onder de artikelregels) */
html[data-theme="dark"] #cartSubTotal {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
}

/* Login-pagina — de twee kaarten "Nieuwe klant" / "Bestaande klant"
   (.split-login .content, rgb(249,249,249)) */
html[data-theme="dark"] .split-login .content {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Login-pagina — de knoppenbalk onder elke kaart (.split-login .buttons-set,
   rgb(249,249,249)) met "Aanmelden" / "Wachtwoord vergeten" / "Inloggen" */
html[data-theme="dark"] .split-login .buttons-set {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Checkout stap 1-3 — de witte kaartcontainers (zelfde stock-patroon als
   .split-login .content hierboven, bevestigd op alle drie stappen) */
html[data-theme="dark"] #checkoutShipping .content,
html[data-theme="dark"] #checkoutPayment .content,
html[data-theme="dark"] #checkoutConfirmDefault .content {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Checkout stap-indicator "Stap 1" / "Stap 2 van 3 - ..." (.checkout-steps,
   .current-step) — wit vlak met donkere tekst boven elke checkoutstap */
html[data-theme="dark"] .checkout-steps,
html[data-theme="dark"] .current-step {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Bootstrap info-alert ("Uw bestelling zal worden verstuurd naar..." /
   "Uw factuuradres wordt aan de linkerzijde getoond...") — lichtblauw op elke
   checkout-adresstap, bevestigd op zowel verzend- als betaalstap */
html[data-theme="dark"] .alert-info {
  background-color: var(--carmo-surface-2) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Verzendmethode (Sendcloud-module) — "Normaal"/"Express"-tabs en de
   verzendopties-lijst. .shipping-title-text en .checkboxLabel.shipping-method-label
   dragen een hardcoded donkere tekstkleur (rgb(31,41,55)) los van de body-var. */
html[data-theme="dark"] .ship-tabs {
  background-color: var(--carmo-surface-2) !important;
}

html[data-theme="dark"] .ship-tab {
  color: var(--carmo-text-muted) !important;
}

html[data-theme="dark"] .ship-tab.active {
  background-color: var(--carmo-surface) !important;
}

html[data-theme="dark"] .shipping-option-row {
  background-color: var(--carmo-surface) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .shipping-title-text,
html[data-theme="dark"] .checkboxLabel.shipping-method-label {
  color: var(--carmo-text) !important;
}

/* Sendcloud-servicepointpopup ("Kies afhaalpunt" → kaart-modaal). De Leaflet-kaart
   zelf en de kleine markerpopup (witte tooltip op de kaart) blijven bewust
   ongemoeid — dat is standaard Leaflet-UI, geen inversie/filter toegepast. */
html[data-theme="dark"] .sp-modal-content,
html[data-theme="dark"] .sp-modal-legend {
  background-color: var(--carmo-surface) !important;
}

html[data-theme="dark"] .sp-modal-header,
html[data-theme="dark"] .sp-legend-item {
  background-color: var(--carmo-surface-2) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .sp-modal-close {
  color: var(--carmo-text-muted) !important;
}