/* ==========================================================================
   DRAWER.CSS - STYLING VOOR DE TABLESS DRAWER
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASIS STRUCTUUR & OVERLAY
   -------------------------------------------------------------------------- */

/* De Overlay */
.qigo-drawer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    visibility: hidden; opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Mobiel: plakt aan onderkant */
}

.qigo-drawer-overlay.is-visible {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
}

/* De Lade Container */
/* Zorg dat deze regels de lade beheren nu JS het niet meer doet */

/* De Lade Container */
/* Zorg dat deze regels de lade beheren nu JS het niet meer doet */

.qigo-drawer {
    position: fixed; 
    bottom: 0;
    left: 50%;
    
    background-color: #ffffff;
    width: 100%;
    max-width: 500px; 
    height: 85vh; 
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10002;
    
    /* BASIS POSITIE: Gecentreerd en naar beneden */
    transform: translate3d(-50%, 100%, 0); 
    
    /* --- FIX: SPOOK-KLIKKEN VOORKOMEN --- */
    /* Standaard (dicht) is hij onzichtbaar en laat hij klikken door */
    opacity: 1;
    visibility: hidden;      /* <--- AANGEPAST */
    pointer-events: none;    /* <--- AANGEPAST */
    
    /* OPTIMALISATIE: Vertel de browser dat dit gaat bewegen */
    will-change: transform;
    
    /* SOEPELER GEVOEL & TIMING FIX */
    /* De visibility wacht 0.4s (de duur van de slide) voordat hij op hidden springt */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                visibility 0s linear 0.4s; /* <--- AANGEPAST */

    /* NIEUW: Zorg dat de lade zelf zijn eigen scroll-signalen 'opeet' */
    overscroll-behavior: contain;
    touch-action: pan-y; /* Staat alleen verticaal scrollen toe */
}

/* De Open Staat */
.qigo-drawer.is-open {
    /* X = -50% (Blijft gecentreerd), Y = 0 (Schuif omhoog) */
    transform: translate(-50%, 0) ;
    
    /* --- FIX: ACTIVATIE --- */
    /* Direct zichtbaar en klikbaar maken bij openen */
    visibility: visible;     /* <--- AANGEPAST */
    pointer-events: auto;    /* <--- AANGEPAST */
    
    /* Reset de delay: visibility moet direct 'aan' gaan */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                visibility 0s linear 0s; /* <--- AANGEPAST */
}
/* --- NIEUWE CODE: Zichtbaarheid in Start Modus --- */
/* Zorg dat de views zichtbaar zijn, ook als de body in start-mode staat */
body.body--start-mode .drawer-view.is-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.drawer-is-open {
    /* Stop alle scroll-interactie op de body */
    overflow: hidden !important;
    height: 100vh !important;
    position: relative;
    /* Voorkom dat 'pull-to-refresh' of 'bounce' effecten de achtergrond bewegen */
    overscroll-behavior: none;
    touch-action: none; /* Schakelt touch-gebaren op de achtergrond uit */
}

/* --------------------------------------------------------------------------
   2. HEADER & NAVIGATIE
   -------------------------------------------------------------------------- */

.qigo-drawer__header {
    position: relative; /* Context voor absolute titel */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    z-index: 10;
    min-height: 50px;
    flex-shrink: 0;
}

/* Titel (Absoluut Gecentreerd) */
.drawer-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    margin: 0;
    font-size: 1.4rem;
    color: var(--kleur-primair, #1A535C);
    font-weight: 700;
    white-space: nowrap;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
    text-align: center;
}

/* Knoppen boven titel */
.drawer-header-pill, 
.qigo-drawer__close,
.drawer-back-btn {
    position: relative;
    z-index: 2;
}

.qigo-drawer__close {
    background: none; border: none; font-size: 2rem; color: #999;
    cursor: pointer; line-height: 1; padding: 0;
}

