/* ============================================================
   Donker thema — WebReus "Aurora"
   Geladen op elke pagina; actief wanneer <html> de klasse
   "thema-donker" draagt (ingesteld via cookie + inline script).

   Ontwerp: donkere paars-naar-zwart achtergrond, violet-naar-
   fuchsia gradient-accent met gloed-effecten, pill-vormen,
   Lettertype: Inter, net als het lichte thema (style.css).
   ============================================================ */

/* ── CSS-variabelen overschrijven ─────────────────────────── */
html.thema-donker {
    --apple-blue:     #8b5cf6;
    --apple-blue-dk:  #7c3aed;
    --apple-black:    #ece9f5;
    --apple-gray:     #c8c2da;
    --apple-silver:   #140e22;
    --apple-white:    #0a0812;
    --apple-border:   rgba(168, 139, 250, 0.20);
    --apple-green:    #30d158;
    --apple-red:      #ff453a;
    --apple-orange:   #ffd60a;


    /* Aurora-specifieke tokens */
    --aurora-bg-grad:       linear-gradient(160deg, #1a1030 0%, #0a0812 55%);
    --aurora-gradient:      linear-gradient(135deg, #8b5cf6, #c026d3);
    --aurora-surface-1:     linear-gradient(rgba(30, 22, 50, 0.70), rgba(16, 12, 28, 0.65));
    --aurora-surface-2:     rgba(20, 16, 34, 0.55);
    --aurora-surface-flat:  rgba(255, 255, 255, 0.04);
    --aurora-border:        rgba(168, 139, 250, 0.20);
    --aurora-border-strong: rgba(168, 139, 250, 0.40);
    --aurora-text:          #ece9f5;
    --aurora-text-secondary:#c8c2da;
    --aurora-text-muted:    #9089ab;
    --aurora-accent-soft:   #c4b5fd;
    --aurora-glow-btn:      0 10px 26px -8px rgba(192, 38, 211, 0.70);
    --aurora-glow-card:     0 24px 60px -24px rgba(124, 58, 237, 0.60);
    --aurora-glow-soft:     0 0 40px rgba(139, 92, 246, 0.18);
}

/* ── Body-achtergrond ──────────────────────────────────────── */
html.thema-donker body {
    background: var(--aurora-bg-grad);
    background-attachment: fixed;
    color: var(--aurora-text);
}

/* ── Header (volle-breedte balk) ──────────────────────────── */
html.thema-donker header {
    background: var(--aurora-surface-2);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom-color: var(--aurora-border);
}

html.thema-donker nav ul li a {
    color: var(--aurora-text-secondary);
}
html.thema-donker nav ul li a:hover {
    color: var(--aurora-text);
    background: rgba(255, 255, 255, 0.08);
}
html.thema-donker nav ul li a.active {
    color: #4da3ff;
    background: rgba(10, 132, 255, 0.18);
}
html.thema-donker nav ul li a.nav-account-link,
html.thema-donker nav ul li a.nav-account-link:hover {
    color: #fff;
    background: var(--apple-blue);
}

/* ── Hero ─────────────────────────────────────────────────── */
html.thema-donker .hero {
    background: transparent;
    color: var(--aurora-text);
}

html.thema-donker .hero-overlay {
    background:
        radial-gradient(circle at 25% 20%, rgba(139, 92, 246, 0.28), transparent 60%),
        radial-gradient(circle at 80% 75%, rgba(192, 38, 211, 0.16), transparent 55%),
        rgba(10, 8, 18, 0.35);
    background-size: auto;
}

html.thema-donker .hero-eyebrow {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--aurora-accent-soft);
}

html.thema-donker .hero h1 {
    color: var(--aurora-text);
    text-shadow:
        0 0 40px rgba(139, 92, 246, 0.55),
        0 0 90px rgba(192, 38, 211, 0.30);
}
html.thema-donker .hero p  { color: var(--aurora-text-secondary); }

/* ── Hero "Blauw podium" (homepage) ───────────────────────── */
html.thema-donker .hero-podium-kaart {
    box-shadow: var(--aurora-glow-card);
}

html.thema-donker .hero-video-waas {
    background: linear-gradient(105deg, rgba(109, 60, 220, 0.85) 0%, rgba(139, 92, 246, 0.55) 55%, rgba(192, 38, 211, 0.35) 100%);
}

html.thema-donker .hero-podium h1 {
    color: #ffffff;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.25);
}

html.thema-donker .hero-podium .hero-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Zoekformulier in hero */
html.thema-donker .domein-zoekform {
    background: rgba(18, 14, 30, 0.60);
    border: 1px solid var(--aurora-border-strong);
    box-shadow: var(--aurora-glow-card);
}
html.thema-donker .domein-zoekform:focus-within {
    border-color: rgba(139, 92, 246, 0.80);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
html.thema-donker .domein-zoekform input[type="text"] {
    background: transparent;
    color: var(--aurora-text);
}
html.thema-donker .domein-zoekform input[type="text"]::placeholder {
    color: rgba(236, 233, 245, 0.45);
}
html.thema-donker .domein-zoekform button {
    background: var(--aurora-gradient);
    color: #ffffff;
    box-shadow: var(--aurora-glow-btn);
}
html.thema-donker .domein-zoekform button:hover {
    box-shadow: 0 10px 30px -6px rgba(192, 38, 211, 0.85);
}

/* ── Secties — eigen achtergrond dekt de body-gradient af ─── */
html.thema-donker .section-light {
    background: var(--apple-silver);
    background-image: none;
}
html.thema-donker .section-dark {
    background: var(--apple-white);
    background-image: none;
}

/* ── Cards ────────────────────────────────────────────────── */
html.thema-donker .card {
    background: var(--aurora-surface-1);
    border: 1px solid var(--aurora-border);
    box-shadow: none;
}
html.thema-donker .section-light .card {
    background: var(--aurora-surface-1);
}
html.thema-donker .card:hover {
    border-color: var(--aurora-border-strong);
    box-shadow: var(--aurora-glow-card);
}
html.thema-donker .card h3 { color: var(--aurora-text); }

/* ── Pakket cards (featuredkaart) ─────────────────────────── */
html.thema-donker .pakket-aanbevolen {
    background: linear-gradient(135deg, #1e1730 0%, #14102a 100%);
    border: 1px solid var(--aurora-border-strong);
    box-shadow: var(--aurora-glow-soft);
}

/* ── Winkelmandje ─────────────────────────────────────────── */
html.thema-donker .mandje-item {
    background: var(--aurora-surface-1);
    border-color: var(--aurora-border);
}

html.thema-donker .mandje-item-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--aurora-border);
    color: var(--aurora-text);
}

html.thema-donker .mandje-item-actie-badge {
    background: rgba(139, 92, 246, 0.15);
    color: var(--aurora-accent-soft);
}

html.thema-donker .mandje-rij {
    border-bottom-color: rgba(168, 139, 250, 0.10);
    color: var(--aurora-text);
}

html.thema-donker .mandje-rij .label {
    color: var(--aurora-text-secondary);
}

html.thema-donker .mandje-item-totaal {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: var(--aurora-border);
    color: var(--aurora-text-secondary);
}

html.thema-donker .mandje-totaal-blok {
    background: var(--aurora-surface-1);
    border-color: var(--apple-blue);
}

html.thema-donker .mandje-totaal-blok .label {
    color: var(--aurora-text);
}

/* ── Pakket-opties & toggle switches ─────────────────────── */
html.thema-donker .pakket-optie {
    background: var(--aurora-surface-1);
    border: 1px solid var(--aurora-border);
}
html.thema-donker .pakket-optie:hover {
    border-color: var(--aurora-border-strong);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}

/* Toggle track (uitgeschakeld) */
html.thema-donker .toggle-switch::before {
    background: #362a52;
}

/* Toggle knop (het witte bolletje) */
html.thema-donker .toggle-switch::after {
    background: #e8e4f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
}

/* Toggle ingeschakeld */
html.thema-donker .pakket-optie input[type="checkbox"]:checked + .toggle-switch::before {
    background: var(--aurora-gradient);
}

/* ── Bestelling-stappen balk ──────────────────────────────── */
html.thema-donker .bestelling-header {
    background: var(--apple-silver);
    border-color: var(--aurora-border);
}
html.thema-donker .stap {
    border-color: var(--aurora-border);
    color: rgba(236, 233, 245, 0.35);
}
html.thema-donker .stap.actief {
    color: var(--aurora-accent-soft);
    border-color: var(--apple-blue);
    background: rgba(139, 92, 246, 0.10);
}
html.thema-donker .stap.voltooid {
    color: #30d158;
    border-color: rgba(48, 209, 88, 0.40);
    background: rgba(48, 209, 88, 0.08);
}

/* ── Bestelstand in de hero (gekozen pakket) ─────────────── */
html.thema-donker .hero-gekozen {
    background: rgba(18, 14, 30, 0.70);
    border: 1px solid var(--aurora-border-strong);
    color: var(--aurora-text);
    box-shadow: var(--aurora-glow-card);
}
html.thema-donker .hero-gekozen-prijs { color: var(--aurora-text-secondary); }
html.thema-donker .hero-gekozen-knop {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.18);
}
html.thema-donker .hero-gekozen-knop:hover { background: rgba(139, 92, 246, 0.30); }

