/*!
 * Design gebaseerd op "FLOW V.4.0 — Flexible Library for Optimised Wireframes" door Little Miss Robot
 * (Figma Community), gelicentieerd onder CC BY 4.0: https://creativecommons.org/licenses/by/4.0/
 * Gewijzigd: vertaald naar eigen CSS met aangepaste elevation, vormen, layouts en thema's.
 * Little Miss Robot is niet betrokken bij en onderschrijft dit werk niet. Zie /credits.
 */
/* =========================================================
   Horeca-template — FOUNDATION (v2 "FLOW refined")
   ---------------------------------------------------------
   Tokens en primitieven. Pagina-specifieke stijlen staan in:
     pages/shell.css     header, mobiele tabbalk, zwevend mandje, footer
     pages/home.css      home, contact, juridisch, 404
     pages/checkout.css  mandje, checkout, bedankpagina
     components/menu.css menu + productpopup
     admin.css           beheer
   Basis: Figma-library FLOW v4.0 (Little Miss Robot) — kleuren,
   typografie, radii en spacing uit de FLOW-variabelen. v2 laat de
   harde offset-schaduw los voor haarlijnranden + zachte elevation.
   Regel: gebruik ALTIJD tokens, nooit losse hex-waarden of px-schaduwen.
   ====================================================== */