/* "Nieuwe Serie" Pill Button */
.drawer-header-pill {
    /* MOBIEL: Rond en transparant */
    display: flex; 
    flex-direction: column; /* Icoon boven, tekst onder */
    align-items: center;
    justify-content: center;
    gap: 2px;
    
    background-color: transparent; 
    border: none;
    padding: 0;
    width: 50px;  /* Vaste afmetingen voor ronde vorm */
    height: 50px;
    border-radius: 50%;
    
    color: var(--kleur-primair, #1A535C);
    cursor: pointer; 
    transition: all 0.2s ease;
    z-index: 20; /* Boven de titel */
}

.drawer-header-pill:hover {
    background-color: rgba(0,0,0,0.05); /* Subtiele hover op mobiel */
    transform: none; /* Geen beweging op mobiel */
}

.drawer-header-pill i { 
    font-size: 1.2rem; /* Groter icoon op mobiel */
    margin: 0;
}
/* Tekst wisselaar logica */
.pill-text-mobile {
    display: block;
    font-size: 0.7rem; /* Klein labeltje eronder */
    font-weight: 700;
    line-height: 1;
}

.pill-text-desktop {
    display: none; /* Verberg desktop tekst op mobiel */
}
/* Tab Balk */
.drawer-tab-bar {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 10px 0 5px 0;
    flex-shrink: 0;
    z-index: 25;
}

.drawer-tab {
    background: none; border: none;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: #999; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; flex: 1; position: relative; padding-bottom: 5px;
}
.drawer-tab.is-active { color: var(--kleur-primair, #1A535C); }
.drawer-tab.is-active::after {
    content: ''; position: absolute; bottom: 0; left: 25%; width: 50%;
    height: 3px; background-color: #FFC400; border-radius: 2px 2px 0 0;
}

/* --- DE MORPH LOGICA (Lade is open) --- */

/* In plaats van 'display: none', schuiven we hem naar beneden */
body.drawer-is-open .qigo-floating-dock {
    /* Schuif naar beneden (uit beeld) en blijf gecentreerd */
    transform: translateX(-50%) translateY(150%); 
    opacity: 0;
    pointer-events: none; /* Niet meer klikbaar tijdens animatie */
}

/* Alleen in Start Modus of Fullscreen verbergen we hem nog wel 'hard' */
body.body--start-mode .qigo-floating-dock,
body.body--no-scroll .qigo-floating-dock {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. VIEWS & ANIMATIES
   -------------------------------------------------------------------------- */

.qigo-drawer__views {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.drawer-view {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    padding: 20px;
    padding-bottom: 100px; /* Ruimte voor footer */
    box-sizing: border-box;
    overflow-y: auto;
    background: #fff;
    z-index: 100;
    
    /* Animatie: Fade Up (Van onderen) */
    opacity: 0;
    transform: translateY(30px); 
    pointer-events: none;
    transition: transform 0.3s ease-out, opacity 0.3s ease;
    overscroll-behavior: contain;
}

.drawer-view.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   4. FOOTER (DE UITGEKLAPTE DOCK)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   GOLVENDE FOOTER (SPEFIEK BLOK)
   ========================================================================== */

.qigo-drawer__footer {
    position: relative;
    background-color: #FFC400 !important; 
    box-shadow: none !important;
    z-index: 200;
    
    /* Flex Layout voor 3 kolommen */
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Uitlijnen op onderkant */
    padding: 0 10px 10px 10px; /* Ruimte aan zijkanten en onder */
    height: 70px; /* Vaste hoogte voor stabiliteit */
    
    filter: drop-shadow(0px -4px 6px rgba(0,0,0,0.1));
}

/* Dit is de golf zelf */
.qigo-drawer__footer::before {
    content: "";
    position: absolute;
    
    /* Plaatsing: Precies bovenop de balk */
    bottom: 95%; /* 99% voorkomt een wit lijntje (kier) tussen golf en balk */
    left: 0;
    width: 100%;
    height: 25px; /* Hoogte van de golf */
    
    /* De SVG Afbeelding (Gevuld met #FFC400) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23FFC400' d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' transform='scale(1, -1) translate(0, -120)'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Rek de golf uit over de hele breedte */
    pointer-events: none; /* Zorg dat je er doorheen kunt klikken */
}

/* --- DE GROEPEN (Links & Rechts) --- */
.footer-group {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    flex: 1; /* Beide groepen nemen evenveel ruimte in -> Zon blijft midden */
    padding-bottom: 5px;
}

.footer-group--left {
    justify-content: flex-start; /* Links uitlijnen */
    padding-left: 5px;
}

.footer-group--right {
    justify-content: flex-end; /* Rechts uitlijnen */
    padding-right: 5px;
}

/* --- DE ZON (Midden) --- */
.footer-center-sun {
    flex: 0 0 auto; /* Vaste breedte, krimpt niet */
    display: flex;
    justify-content: center;
    
    /* Positie correctie om exact over de dock-zon te vallen */
    transform: translateY(-10px); /* Schuif omhoog, boven de golf uit */
    z-index: 10;
}

.footer-sun-btn {
    width: 70px;  /* Iets groter om de 'hoofdknop' te zijn */
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #FFC400; 
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    margin: 0; /* Reset margins */
}
.footer-sun-btn img {
    width: 100%; height: 100%; object-fit: contain;
}
.footer-sun-btn:hover { transform: scale(1.05); }

/* --- DE TABS (Binnen de groepen) --- */
.drawer-tab {
    background: none; border: none;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    color: #333; 
    font-size: 0.7rem; font-weight: 700;
    cursor: pointer; opacity: 0.6;
    padding: 8px 10px;
    min-width: 60px; /* Zorg voor touch targets */
    transition: opacity 0.2s;
}
.drawer-tab i { font-size: 1.2rem; }
.drawer-tab.is-active { opacity: 1; color: #000; }
.drawer-tab:hover { opacity: 1; }

/* --- NIEUW: DE KLEINE PLAY KNOP (Rechts) --- */
.drawer-play-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    color: #FFC400;
    border: none;
    
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    
    /* AANGEPASTE MARGES VOOR UITLIJNING */
    margin-left: 10px;  /* Ruimte tussen 'Opties' tekst en knop */
    margin-right: 15px; /* Duw hem van de rechterkant af (iets naar links) */
    margin-bottom: 5px; /* Iets omhoog */
}
.drawer-play-btn:hover {
    transform: scale(1.1);
    background-color: #fff;
    color: #e6b000;
}

/* 1. De Zon (Links) */
.footer-sun-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. De Tabs (Rechts, geïntegreerd) */
.drawer-tab-bar {
    flex-grow: 1; /* Pak de rest van de ruimte */
    display: flex;
    justify-content: space-around;
    
    /* Reset oude tab-bar stijlen */
    background-color: transparent;
    border-top: none;
    padding: 0;
    margin: 0;
    margin-top: 15px;   /* Duwt de tabs naar beneden */
}

/* Verwijder het streepje, we gebruiken opacity/kleur */
.drawer-tab.is-active::after {
    display: none;
}

/* Desktop aanpassing: footer centreert */
@media (min-width: 801px) {
    .qigo-drawer__footer {
        justify-content: center; /* Of space-between met max-width */
    }
}
/* --------------------------------------------------------------------------
   5. INTERNE LAYOUTS (FILTERS & GRIDS)
   -------------------------------------------------------------------------- */

/* Mobile First: Altijd 2 kolommen voor filters */
.filter-groep-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
    border-bottom: none;
    margin-bottom: 10px;
    width: 100%;
}
.filter-groep__input { width: 100%; }

.sliders-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    margin-bottom: 15px;
    width: 100%;
}
.full-width-slider { grid-column: 1 / -1; }

/* Sliders Styling in Lade */
.tempo-regelaar {
    margin-top: 0; padding: 0.5rem; border-top: none;
    background-color: #f9f9f9; border-radius: 10px;
}
.tempo-regelaar__indicator { font-size: 0.7rem; }
.tempo-regelaar__label { font-size: 0.8rem; }

/* Serie Grid in Lade (Standaard 1 kolom) */
.qigo-drawer .serie-grid-container {
    grid-template-columns: 1fr;
    gap: 15px;
}

/* Dashboard Knoppen in Lade (Overrides) */
.qigo-drawer .qigo-dashboard__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.qigo-drawer .dashboard-card { padding: 1rem; width: 100%; box-sizing: border-box; }
.qigo-drawer .dashboard-card__icon { width: 40px; height: 40px; font-size: 1.2rem; }
.qigo-drawer .dashboard-card h3 { font-size: 1.1rem; margin-bottom: 0.1rem; }
.qigo-drawer .dashboard-card p { font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   6. START MODUS (CLEAN SLATE)
   -------------------------------------------------------------------------- */

body.body--start-mode .mijnqigo-layout { display: none !important; }
body.body--start-mode .qigo-dashboard { 
    display: flex !important; 
    flex-direction: column; align-items: center;
    margin-top: 0px; position: relative; z-index: 100; opacity: 1;
    animation: fadeIn 0.5s ease-out;
}

/* Verberg navigatie-elementen in startmodus */
body.body--start-mode .qigo-drawer__footer,
body.body--start-mode .drawer-tab-bar,
body.body--start-mode .drawer-header-pill {
    display: none !important;
}

body.body--start-mode .drawer-view {
    padding-bottom: 40px; /* Minder padding want geen footer */
}

/* ==========================================================================
   CONTEXT WISSEL & ZICHTBAARHEID (HERSTELD)
   ========================================================================== */

/* --- 1. KNOPPEN IN FILTER VIEW (Smart Partial) --- */

/* STANDAARD (Serie Modus): */
/* Toon paarse knop + link, verberg gele 'Maak' knop */
.btn-scenario-start { display: none !important; }
.btn-scenario-serie { display: flex !important; }
div.btn-scenario-serie { display: block !important; }

/* START MODUS (Clean Slate): */
/* Toon gele 'Maak' knop, verberg paarse knop + link */
body.body--start-mode .btn-scenario-start {
    display: flex !important;
    width: 100%;
    background-color: #FFC400; /* Geel/Goud */
    color: #333;
    border-color: #FFC400;
}
body.body--start-mode .btn-scenario-start:hover {
    background-color: #ffdb4d;
}
body.body--start-mode .btn-scenario-serie {
    display: none !important;
}

/* --- 2. TABS & FOOTER BEHEER --- */

/* STANDAARD (Serie Modus): Alles is zichtbaar */
.drawer-tab-bar { display: flex; }
.qigo-drawer__footer { display: flex; }

/* START MODUS (Clean Slate): Verberg navigatie */
body.body--start-mode .drawer-tab-bar {
    display: none !important;
}
body.body--start-mode .qigo-drawer__footer {
    display: none !important;
}

/* Padding correctie voor views als de footer weg is */
body.body--start-mode .drawer-view {
    padding-bottom: 40px;
}

/* ==========================================================================
   NIEUW: HYBRIDE MODUS (Generator binnen Serie Modus)
   ========================================================================== */

/* 1. Knoppen Wisselen */
/* Als de container deze class heeft, dwingen we de 'Maak QiGO' knop af */
.filter-actions-container.force-generator-mode .btn-scenario-start {
    display: flex !important; /* Toon de gele knop */
    width: 100%;
    background-color: #FFC400;
    color: #333;
    border-color: #FFC400;
}

/* Verberg de 'Toon Oefeningen' knop in deze modus */
.filter-actions-container.force-generator-mode .btn-scenario-serie {
    display: none !important; 
}

/* 2. Tekstlink Verbergen */
/* Verberg ook de secundaire tekstlink ("of maak automatisch...") in deze modus, 
   want de hoofdknop is nu de generator. */
.drawer-view:has(.force-generator-mode) .drawer-secondary-action {
    display: none !important;
}

/* Fallback voor browsers die :has niet ondersteunen (optioneel, maar veilig) */
.force-generator-mode ~ .drawer-secondary-action {
    display: none !important;
}

/* ==========================================================================
   TIJDSDUUR SLIDER ZICHTBAARHEID
   ========================================================================== */

/* 1. Standaard verborgen (Filter Modus / Serie Context) */
.full-width-slider {
    display: none !important;
}

/* 2. Zichtbaar in Start Modus (Auto QiGO vanuit clean slate) */
body.body--start-mode .full-width-slider {
    display: block !important;
}

/* 3. Zichtbaar in Generator Modus (Nieuwe QiGO vanuit menu) */
/* We voegen deze class toe aan de view container via JS */
.drawer-view.is-generator-mode .full-width-slider {
    display: block !important;
}

/* ==========================================================================
    UX IMPROVEMENTS & DRAWER DETAILS
   ========================================================================== */

/* De Menu Indicator op de Zon */
.play-toolbar__center-logo {
    position: relative; /* Nodig voor positionering indicator */
    overflow: visible; /* Zorg dat indicator niet afgekapt wordt */
}

.menu-indicator {
    position: absolute;
    bottom: -5px; /* Hangt iets onderaan */
    left: 50%;
    transform: translateX(-50%);
    
    width: 24px;
    height: 24px;
    background-color: var(--kleur-primair);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Header Knoppen */
.drawer-header-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px;
}
.drawer-header-btn:hover {
    color: var(--kleur-primair);
}

/* Secundaire Tekst Link (in de drawer) */
.drawer-secondary-action {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
}
.drawer-secondary-action p {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 5px;
}
.text-link-btn {
    background: none;
    border: none;
    color: var(--kleur-accent); /* De paarse/gele accent kleur */
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: underline;
}
.text-link-btn:hover {
    color: var(--kleur-primair);
}

/* Drawer Intro Tekst */
.drawer-intro {
    text-align: center;
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
}


/* --------------------------------------------------------------------------
   7. DESKTOP AANPASSINGEN (min-width: 801px)
   -------------------------------------------------------------------------- */

@media (min-width: 801px) {
    
    /* Overlay positionering */
    .qigo-drawer-overlay {
        align-items: flex-end;
        padding-bottom: 0;
    }

    

    /* --- INTELLIGENTE BREEDTE (Brede Views) --- */
    /* Als de lade de class 'wide' krijgt (via JS), wordt hij 900px */
    .qigo-drawer.qigo-drawer--wide {
        max-width: 900px !important;
    }

    /* Grid aanpassingen in Brede Modus */
    .qigo-drawer--wide .filter-groep-container,
    .qigo-drawer--wide .sliders-grid-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .qigo-drawer--wide .serie-grid-container {
        grid-template-columns: 1fr 1fr !important; /* 2 kolommen kaarten */
        gap: 20px;
    }
    
    .qigo-drawer--wide .serie-kaart {
        height: 100%;
    }

    .drawer-header-pill {
        /* DESKTOP: Pil vorm */
        flex-direction: row; /* Naast elkaar */
        width: auto;
        height: auto;
        gap: 8px;
        
        background-color: #f7f9fa; 
        border: 1px solid #e0e0e0;
        border-radius: 30px; 
        padding: 8px 16px;
    }

    .drawer-header-pill:hover {
        background-color: #e0eaf1; 
        border-color: var(--kleur-primair, #1A535C);
        transform: translateY(-1px);
    }

    .drawer-header-pill i { 
        font-size: 0.8rem; /* Kleiner icoon in de pil */
        margin-top: 2px;
    }

    .pill-text-mobile { display: none; } /* Verberg 'Kies' */
    .pill-text-desktop { 
        display: block; /* Toon 'Nieuwe Serie' */
        font-size: 0.9rem; 
        font-weight: 600;
    }
}

/* ==========================================================================
   DRAWER OPTIES STYLING
   ========================================================================== */

/* Algemene rij styling */
.option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.option-label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    color: var(--kleur-tekst);
    cursor: pointer;
}
.option-label small {
    font-weight: 400;
    color: #999;
    font-size: 0.85rem;
}

.option-label-title {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--kleur-tekst);
    font-size: 0.95rem;
}

.option-group {
    margin-bottom: 20px;
}

/* ==========================================================================
   NIEUW: VERTICALE OPTIES VOOR INSTRUCTIESTEM
   ========================================================================== */

.option-list {
    display: flex;
    flex-direction: column; /* Stapelt verticaal */
    gap: 10px; /* Ruimte tussen de keuzes */
}

.option-item-vertical {
    display: flex;
    flex-direction: column; /* Zorgt dat titel/beschrijving onder elkaar staan */
    width: 100%;
    
    /* Gedeelde styling voor een afgeronde knop */
    background-color: #f7f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 15px;
    
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-item-vertical:hover {
    background-color: #eef3f6;
}

/* 1. Hoofdinhoud (Icoon + Titel) */
.option-item-vertical .item-content {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Ruimte boven beschrijving */
}

.option-item-vertical .item-icon {
    font-size: 1.4rem;
    color: var(--kleur-primair);
    width: 30px; /* Vaste breedte voor uitlijning van tekst */
    text-align: center;
    flex-shrink: 0;
}

.option-item-vertical .item-title {
    font-weight: 600;
    color: var(--kleur-primair);
    font-size: 1.05rem;
    margin-left: 10px;
}

/* 2. Beschrijvende Tekst (De ruimte ernaast) */
.option-item-vertical .item-description {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    /* Lijn de beschrijving uit onder de titel, met de marge van het icoon */
    padding-left: 40px; 
}

/* De Actieve Staat */
.option-item-vertical.is-active {
    background-color: #fff;
    border-color: var(--kleur-primair);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- Toggle Switch (iOS Style) --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}
.toggle-switch input { 
    opacity: 0; width: 0; height: 0; 
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background-color: #FFC400; /* Geel accent */
}
input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* --- Optie Grid & Knoppen --- */
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.option-btn {
    
    background-color: #f7f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 5px;
    color: #666;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}



.option-btn i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.option-btn:hover {
    background-color: #eef3f6;
}

/* Actieve staat */
.option-btn.is-active {
    background-color: #fff;
    border-color: var(--kleur-primair);
    color: var(--kleur-primair);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- NIEUWE CODE: Disabled statussen voor opties --- */
.option-item-vertical.is-disabled,
.option-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none; /* Maakt het niet klikbaar */
    filter: grayscale(100%); /* Maakt het grijs */
    background-color: #f0f0f0;
    border-color: transparent;
}

/* Zorg dat de omschrijving ook lichter wordt */
.option-item-vertical.is-disabled .item-description {
    color: #ccc;
}

/* ==========================================================================
   5. COMPONENT: FLOATING DOCK (VEILIGE CENTRERING)
   ========================================================================== */

/* Zekerheidshalve onderaan drawer.css toevoegen/controleren */
.qigo-floating-dock {
    position: fixed;
    
    /* AANGEPAST: Gebruik 'env' om rekening te houden met de browserbalk/home-bar */
    /* We tellen 20px op bij de veilige zone onderaan */
    bottom: calc(20px + env(safe-area-inset-bottom));
    
    /* Centrering */
    left: 50%;
    transform: translateX(-50%);
    
    /* Afmetingen & Layout */
    width: 65px; 
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; 
    z-index: 10001;
    pointer-events: none;
    
    transition: opacity 0.3s ease;
}

/* Zorg dat de drawer-open logica de transformatie niet breekt */
body.drawer-is-open .qigo-floating-dock {
    /* Alleen verbergen, niet verplaatsen */
    opacity: 0;
    pointer-events: none;
}

/* 1. DE ZON (Menu) - De 'Anker' knop */
.dock-btn--menu {
    position: relative; /* Blijft in de normale flow van de container */
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #fff;
    padding: 10px;
    border: 2px solid rgba(0,0,0,0.05);
    
    pointer-events: auto; /* Wel klikbaar */
    z-index: 2; /* Ligt bovenop (belangrijk voor schaduw) */
    
    /* Behoud originele styling */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}

.dock-btn--menu img {
    width: 100%; height: 100%; object-fit: contain;
}

/* 2. DE STARTKNOP (GO!) - Absoluut gepositioneerd */
.dock-btn--play {
    position: absolute;
    left: 100%; 
    margin-left: 15px;
    top: 10px; 
    
    height: 45px; 
    padding: 0 35px; 
    border-radius: 40px; 
    width: auto;
    
    background-color: #FFC400; 
    color: #333; 
    border: none; /* <--- HIER: ZWARTE RAND WEG */
    
    font-family: var(--font-titel); 
    font-weight: 800; 
    font-size: 1.2rem;
    letter-spacing: 1px;
    
    white-space: nowrap; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; 
    
    pointer-events: auto; 
    z-index: 1;
    
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}
.dock-btn--play i {
    font-size: 1rem;
    background: rgba(255,255,255,0.3); 
    width: 30px;
    height: 30px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%;
}

/* Actieve/Pauze staat */
.dock-btn--play.is-playing {
    background-color: #fff;
    color: var(--kleur-primair);
    border: 2px solid #FFC400;
}

/* Hover Effecten */
.dock-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* Verberg regels (Start/Drawer/Fullscreen) */
body.body--start-mode .qigo-floating-dock,
body.drawer-is-open .qigo-floating-dock {
    display: none !important;
}

/* FIX: Bij no-scroll (Login/Info) verbergen we met opacity ipv display:none.
   Hierdoor hoeft de browser de positie niet opnieuw te berekenen bij terugkomst. */
body.body--no-scroll .qigo-floating-dock {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important; /* Zet hem achteraan zodat de modal eroverheen valt */
}

/* De Coach Mark (Tekstballon) */
.dock-coach-mark {
    position: absolute;
    bottom: 100%; /* Boven de dock */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 15px; /* Afstand tot knop */
    
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none; /* Klikken gaan erdoorheen */
    
    /* Pijltje omlaag */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    animation: coachMarkFade 5s ease-out forwards;
}

/* Pijltje van de ballon */
.dock-coach-mark::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

@keyframes coachMarkFade {
    0% { opacity: 0; transform: translate(-50%, 10px); } /* Start laag */
    10% { opacity: 1; transform: translate(-50%, 0); }   /* Kom op */
    70% { opacity: 1; }                                  /* Blijf staan */
    100% { opacity: 0; pointer-events: none; }           /* Verdwijn */
}

/* ==========================================================================
   NIEUW: SPLIT BUTTON IN DOCK
   ========================================================================== */

/* 1. De Container (De "Pil" vorm) */
.dock-split-group {
    position: absolute;
    left: 100%; 
    margin-left: 15px;
    top: 10px; 
    
    height: 45px; 
    width: auto;
    
    background-color: #FFC400; /* De gele achtergrond zit nu op de container */
    border-radius: 40px; 
    
    display: flex;
    align-items: center;
    overflow: hidden; /* Zorgt dat de knoppen binnen de ronde hoeken blijven */
    
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    z-index: 1;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: auto; /* Zorgt dat je erop kunt klikken en hoveren */
}

/* Hover effect op de hele groep */
.dock-split-group:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* 2. De Knoppen (Basis) */
.split-btn {
    background: none;
    border: none;
    color: #333;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
}

.split-btn:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Subtiel oplichten bij hover */
}

/* 3. Linkerkant: Opties */
.split-btn--options {
    padding: 0 6px 0 10px; /* Iets meer padding links voor de ronding */
    font-size: 0.9rem;
}

/* 4. De Scheidingslijn */
.split-separator {
    width: 1px;
    height: 60%; /* Niet helemaal tot de rand */
    background-color: rgba(0, 0, 0, 0.1); /* Subtiel donker lijntje */
}

/* 5. Rechterkant: GO! (Specifieke overrides op de oude ID) */
#dock-play-btn.split-btn--play {
    /* Reset de oude absolute positie, want hij zit nu in de flex container */
    position: static; 
    margin: 0;
    box-shadow: none; /* Schaduw zit nu op de groep */
    background-color: transparent; /* Transparant, want groep is geel */
    
    padding: 0 10px 0 15px; /* Ruimte rechts voor de ronding */
    gap: 8px;
    
    font-family: var(--font-titel); 
    font-weight: 800; 
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* --- Aanpassing voor de "Pauze" status (wit met gele rand) --- */
/* Omdat de achtergrond nu op de .dock-split-group zit, moeten we een trucje doen 
   als de knop de class 'is-playing' krijgt via JS. */

/* Als de rechterknop 'is-playing' heeft, maken we de HELE groep wit */
.dock-split-group:has(.is-playing) {
    background-color: #fff;
    border: 2px solid #FFC400; /* Gele rand */
    box-sizing: border-box; /* Zorg dat border de maat niet verpest */
}

/* En de tekst/iconen geel */
.dock-split-group:has(.is-playing) .split-btn {
    color: var(--kleur-primair); /* Of #FFC400 als je dat liever hebt */
}
/* --- HOVER EFFECTEN VOOR DE GO! KNOP --- */

/* 1. Duidelijkere achtergrondkleur bij hover */
#dock-play-btn.split-btn--play:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Iets witter */
}

/* 2. Het pijltje schuift speels naar rechts */
#dock-play-btn.split-btn--play:hover i {
    transform: translateX(3px);
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. Correctie voor als de serie speelt (witte achtergrond) */
/* Als de knop wit is (pauze stand), moet de hover lichtgrijs zijn ipv wit */
.dock-split-group:has(.is-playing) #dock-play-btn.split-btn--play:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
/* ==========================================================================
   NIEUW: TRANSITIE STARTKNOP IN OPTIES VIEW
   ========================================================================== */

/* 1. De tekst in de knop (standaard verborgen) */
.play-btn-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 700;
}

/* 2. De Play Knop zelf (Basis aanpassing voor transitie) */
.drawer-play-btn {
    /* Zorg dat hij soepel breder wordt */
    transition: width 0.3s ease, background-color 0.2s, transform 0.2s, border-radius 0.3s;
    width: 45px; /* Startbreedte (alleen icoon) */
    padding: 0;  /* Geen padding in cirkel-modus */
}

/* --- DE "OPTIES MODUS" STATE --- */

/* 3. Verberg de Opties-tab knop */
.qigo-drawer__footer.footer--options-mode .drawer-tab[data-target="view-options"] {
    display: none; /* Haal hem uit de flow */
}


/* 4. Pas de Play Knop aan in deze modus */
.qigo-drawer__footer.footer--options-mode .drawer-play-btn {
    width: auto;
    
    /* AANPASSING 1: Padding verkleinen voor smallere knop */
    padding: 0 10px; 
    
    border-radius: 30px;
    gap: 8px; 
    
    /* STYLING: Witte pil met gele rand */
    background-color: #fff;
    color: var(--kleur-primair); 
    border: 2px solid #FFC400; 
    box-sizing: border-box; 
    
    transition: all 0.2s ease; 
    margin-left: 5px; 
   
}

/* Fix: Zorg dat de tekst niet te breed wordt */
.qigo-drawer__footer.footer--options-mode .play-btn-text {
    max-width: 100px; /* VERKLEINEN: Dit limiteert de breedte van de knop */
    opacity: 1;
}

/* CORRECTIE: De hover in de Opties Modus is lichtgrijs, NIET geel */
.qigo-drawer__footer.footer--options-mode .drawer-play-btn:hover {
    /* Zorg dat de achtergrond een subtiele overlay krijgt */
    background-color: rgba(228, 228, 228, 0.5); /* Lichte grijze hover */
    color: var(--kleur-primair); /* Gebruik de primaire kleur */
}

/* Zorg dat de primaire tekstkleur van de knop bij hover behouden blijft */
.qigo-drawer__footer.footer--options-mode .drawer-play-btn:hover {
    color: var(--kleur-primair); 
}
/* --- NIEUW: DE KLEINE PLAY KNOP (Rechts) --- */
.drawer-play-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    color: #FFC400;
    border: none;
    
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    /* TRANSITIE: Houd de transform erin voor de hover */
    transition: all 0.2s ease; 
    
    /* AANGEPASTE MARGES VOOR UITLIJNING */
    margin-left: 10px;  
    margin-right: 15px; 
    margin-bottom: 5px; 
}

/* CORRECTIE: De kleine knop hover is lichtgrijs, niet geel. */
.drawer-play-btn:hover {
    transform: none; /* Houdt de knop rustig (geen scale) */
    background-color: rgba(228, 228, 228, 0.5); /* Lichte grijze hover */
    color: var(--kleur-primair); /* Gebruik de primaire kleur */
}
/* 3. Zorg ervoor dat de gele rand van de knop niet verdwijnt (dit was een onbedoelde fout in de vorige stap) */
.qigo-drawer__footer.footer--options-mode .drawer-play-btn {
    /* ... (bestaande regels) ... */
    border: 2px solid #FFC400 !important; /* Forceer de gele rand */
}

/* 5. Toon de tekst */
.qigo-drawer__footer.footer--options-mode .play-btn-text {
    max-width: 130px; /* Genoeg ruimte voor de tekst */
    opacity: 1;
}

/* --- PREVIEW AUDIO KNOPJES --- */

.option-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Ruimte tussen tekst en luidspreker */
    margin-bottom: 8px;
}

