/* ==========================================================================
   7events — gedeeld designsysteem
   --------------------------------------------------------------------------
   Dit bestand is de ENIGE bron voor kleuren, typografie, achtergrond, header
   en knoppen. Pas je hier iets aan, dan verandert het op elke pagina.
   Pagina-specifieke CSS (hero, productkaarten, filters) blijft in de pagina
   zelf staan.
   ========================================================================== */

/* --- DESIGN TOKENS --- */
:root {
    --logo-purple: #513e7e;
    --logo-red: #ff2d55;
    --bg-black: #050505;
}

/* --- BASIS --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-black);
    color: #fff;
    overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Outfit', sans-serif; }

/* --- PRELOADER --- */
@keyframes progress { 0% { left: -100%; width: 100%; } 100% { left: 100%; width: 100%; } }
.animate-progress { animation: progress 1.5s infinite linear; }

/* --- MESH ACHTERGROND (aurora) --- */
.mesh-container {
    position: fixed; inset: 0; z-index: -2; background: var(--bg-black); overflow: hidden;
}
.mesh-blob {
    position: absolute; width: 75vw; height: 75vw; filter: blur(150px); opacity: 0.18; border-radius: 50%;
}
.blob-1 { background: var(--logo-purple); top: -15%; left: -10%; }
.blob-2 { background: var(--logo-red); bottom: -15%; right: -10%; }

/* Op een telefoon is 75vw maar ~280 px breed. Met dezelfde vervaging van
   150 px wordt de kleur zo ver uitgesmeerd dat er niets van overblijft en je
   enkel zwart ziet. De vervaging moet dus meeschalen met het scherm. */
@media (max-width: 767px) {
    .mesh-blob { width: 130vw; height: 130vw; filter: blur(70px); opacity: 0.26; }
    .blob-1 { top: -10%; left: -35%; }
    .blob-2 { bottom: -10%; right: -35%; }
}

/* LET OP: de blobs bewegen bewust NIET meer.
   Een vervaagd vlak van driekwart schermbreedte laten zweven dwingt de
   browser om die vervaging bij elke frame opnieuw te berekenen, en dat gaf
   haperend scrollen. Stilstaand wordt hij één keer getekend en daarna alleen
   nog samengesteld. Het beeld is nagenoeg gelijk: de beweging duurde 30
   seconden en viel amper op. */
@keyframes mesh-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8%, 8%) scale(1.1); } }

/* --- DOT-GRID --- */
#dot-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.15; }