/* ── Pakketkeuze (hosting-kiezen) ─────────────────────────── */
html.thema-donker .pakket-keuze-kaart.geselecteerd {
    background: var(--aurora-surface-1);
    box-shadow: var(--aurora-glow-card);
}
html.thema-donker .pakket-lint,
html.thema-donker .pakket-keuze-kaart.geselecteerd .pakket-keuzeknop,
html.thema-donker .pakket-keuze-kaart.geselecteerd .pakket-bolletje {
    background: var(--aurora-gradient);
    border-color: transparent;
}
html.thema-donker .pakket-keuzeknop { background: transparent; color: var(--aurora-accent-soft); }
html.thema-donker .pakket-keuzebalk {
    background: rgba(18, 14, 30, 0.92);
    border-color: var(--aurora-border-strong);
}

/* ── Voorkeur-banner ──────────────────────────────────────── */
html.thema-donker .voorkeur-banner {
    background: rgba(139, 92, 246, 0.10);
    border-color: var(--aurora-border-strong);
    color: var(--aurora-text);
}

/* ── Domein-resultaten ────────────────────────────────────── */
html.thema-donker .domein-resultaten { background: transparent; }
html.thema-donker .domein-resultaat  {
    background: var(--aurora-surface-1);
    border: 1px solid var(--aurora-border);
}
html.thema-donker .domein-naam-tekst { color: var(--aurora-text); }
html.thema-donker .domein-tabel th   { border-color: var(--aurora-border); }
html.thema-donker .domein-tabel td   { border-color: rgba(168, 139, 250, 0.08); }
html.thema-donker .domein-rij:hover td { background: rgba(139, 92, 246, 0.05); }