:root {
    /* ---- Neutral (FLOW 🌈 Theme / Light) ---- */
    --n-1000: #030217;
    --n-900: #100f2a;
    --n-800: #1e1f3b;
    --n-700: #333455;
    --n-600: #474b69;
    --n-500: #64698b;
    --n-400: #9498b8;
    --n-300: #cbcee1;
    --n-200: #ebebf5;
    --n-150: #f1f1f8;
    --n-100: #f8f8fc;
    --n-0: #ffffff;

    /* ---- Semantisch ---- */
    --bg: var(--n-0);
    --bg-subtle: var(--n-100);
    --surface: var(--n-0);
    --text: var(--n-1000);
    --text-2: var(--n-600);
    --text-3: var(--n-500);
    --border: var(--n-200);
    --border-strong: var(--n-300);

    /* ---- Accent: per zaak overschreven via brand_color (layout.twig) ---- */
    --accent: #4f46e5;
    --accent-ink: #ffffff;
    --accent-hover: color-mix(in srgb, var(--accent) 88%, #000);
    --accent-press: color-mix(in srgb, var(--accent) 78%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 9%, #fff);
    --accent-soft-2: color-mix(in srgb, var(--accent) 16%, #fff);
    --accent-text: color-mix(in srgb, var(--accent) 82%, #000);
    --accent-strong: var(--accent-hover);

    /* ---- Op donkere vlakken (slot-CTA, donkere kaarten, zwevend mandje) ---- */
    --on-dark: #ffffff;
    --on-dark-2: rgba(255, 255, 255, .72);
    --on-dark-3: rgba(255, 255, 255, .52);
    --on-dark-border: rgba(255, 255, 255, .14);
    --on-dark-surface: rgba(255, 255, 255, .08);

    /* ---- Feedback (FLOW) ---- */
    --success-600: #5f9605;
    --success-800: #3d5f06;
    --success-100: #f7fded;
    --success-200: #d6f3a7;
    --warning-600: #ea580c;
    --warning-800: #9a3412;
    --warning-100: #fff4e5;
    --warning-200: #fed7aa;
    --danger-600: #e81745;
    --danger-800: #9f1239;
    --danger-100: #fff0f1;
    --danger-200: #fecdd3;
    --info-600: #0284c7;
    --info-800: #075985;
    --info-200: #bae6fd;
    --info-100: #f0f9ff;

    /* ---- Overlay achter modals/sheets/off-canvas ---- */
    --scrim: rgba(3, 2, 23, .4);

    /* ---- Radii (FLOW 4/8/16/48 + v2 control/media) ---- */
    --r-tiny: 4px;
    --r-small: 8px;
    --r-control: 12px;
    --r-default: 16px;
    --r-card: 20px;
    --r-media: 24px;
    --r-xl: 48px;
    --r-pill: 999px;
    --r-tag: 6px;
    --r-mark: 10px; /* logo-merkje */

    /* ---- Spacing (FLOW) ---- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;

    /* ---- Typografie (FLOW 🅰️, Inter) ---- */
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-display: clamp(44px, 6.4vw, 88px);
    --fs-h1: clamp(36px, 4.6vw, 64px);
    --fs-h2: clamp(28px, 3.2vw, 44px);
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-lead: clamp(17px, 1.4vw, 20px);
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-tiny: 12px;
    --track-display: -0.04em;
    --track-heading: -0.025em;

    /* ---- Elevation (v2: geen harde offset meer) ---- */
    --e-0: 0 0 0 1px var(--border);
    --e-1: 0 1px 2px rgba(3, 2, 23, .05);
    --e-2: 0 1px 2px rgba(3, 2, 23, .04), 0 4px 12px -2px rgba(3, 2, 23, .06);
    --e-3: 0 2px 4px rgba(3, 2, 23, .04), 0 12px 32px -6px rgba(3, 2, 23, .12);
    --e-4: 0 4px 8px rgba(3, 2, 23, .04), 0 24px 64px -12px rgba(3, 2, 23, .22);
    --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    --ring-neutral: 0 0 0 4px rgba(3, 2, 23, .08);

    /* ---- Motion ---- */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;

    /* ---- Layout ---- */
    --header-h: 72px;
    --header-h-compact: 60px; /* header na scrollen */
    --tabbar-h: 64px; /* mobiele tabbalk (.mobile-nav), exclusief safe-area */
    --section-y: clamp(64px, 9vw, 128px); /* verticale ruimte tussen secties */
    --container: 1240px;
    --gutter: clamp(16px, 4vw, 32px);

    /* ---- Skeleton / laadstaten (FLOW Placeholder: zachte lavendel vlakken) ----
       Overschreven in themes/dark/tokens.css. Gebruik de klassen .sk* onderaan dit bestand. */
    --skeleton-base: var(--n-150);                     /* vlak van een blok */
    --skeleton-shine: rgba(255, 255, 255, .78);        /* lichte sweep die over het vlak schuift */
    --skeleton-media: var(--n-200);                    /* FLOW #ebebf5: beeld/kaart-placeholder */
    --skeleton-icon: var(--n-300);                     /* beeld-icoon in de placeholder */
    --skeleton-btn-shine: rgba(255, 255, 255, .26);    /* sweep over een knop in laadstaat */
    --skeleton-ink: var(--n-400);                      /* tekst-shimmer (.sk-busy): basis */
    --skeleton-ink-shine: var(--n-200);                /* tekst-shimmer: lichtpunt */
    --skeleton-dur: 1.4s;
    --skeleton-fade: var(--dur-3);                     /* fade-in van de echte inhoud */
}

/* =========================================================
   Basis
   ====================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 72px);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01", "ss03";
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main { flex: 1; }

img, svg, video { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--accent-soft-2); color: var(--text); }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    letter-spacing: var(--track-heading);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-body); line-height: 1.4; letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

.display { font-size: var(--fs-display); line-height: .98; letter-spacing: var(--track-display); font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
main.container { padding-block: var(--s-10) var(--s-24); }

.space-y > * + * { margin-top: var(--s-6); }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-small); line-height: 20px; }
.num, .tabular { font-variant-numeric: tabular-nums; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip {
    position: absolute;
    left: -9999px;
    top: var(--s-2);
    z-index: 6000;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--n-1000);
    color: var(--n-0);
}
.skip:focus { left: var(--s-4); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-small); }

.row { display: flex; flex-wrap: wrap; align-items: center; }
.gap { gap: var(--s-3); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-tiny);
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* =========================================================
   Tags / chips (FLOW Tag)
   ====================================================== */
.tag, .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--n-150);
    color: var(--text);
    font-size: var(--fs-tiny);
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.chip { font-size: 13px; padding: 6px 12px; }
.tag--accent { background: var(--accent-soft); color: var(--accent-text); }
.tag--success, .chip--success { background: var(--success-100); color: var(--success-800); box-shadow: inset 0 0 0 1px var(--success-200); }
.tag--danger { background: var(--danger-100); color: var(--danger-800); box-shadow: inset 0 0 0 1px var(--danger-200); }
.tag--warning { background: var(--warning-100); color: var(--warning-800); box-shadow: inset 0 0 0 1px var(--warning-200); }
.tag--glass { background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--e-1); }

.dot {
    position: relative;
    width: 8px; height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}
.tag--success .dot { background: var(--success-600); }
.tag--success .dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--success-600);
    opacity: .35;
    animation: pulse 2s var(--ease) infinite;
}
.tag--danger .dot { background: var(--danger-600); }
@keyframes pulse { 0% { transform: scale(.6); opacity: .45; } 70%, 100% { transform: scale(1.8); opacity: 0; } }

