/* Donkere modus via invert-mask: één filter op de pagina, media wordt
   een tweede keer geïnverteerd zodat foto's/video's er normaal uitzien.
   hue-rotate(180deg) houdt het merk-oranje oranje. */

html.idtools-dark {
    filter: invert(1) hue-rotate(180deg);
    background: #101318;
}

/* Media terug naar normaal (dubbel geïnverteerd = origineel).
   Het logo bewust NIET: door de invert worden de zwarte letters wit
   en houdt de oranje D zijn kleur dankzij de hue-rotate. */
html.idtools-dark video,
html.idtools-dark iframe,
html.idtools-dark .idtools-hero,
html.idtools-dark .idtools-hero-row,
html.idtools-dark [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Afbeeldingen terug naar normaal, iets gedimd zodat witte
   (product)achtergronden niet verblinden in donkere kaarten. */
html.idtools-dark img {
    filter: invert(1) hue-rotate(180deg) brightness(0.85);
}

/* Afbeeldingen bínnen een al her-geïnverteerd element niet nóg eens omkeren. */
html.idtools-dark .idtools-hero img,
html.idtools-dark .idtools-hero-row img,
html.idtools-dark [style*="background-image"] img {
    filter: brightness(0.85);
}

html.idtools-dark #branding img,
html.idtools-dark .branding img,
html.idtools-dark .wpml-ls-flag {
    filter: none;
}

/* Productafbeeldingen (vaak witte studio-achtergrond): flink dimmen zodat
   wit een rustig grijs tegeltje wordt i.p.v. een fel blok, en zachte
   hoeken zodat het bewust oogt. Werkt voor elk bestandsformaat. */
html.idtools-dark .idtools-product-card__img,
html.idtools-dark .vc_single_image-img,
html.idtools-dark .woocommerce-product-gallery img,
html.idtools-dark img.attachment-woocommerce_thumbnail,
html.idtools-dark .idtools-checkout-item__img img,
html.idtools-dark .cart_list img,
html.idtools-dark .woocommerce-cart-form img {
    filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(1.05);
    border-radius: 10px;
}

/* Gallery thumbs carry a white CSS background on the img element; the
   re-invert filter above turns that back into a light tile behind the
   (transparent) product cutouts. Kill it so the dark page shows through. */
html.idtools-dark .woocommerce-product-gallery img,
html.idtools-dark .flex-control-thumbs li,
html.idtools-dark .flex-control-thumbs img {
    background: transparent !important;
}

/* De topbar rendert (her-geïnverteerd) zijn originele donkere kleur;
   de toggle krijgt daar expliciet een lichte kleur, goed in beide modi. */
.top-bar .idtools-dark-toggle {
    /* The7's .top-bar-bg-laag tekent anders óver de knop heen,
       en The7 zet display:block op topbar-widgets — flex terugforceren. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
    position: relative;
    z-index: 5;
    /* Eigen contrast-chip: leesbaar op elke topbar-variant, in beide modi. */
    width: 30px;
    height: 30px;
    background: rgba(22, 25, 30, 0.5);
    color: #fff;
}

.top-bar .idtools-dark-toggle:hover {
    background: rgba(22, 25, 30, 0.75);
}


/* Schaduwen worden lichtgloed na inversie; dempen voor rustiger beeld. */
html.idtools-dark .idtools-wr-policy-card,
html.idtools-dark .idtools-checkout-order-summary {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Thema-toggle-knop (JS injecteert hem in topbar en mobiel menu). */
.idtools-dark-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease, transform 0.15s ease;
}

.idtools-dark-toggle:hover {
    background: rgba(128, 128, 128, 0.18);
}

.idtools-dark-toggle:active {
    transform: scale(0.9);
}

.idtools-dark-toggle svg {
    width: 18px;
    height: 18px;
}

.idtools-dark-toggle .idtools-dark-toggle__sun { display: none; }
.idtools-dark-toggle .idtools-dark-toggle__moon { display: block; }

html.idtools-dark .idtools-dark-toggle .idtools-dark-toggle__sun { display: block; }
html.idtools-dark .idtools-dark-toggle .idtools-dark-toggle__moon { display: none; }

/* In het mobiele menu als nette rij met label. */
.mobile-mini-widgets-in-menu .idtools-dark-toggle {
    width: auto;
    height: auto;
    margin: 10px 0 0;
    padding: 7px 0;
    border-radius: 0;
    gap: 10px;
    font-size: 15px;
}

.mobile-mini-widgets-in-menu .idtools-dark-toggle:hover {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .idtools-dark-toggle { transition: none; }
}