/* Zorg dat de margin van de titel wegvalt in de flex container */
.option-header .option-label-title {
    margin-bottom: 0; 
}

.preview-mini-btn {
    background: none;
    border: none;
    color: var(--kleur-primair); /* Gebruik je huiskleur */
    font-size: 1rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
}

.preview-mini-btn:hover {
    background-color: rgba(0,0,0,0.05);
    transform: scale(1.1);
}

/* Actieve staat (als hij speelt) */
.preview-mini-btn.is-playing {
    color: #D8000C; /* Rood stop-icoon */
    background-color: #ffeaea;
}

/* Verborgen staat (als 'Geen' is gekozen) */
.preview-mini-btn.is-hidden {
    display: none;
}

/* =====================================================================
   BESTAND: app.css
   COMPONENTS: Favorieten Knop (Snelkeuze)
   ===================================================================== */

.filter-favorite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    
    /* Opvallende, maar vriendelijke stijl */
    background-color: #ffffff;
    border: 2px dashed #FFC400; /* Gele stippellijn maakt het speciaal */
    border-radius: 12px;       /* Past bij de .save-action-item ronding */
    padding: 15px;             /* Ruime padding voor touch */
    
    color: var(--kleur-primair);
    font-family: var(--font-body); /* Of je standaard font */
    font-weight: 700;
    font-size: 1rem;
    
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Het sterretje */
.filter-favorite-btn i {
    color: #FFC400; /* Goud/Geel */
    font-size: 1.2rem;
}