/* =========================================================
   Knoppen (FLOW Button, v2)
   primary = accent · secondary = wit + rand · dark = inkt · ghost = vlak
   ====================================================== */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
    --btn-sh: var(--e-1);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--btn-sh);
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease),
        box-shadow var(--dur-2) var(--ease),
        transform var(--dur-1) var(--ease);
}
.btn:hover { --btn-bd: var(--n-400); --btn-sh: var(--e-2); }
.btn:active { transform: scale(.98); --btn-sh: none; }
.btn:focus-visible { box-shadow: var(--ring); border-radius: var(--r-pill); }

.btn--primary, .btn.add {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-ink);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(3, 2, 23, .12), 0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn--primary:hover, .btn.add:hover {
    --btn-bg: var(--accent-hover);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(3, 2, 23, .12), 0 10px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn--primary:active { --btn-bg: var(--accent-press); }

.btn--dark {
    --btn-bg: var(--n-1000);
    --btn-fg: var(--n-0);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(3, 2, 23, .2);
}
.btn--dark:hover { --btn-bg: var(--n-800); --btn-bd: transparent; }

.btn--subtle, .btn--ghost, .btn--secondary-soft {
    --btn-bg: var(--n-150);
    --btn-bd: transparent;
    --btn-sh: none;
}
.btn--subtle:hover, .btn--ghost:hover { --btn-bg: var(--n-200); --btn-bd: transparent; --btn-sh: none; }

.btn--danger { --btn-bg: var(--danger-600); --btn-fg: var(--n-0); --btn-bd: transparent; }
.btn--danger:hover { --btn-bg: var(--danger-800); --btn-bd: transparent; }

.btn--small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn--full { width: 100%; }
.btn--icon { width: 44px; padding: 0; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    --btn-sh: none;
}

.btn svg, .icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn .btn__arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* =========================================================
   Kaarten (FLOW Card)
   ====================================================== */
.card {
    position: relative;
    padding: var(--s-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
}
.card--raised { border-color: transparent; box-shadow: var(--e-0), var(--e-2); }
.card--bold { border-color: transparent; box-shadow: var(--e-0), var(--e-3); }
.card--subtle { background: var(--bg-subtle); border-color: transparent; }
.card--interactive { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.card--interactive:hover { border-color: transparent; box-shadow: var(--e-0), var(--e-3); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--text-2); }

/* =========================================================
   Grids
   ====================================================== */
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.split {
    display: grid;
    gap: var(--s-12);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-8); } }

/* =========================================================
   Meldingen (FLOW Notification)
   ====================================================== */
.alert {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-default);
    background: var(--warning-100);
    box-shadow: inset 0 0 0 1px var(--warning-200);
    color: var(--warning-800);
}
.alert strong { color: inherit; font-weight: 600; }
.alert--warning { background: var(--warning-100); box-shadow: inset 0 0 0 1px var(--warning-200); color: var(--warning-800); }
.alert--info { background: var(--info-100); box-shadow: inset 0 0 0 1px var(--info-200); color: var(--info-800); }
.alert--success { background: var(--success-100); box-shadow: inset 0 0 0 1px var(--success-200); color: var(--success-800); }
.alert--danger { background: var(--danger-100); box-shadow: inset 0 0 0 1px var(--danger-200); color: var(--danger-800); }

.field-hint { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 20px; color: var(--text-3); }
.error { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 20px; color: var(--danger-600); }

/* =========================================================
   Formulieren (FLOW Form elements, v2)
   ====================================================== */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }

label { font-size: var(--fs-small); line-height: 20px; font-weight: 600; color: var(--text); }

input, textarea, select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px; /* voorkomt zoom op iOS */
    box-shadow: var(--e-1);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--n-400); }
input:hover, textarea:hover, select:hover { border-color: var(--n-400); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
    border-radius: var(--r-control);
}
input[disabled], select[disabled] { background: var(--bg-subtle); color: var(--n-400); box-shadow: none; }

select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364698b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.field-group {
    padding: var(--s-6);
    border-radius: var(--r-default);
    background: var(--bg-subtle);
}
.field-group h3 { margin-bottom: var(--s-4) !important; }
.field-group .field + .grid-2 { margin-top: var(--s-4); }

/* Keuzepillen (FLOW Content switcher) */
.radio-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.radio-pill, .checkbox-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: 12px 18px 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    background: var(--surface);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--e-1);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.radio-pill input, .checkbox-pill input {
    appearance: none;
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--n-400);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: none !important;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.checkbox-pill input { border-radius: 6px; }
.radio-pill input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--dur-2) var(--ease-out); }
.checkbox-pill input::after {
    content: "";
    width: 10px; height: 6px;
    border: 2px solid var(--accent-ink);
    border-top: 0; border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform var(--dur-2) var(--ease-out);
}
.radio-pill:hover, .checkbox-pill:hover { border-color: var(--n-400); }
.radio-pill:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.radio-pill input:checked { border-color: var(--accent); }
.radio-pill input:checked::after { transform: scale(1); }
.radio-pill:has(input:focus-visible), .checkbox-pill:has(input:focus-visible) { box-shadow: var(--ring); }
.checkbox-pill { align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 22px; }
.checkbox-pill input { margin-top: 1px; }
.checkbox-pill input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox-pill input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.checkbox-pill:has(input:checked) { border-color: var(--accent); }

