:root{
    /* Thema */
    --wv-kleur-primair:           #f3c95f;
    --wv-kleur-primair-hover:     #19080a;
    --wv-kleur-secundair:         #1e2330;
    --wv-kleur-tekst:             #f5f5fb;
    --wv-kleur-muted:             #a8b0bd;
    --wv-kleur-achtergrond-kaart: #171b23;
    --wv-knop-radius:             10px;
    --wv-knop-padding:            10px 16px;

    /* Basis tokens */
    --bg: #05060a;
    --fg: #f5f5fb;
    --muted: #a8b0bd;
    --card: #171b23;
    --line: #262d39;

    --accent-red: #f3c95f;
    --accent-red-dark: #19080a;
    --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;

    --knop-tekst-goud: #ffd766;
    --footer-bg: #101118;

    /* Nav eindkleuren */
    --nav-bg-eind: #19080a;
    --nav-bg-eind-hover: #21090c;

    /* Knoppen defaults (zwart → goud) */
    --knop-bg:        #000000;
    --knop-fg:        var(--knop-tekst-goud, #ffd766);
    --knop-bg-hover:  var(--accent-gold);
    --knop-fg-hover:  #000000;
    --knop-border:    #d4af37;
    --knop-padding:   var(--wv-knop-padding);
    --knop-radius:    var(--wv-knop-radius);
    --knop-font:      14px;
    --knop-weight:    600;
    --knop-transform: none;

    /* Legacy gradients */
    --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;

    /* Meldingen */
    --alert-error-bg:      rgba(179, 38, 30, .14);
    --alert-error-border:  rgba(234, 67, 53, .7);
    --alert-error-text:    #ffd0c8;

    --alert-ok-bg:         rgba(52, 168, 83, .12);
    --alert-ok-border:     rgba(52, 168, 83, .75);
    --alert-ok-text:       #b9f8cb;

    --alert-warn-bg:       rgba(251, 188, 5, .10);
    --alert-warn-border:   rgba(251, 188, 5, .7);
    --alert-warn-text:     #ffeaa5;

    --alert-info-bg:       rgba(37, 99, 235, 0.18);
    --alert-info-border:   rgba(59, 130, 246, 0.7);
    --alert-info-text:     #dbeafe;
}

/* ========================================================================== */
/* BASISLAYOUT                                                                */
/* ========================================================================== */

*{box-sizing:border-box}
html{min-height:100%;overflow-y:scroll}

body{
    margin:0;
    min-height:100vh;

    /* Fallback effen kleur */
    background-color: #05060a;

    /* Gradient body_bg_top/mid/bottom */
    background-image:
        radial-gradient(120% 200% at 50% 0%, #f3e3a2 0%, transparent 55%),
        radial-gradient(120% 200% at 50% 100%, #050609 0%, transparent 55%),
        linear-gradient(180deg, #f3e3a2 0%, #0b0d12 45%, #050609 100%);

    color:var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
}

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

/* ========================================================================== */
/* HEADER / NAV                                                               */
/* ========================================================================== */

.site-header{background:transparent}

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

.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;
    padding:0;
}

.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,.10);
    background:linear-gradient(135deg,var(--wv-kleur-secundair),var(--nav-bg-eind));
    color:var(--accent-gold-soft);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.7),
        0 6px 14px rgba(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,var(--wv-kleur-secundair),var(--nav-bg-eind-hover));
    border-color:rgba(244,202,103,.7);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.8),
        0 8px 18px rgba(0,0,0,.6);
    transform:translateY(-1px);
}

.nav-link.is-active{
    background:linear-gradient(135deg,var(--wv-kleur-primair),var(--wv-kleur-primair-hover));
    color:#fffbe7;
    border-color:var(--accent-gold);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.85),
        0 10px 20px rgba(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,.04);text-decoration:none}
.nav-account-menu-sep{height:1px;margin:4px 0;background:rgba(255,255,255,.08)}

/* ========================================================================== */
/* LAYOUT / KAARTEN / TYPOGRAFIE                                             */
/* ========================================================================== */

