/* 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). */
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,
html[data-theme="dark"] #navColumnOne,
html[data-theme="dark"] #navColumnTwo {
  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;
}