/* =========================================================
   Prijzen (gedeeld: menu, mandje, popup)
   ====================================================== */
.price-stack { display: inline-flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.price-stack--cart { justify-content: flex-end; }
.price-old { color: var(--n-400); text-decoration: line-through; font-size: .86em; font-weight: 500; }
.price-current { font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================
   Toast
   ====================================================== */
.toast {
    position: fixed;
    left: 50%;
    bottom: var(--s-6);
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: max-content; /* left: 50% liet de toast krimpen tot de halve breedte (3 regels op mobiel) */
    max-width: calc(100% - 32px);
    padding: 12px 18px 12px 14px;
    border-radius: var(--r-pill);
    background: var(--n-1000);
    color: var(--n-0);
    font-size: 15px;
    font-weight: 500;
    box-shadow: var(--e-4);
    transform: translateX(-50%);
    animation: toast-in var(--dur-3) var(--ease-out);
}
.toast::before {
    content: "";
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
@media (max-width: 768px) { .toast { bottom: calc(148px + env(safe-area-inset-bottom)); } }

/* =========================================================
   Paginanavigatie: dunne voortgangsbalk bovenaan (FLOW Progress)
   app.js zet .visible op #global-loader bij navigatie/submit.
   Korte vertraging zodat snelle navigaties niets laten flitsen.
   ====================================================== */
body.is-loading { cursor: progress !important; }
#global-loader {
    position: fixed;
    top: var(--ontwerp-balk-h, 0px); /* ontwerpbalk */
    left: 0;
    right: 0;
    z-index: 5000;
    height: 3px;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
}
#global-loader.visible { opacity: 1; transition-delay: 150ms; }
#global-loader::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent) 65%, transparent);
    transform: translateX(-100%);
    animation: progress-sweep 1.3s var(--ease) infinite;
}
@keyframes progress-sweep { to { transform: translateX(240%); } }

/* =========================================================
   Skeletons — één systeem voor licht, noir en beheer
   ---------------------------------------------------------
   Bouwstenen (altijd in een container met aria-busy="true" en
   een .visually-hidden "Bezig met laden"; blokken zelf aria-hidden):
     .sk               basisblok (vlak + zachte sweep)
     .sk--text         tekstregel (12px, pill) — breedte via --sk-w
     .sk--title        titelregel (28px)
     .sk--circle       rond (avatar/knop) — maat via --sk-size
     .sk--pill         pill-vorm (tags, tabs, knoppen)
     .sk--media        FLOW-placeholder: lavendel vlak + beeld-icoon
     .sk-line          inline regel die meeschaalt met de lettergrootte
     .sk-busy          bestaande tekst die herberekend wordt (tekst-shimmer, geen layoutsprong)
     .btn.is-busy      knop in laadstaat (label blijft, sweep eroverheen)
     .sk-in            zachte fade-in van de echte inhoud
     .sk-media         beeld/iframe-container: placeholder tot 'load' (ui.js)
   De sweep gebruikt background-attachment: fixed, zodat alle blokken
   één doorlopende golf vormen in plaats van elk hun eigen glinster.
   ====================================================== */
.sk, .skeleton, .sk-field::after {
    display: block;
    width: var(--sk-w, 100%);
    border-radius: var(--r-small);
    background-color: var(--skeleton-base);
    background-image: linear-gradient(100deg, transparent 38%, var(--skeleton-shine) 50%, transparent 62%);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: -100vw 0;
    color: transparent;
    pointer-events: none;
    user-select: none;
    animation: sk-sweep var(--skeleton-dur) var(--ease) infinite;
}
@keyframes sk-sweep {
    from { background-position: -70vw 0; }
    to   { background-position: 70vw 0; }
}
.sk--text { height: 12px; border-radius: var(--r-pill); }
.sk--title { height: 28px; border-radius: var(--r-small); }
.sk--pill { border-radius: var(--r-pill); }
.sk--circle {
    flex-shrink: 0;
    width: var(--sk-size, 40px);
    height: var(--sk-size, 40px);
    border-radius: 50%;
}
.sk-line {
    display: inline-block;
    width: var(--sk-w, 8ch);
    height: .72em;
    vertical-align: middle;
    border-radius: var(--r-pill);
}
.sk-line.sk { display: inline-block; }
.sk-line--hint { --sk-w: 26ch; height: 10px; }

/* Veld waarvan de keuzes nog laden (bv. tijdsloten): regel-skeleton in het veld zelf.
   --sk-field-x = linker binnenruimte van het veld (thema-CSS zet die waar er een icoon staat). */
.sk-field { position: relative; }
.sk-field > select,
.sk-field > input { color: transparent; pointer-events: none; }
.sk-field::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--sk-field-x, 16px);
    width: min(42%, 168px);
    height: 10px;
    margin-top: -5px;
    border-radius: var(--r-pill);
}