/* Portaal dashboard-tegels */
.portaal-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  margin-top:12px;
}
.portaal-tile h2{ margin:0 0 6px 0; }
.portaal-tile .actions{ margin-top:10px; }

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

.kaart{
    background:var(--card, #181d27);
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--rad);
    padding:var(--pad);
    box-shadow:0 16px 40px rgba(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,.12);
    color:var(--accent-gold-soft);
    font-size:11px;
    border:1px solid rgba(245,211,117,.4);
}

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

/* Tabellen – uitlijning prijzen & compacte weergave */
.tabel td.right,
.tabel th.right {
    text-align: right;
    white-space: nowrap;
}

.tabel--compact td,
.tabel--compact th {
    padding: 8px 10px;
}

.tabel caption {
    text-align: left;
    font-weight: 700;
    margin: 8px 0 6px;
}

/* Stap 3 layout */
.stap3-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.stap3-main{min-width:0}
.stap3-side .sticky{position:sticky;top:16px}

@media (max-width: 980px){
  .stap3-layout{grid-template-columns:1fr}
  .stap3-side{order:2}
}

/* Hero */
.stap3-hero{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.stap3-hero__h{margin:0 0 6px 0}
.stap3-hero__sub{margin:0}
.stap3-hero__meta{min-width:280px}
.meta-row{display:flex;gap:8px;align-items:baseline;margin:2px 0}
.meta-label{opacity:.8}

/* Tabs (nieuw: .tabs__*) */
.tabs{margin:10px 0 14px 0}

.tabs__bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tabs__tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  color:var(--fg);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.tabs__tab.is-active{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
}

.tabs__badge{
  display:inline-flex;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

/* CRUCIAAL: panels verbergen/tonen */
.tabs__panel{display:none}
.tabs__panel.is-active{display:block}

/* USP row */
.usp-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:.85em}
.badge--sub{font-size:.78em;opacity:.9}

/* Kostuum cards */
.kostuum-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width: 1100px){.kostuum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 620px){.kostuum-grid{grid-template-columns:1fr}}

.kostuum-card{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);cursor:pointer}
.kostuum-card input{position:absolute;opacity:0;pointer-events:none}
.kostuum-card:has(input:checked){outline:2px solid rgba(255,215,0,.65);border-color:rgba(255,215,0,.45);background:rgba(255,215,0,.06)}
.kostuum-card__media{display:block;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25);min-height:160px}
.kostuum-card__media img{width:100%;height:180px;object-fit:contain;display:block}
.kostuum-card__placeholder{display:flex;align-items:center;justify-content:center;height:180px;opacity:.75}
.kostuum-card__body{display:flex;flex-direction:column;gap:6px}
.kostuum-card__title{font-weight:700}
.kostuum-card__tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.82em}
.kostuum-card__price{margin-top:auto;font-weight:700;text-align:right}
.kostuum-card.is-neutral{grid-template-rows:1fr}
.kostuum-card.is-neutral .kostuum-card__price{text-align:left}

	/* Stap 3 (nieuwe markup): keuze-grid + cards */
	.keuze-grid{
		display:grid;
		grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
		gap:12px;
		margin-top:12px;
	}

	.keuze-card{
		display:grid;
		grid-template-rows:auto 1fr;
		gap:10px;
		padding:12px;
		border-radius:14px;
		background:rgba(255,255,255,.03);
		border:1px solid rgba(255,255,255,.10);
		cursor:pointer;
	}

	.keuze-input{
		position:absolute;
		opacity:0;
		pointer-events:none;
	}

	.keuze-card.is-selected{
		outline:2px solid rgba(255,215,0,.65);
		border-color:rgba(255,215,0,.45);
		background:rgba(255,215,0,.06);
	}

	.keuze-card__media{
		display:block;
		border-radius:12px;
		overflow:hidden;
		background:rgba(0,0,0,.25);
		min-height:160px;
	}

	.keuze-card__img{
		width:100%;
		height:180px;
		object-fit:contain;
		display:block;
	}

	.keuze-card__img.is-empty{
		height:180px;
	}

	.keuze-card__body{
		display:flex;
		flex-direction:column;
		gap:6px;
	}

	.keuze-card__title{font-weight:800}
	.keuze-card__pill{opacity:.9}
	.keuze-card__price{margin-top:auto;font-weight:800}

