:root {
    /* Dynamische kleuren uit stijl_instellingen */
    --wv-kleur-primair:           #ff0000;
    --wv-kleur-primair-hover:     #a30000;
    --wv-kleur-secundair:         #444444;
    --wv-kleur-tekst:             #ffffff;
    --wv-kleur-achtergrond-kaart: #101318;
    --wv-knop-radius:             6px;
    --wv-knop-padding:            9px 16px;

    /* Bestaande palet-variabelen (kun je later ook dynamisch maken) */
    --bg: #0f1016;
    --fg: #f5f5fb;
    --muted: #a8b0bd;
    --card: #171b23;
    --line: #262d39;
    --accent-red: #b31919;
    --accent-red-dark: #7f1010;
    --accent-gold: #d4af37;
    --accent-gold-soft: #f3e3a2;
    --focus: #f3c95f;
    --rad: 12px;
    --pad: 16px;
    --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
    --btn-tekst-goud: #ffd766;

    /* Knopkleuren – koppelen aan dynamische waarden */
    --knop-actie-van: var(--wv-kleur-primair);
    --knop-actie-tot: var(--wv-kleur-primair-hover);

    --knop-overzicht-van: #1e2330;
    --knop-overzicht-tot: #151821;

    --knop-positief-van: #15803d;
    --knop-positief-tot: #166534;

    --knop-negatief-van: #b91c1c;
    --knop-negatief-tot: #7f1010;

    --knop-pdf-van: #991b1b;
    --knop-pdf-tot: #451010;

    --knop-nieuw-van: #8b5cf6;
    --knop-nieuw-tot: #d4af37;

    --btn-primair-bg: #b30000;
    --btn-primair-fg: #ffffff;
    --btn-primair-bg-hover: #8b0000;
    --btn-primair-fg-hover: #ffffff;
    --btn-primair-border: #8b0000;
    --btn-primair-padding: 0.6rem 1.4rem;
    --btn-primair-radius: 999px;
    --btn-primair-font: 0.95rem;
    --btn-primair-weight: 600;
    --btn-primair-transform: uppercase;
    --btn-secundair-bg: #444444;
    --btn-secundair-fg: #ffffff;
    --btn-secundair-bg-hover: #222222;
    --btn-secundair-fg-hover: #ffffff;
    --btn-secundair-border: #444444;
    --btn-secundair-padding: 0.55rem 1.3rem;
    --btn-secundair-radius: 999px;
    --btn-secundair-font: 0.9rem;
    --btn-secundair-weight: 500;
    --btn-secundair-transform: none;
    --btn-accent-bg: linear-gradient(135deg, #d4af37 0%, #000000 65%);
    --btn-accent-fg: #f9f5e7;
    --btn-accent-bg-hover: linear-gradient(135deg, #ffd766 0%, #222222 65%);
    --btn-accent-fg-hover: #ffffff;
    --btn-accent-border: #b8962f;
    --btn-accent-padding: 0.6rem 1.4rem;
    --btn-accent-radius: 999px;
    --btn-accent-font: 0.95rem;
    --btn-accent-weight: 600;
    --btn-accent-transform: uppercase;
    --btn-portaal_actie-bg: #2e7d32;
    --btn-portaal_actie-fg: #ffffff;
    --btn-portaal_actie-bg-hover: #1b5e20;
    --btn-portaal_actie-fg-hover: #ffffff;
    --btn-portaal_actie-border: #1b5e20;
    --btn-portaal_actie-padding: 0.55rem 1.3rem;
    --btn-portaal_actie-radius: 999px;
    --btn-portaal_actie-font: 0.9rem;
    --btn-portaal_actie-weight: 600;
    --btn-portaal_actie-transform: uppercase;
    --btn-beheer_primair-bg: #283593;
    --btn-beheer_primair-fg: #ffffff;
    --btn-beheer_primair-bg-hover: #1a237e;
    --btn-beheer_primair-fg-hover: #ffffff;
    --btn-beheer_primair-border: #1a237e;
    --btn-beheer_primair-padding: 0.45rem 1.0rem;
    --btn-beheer_primair-radius: 6px;
    --btn-beheer_primair-font: 0.85rem;
    --btn-beheer_primair-weight: 600;
    --btn-beheer_primair-transform: uppercase;
    --btn-link_knop-bg: transparent;
    --btn-link_knop-fg: #b30000;
    --btn-link_knop-bg-hover: transparent;
    --btn-link_knop-fg-hover: #8b0000;
    --btn-link_knop-border: transparent;
    --btn-link_knop-padding: 0.2rem 0;
    --btn-link_knop-radius: 0;
    --btn-link_knop-font: 0.9rem;
    --btn-link_knop-weight: 500;
    --btn-link_knop-transform: none;
    --btn-negatief-bg: #b00020;
    --btn-negatief-fg: #ffffff;
    --btn-negatief-bg-hover: #7f0015;
    --btn-negatief-fg-hover: #ffffff;
    --btn-negatief-border: #7f0015;
    --btn-negatief-padding: 0.55rem 1.3rem;
    --btn-negatief-radius: 999px;
    --btn-negatief-font: 0.9rem;
    --btn-negatief-weight: 600;
    --btn-negatief-transform: uppercase;
    --btn-portaal_nieuwe_reservering-bg: #000000;
    --btn-portaal_nieuwe_reservering-fg: #f4d58d;
    --btn-portaal_nieuwe_reservering-bg-hover: #222222;
    --btn-portaal_nieuwe_reservering-fg-hover: #ffe9a8;
    --btn-portaal_nieuwe_reservering-border: #f4d58d;
    --btn-portaal_nieuwe_reservering-padding: 0.6rem 1.4rem;
    --btn-portaal_nieuwe_reservering-radius: 999px;
    --btn-portaal_nieuwe_reservering-font: 0.95rem;
    --btn-portaal_nieuwe_reservering-weight: 600;
    --btn-portaal_nieuwe_reservering-transform: uppercase;
}

/* ========================================================================== */
/* Basis                                                                     */
/* ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-y: scroll; /* altijd ruimte voor scrollbar */
}

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at top, #1d2230 0, #0b0d12 52%, #050609 100%);
    color: var(--fg);
    font-family: var(--font);
    line-height: 1.45;
}