/* ── Status badges ────────────────────────────────────────── */
html.thema-donker .status-badge.vrij {
    background: rgba(48, 209, 88, 0.12);
    color: #30d158;
}
html.thema-donker .status-badge.bezet {
    background: rgba(255, 255, 255, 0.07);
    color: var(--aurora-text-secondary);
}
html.thema-donker .status-badge-betaald {
    background: rgba(48, 209, 88, 0.12);
    color: #30d158;
}
html.thema-donker .status-badge-verwerkt {
    background: rgba(94, 92, 230, 0.20);
    color: #a5a3ff;
}
html.thema-donker .status-badge-openstaand {
    background: rgba(255, 214, 10, 0.12);
    color: #ffd60a;
}
html.thema-donker .status-badge-geannuleerd {
    background: rgba(255, 69, 58, 0.12);
    color: #ff453a;
}
html.thema-donker .status-badge-onbevestigd {
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
}

/* ── Formulieren ──────────────────────────────────────────── */
html.thema-donker input[type="text"],
html.thema-donker input[type="email"],
html.thema-donker input[type="password"],
html.thema-donker input[type="tel"],
html.thema-donker input[type="number"],
html.thema-donker select,
html.thema-donker textarea {
    background: var(--aurora-surface-flat);
    color: var(--aurora-text);
    border-color: var(--aurora-border);
}
html.thema-donker input::placeholder,
html.thema-donker textarea::placeholder {
    color: var(--aurora-text-muted);
}
html.thema-donker input:focus,
html.thema-donker select:focus,
html.thema-donker textarea:focus {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.20);
    outline: none;
}

/* ── Mijn account ──────────────────────────────────────────── */
html.thema-donker .account-header {
    background: rgba(16, 12, 26, 0.90);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--aurora-border);
}