.keuze-card__status--bezet { color: #e53935; }
.keuze-card__status { margin-right: .4rem; }

/* Diensten rows */
.diensten-lijst{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.dienst-row{display:grid;grid-template-columns:1fr 140px 220px;gap:12px;align-items:center;
  padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10)}
@media (max-width: 820px){
  .dienst-row{grid-template-columns:1fr}
  .dienst-row__price{display:flex;justify-content:space-between}
}
.dienst-row__title{font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dienst-row__price{text-align:right;font-weight:800}
.dienst-row__qty{text-align:right}

/* Optie kaart */
.optie-kaart{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);cursor:pointer}
.optie-kaart__title{font-weight:800;display:block;margin-bottom:4px}

/* Sticky */
.sticky{padding:12px;border-radius:14px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.12)}
.sticky__h{font-weight:900;margin-bottom:10px}
.sticky__row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sticky__row:last-of-type{border-bottom:none}
.sticky__note{margin-top:10px;opacity:.85}
.sticky__cta{margin-top:12px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,215,0,.45);
  background:rgba(255,215,0,.10);cursor:pointer;font-weight:900}

.kostuum-bezet-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    color: #c0392b; /* rood */
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    padding: 6px;
    z-index: 5;
}

/* ========================================================================== */
/* KNOPPEN                                                                    */
/* ========================================================================== */

