/* ===========================================================================
 * Dark mode
 * ---------------------------------------------------------------------------
 * Werking
 * - Dark mode is een ontwerp per categorie (vinkjes in de backend, zie
 *   vds_donkere_pagina in functions.php). Zo'n pagina heeft
 *   <html data-theme="dark"> al in de HTML; alle andere pagina's zijn licht
 *   (geen attribuut). De instelling van het apparaat telt niet mee.
 * - Koos de bezoeker licht, dan zet het inline-script in de <head>
 *   (vds_kleurmodus_head_script) data-theme op light vóór de eerste paint.
 * - Wisselen: js/vds-kleurmodus.js (knop .vds-kleurmodus-knop).
 *
 * Kleuren
 * - Alles wordt afgeleid van de designkleuren uit ACF (--primair-basis enz.,
 *   gezet in functions.php), zodat elke webshop een eigen, passende dark mode
 *   krijgt. Het accent (--secundair) blijft gelijk.
 * - In dark mode wisselen de ROLLEN: --primair is de tekstkleur en wordt dus
 *   licht, --quartair is een licht vlak en wordt dus donker. Waar een
 *   designkleur als achtergrond dient, gebruikt de CSS --primair-vlak enz.
 *   (zie :root in style.css); die blijven donker.
 * =========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* vlakken. De pagina heeft overal dezelfde kleur, die van het
     productoverzicht op de archiefpagina. Kaarten (--vds-oppervlak) staan daar
     iets donkerder op, panelen (--quartair) iets lichter. Brede banden die in
     licht --quartair zijn krijgen de paginakleur (zie "Banden" hieronder). */
  --vds-achtergrond:     color-mix(in srgb, var(--primair-basis) 22%, #1b1f24);
  --vds-oppervlak:       color-mix(in srgb, var(--primair-basis) 16%, #15181c);
  --quartair:            color-mix(in srgb, var(--primair-basis) 25%, #283039);
  --vds-vlak-grijs:      color-mix(in srgb, var(--primair-basis) 25%, #283039);
  --primair-vlak:        color-mix(in srgb, var(--primair-basis) 55%, #1e242a);
  --signaal-donker-vlak: color-mix(in srgb, var(--signaal-donker-basis) 40%, #262c32);
  --signaal-licht-vlak:  color-mix(in srgb, var(--primair-basis) 35%, #26303a);

  /* tekst */
  --primair:             color-mix(in srgb, var(--signaal-licht-basis) 30%, #f3f5f7);
  --signaal-donker:      color-mix(in srgb, var(--signaal-donker-basis) 30%, #b4bfc8);

  /* randen */
  --border-color:        color-mix(in srgb, var(--primair-basis) 30%, #2f353c);
  --vds-rand-kaart:      color-mix(in srgb, var(--primair-basis) 30%, #2a3036);

  /* signaalkleuren iets lichter, zodat ze op donker leesbaar blijven */
  --signaal-groen:       color-mix(in srgb, var(--signaal-groen-basis) 75%, #ffffff);
  --signaal-rood:        color-mix(in srgb, var(--signaal-rood-basis) 80%, #ffffff);

  /* Trustpilot-sterren: het lege deel donker */
  --vds-tp-sterleeg:     #3a4047;
}

/* ---------------------------------------------------------------------------
 * Banden: in licht een lichtgrijze strook over de volle breedte (--quartair),
 * in dark de paginakleur, zodat de pagina overal één kleur heeft.
 * ------------------------------------------------------------------------- */
[data-theme="dark"] .secundair-header,
[data-theme="dark"] .pagina-hero,
[data-theme="dark"] .product-overzicht,
[data-theme="dark"] .archief-flowbox.heeft-achtergrond,
[data-theme="dark"] .single-product .product-trustpilot,
[data-theme="dark"] .vds-footer__nieuwsbrief { background: var(--vds-achtergrond); }

/* ---------------------------------------------------------------------------
 * Knop licht/donker
 * ------------------------------------------------------------------------- */
.vds-kleurmodus-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; line-height: 1; transition: color .3s;
}
.vds-kleurmodus-knop:hover { color: var(--secundair); }
.vds-kleurmodus-knop:focus-visible { outline: 2px solid var(--secundair); outline-offset: 3px; border-radius: 3px; }
/* extra klasse: de Font Awesome-kit laadt na wp_head en zet .fa-regular op inline-block */
.vds-kleurmodus-knop .vds-kleurmodus-knop__zon { display: none; }
[data-theme="dark"] .vds-kleurmodus-knop .vds-kleurmodus-knop__maan { display: none; }
[data-theme="dark"] .vds-kleurmodus-knop .vds-kleurmodus-knop__zon { display: inline-block; }

/* desktop: naast de reviewwidget in de secundaire header */
.secundair-header .tp-blok { gap: 16px; }
.vds-kleurmodus-knop--balk { width: 30px; height: 30px; border-radius: 50%; font-size: 15px; }
.vds-kleurmodus-knop--balk:hover { background: var(--vds-oppervlak); }

/* mobiel: tussen de header-iconen, op de plek van het accounticoon (dat is
   onder 1024px verborgen). Volgt de opmaak van de andere iconen. */
.primair-header .header-icons .vds-kleurmodus-knop--iconen { display: none; flex-direction: column; font-size: 1.2rem; }
@media (max-width: 1024px) {
  .vds-kleurmodus-knop--balk { display: none; }
  .primair-header .header-icons .vds-kleurmodus-knop--iconen { display: inline-flex; }
}

/* winkelwagen/afrekenen: in de vereenvoudigde header, vóór de hulp; zelfde
   rondje als het hulpicoon ernaast */
.checkout-header__hulp .vds-kleurmodus-knop--checkout {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--quartair); color: var(--primair); font-size: 1.1rem;
}
.checkout-header__hulp .vds-kleurmodus-knop--checkout:hover { color: var(--secundair); }

/* ---------------------------------------------------------------------------
 * Logo: met ACF hoofd_logo_donker staan er twee <img>'s, één per modus
 * ------------------------------------------------------------------------- */
.website-logo--donker { display: none; }
[data-theme="dark"] .website-logo--licht { display: none; }
[data-theme="dark"] .website-logo--donker { display: inline-block; }
/* In de winkelwagen/checkout-header zet woocommerce.css .checkout-header__logo
   .website-logo op display: block, en die selector is specifieker dan de regels
   hierboven: daar stonden dan beide logo's. Zelfde regels, met die specificiteit. */
.checkout-header__logo .website-logo--donker { display: none; }
[data-theme="dark"] .checkout-header__logo .website-logo--licht { display: none; }
[data-theme="dark"] .checkout-header__logo .website-logo--donker { display: block; }

/* ===========================================================================
 * Losse correcties: plekken met een vaste kleur in style.css/woocommerce.css
 * of in plugins. Alles onder [data-theme="dark"].
 * =========================================================================== */

/* Formulieren: de selectpijl is een zwarte afbeelding van een externe CDN */
[data-theme="dark"] select {
  color: var(--primair);
  background-color: var(--vds-oppervlak);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c5ced6' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea { background-color: var(--vds-oppervlak); color: var(--primair); }
[data-theme="dark"] ::placeholder { color: var(--signaal-donker); opacity: 1; }

/* Header */
[data-theme="dark"] .primair-header .header-icons i { color: var(--primair); }

/* Vaste tekstkleuren uit style.css / woocommerce.css */
[data-theme="dark"] .rm-catslider-link,
[data-theme="dark"] .spaarpunten-progress-label { color: var(--primair); }
[data-theme="dark"] .rm-hero-over-image { color: var(--primair); }
[data-theme="dark"] .rm-hero-over-image .rm-hero-inner { background: color-mix(in srgb, var(--vds-oppervlak) 80%, transparent); }
[data-theme="dark"] .woobt-quantity-input-plus,
[data-theme="dark"] .woobt-quantity-input-minus { border-color: var(--border-color); }

/* Footer: het label in het contactblok gebruikt --quartair als TEKSTkleur (de
   enige plek); in dark mode is --quartair een donker vlak */
[data-theme="dark"] .vds-footer__contact-label { color: var(--signaal-donker); }

/* YITH-filters: de plugin zet zijn kleuren als variabelen op :root
   (instellingen in YITH > Filter Presets > Customization) */
[data-theme="dark"] {
  --yith-wcan-filters_colors_background: transparent;
  --yith-wcan-filters_colors_titles: var(--primair);
  --yith-wcan-anchors_style_text: var(--primair);
  --yith-wcan-labels_style_background: var(--vds-oppervlak);
  --yith-wcan-labels_style_text: var(--primair);
}
[data-theme="dark"] .yith-wcan-filters input[type="checkbox"],
[data-theme="dark"] .yith-wcan-filters input[type="radio"] { accent-color: var(--secundair); }

/* ---------------------------------------------------------------------------
 * WooCommerce-blokken (winkelwagen/afrekenen): vinkjes, radio's, landkeuze
 * ------------------------------------------------------------------------- */
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
[data-theme="dark"] .wc-block-components-radio-control .wc-block-components-radio-control__input {
  background-color: var(--vds-oppervlak);
  border-color: var(--border-color);
}
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background-color: var(--vds-oppervlak); }
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--primair); }
[data-theme="dark"] .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: var(--primair); }
[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__container { background: var(--vds-oppervlak); }
[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select { color: var(--primair); }
[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--primair); }

/* ---------------------------------------------------------------------------
 * vds-modules (plugin, eigen vaste kleuren; hier overschreven zodat de plugin
 * zelf ongemoeid blijft)
 * ------------------------------------------------------------------------- */

/* Uitgestelde leverdatum (verzendopties op de checkout) */
[data-theme="dark"] .vds-uld__option { background: var(--vds-oppervlak); border-color: var(--border-color); }
[data-theme="dark"] .vds-uld__option:hover { border-color: var(--signaal-donker); }
[data-theme="dark"] .vds-uld__option.is-selected { border-color: var(--secundair); box-shadow: inset 0 0 0 1px var(--secundair); }
[data-theme="dark"] .vds-uld__title { color: var(--primair); }
[data-theme="dark"] .vds-uld__option.is-selected .vds-uld__title { color: var(--secundair); }
[data-theme="dark"] .vds-uld__sub { color: var(--signaal-donker); }
[data-theme="dark"] .vds-uld__badge { background: var(--signaal-donker-vlak); }
[data-theme="dark"] .vds-uld__date,
[data-theme="dark"] .vds-uld input.vds-uld__date { background: var(--vds-oppervlak); color: var(--primair); border-color: var(--border-color); }

/* Zakelijke checkout: particulier/zakelijk-knoppen */
[data-theme="dark"] .vds-klanttype__btn { background: var(--vds-oppervlak); color: var(--primair); border-color: var(--border-color); }
[data-theme="dark"] .vds-klanttype__btn:hover { border-color: var(--signaal-donker); }
[data-theme="dark"] .vds-klanttype__btn.is-active { background: var(--primair-vlak); border-color: var(--primair-vlak); color: #fff; }

/* Productmedia: de dia's en thumbnails blijven bewust WIT. Productfoto's zijn
   op wit geschoten en vaak vrijstaand (transparant); een zwart product zou op
   een donkere ondergrond wegvallen. Alleen de randen en knoppen gaan mee. */
[data-theme="dark"] .vds-spm__thumb { background: #fff; }
[data-theme="dark"] .vds-spm__thumb.swiper-slide-thumb-active { border-color: var(--secundair); }
[data-theme="dark"] .vds-spm__thumb-nav { background: var(--vds-oppervlak); border-color: var(--border-color); }
[data-theme="dark"] .vds-spm__thumb-nav::before { border-color: var(--primair); }

/* Mediapop-up (vergroting): het venster gaat mee, de foto zelf blijft op wit */
[data-theme="dark"] .vds-spm-popup__inner { background: var(--vds-oppervlak); color: var(--primair); }
[data-theme="dark"] .vds-spm-popup__header,
[data-theme="dark"] .vds-spm-popup__footer { border-color: var(--border-color); }
[data-theme="dark"] .vds-spm-popup__thumbs { border-right-color: var(--border-color); }
[data-theme="dark"] .vds-spm-popup__close { color: var(--signaal-donker); }
[data-theme="dark"] .vds-spm-popup__close:hover { color: var(--primair); }
[data-theme="dark"] .vds-spm-popup__thumb { background: #fff; }
[data-theme="dark"] .vds-spm-popup__thumb--active { border-color: var(--secundair); }
[data-theme="dark"] .vds-spm-popup__media { background: #fff; }

/* Favorieten: deel-pop-up */
[data-theme="dark"] .vds-favorieten-modal__box { background: var(--vds-oppervlak); color: var(--primair); }
[data-theme="dark"] .vds-favorieten-modal__share-input { background: var(--vds-achtergrond); color: var(--primair); border-color: var(--border-color); }

/* ---------------------------------------------------------------------------
 * Max Mega Menu: de plugin genereert zijn eigen CSS met vaste kleuren (paneel
 * #eef3f7, tabs #fff, koppen #133c54) en zeer specifieke ID-selectors. Hier
 * daarom bewust !important; alleen in dark mode.
 * ------------------------------------------------------------------------- */
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu ul.mega-sub-menu { background: var(--vds-oppervlak) !important; }
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu ul.mega-sub-menu a.mega-menu-link { color: var(--primair) !important; }
/* tabs links (Badkamermeubelen, Douches, ...) */
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { background: var(--quartair) !important; }
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover { background: var(--primair-vlak) !important; }
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { background: var(--secundair) !important; color: #fff !important; }
/* links in de kolommen: koppen licht, de rest gedempt */
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-tabbed ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item li.mega-menu-item > a.mega-menu-link { color: var(--signaal-donker) !important; }
[data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-tabbed ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover { color: var(--secundair) !important; }

/* mobiele menuknop (MENU + hamburger) */
[data-theme="dark"] #mega-menu-wrap-main-menu .mega-menu-toggle { background: var(--quartair) !important; }
[data-theme="dark"] #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-animated-inner,
[data-theme="dark"] #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-animated-inner::before,
[data-theme="dark"] #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-animated-inner::after { background-color: var(--primair) !important; }
[data-theme="dark"] #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block,
[data-theme="dark"] #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-label { color: var(--primair) !important; }

/* mobiel uitschuifmenu: het paneel zelf en de losse links onderaan */
@media (max-width: 1024px) {
  [data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu { background: var(--vds-oppervlak) !important; }
  [data-theme="dark"] #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link { color: var(--primair) !important; }
}

/* Standaard grijze WooCommerce-knoppen in Mijn account (Login, Registreren,
   Opslaan). Bewust smal gehouden: de gekleurde bestelknoppen elders niet raken. */
[data-theme="dark"] .woocommerce-account .woocommerce button.button,
[data-theme="dark"] .woocommerce-account .woocommerce a.button { background-color: var(--primair-vlak); color: #fff; }
[data-theme="dark"] .woocommerce-account .woocommerce button.button:hover,
[data-theme="dark"] .woocommerce-account .woocommerce a.button:hover { background-color: var(--secundair); color: #fff; }

/* Advanced Woo Search: de resultatenlijst onder de zoekbalk (plugin-CSS wit/zwart) */
[data-theme="dark"] .aws-search-result { background: var(--vds-achtergrond); }
[data-theme="dark"] .aws-search-result .aws_result_title,
[data-theme="dark"] .aws-search-result .aws_result_count,
[data-theme="dark"] .aws-search-result .aws_result_excerpt,
[data-theme="dark"] .aws-search-result .aws_result_sku { color: var(--primair); }
[data-theme="dark"] .aws-search-result .aws_result_item:hover,
[data-theme="dark"] .aws-search-result .aws_result_item.hovered { background: var(--primair-vlak); }
[data-theme="dark"] .aws-search-result .aws_search_more a,
[data-theme="dark"] .aws-search-result .aws_no_result { background: var(--vds-oppervlak); color: var(--primair); }

/* Trustpilot (TrustBox). De donkere variant zet js/vds-kleurmodus.js via
   data-theme. color-scheme: light op de iframe is nodig omdat de browser
   anders een wit vlak achter een iframe tekent zodra de pagina zelf
   color-scheme: dark heeft en het document in de iframe niet. */
[data-theme="dark"] .trustpilot-widget iframe { color-scheme: light; }