html.thema-donker .account-welkom {
    color: var(--aurora-text-secondary);
}
html.thema-donker .account-welkom strong {
    color: var(--aurora-text);
}

html.thema-donker .account-nav a {
    color: var(--aurora-text-secondary);
}
html.thema-donker .account-nav a:hover {
    color: var(--aurora-text);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}
html.thema-donker .account-nav a.actief {
    color: #4da3ff;
    background: rgba(10, 132, 255, 0.18);
}

html.thema-donker .account-uitloggen {
    color: var(--apple-blue);
}

html.thema-donker .account-sectie {
    background: var(--aurora-surface-1);
    border: 1px solid var(--aurora-border);
}
html.thema-donker .bestellingen-tabel th {
    color: var(--aurora-text-secondary);
    border-color: var(--aurora-border);
}
html.thema-donker .bestellingen-tabel td {
    border-color: rgba(168, 139, 250, 0.08);
    color: var(--aurora-text);
}
html.thema-donker .bestellingen-tabel tr:hover td {
    background: rgba(139, 92, 246, 0.05);
}

/* ── Bestelling voltooid ──────────────────────────────────── */
html.thema-donker .succes-kaart {
    background: var(--aurora-surface-1);
    border-color: var(--aurora-border);
}

html.thema-donker .succes-kaart h1 {
    color: var(--aurora-text);
}

html.thema-donker .succes-icoon {
    background: rgba(48, 209, 88, 0.12);
    color: #30d158;
}

html.thema-donker .bestelnummer-badge {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--aurora-border-strong);
}

html.thema-donker .bestelnummer-badge small {
    color: var(--aurora-accent-soft);
}

html.thema-donker .bestelnummer-badge .domein-naam {
    color: var(--aurora-text);
}

html.thema-donker .succes-totaal {
    background: rgba(255, 255, 255, 0.04);
}

html.thema-donker .succes-totaal .label {
    color: var(--aurora-text-secondary);
}

/* ── Bestelling bevestigen ────────────────────────────────── */
html.thema-donker .bevestig-item {
    background: var(--aurora-surface-1);
    border-color: var(--aurora-border);
}

html.thema-donker .bevestig-item-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--aurora-border);
    color: var(--aurora-text);
}

html.thema-donker .bevestig-item-header .actie-badge {
    background: rgba(139, 92, 246, 0.15);
    color: var(--aurora-accent-soft);
}

html.thema-donker .bevestig-rij {
    border-bottom-color: rgba(168, 139, 250, 0.10);
    color: var(--aurora-text);
}

html.thema-donker .bevestig-rij .label {
    color: var(--aurora-text-secondary);
}

html.thema-donker .bevestig-item-totaal {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: var(--aurora-border);
    color: var(--aurora-text-secondary);
}

html.thema-donker .bevestig-sectie {
    background: var(--aurora-surface-1);
    border-color: var(--aurora-border);
}

html.thema-donker .bevestig-sectie h3 {
    color: var(--aurora-text-muted);
}

html.thema-donker .prijs-totaal {
    background: var(--aurora-surface-1);
    border-color: var(--apple-blue);
}

html.thema-donker .prijs-totaal .label {
    color: var(--aurora-text);
}

/* ── Contactpagina ────────────────────────────────────────── */
html.thema-donker .contact-kaart {
    background: var(--aurora-surface-1);
    border: 1px solid var(--aurora-border);
}

html.thema-donker .contact-bedrijf {
    color: var(--aurora-text);
}

html.thema-donker .contact-adres {
    color: var(--aurora-text-secondary);
}

html.thema-donker .contact-rij {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--aurora-border);
}

html.thema-donker .contact-rij-label {
    color: var(--aurora-text-muted);
}

html.thema-donker .contact-rij-waarde {
    color: var(--aurora-text);
}

html.thema-donker .contact-kvk {
    border-top-color: var(--aurora-border);
}

html.thema-donker .contact-kvk-item {
    color: var(--aurora-text-secondary);
}

html.thema-donker .contact-kvk-item strong {
    color: var(--aurora-text);
}

/* ── Handleidingen (overzicht + detail) ───────────────────── */
html.thema-donker .handleiding-kaart {
    background: var(--aurora-surface-1);
    border-color: var(--aurora-border);
    color: var(--aurora-text);
}