a {
    color: var(--accent-gold-soft);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ========================================================================== */
/* Header / navigatie                                                        */
/* ========================================================================== */

.header {
    background: rgba(5, 6, 12, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 10px 0 14px;
}

.header img.logo {
    max-height: 150px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Navigatieknoppen */

.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(135deg, #2b1010, #19080a);
    color: var(--accent-gold-soft);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.7),
        0 6px 14px rgba(0, 0, 0, 0.55);
    transition:
        background .15s ease,
        transform .08s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.nav-link:hover {
    text-decoration: none;
    background: linear-gradient(135deg, #3b1414, #21090c);
    border-color: rgba(244, 202, 103, 0.7);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 8px 18px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
}

.nav-link.is-active {
    background: linear-gradient(135deg, #d02727, #8a1414);
    color: #fffbe7;
    border-color: var(--accent-gold);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.85),
        0 10px 20px rgba(0, 0, 0, 0.75);
}

/* Account / login */

.nav-account {
    position: relative;
}

.nav-account-toggle {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
}

.nav-link-account {
    cursor: pointer;
}

.nav-account-name {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-caret {
    margin-left: 4px;
    font-size: 11px;
    opacity: .8;
}

/* Dropdown-menu */

.nav-account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .7);
    min-width: 200px;
    padding: 6px 0;
    display: none;
    z-index: 30;
}

.nav-account.is-open .nav-account-menu {
    display: block;
}

.nav-account-menu a {
    display: block;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--fg);
    text-align: left;
}

.nav-account-menu a:hover {
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
}

.nav-account-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.08);
}