/* Tabelrij-skeleton (bonnetje, lijsten in het beheer) */
.sk-row td { vertical-align: top; }
.sk-row .sk { margin-block: 5px; }
.sk-row__name { --sk-w: 62%; height: 12px; }
.sk-row__name--short { --sk-w: 44%; }
.sk-row__sub { --sk-w: 40%; height: 9px; }
.sk-row__price { --sk-w: 52px; height: 12px; margin-left: auto; }

/* FLOW Placeholder: lavendel vlak met subtiel beeld-icoon */
.sk--media {
    position: relative;
    background-color: var(--skeleton-media);
    border-radius: var(--r-media);
}
.sk--media::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(32px, 12%, 64px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--skeleton-icon);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 2v9.6l3.3-3.3a1 1 0 0 1 1.4 0l5.3 5.3 2.3-2.3a1 1 0 0 1 1.4 0l2.3 2.3V5H5Zm11 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 2v9.6l3.3-3.3a1 1 0 0 1 1.4 0l5.3 5.3 2.3-2.3a1 1 0 0 1 1.4 0l2.3 2.3V5H5Zm11 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sk--map::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 1 8 8c0 5.6-6.4 11.3-7.3 12a1 1 0 0 1-1.4 0C10.4 21.3 4 15.6 4 10a8 8 0 0 1 8-8Zm0 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 1 8 8c0 5.6-6.4 11.3-7.3 12a1 1 0 0 1-1.4 0C10.4 21.3 4 15.6 4 10a8 8 0 0 1 8-8Zm0 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
    width: clamp(28px, 7%, 44px);
}

/* Bestaande tekst (bedragen) wordt herberekend: tekst-shimmer, zelfde maten */
.sk-busy {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, var(--skeleton-ink) 40%, var(--skeleton-ink-shine) 50%, var(--skeleton-ink) 60%);
    background-size: 100vw 100vh;
    background-attachment: fixed;
    background-position: -70vw 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: sk-sweep var(--skeleton-dur) var(--ease) infinite;
    cursor: progress;
}

/* Knop in laadstaat: label blijft staan, zachte sweep eroverheen */
.btn.is-busy {
    overflow: hidden;
    cursor: progress;
}
.btn.is-busy[disabled], .btn.is-busy[aria-disabled="true"] { opacity: .88; cursor: progress; }
.btn.is-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, var(--skeleton-btn-shine) 50%, transparent 70%) 0 0 / 250% 100% no-repeat;
    pointer-events: none;
    animation: sk-btn 1.2s var(--ease) infinite;
}
.btn.is-busy:not(.btn--primary):not(.btn--dark):not(.btn--danger)::after {
    background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 70%);
}
@keyframes sk-btn {
    from { background-position: 120% 0; }
    to   { background-position: -20% 0; }
}

/* Echte inhoud komt binnen: zachte fade, geen verschuiving */
.sk-in { animation: sk-in var(--skeleton-fade) var(--ease-out) both; }
@keyframes sk-in { from { opacity: 0; } }

/* Beeld / kaart: placeholder onder het medium tot het geladen is (ui.js) */
.sk-media__ph {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    transition: opacity var(--skeleton-fade) var(--ease);
}
.sk-media__ph ~ img { position: relative; }
.sk-media.is-loading > img,
.sk-media.is-loading > iframe { opacity: 0; animation: none; }
.sk-media > img,
.sk-media > iframe { transition: opacity 480ms var(--ease-out); }
.sk-media.is-loaded > .sk-media__ph { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .sk, .skeleton, .sk-busy, .sk-field::after { background-position: -100vw 0; }
    #global-loader::before { width: 100%; transform: none; opacity: .7; }
    .sk-media.is-loading > img,
    .sk-media.is-loading > iframe { opacity: 1; }
}

/* =========================================================
   Reveal-on-scroll (JS zet .is-visible; zonder JS gewoon zichtbaar)
   ====================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}