/* Hover effect */
.filter-favorite-btn:hover {
    background-color: #fffbec; /* Heel licht geel */
    border-style: solid;       /* Rand wordt solide */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    color: var(--kleur-primair);
}

/* Active/Klik effect */
.filter-favorite-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- STANDAARD GEDRAG (Serie Modus) --- */
.btn-scenario-start { display: none; } /* Gele knop weg */
.btn-scenario-serie { display: flex; } /* Paarse knop aan */

/* --- SITUATIE 1: Start Modus (Clean Slate) --- */
/* Wint via body class */
body.body--start-mode .btn-scenario-start { display: flex !important; }
body.body--start-mode .btn-scenario-serie { display: none !important; }

/* --- SITUATIE 2: Geforceerde Generator (Hybride) --- */
/* Wint via container class (deze zet de JS aan/uit) */
.filter-actions-container.force-generator-mode .btn-scenario-start { 
    display: flex !important; 
}
.filter-actions-container.force-generator-mode .btn-scenario-serie { 
    display: none !important; 
}

/* Verberg ook de tekstlink "of maak automatisch..." in deze modus */
.filter-actions-container.force-generator-mode ~ .drawer-secondary-action {
    display: none !important;
}

/* ==========================================================================
   BIBLIOTHEEK & SERIE KAARTEN (FIX: Full Width & Layout)
   ========================================================================== */