/* --- HEADER --- */
.glass-header {
    background: rgba(10, 10, 10, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Actieve pagina in het menu: rode onderlijn. components.js zet deze class. */
.nav-link { transition: color 0.3s ease; }
.nav-link:hover { color: #fff; }
.nav-link.is-active { color: #fff; border-bottom: 2px solid var(--logo-red); padding-bottom: 0.25rem; }

/* --- MOBIEL MENU --- */
#mobile-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
}

/* --- KNOPPEN --- */
.btn-7events {
    background: linear-gradient(135deg, var(--logo-purple), var(--logo-red));
    box-shadow: 0 10px 30px -5px rgba(255, 45, 85, 0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-7events:hover { transform: scale(1.05); }

/* --- PAGINATITEL ---
   De grote kop bovenaan een pagina. De lettergrootte volgt het scherm, zodat
   een lang woord als "Privacybeleid" nooit buiten beeld loopt.
   h1.pagina-titel is specifieker dan Tailwinds .text-5xl, dus deze wint. */
h1.pagina-titel {
    font-size: clamp(2.25rem, 7vw, 4rem);
    line-height: 0.95;
}

/* --- FORMULIEREN --- */
.veld-label {
    display: block;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #9ca3af;
    margin-bottom: 0.7rem;
}

.veld {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.9rem;
    padding: 1rem 1.15rem;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.5;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    /* Donkere systeemonderdelen: datumkiezer, autofill, scrollbar */
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
}
.veld::placeholder {
    color: #6b7280;
    font-weight: 300;
}
.veld:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.veld:focus {
    outline: none;
    border-color: var(--logo-red);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.18);
}
textarea.veld {
    min-height: 11rem;
    resize: vertical;
}

/* Chrome vult ingevulde velden standaard felwit in — dat overrulen we. */
.veld:-webkit-autofill,
.veld:-webkit-autofill:hover,
.veld:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #16161c inset;
    caret-color: #fff;
}

/* Het kalendericoon van een datumveld zichtbaar houden op donker */
.veld[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}
.veld[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.formulier-melding {
    border-radius: 0.9rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
}
.formulier-melding.is-fout {
    background: rgba(255, 45, 85, 0.1);
    border: 1px solid rgba(255, 45, 85, 0.35);
    color: #ffc9d4;
}

/* Knop die aan het versturen is */
.btn-7events:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

/* --- AANTALKIEZER (catalogus, mandje, offerteformulier) --- */
.aantal-kiezer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.25rem;
}
.aantal-kiezer button {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease;
}
.aantal-kiezer button:hover { background: rgba(255, 255, 255, 0.12); }
.aantal-kiezer .aantal {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 900;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Op telefoon nam de teller te veel plaats in naast de productnaam. */
@media (max-width: 640px) {
    .aantal-kiezer { gap: 0; padding: 0.15rem; }
    .aantal-kiezer button { width: 1.65rem; height: 1.65rem; font-size: 0.85rem; }
    .aantal-kiezer .aantal { min-width: 1.25rem; font-size: 0.8rem; }
}

/* --- KAART (frosted glass paneel) --- */
.kaart {
    background: rgba(16, 16, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.75rem;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.8);
}

/* Zachtere variant voor blokken binnen een kaart */
.kaart-binnen {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
}

/* Scheidingslijn met een sectietitel erin */
.sectie-titel {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--logo-red);
}


/* --- SELECTIELIJST (gegroepeerd per categorie) --- */
.selectie-groep + .selectie-groep {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.selectie-kop {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0;
    text-align: left;
    color: #fff;
    transition: color 0.25s ease;
}
.selectie-kop:hover { color: var(--logo-red); }

.selectie-pijl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: transform 0.3s ease, color 0.25s ease;
    flex-shrink: 0;
}
.selectie-groep.is-open .selectie-pijl { transform: rotate(90deg); color: var(--logo-red); }

.selectie-naam {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
    flex-grow: 1;
    min-width: 0;
}
.selectie-telling {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #6b7280;
    flex-shrink: 0;
}

/* Dichtgeklapt zonder sprongerige hoogte-animatie op lange lijsten */
.selectie-body { display: none; padding-bottom: 0.6rem; }
.selectie-groep.is-open .selectie-body { display: block; }

.selectie-regel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0 0.45rem 1.75rem;
}

.selectie-weg {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
    transition: color 0.25s ease, background 0.25s ease;
}
.selectie-weg:hover { color: var(--logo-red); background: rgba(255, 255, 255, 0.05); }

@media (max-width: 640px) {
    .selectie-regel { gap: 0.5rem; padding-left: 1.5rem; }
    .selectie-weg { width: 1.75rem; height: 1.75rem; }
}

/* --- AANVINKVAKJE --- */
.keuzevak {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    color: #d1d5db;
    font-weight: 300;
    font-size: 0.95rem;
}
.keuzevak input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    display: grid;
    place-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    cursor: pointer;
}
.keuzevak input[type="checkbox"]::after {
    content: "";
    width: 0.45rem;
    height: 0.75rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
    margin-top: -2px;
}
.keuzevak input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--logo-purple), var(--logo-red));
    border-color: transparent;
}
.keuzevak input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.keuzevak:hover input[type="checkbox"] { border-color: rgba(255, 255, 255, 0.35); }
.keuzevak input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.25);
}