html.thema-donker .handleiding-kaart:hover {
    border-color: var(--apple-blue);
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.20);
    color: var(--apple-blue);
}

html.thema-donker .handleiding-kaart-icon {
    background: none;
    color: var(--apple-gray);
}

html.thema-donker .handleiding-kaart-titel {
    color: var(--aurora-text);
}

html.thema-donker .handleiding-leeg {
    background: var(--aurora-surface-1);
    color: var(--aurora-text-secondary);
}

html.thema-donker .handleiding-leeg h3 {
    color: var(--aurora-text);
}

/* Detail-pagina: de inhoud van de handleiding */
html.thema-donker .handleiding-inhoud {
    color: #d8d3e8;
    border-top-color: var(--aurora-border);
}

html.thema-donker .handleiding-inhoud h2,
html.thema-donker .handleiding-inhoud h3,
html.thema-donker .handleiding-inhoud h4 {
    color: var(--aurora-text);
}

html.thema-donker .handleiding-inhoud p,
html.thema-donker .handleiding-inhoud li,
html.thema-donker .handleiding-inhoud td {
    color: #d8d3e8;
}

html.thema-donker .handleiding-inhoud strong,
html.thema-donker .handleiding-inhoud b {
    color: var(--aurora-text);
}

html.thema-donker .handleiding-inhoud code,
html.thema-donker .handleiding-inhoud pre {
    background: rgba(255, 255, 255, 0.06);
    color: var(--aurora-accent-soft);
    border-radius: 6px;
    padding: 2px 6px;
}

html.thema-donker .handleiding-inhoud pre {
    padding: 16px;
}

html.thema-donker .handleiding-acties {
    border-top-color: var(--aurora-border);
}

/* ── Support sub-nav ──────────────────────────────────────── */
html.thema-donker .support-subnav {
    background: var(--apple-silver);
    border-color: var(--aurora-border);
}
html.thema-donker .support-subnav-link {
    color: var(--aurora-text-secondary);
}
html.thema-donker .support-subnav-link:hover {
    color: var(--aurora-text);
    background: rgba(255, 255, 255, 0.08);
}
html.thema-donker .support-subnav-link.actief {
    color: #4da3ff;
    background: rgba(10, 132, 255, 0.18);
}

/* ── Footer ────────────────────────────────────────────────── */
html.thema-donker footer {
    background: transparent;
    border-color: var(--aurora-border);
    color: var(--aurora-text-muted);
}

/* ── Mobiele navigatie overlay ────────────────────────────── */
html.thema-donker .nav-mobile {
    background: rgba(10, 8, 18, 0.94);
}

/* ── Thema-wisselaar in de menubalk ───────────────────────── */
html.thema-donker .thema-knop { color: var(--aurora-accent-soft); }
html.thema-donker .thema-knop:hover { background: rgba(139, 92, 246, 0.15); color: #fff; }

/* ── Thema-toggle knop (floating, alleen op pagina's zonder hoofdmenu) ── */
#thema-toggle-knop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    cursor: pointer;

    /* Licht thema stijl */
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 4px 20px rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}
#thema-toggle-knop svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}
#thema-toggle-knop:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

/* Donker (Aurora) thema stijl voor de knop */
html.thema-donker #thema-toggle-knop {
    background: var(--aurora-gradient);
    border-color: transparent;
    box-shadow: var(--aurora-glow-btn);
    color: #ffffff;
}
html.thema-donker #thema-toggle-knop:hover {
    box-shadow: 0 10px 30px -6px rgba(192, 38, 211, 0.85);
}

/* ── Homepage: extra informatie ─────────────────────────── */
html.thema-donker .hp-overstap-kaart {
    background: var(--aurora-gradient);
    box-shadow: var(--aurora-glow-card);
}
html.thema-donker .hp-belofte {
    background: var(--aurora-surface-1);
    border: 1px solid var(--aurora-border);
}
html.thema-donker .hp-belofte .hp-stip { background: var(--aurora-accent-soft); }
html.thema-donker .hp-mogelijk,
html.thema-donker .hp-cijfer {
    background: var(--aurora-surface-2);
    border: 1px solid var(--aurora-border);
}