/* 1. De Grid Container */
.serie-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobiel: Alles onder elkaar */
    gap: 20px; /* Ruimte tussen de elementen */
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px; /* Extra ruimte onderaan voor scrollen */
}

/* 2. De Serie Kaart (Algemene basis) */
.serie-kaart {
    position: relative;
    background-color: var(--kleur-wit);
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw);
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    height: auto;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

/* 3. Standalone Serie (De 'Knop' variant - <a href...>) */
a.serie-kaart {
    text-decoration: none;
    cursor: pointer;
    color: var(--kleur-tekst);
    background-color: #f7f9fa; 
    box-shadow: none; 
    border: 1px solid #e0e0e0; /* Subtiele rand */
    padding: 5px 20px;
    justify-content: center;
}

/* Hover effect voor de knop */
a.serie-kaart:hover {
    background-color: #eaf1f5;
    border-color: var(--kleur-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* 4. Typografie */
.serie-kaart__titel {
    font-size: 1.2rem;
    font-weight: 700; /* Iets dikker */
    color: var(--kleur-primair);
    margin: 0 0 5px 0; /* Ruimte onder titel */
    padding-bottom: 0;
    border: none; /* Geen lijntje meer standaard */
    text-align: left;
    line-height: 1.2;
}

/* Omschrijving (Meta) */
.serie-kaart__beschrijving {
    display: block; /* Forceer weergave */
    font-size: 0.9rem;
    color: #666;
    margin-top: 4px;
    line-height: 1.4;
    font-weight: 400;
}

/* --- Specifiek voor Verzamelingen (divs met lijsten) --- */
div.serie-kaart .serie-kaart__titel {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* 5. Lijst items binnen een verzameling */
.serie-kaart__lijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.serie-lijst__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px;
    background-color: #f7f9fa;
    border-radius: var(--radius-klein);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.serie-lijst__item:hover {
    background-color: #fff;
    border-color: var(--kleur-accent);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.serie-lijst__titel {
    font-weight: 600;
    color: var(--kleur-tekst);
    font-size: 1rem;
}

.serie-lijst__desc {
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
}

/* Disabled state */
.serie-lijst__item--disabled {
    background-color: #f9f9f9;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 6. Achtergrond Afbeeldingen (Hover Hersteld) */
.serie-kaart.serie-kaart--heeft-bg {
    background-size: cover;
    background-position: center;
    color: #fff;
    border: none;
}

/* De Overlay (Donkere laag) */
.serie-kaart.serie-kaart--heeft-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(26, 83, 92, 0.7); /* Standaard donker */
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* Hover op de kaart -> Overlay wordt lichter */
.serie-kaart.serie-kaart--heeft-bg:hover::before {
    background-color: rgba(26, 83, 92, 0.4); /* Lichter zodat foto zichtbaar wordt */
}

/* Zorg dat tekst boven de overlay ligt */
.serie-kaart.serie-kaart--heeft-bg .serie-kaart__titel,
.serie-kaart.serie-kaart--heeft-bg .serie-kaart__lijst {
    position: relative;
    z-index: 2;
}

.serie-kaart.serie-kaart--heeft-bg .serie-kaart__titel {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.3);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- DESKTOP AANPASSINGEN (Breedte & Layout) --- */
@media (min-width: 801px) {
    
    .qigo-drawer--wide .serie-grid-container {
        grid-template-columns: 1fr 1fr; /* 2 Kolommen basis */
        gap: 30px; /* Ruimere gap voorkomt overlap */
        align-items: start; /* Voorkomt verticaal uitrekken */
    }
    
    /* FIX: Standalone series (<a>) pakken de VOLLE breedte */
    .qigo-drawer--wide a.serie-kaart {
        grid-column: 1 / -1; /* Span over beide kolommen */
        
        /* Zorg dat titel en tekst ONDER elkaar blijven */
        flex-direction: column; 
        align-items: flex-start; /* Links uitlijnen */
        justify-content: center;
        
        /* Reset eventuele marges */
        margin-bottom: 0;
    }

    /* Zorg dat de titel de hele breedte pakt */
    .qigo-drawer--wide a.serie-kaart .serie-kaart__titel {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Titel en beschrijving in de brede balk netjes naast/onder elkaar */
    .qigo-drawer--wide a.serie-kaart .serie-kaart__titel {
        margin: 0;
        margin-right: 20px;
    }
    
    .qigo-drawer--wide a.serie-kaart .serie-kaart__beschrijving {
        text-align: left; /* Links uitlijnen */
        white-space: normal; /* Tekst mag naar volgende regel */
        max-width: 100%;
        color: #666;
    }
}

/* ==========================================================================
   HERO VERZAMELING STIJL (V2: Full Image)
   ========================================================================== */

/* 1. Mobiele weergave (Ongewijzigd: onder elkaar) */
.verzameling-hero-container {
    display: contents; 
}

/* Linkerkant: De Titel & Logo */
    .verzameling-hero__cover {
        flex: 0 0 25%; 
        position: relative;
        z-index: 2; 
        
        background: transparent; 
        
        display: flex;
        flex-direction: column; /* Zorgt dat logo BOVEN de titel komt */
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
    }

    /* NIEUW: Het Zon Logo */
    .verzameling-hero__logo {
        width: 80px; /* Pas aan naar wens */
        height: auto;
        margin-bottom: 15px; /* Ruimte tussen zon en titel */
        filter: drop-shadow(0 0 10px rgba(255, 196, 0, 0.6)); /* Mooie gele gloed */
        opacity: 0.9;
        transition: transform 0.3s ease;
    }

    .verzameling-hero-container:hover .verzameling-hero__logo {
        transform: scale(1.1) rotate(15deg); /* Speels effect bij hover */
    }

    /* De Titel Tekst */
    .verzameling-hero__titel {
        font-family: var(--font-titel);
        font-size: 2.8rem;
        color: #ffffff;
        text-shadow: 0 2px 15px rgba(0,0,0,0.5);
        margin: 0;
        line-height: 1.1;
    }
    
.verzameling-mobiel-header {
    grid-column: 1 / -1;
    font-family: var(--font-titel);
    font-size: 1.4rem;
    color: var(--kleur-primair);
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #FFC400;
    padding-bottom: 5px;
    display: block;
}
/* ==========================================================================
   HERO VERZAMELING STIJL (V2: Full Image)
   ========================================================================== */

/* 1. Mobiele weergave (De kaart zelf) */
.verzameling-hero-container {
    /* HERSTEL: Maak er weer een echte container van */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spreid de inhoud */
    
    position: relative;
    width: 100%;
    min-height: 450px; /* Zorg voor hoogte zodat je de foto ziet! */
    margin-bottom: 30px;
    
    /* De Kaart Look */
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden; /* Houdt de foto binnen de ronde hoeken */

    /* Achtergrond (Wordt ingevuld door PHP style="") */
    background-color: #333; 
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    padding: 20px;
    box-sizing: border-box;
}

/* Donkere Overlay (Mobiel & Desktop basis) */
.verzameling-hero-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradient: Boven donker (voor logo), midden transparant, onder donker (voor series) */
    background: linear-gradient(to bottom, rgb(0 0 0 / 66%) 0%, rgb(0 0 0 / 51%) 40%, rgb(0 0 0 / 35%) 100%);    z-index: 1; 
    pointer-events: none;
}

/* Linkerkant/Bovenkant: De Titel & Logo */
.verzameling-hero__cover {
    position: relative;
    z-index: 2; /* Boven de overlay */
    
    background: transparent; 
    
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    
    margin-top: 20px;
    flex-shrink: 0;
}

/* Het Zon Logo */
.verzameling-hero__logo {
    width: 80px; 
    height: auto;
    margin-bottom: 15px; 
    filter: drop-shadow(0 0 10px rgba(255, 196, 0, 0.6)); 
    opacity: 0.95;
    transition: transform 0.3s ease;
}

.verzameling-hero-container:hover .verzameling-hero__logo {
    transform: scale(1.1) rotate(15deg); 
}

/* De Titel Tekst */
.verzameling-hero__titel {
    font-family: var(--font-titel);
    font-size: 2.2rem;
    color: #ffffff;
    text-shadow: 0 2px 15px rgba(0,0,0,0.5);
    margin: 0;
    line-height: 1.1;
}

/* Verberg de oude losse header, we gebruiken de interne titel */
.verzameling-mobiel-header {
    display: none !important;
}

/* Rechterkant/Onderkant: De Series Lijst */
.verzameling-hero__content {
    position: relative;
    z-index: 2;
    background: transparent;
    
    /* Mobiel: Gewoon onder elkaar */
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    margin-top: auto; /* Duw naar beneden */
    padding: 0;
}

/* De Serie Kaartjes (Mobiel) */
.verzameling-hero__content .serie-kaart {
    background-color: rgba(255, 255, 255, 0.95); /* Bijna wit voor leesbaarheid */
    backdrop-filter: blur(5px);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 12px 15px;
    text-align: left;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.verzameling-hero__content .serie-kaart__titel {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kleur-primair);
    margin-bottom: 2px;
    border: none;
    padding: 0;
}

.verzameling-hero__content .serie-kaart__beschrijving {
    font-size: 0.85rem;
    color: #666;
}


/* 2. Desktop Weergave (min-width: 801px) */
@media (min-width: 801px) {
    
    .verzameling-mobiel-header { display: none; }

    /* De Container: Nu met Achtergrond Afbeelding! */
    .verzameling-hero-container {
        grid-column: 1 / -1;
        
        display: flex;
        flex-direction: row; 
        align-items: stretch;
        
        /* Achtergrond instellingen */
        background-color: #333; /* Fallback */
        background-size: cover;
        background-position: center center;
        
        position: relative; /* Nodig voor de overlay */
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        
        min-height: 320px; /* Iets hoger voor dramatisch effect */
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }

    /* De Donkere Overlay (Zorgt voor leesbaarheid) */
    .verzameling-hero-container::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        /* Gradient van donker links naar iets lichter rechts */
        background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
        z-index: 1; /* Ligt boven de foto, onder de tekst */
    }

    .verzameling-hero-container:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    }

    /* Linkerkant: De Titel */
    .verzameling-hero__cover {
        flex: 0 0 35%; 
        position: relative;
        z-index: 2; /* Boven de overlay */
        
        background: transparent; /* Geen eigen achtergrond meer */
        
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
    }

    /* De Titel Tekst */
    .verzameling-hero__titel {
        font-family: var(--font-titel);
        font-size: 2.8rem;
        color: #ffffff;
        text-shadow: 0 2px 15px rgba(0,0,0,0.5);
        margin: 0;
        line-height: 1.1;
    }

    /* Rechterkant: De Series Grid */
    .verzameling-hero__content {
        flex: 1;
        position: relative;
        z-index: 2; /* Boven de overlay */
        
        background: transparent; /* Geen eigen achtergrond meer */
        padding: 25px;
        
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
        gap: 15px;
        align-content: center;
    }

    /* De Serie Kaartjes (Semi-transparant wit) */
    .verzameling-hero__content .serie-kaart {
        background-color: rgba(255, 255, 255, 0.9); /* 90% dekkend wit */
        backdrop-filter: blur(5px); /* Hip 'frosted glass' effect */
        border: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        height: 100%;
        margin: 0;
        justify-content: center;
        text-align: center;
        padding: 15px;
        transition: all 0.2s ease;
        text-decoration: none;
        color: var(--kleur-tekst);
        display: flex;
        flex-direction: column;
    }
    
    .verzameling-hero__content .serie-kaart:hover {
        background-color: #ffffff; /* Volledig wit bij hover */
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
    
    .verzameling-hero__content .serie-kaart__titel {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--kleur-primair);
        margin-bottom: 5px;
    }
    
    .verzameling-hero__content .serie-kaart__beschrijving {
        font-size: 0.85rem;
        color: #555;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.filter-separator {
    grid-column: 1 / -1; /* Zorgt dat de kop over de hele breedte gaat */
    padding: 30px 10px 10px 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.filter-separator__title {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
    font-family: 'Comfortaa', sans-serif;
}

@media (max-width: 768px) {
    #info-paneel {
        height: 85vh !important; /* Forceer vaste hoogte op mobiel */
        max-height: 85vh !important;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Paneel zelf scrolt niet */
        transform: translate3d(0,0,0); /* Startpositie */
    }

    .info-panel__content {
        flex: 1; /* Neemt alle ruimte onder de titel in */
        overflow-y: auto !important; /* Hier gebeurt het scrollen */
        -webkit-overflow-scrolling: touch;
    }
}