.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,.5);
    cursor:pointer;border:1px solid rgba(0,0,0,.4);
    transition: transform .1s ease, box-shadow .1s ease, background .12s ease, border-color .12s ease;
}
.knop--icoon-groot i{font-size:56px;line-height:1;display:block;color:#111}
.knop--icoon-groot:hover{
    background:linear-gradient(145deg,#f5d45a,#ffeaa5);
    border-color:rgba(255,239,170,.9);
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(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,.45)}

.knop,.knop-sec{
    appearance:none;border:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    text-decoration:none;
    padding:var(--knop-padding, var(--wv-knop-padding));
    border-radius:var(--knop-radius, var(--wv-knop-radius));
    font-size:var(--knop-font, 14px);
    font-weight:var(--knop-weight, 600);
    text-transform:var(--knop-transform, none);
    background:var(--knop-bg, var(--wv-kleur-primair));
    color:var(--knop-fg, #ffffff);
    box-shadow:0 10px 24px rgba(0,0,0,.65);
    border:1px solid var(--knop-border, rgba(0,0,0,.7));
    transition: filter .12s ease, box-shadow .12s ease, transform .05s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.knop:hover,.knop-sec:hover{
    text-decoration:none;
    filter:brightness(1.02);
    box-shadow:0 12px 28px rgba(0,0,0,.75);
    background:var(--knop-bg-hover, var(--knop-bg, var(--wv-kleur-primair-hover)));
    color:var(--knop-fg-hover, var(--knop-fg, #ffffff));
}
.knop:active,.knop-sec:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(0,0,0,.7)}

/* Knopgroepen + per-knop overrides */
.knop-variant-volgende {
    --knop-bg: #15803d;
    --knop-fg: #ecfdf5;
    --knop-bg-hover: #166534;
    --knop-fg-hover: #dcfce7;
    --knop-border: rgba(34,197,94,0.8);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-vorige {
    --knop-bg: #374151;
    --knop-fg: #e5e7eb;
    --knop-bg-hover: #111827;
    --knop-fg-hover: #f9fafb;
    --knop-border: rgba(31,41,55,0.9);
    --knop-padding: 8px 16px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 500;
    --knop-transform: none;
}
.knop-variant-login {
    --knop-bg: #92400e;
    --knop-fg: #fff7ed;
    --knop-bg-hover: #b45309;
    --knop-fg-hover: #fffbeb;
    --knop-border: rgba(245,158,11,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-bevestig {
    --knop-bg: #b31919;
    --knop-fg: #fff1f2;
    --knop-bg-hover: #7f1010;
    --knop-fg-hover: #fee2e2;
    --knop-border: rgba(248,113,113,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-download_pdf {
    --knop-bg: #991b1b;
    --knop-fg: #ffe4e6;
    --knop-bg-hover: #451010;
    --knop-fg-hover: #fee2e2;
    --knop-border: rgba(248,113,113,0.9);
    --knop-padding: 8px 16px;
    --knop-radius: 10px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: none;
}
.knop-variant-profiel {
    --knop-bg: #1d4ed8;
    --knop-fg: #e0f2fe;
    --knop-bg-hover: #1e40af;
    --knop-fg-hover: #dbeafe;
    --knop-border: rgba(59,130,246,0.9);
    --knop-padding: 8px 16px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: none;
}
.knop-variant-portaal {
    --knop-bg: #000000;
    --knop-fg: #f3e3a2;
    --knop-bg-hover: #111827;
    --knop-fg-hover: #fef9c3;
    --knop-border: rgba(244,202,103,0.7);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: none;
}
.knop-variant-annuleren {
    --knop-bg: #b91c1c;
    --knop-fg: #ffe4e0;
    --knop-bg-hover: #7f1010;
    --knop-fg-hover: #fee2e2;
    --knop-border: rgba(255,255,255,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-nieuw {
    --knop-bg: #9a8c47;
    --knop-fg: #000000;
    --knop-bg-hover: #f3dd6d;
    --knop-fg-hover: #000000;
    --knop-border: rgba(000,000,000,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-oud {
    --knop-bg: #4b5563;
    --knop-fg: #e5e7eb;
    --knop-bg-hover: #374151;
    --knop-fg-hover: #f9fafb;
    --knop-border: rgba(55,65,81,0.9);
    --knop-padding: 6px 14px;
    --knop-radius: 999px;
    --knop-font: 13px;
    --knop-weight: 500;
    --knop-transform: none;
}
.knop-portaal_terug_portaal {
    --knop-bg: #1e293b;
    --knop-fg: #e5e7eb;
    --knop-bg-hover: #111827;
    --knop-fg-hover: #f9fafb;
    --knop-border: #0f172a;
}
.knop-portaal_nieuwe_reservering {
    --knop-bg: #d4af37;
    --knop-fg: #111111;
    --knop-bg-hover: #f3c95f;
    --knop-fg-hover: #000000;
    --knop-border: #b8860b;
}
.knop-bestel_annuleren {
    --knop-bg: #b91c1c;
    --knop-fg: #ffe4e0;
    --knop-bg-hover: #7f1010;
    --knop-fg-hover: #ffe4e0;
    --knop-border: #7f1010;
}

.knop:not(.knop--icoon-groot) i,.knop-sec i{font-size:14px;line-height:1}

.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,.12);
    box-shadow:0 8px 20px rgba(0,0,0,.55);
}
.knop--secundair:hover,.knop--overzicht:hover{border-color:var(--accent-gold)}

.knop--positief{
    background:linear-gradient(145deg,var(--knop-positief-van),var(--knop-positief-tot));
    color:#ecfdf5;
    border-color:rgba(34,197,94,.7);
}

.knop--gevaar,.knop--negatief{
    background:linear-gradient(145deg,var(--knop-negatief-van),var(--knop-negatief-tot));
    color:#ffe4e0;
    border-color:rgba(248,113,113,.7);
}

.knop-beheer-danger{
    background:linear-gradient(145deg,var(--knop-negatief-van),var(--knop-negatief-tot));
    color:#ffe4e0;
    border-color:rgba(248,113,113,.9);
}

.knop--pdf{
    background:linear-gradient(145deg,var(--knop-pdf-van),var(--knop-pdf-tot));
    color:#ffe4e6;
    border-color:rgba(248,113,113,.9);
}

.knop--nieuw{
    background:#000;
    color:var(--knop-tekst-goud, #ffd766);
    border-color:#d4af37;
}

/* Legacy .knop--* uit kleur_knop_* */
.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);
}

.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,.55)}
.knop--volledige-breedte{width:100%;justify-content:center}

.knop--vlak,.knop-link{
    background:transparent;
    box-shadow:none;
    border-color:transparent;
    padding:0;
    font-size:13px;
}

.knop--icoon-klein,.knop-icon-sm{padding:0 10px;min-width:40px}

.actions,.knoppen,.knoppen-flex,.knoppen-rij{
    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}

/* ========================================================================== */
/* 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="date"],
input[type="number"],
textarea,
select{
    background:var(--card);
    border-radius:8px;
    border:1px solid var(--line);
    padding:8px 10px;
    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);
}

/* ========================================================================== */
/* 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{
    font-weight:600;
    font-size:13px;
    background:var(--card);
    color:var(--fg);
}
.geannuleerd{text-decoration:line-through;opacity:.6}

/* ========================================================================== */
/* MELDINGEN                                                                  */
/* ========================================================================== */

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

.fout{
    background:var(--alert-error-bg, rgba(179, 38, 30, .14));
    border:1px solid var(--alert-error-border, rgba(234, 67, 53, .7));
    color:var(--alert-error-text, #ffd0c8);
}
.ok{
    background:var(--alert-ok-bg, rgba(52, 168, 83, .12));
    border:1px solid var(--alert-ok-border, rgba(52, 168, 83, .75));
    color:var(--alert-ok-text, #b9f8cb);
}
.waarschuwing{
    background:var(--alert-warn-bg, rgba(251, 188, 5, .10));
    border:1px solid var(--alert-warn-border, rgba(251, 188, 5, .7));
    color:var(--alert-warn-text, #ffeaa5);
}
.melding{
    background:var(--alert-info-bg, rgba(37, 99, 235, 0.18));
    border:1px solid var(--alert-info-border, rgba(59, 130, 246, 0.7));
    color:var(--alert-info-text, #dbeafe);
}

/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */

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

/* ========================================================================== */
/* 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}

    .wrap{padding:0 12px}
    main{padding:16px 0 24px}
    .kaart{padding:12px}

    .actions,.knoppen,.knoppen-rij{
        flex-direction:column;
        width:100%;
        gap:6px;
        margin-top:10px;
    }
    .actions .knop,
    .actions .knop-sec,
    .knoppen .knop,
    .knoppen .knop-sec{
        width:100%;
        justify-content:center;
    }
}
/* =========================================================
   Bestelwizard layout
   ========================================================= */

.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.wizard-main {
    min-width: 0;
}

.wizard-sidebar {
    position: sticky;
    top: 24px;
}

/* Sidebar kaart iets compacter */
.kaart--sidebar {
    padding: 18px 18px 20px;
}

.wizard-overzicht {
    font-size: 0.95em;
}

.wizard-rij {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0;
}

.wizard-label {
    opacity: 0.75;
}

.wizard-waarde {
    font-weight: 600;
    text-align: right;
}

.wizard-acties {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.knop--blok {
    width: 100%;
}

$wizard_selecties = [
  'huur' => [
    ['label' => 'Sinterklaas', 'aantal' => $totaal_sint_huur],
    ['label' => 'Piet',        'aantal' => $totaal_piet_huur],
  ],
  'schmink' => [
    ['label' => 'Sinterklaas', 'aantal' => $totaal_sint_schmink],
    ['label' => 'Piet',        'aantal' => $totaal_piet_schmink],
  ],
  'diensten' => [
    ['label' => 'Pruik-styling', 'aantal' => 2],
    ['label' => 'Extra schmink', 'aantal' => 1],
  ],
];

/* =========================================================
   Mobiel gedrag
   ========================================================= */

@media (max-width: 900px) {
    .wizard-layout {
        grid-template-columns: 1fr;
    }

    .wizard-sidebar {
        position: static;
        order: 2;
    }

    .wizard-main {
        order: 1;
    }
}