/* ========================================================================== */
/* Layout                                                                    */
/* ========================================================================== */

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

main {
    padding: 24px 0;
}

/* ========================================================================== */
/* Kaarten / typografie                                                      */
/* ========================================================================== */

.kaart {
    background: linear-gradient(145deg, #181d27, #12151d);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--rad);
    padding: var(--pad);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

.kaart + .kaart {
    margin-top: 16px;
}

.kaart h2:first-child {
    margin-top: 0;
}

h1 {
    margin: 0 0 12px;
}

h2 {
    margin: 0 0 10px;
}

h3 {
    margin: 10px 0 6px;
}

.klein {
    font-size: 13px;
    color: var(--muted);
}

.klein--mt {
    margin-top: 8px;
}

.tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(247, 208, 88, 0.12);
    color: var(--accent-gold-soft);
    font-size: 11px;
    border: 1px solid rgba(245, 211, 117, 0.4);
}

.kaart--center {
    text-align: center;
}

/* ========================================================================== */
/* Knoppen                                                                   */
/* ========================================================================== */

/* Grote icoon-knop (datum-kalender) */
.knop--icoon-groot {
    width: 90px;
    height: 90px;
    padding: 0;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--accent-gold), var(--accent-gold-soft));
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.4);
    transition: transform .1s ease, box-shadow .1s ease, background .12s ease, border-color .12s ease;
}

/* Icoon in de grote knop */
.knop--icoon-groot i {
    font-size: 56px;
    line-height: 1;
    display: block;
    color: #111;
}

/* Hover op de grote kalenderknop */
.knop--icoon-groot:hover {
    background: linear-gradient(145deg, #f5d45a, #ffeaa5);
    border-color: rgba(255, 239, 170, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

.knop--icoon-groot:hover i {
    color: #402000;
}

.knop--icoon-groot:active {
    transform: translateY(1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* Basisstijl voor alle knoppen (links én buttons) */
.knop,
.btn,
.btn-sec {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.7);
    transition:
        filter .12s ease,
        box-shadow .12s ease,
        transform .05s ease,
        border-color .12s ease;
}

/* Basiswaarden specifiek voor btn()-knoppen */
.btn,
.btn-sec {
    padding: var(--btn-padding, var(--wv-knop-padding));
    border-radius: var(--btn-radius, var(--wv-knop-radius));
    font-size: var(--btn-font, 14px);
    font-weight: var(--btn-weight, 600);
    text-transform: var(--btn-transform, none);
    background: var(--btn-bg, #333333);
    color: var(--btn-fg, #ffffff);
    border-color: var(--btn-border, rgba(0, 0, 0, 0.7));
}

/* Hover: knoppen op basis van .knop (oude systeem) */
.knop:hover {
    text-decoration: none;
    filter: brightness(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75);
}

/* Hover: nieuwe btn()-knoppen met eigen kleuren */
.btn:hover,
.btn-sec:hover {
    text-decoration: none;
    filter: brightness(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75);
    background: var(--btn-bg-hover, var(--btn-bg, #444444));
    color: var(--btn-fg-hover, var(--btn-fg, #ffffff));
}

/* Active (geldt voor alles) */
.knop:active,
.btn:active,
.btn-sec:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

/* Type-specifieke btn()-knoppen uit instellingen_buttons */
.btn-primair {
    --btn-bg: var(--btn-primair-bg, #333333);
    --btn-fg: var(--btn-primair-fg, #ffffff);
    --btn-bg-hover: var(--btn-primair-bg-hover, var(--btn-primair-bg, #444444));
    --btn-fg-hover: var(--btn-primair-fg-hover, var(--btn-primair-fg, #ffffff));
    --btn-border: var(--btn-primair-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-primair-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-primair-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-primair-font, 14px);
    --btn-weight: var(--btn-primair-weight, 600);
    --btn-transform: var(--btn-primair-transform, none);
}
.btn-secundair {
    --btn-bg: var(--btn-secundair-bg, #333333);
    --btn-fg: var(--btn-secundair-fg, #ffffff);
    --btn-bg-hover: var(--btn-secundair-bg-hover, var(--btn-secundair-bg, #444444));
    --btn-fg-hover: var(--btn-secundair-fg-hover, var(--btn-secundair-fg, #ffffff));
    --btn-border: var(--btn-secundair-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-secundair-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-secundair-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-secundair-font, 14px);
    --btn-weight: var(--btn-secundair-weight, 600);
    --btn-transform: var(--btn-secundair-transform, none);
}
.btn-accent {
    --btn-bg: var(--btn-accent-bg, #333333);
    --btn-fg: var(--btn-accent-fg, #ffffff);
    --btn-bg-hover: var(--btn-accent-bg-hover, var(--btn-accent-bg, #444444));
    --btn-fg-hover: var(--btn-accent-fg-hover, var(--btn-accent-fg, #ffffff));
    --btn-border: var(--btn-accent-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-accent-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-accent-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-accent-font, 14px);
    --btn-weight: var(--btn-accent-weight, 600);
    --btn-transform: var(--btn-accent-transform, none);
}
.btn-portaal_actie {
    --btn-bg: var(--btn-portaal_actie-bg, #333333);
    --btn-fg: var(--btn-portaal_actie-fg, #ffffff);
    --btn-bg-hover: var(--btn-portaal_actie-bg-hover, var(--btn-portaal_actie-bg, #444444));
    --btn-fg-hover: var(--btn-portaal_actie-fg-hover, var(--btn-portaal_actie-fg, #ffffff));
    --btn-border: var(--btn-portaal_actie-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-portaal_actie-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-portaal_actie-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-portaal_actie-font, 14px);
    --btn-weight: var(--btn-portaal_actie-weight, 600);
    --btn-transform: var(--btn-portaal_actie-transform, none);
}
.btn-beheer_primair {
    --btn-bg: var(--btn-beheer_primair-bg, #333333);
    --btn-fg: var(--btn-beheer_primair-fg, #ffffff);
    --btn-bg-hover: var(--btn-beheer_primair-bg-hover, var(--btn-beheer_primair-bg, #444444));
    --btn-fg-hover: var(--btn-beheer_primair-fg-hover, var(--btn-beheer_primair-fg, #ffffff));
    --btn-border: var(--btn-beheer_primair-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-beheer_primair-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-beheer_primair-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-beheer_primair-font, 14px);
    --btn-weight: var(--btn-beheer_primair-weight, 600);
    --btn-transform: var(--btn-beheer_primair-transform, none);
}
.btn-link_knop {
    --btn-bg: var(--btn-link_knop-bg, #333333);
    --btn-fg: var(--btn-link_knop-fg, #ffffff);
    --btn-bg-hover: var(--btn-link_knop-bg-hover, var(--btn-link_knop-bg, #444444));
    --btn-fg-hover: var(--btn-link_knop-fg-hover, var(--btn-link_knop-fg, #ffffff));
    --btn-border: var(--btn-link_knop-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-link_knop-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-link_knop-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-link_knop-font, 14px);
    --btn-weight: var(--btn-link_knop-weight, 600);
    --btn-transform: var(--btn-link_knop-transform, none);
}
.btn-negatief {
    --btn-bg: var(--btn-negatief-bg, #333333);
    --btn-fg: var(--btn-negatief-fg, #ffffff);
    --btn-bg-hover: var(--btn-negatief-bg-hover, var(--btn-negatief-bg, #444444));
    --btn-fg-hover: var(--btn-negatief-fg-hover, var(--btn-negatief-fg, #ffffff));
    --btn-border: var(--btn-negatief-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-negatief-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-negatief-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-negatief-font, 14px);
    --btn-weight: var(--btn-negatief-weight, 600);
    --btn-transform: var(--btn-negatief-transform, none);
}
.btn-portaal_nieuwe_reservering {
    --btn-bg: var(--btn-portaal_nieuwe_reservering-bg, #333333);
    --btn-fg: var(--btn-portaal_nieuwe_reservering-fg, #ffffff);
    --btn-bg-hover: var(--btn-portaal_nieuwe_reservering-bg-hover, var(--btn-portaal_nieuwe_reservering-bg, #444444));
    --btn-fg-hover: var(--btn-portaal_nieuwe_reservering-fg-hover, var(--btn-portaal_nieuwe_reservering-fg, #ffffff));
    --btn-border: var(--btn-portaal_nieuwe_reservering-border, rgba(0,0,0,0.7));
    --btn-padding: var(--btn-portaal_nieuwe_reservering-padding, var(--wv-knop-padding));
    --btn-radius: var(--btn-portaal_nieuwe_reservering-radius, var(--wv-knop-radius));
    --btn-font: var(--btn-portaal_nieuwe_reservering-font, 14px);
    --btn-weight: var(--btn-portaal_nieuwe_reservering-weight, 600);
    --btn-transform: var(--btn-portaal_nieuwe_reservering-transform, none);
}


/* Hoverkleur alleen voor .btn-varianten met bg_hover/fg_hover */
.btn:hover,
.btn-sec:hover {
    background: var(--btn-bg-hover, var(--btn-bg, #333333));
    color: var(--btn-fg-hover, var(--btn-fg, #ffffff));
}

.knop:active,
.btn:active,
.btn-sec:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

/* Pictogram in knoppen (niet voor grote datumknop) */
.knop:not(.knop--icoon-groot) i,
.btn i,
.btn-sec i {
    font-size: 14px;
    line-height: 1;
}

/* 1) Algemene hoofdacties (oude knop--klassen) */
.knop--primair,
.knop--actie {
    background: linear-gradient(145deg, var(--knop-actie-van), var(--knop-actie-tot));
    color: #fffdf4;
}

/* 2) Neutrale / overzicht-knoppen */
.knop--secundair,
.knop--overzicht {
    background: linear-gradient(145deg, var(--knop-overzicht-van), var(--knop-overzicht-tot));
    color: var(--fg);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}

.knop--secundair:hover,
.knop--overzicht:hover {
    border-color: var(--accent-gold);
}

/* 3) Positieve acties */
.knop--positief {
    background: linear-gradient(145deg, var(--knop-positief-van), var(--knop-positief-tot));
    color: #ecfdf5;
    border-color: rgba(34, 197, 94, 0.7);
}

/* 4) Negatieve / gevaar-acties */
.knop--gevaar,
.knop--negatief {
    background: linear-gradient(145deg, var(--knop-negatief-van), var(--knop-negatief-tot));
    color: #ffe4e0;
    border-color: rgba(248, 113, 113, 0.7);
}

/* 5) PDF / documenten */
.knop--pdf {
    background: linear-gradient(145deg, var(--knop-pdf-van), var(--knop-pdf-tot));
    color: #ffe4e6;
    border-color: rgba(248, 113, 113, 0.9);
}

/* 6) “Nieuwe reservering” – legacy variant
   (voor zover nog ergens class="knop knop--nieuw" staat) */
.knop--nieuw {
    background: #000000;
    color: var(--btn-tekst-goud, #ffd766);
    border-color: #d4af37;
}

/* Dynamische knop-stijlen uit de database (oude kleur_knop_* structuur) */
.knop.knop--vraag-code {
    background: #d4af37;
    border-color: #b8860b;
    color: #000000;
}
.knop.knop--vraag-code:hover {
    filter: brightness(1.05);
}
.knop.knop--vraag-code:active {
    filter: brightness(0.95);
}

/* Dynamische btn()-klassen uit instellingen_buttons (.btn-[sleutel]) */

/* Grootte-varianten */
.knop--groot {
    padding: 12px 20px;
    font-size: 15px;
}

.knop--klein {
    padding: 6px 10px;
    font-size: 13px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}

/* Volledige breedte */
.knop--volledige-breedte {
    width: 100%;
    justify-content: center;
}

/* Tekstachtige knop (linkstijl) */
.knop--vlak,
.btn-link {
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    padding: 0;
    font-size: 13px;
}

/* Icon-only / kleine iconknoppen */
.knop--icoon-klein,
.btn-icon-sm {
    padding: 0 10px;
    min-width: 40px;
}

/* Knoppenrijen */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.actions-bottom {
    margin-top: 1.5rem;
}

.knoppen,
.knoppen-flex,
.knoppen-rij,
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.knoppen-rij--links   { justify-content: flex-start; }
.knoppen-rij--midden  { justify-content: center; }
.knoppen-rij--rechts  { justify-content: flex-end; }

.actions-bottom {
    margin-top: 20px;
}

/* Rode hoofdknop voor PDF-download (Bootstrap-achtige naam) */
.btn-danger {
    --btn-bg: #c53030;
    --btn-border: #c53030;
    --btn-bg-hover: #9b2c2c;
}

/* ================================================
   Knopvariant: zwart-goud (kan nog gebruikt worden)
   ================================================ */

.knop--zwartgoud {
    background: #000000;
    color: #f4d58d;
    border-color: #f4d58d;
}

.knop--zwartgoud:hover,
.knop--zwartgoud:focus {
    background: #222222;
    color: #ffe9a8;
    border-color: #ffe9a8;
}

/* ========================================================================== */
/* Formulieren                                                               */
/* ========================================================================== */

form label {
    display: block;
    margin: 0 0 10px;
    font-size: 14px;
}

form label span.lbl {
    display: block;
    margin-bottom: 3px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 8px 9px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #10141d;
    color: var(--fg);
    font: inherit;
}

textarea {
    min-height: 80px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--focus);
}

/* Rijen / kolommen */

.rij {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kol-2 {
    flex: 1 1 200px;
}

.formulier-rij-inline,
.form-inline-row {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 320px;
}

.formulier-rij-groei,
.form-inline-grow {
    flex: 1;
}

/* Dagdeel-keuze */

.dagdeel-optie {
    display: block;
    margin-bottom: 6px;
}

.dagdeel-optie input[type="radio"] {
    margin-right: 6px;
}

/* ========================================================================== */
/* Tabellen                                                                  */
/* ========================================================================== */

.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabel th,
.tabel td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.tabel th {
    background: rgba(13, 18, 30, 0.9);
    font-weight: 600;
}

.tabel td img {
    max-height: 80px;
    width: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    object-fit: cover;
}

.tabel--compact {
    margin-bottom: 10px;
}

.tabel__label-col {
    width: 180px;
}

.table-col-check,
.col-narrow,
.kol-klein {
    width: 40px;
}

.table-col-photo,
.col-narrow-md {
    width: 80px;
}

.table-col-aantal,
.col-amount {
    width: 120px;
}

.table-col-aantal-wide {
    width: 140px;
}

/* Kostuumfoto's */

.kostuum-foto {
    height: 70px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    object-fit: cover;
}

.kostuum-foto-sm {
    height: 60px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .08);
}

.kostuum-thumb,
.img-thumb {
    height: 70px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
}

/* ================================================
   Klikbare rijen (radio/checkbox-tabellen)
   ================================================ */

.tabel tr.js-select-radio,
.tabel tr.js-select-checkbox {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.tabel tr.js-select-radio:hover,
.tabel tr.js-select-checkbox:hover {
    background-color: rgba(0, 0, 0, 0.025);
}

.tabel tr.js-select-radio input,
.tabel tr.js-select-checkbox input {
    cursor: pointer;
}

/* ================================================
   Aantal-blokken (+ / - en totalen)
   ================================================ */

.aantal-blok {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.js-aantal-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Plus/min-knoppen naast de inputs */
.aantal-btn {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    min-width: 2rem;
    text-align: center;
    background: #f7f7f7;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.aantal-btn:hover {
    background: #eee;
}

/* Numerieke inputs voor aantallen (smal, gecentreerd) */
.input-aantal,
.input-small {
    max-width: 4rem;
    text-align: center;
}

/* Tekstje onder de inputs met het totaalbedrag */
.aantal-totaal {
    display: block;
    margin-top: 2px;
}

/* Klein hulpcorrectie voor de kolommen in de rij-layout */
.rij .kol-2 {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .rij {
        display: flex;
        gap: 1.5rem;
    }
    .rij .kol-2 {
        flex: 1 1 0;
        margin-bottom: 0;
    }
}


/* ========================================================================== */
/* Meldingen                                                                 */
/* ========================================================================== */

.fout,
.waarschuwing,
.ok,
.melding {
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0 12px;
    font-size: 14px;
}

.fout {
    background: rgba(179, 38, 30, .14);
    border: 1px solid rgba(234, 67, 53, .7);
    color: #ffd0c8;
}

.waarschuwing {
    background: rgba(251, 188, 5, .10);
    border: 1px solid rgba(251, 188, 5, .7);
    color: #ffeaa5;
}

.ok {
    background: rgba(52, 168, 83, .12);
    border: 1px solid rgba(52, 168, 83, .75);
    color: #b9f8cb;
}

.melding {
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.7);
    color: #dbeafe;
}

.list-errors,
.list-compact {
    margin: 0 0 0 18px;
    padding: 0;
}

.geannuleerd,
.doorstreept {
    text-decoration: line-through;
    opacity: 0.7;
}

/* ========================================================================== */
/* Kostuums – thumbnails en lijsten                                          */
/* ========================================================================== */

.kostuum-lijst {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.kostuum-lijst li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 8px 0;
    position: relative;
    overflow: hidden;
    background: #fafafa;
}

.kostuum-lijst .title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kostuum-lijst .thumb {
    flex: 0 0 auto;
    position: relative;
}

.kostuum-lijst .thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #0c0f13;
    transition: transform .15s ease, box-shadow .15s ease;
    transform-origin: center center;
}

.kostuum-lijst .thumb:hover img {
    transform: scale(1.8);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    z-index: 3;
}

.kostuum-lijst .noimg {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    background: #f0f0f0;
}

/* ========================================================================== */
/* Sint-dropdown preview                                                      */
/* ========================================================================== */

.sint-select {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sint-thumb {
    flex: 0 0 auto;
}

.sint-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #0c0f13;
    transition: transform .15s ease;
    transform-origin: center center;
}

.sint-thumb:hover img {
    transform: scale(1.8);
}

/* ========================================================================== */
/* Bestellen – bundels & staffelkorting                                      */
/* ========================================================================== */

.bundel-form {
    margin-top: 16px;
}

.bundel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.bundel-kaart,
.staffel-kaart {
    background: #020617;
    border-radius: 12px;
    border: 1px solid #1f2937;
    padding: 10px 12px;
}

.bundel-optie {
    display: flex;
    gap: 10px;
    cursor: pointer;
}

.bundel-optie input[type="radio"] {
    margin-top: 4px;
}

.bundel-body {
    flex: 1;
}

.bundel-titel {
    font-weight: 600;
    margin-bottom: 3px;
}

.bundel-sub {
    font-size: 13px;
    color: #9ca3af;
}

.bundel-voorwaarden {
    margin-top: 4px;
    font-size: 13px;
}

.bundel-korting {
    margin-top: 4px;
    font-size: 13px;
    color: #facc15;
}

.staffel-kaart .staffel-lijst {
    margin: 6px 0 0 12px;
    padding: 0;
    list-style: disc;
    font-size: 13px;
}

.bundel-acties {
    margin-top: 12px;
}

/* ========================================================================== */
/* Lijsten, teksten en logo's                                                 */
/* ========================================================================== */

.lijst {
    margin: 0;
    padding-left: 18px;
}

.lijst--genummerd {
    list-style: decimal;
}

.lijst--links {
    list-style: disc;
}

.logo-placeholder {
    font-weight: bold;
    font-size: 20px;
}

.logo-klein {
    height: 80px;
    margin: 10px 0;
}

.logo--groot {
    height: 150px;
}

/* Voorwaarden */

.voorwaarden__versie {
    margin-bottom: 4px;
}

.voorwaarden__logo-blok {
    margin: 12px 0;
    text-align: left;
}

.voorwaarden__disclaimer {
    margin-top: 8px;
}

.voorwaarden__download-form {
    margin-top: 10px;
}

.lijn {
    border: 0;
    border-top: 1px solid var(--line, rgba(255,255,255,0.2));
    margin: 10px 0;
}

/* FAQ-accordion */

.faq-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    margin: 10px 0;
}

.faq-item__summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 600;
}

.faq-item[open] .faq-item__summary {
    border-bottom: 1px solid var(--line);
}

.faq-item__body {
    padding: 12px 14px;
}

.faq-item__summary::-webkit-details-marker {
    display: none;
}

.faq-item__summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    transform: translateY(-1px);
}

.faq-item[open] .faq-item__summary::before {
    content: "▾";
}

/* ========================================================================== */
/* Print                                                                      */
/* ========================================================================== */

@page {
    size: A4;
    margin: 12mm;
}

@media print {

    .no-print,
    .no-print *,
    .knoppen,
    .knoppen * {
        display: none !important;
    }

    body * {
        visibility: hidden !important;
    }

    .print-area,
    .print-area * {
        visibility: visible !important;
    }

    .print-area {
        position: static !important;
        overflow: visible !important;
    }

    table {
        page-break-inside: auto;
    }

    tr,
    td,
    th {
        page-break-inside: avoid;
    }

    h1,
    h2 {
        margin: 0 0 8px;
    }
}

/* ========================================================================== */
/* Footer & utilities                                                         */
/* ========================================================================== */

.site-footer {
    color: var(--muted);
    font-size: 13px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    text-align: center;
    margin-top: 24px;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 16px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }

.mb-1 { margin-bottom: 8px; }

.mt-sm { margin-top: 8px; }

.is-hidden { display: none; }

.input-aantal,
.input-small {
    width: 80px;
    text-align: right;
}

/* ========================================================================== */
/* Responsive                                                                 */
/* ========================================================================== */

@media (max-width: 640px) {

    .header {
        padding: 4px 0 8px;
    }

    .header img.logo {
        max-height: 120px;
        margin: 0 auto;
    }

    .nav {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px 8px;
    }

    .nav-left,
    .nav-right {
        justify-content: center;
    }

    .nav-account-menu {
        right: 0;
        left: auto;
        transform: none;
        min-width: 200px;
    }

    .wrap {
        padding: 0 12px;
    }

    main {
        padding: 16px 0 24px;
    }

    .kaart {
        padding: 12px;
    }

    .tabel {
        font-size: 13px;
    }

    .tabel th,
    .tabel td {
        padding: 5px 6px;
    }

    .tabel thead {
        display: none;
    }

    .tabel tr {
        display: block;
        margin-bottom: 14px;
        padding: 10px 10px 8px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
    }

    .tabel td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .tabel td:last-child {
        border-bottom: none;
    }

    .tabel td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--accent-gold-soft);
        margin-right: 10px;
        flex: 0 0 45%;
        max-width: 45%;
        padding-right: 4px;
    }

    .tabel td span,
    .tabel td a,
    .tabel td strong {
        word-break: break-word;
    }

    .actions,
    .knoppen,
    .knoppen-rij {
        flex-direction: column;
        width: 100%;
        gap: 6px;
        margin-top: 10px;
    }

    .actions .btn,
    .actions .btn-sec,
    .actions .knop,
    .actions .knop-sec,
    .knoppen .knop,
    .knoppen .btn,
    .knoppen .btn-sec,
    .knoppen-rij .knop {
        width: 100%;
        justify-content: center;
    }
}