/* ==========================================================================
   SPECIFIEKE STIJLEN VOOR MIJN QIGO PAGINA (mijnqigo.php)
   ========================================================================== */
html {
    /* Zorg dat html de echte hoogte pakt, niet geforceerd 100% */
    height: auto;
    min-height: 100%;
    /* Voorkom dat html scrollt (laat body/window scrollen) */
    overflow-x: hidden; 
    overflow-y: auto;
}

body.body--app-achtergrond {
    /* Reset hoogte: laat de inhoud de hoogte bepalen */
    height: auto;
    min-height: 100vh; /* Minimaal schermvullend */
    
    /* CRUCIAAL: Zet overflow NIET op hidden, dit breekt sticky headers */
    overflow-x: clip; /* Modern alternatief, of gebruik 'visible' als clip niet werkt */
    overflow-y: visible; 
    
    /* Fix voor iOS 'bounce' effect en viewport issues */
    /* -webkit-fill-available zorgt dat hij rekening houdt met adresbalken */
    min-height: -webkit-fill-available;

    display: flex;
    flex-direction: column;
}

/* Verandert de achtergrondkleur van de header-golf */
/*body.body--app-achtergrond .site-header::before {
    background-color: #80bfeb; /* Zelfde zacht saliegroen als de body */
/*}

/* Verandert de 'rand'-kleur van de header-golf, zodat deze naadloos aansluit */
body.body--app-achtergrond .site-header::after {
    background-color: #f60000;  /* Ook zacht saliegroen */
}



/* De keyframes blijven ongewijzigd */
@keyframes fadeInHeaderColor {
  from {
    background-color: var(--kleur-primair); /* Start met de standaardkleur */
  }
  to {
    background-color: #2367cd; /* Eindig met de nieuwe saliegroene kleur */
  }
}

/* --- Pas de animatie en kleuren apart toe --- */

/* 1. Pas de animatie ALLEEN toe op de achtergrondlaag (::before) */
body.body--app-achtergrond .site-header::after {
/* body.body--app-achtergrond .site-header::before { -- de headerkleur */
    animation: fadeInHeaderColor 3s ease forwards;
}


/* ==========================================================================
   0. LOSSE COMPONENTEN
   ========================================================================== */

/* --- 1. Mobiele Basis (Standaard) --- */



.serie-controls {
    display: flex;
    justify-content: left;
    align-items: center; /* Lijn de balk en de tijd verticaal uit */
    gap: 0px; /* Ruimte tussen de balk en de tijd */
    margin-bottom: 0rem;
}
.serie-controls-container {
    /* --- START AANGEPASTE CODE (voeg padding toe) --- */
    margin-bottom: 3rem; /* Was 2rem */
    padding-top: 70px; /* NIEUW: Maakt ruimte BINNEN de container voor de tijd */
    /* --- EINDE AANGEPASTE CODE --- */
    position: relative;
}

.serie-total-time {
    
    
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kleur-primair);
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: var(--schaduw);
}
.page-title {
    font-family: var(--font-titel); /* Het speelse lettertype */
    font-size: 2rem;                /* Zelfde grootte als de modal-titel */
    color: var(--kleur-primair);     /* De donkerblauwe tekstkleur */
    text-align: left;             /* Centreer de titel netjes */
    margin-bottom: 1rem;            /* Voeg wat ruimte toe onder de titel */
    margin-block-start: 0.0em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    
}
.series-grid { 
    max-width: 100%; 
    margin: 0;
    padding: 0;
}



/* --- BASISSTIJL VOOR ALLE PILL-BARS --- */

/* --- AANGEPASTE PILL BAR (MOBILE FIRST) --- */
.pill-bar {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%; 
    padding: 0;
    border-radius: 40px;
    border: 2px solid #E9ECEF;
    overflow: visible; 
}

/* NIEUW: Het label "Huidige serie:" (Standaard verborgen op mobiel) */
.pill-bar__label {
    display: none; /* Mobile First: Standaard weg */
    
    font-size: 0.75rem; 
    text-transform: uppercase;
    font-weight: 700;
    color: #999; 
    margin-left: 20px; 
    white-space: nowrap; 
    flex-shrink: 0; 
}


/* De knop tekst */
#filter-balk-standaard .series-dropdown .pill-bar__button {
    width: 100%;
    justify-content: flex-start; 
    text-align: left;
    white-space: normal; 
    line-height: 1.3;
    
    padding-left: 15px; /* Standaard padding (zonder label) */
}

/* DESKTOP AANPASSINGEN (Toon label vanaf 600px) */
@media (min-width: 601px) {
    .pill-bar__label { 
        display: block; /* Toon label */
    }
    
    #filter-balk-standaard .series-dropdown .pill-bar__button { 
        padding-left: 10px; /* Iets minder padding naast label */
    }
}
.pill-bar__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    font-size: 1.1em;
    font-weight: 600;
    background-color: transparent;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--kleur-tekst);
    gap: 8px;
}

.pill-bar__button__width {

    width: 100%;
    align-items: left;
     justify-content: left;
    background-color: #fffc65;
    padding: 15px 35px;
}
.pill-bar__button:hover {
    background-color: #f0f2f5;
    color: var(--kleur-primair);
}
.pill-bar__separator {
    border-left: 1px solid rgba(0,0,0,0.1);
    margin-left: 5px;
    padding-left: 5px;
}
.pill-bar__button--active {
    background-color: #e0eaf1 !important;
    color: var(--kleur-primair) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.pill-bar__input {
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 1.1em;
    width: 250px;
    background-color: #f0f2f5;
}
.pill-bar__input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--kleur-primair);
}


.pill-bar__input--hidden {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border: none;
    transition: all 0.4s ease-in-out;
}

/* --- BASISSTIJL VOOR SERIE BOUWER KAARTEN --- */

.serie-builder {
    margin: 0; 
    padding: 0;
    max-width: none;
    display: block; 
}
.serie-builder__card {
    background-color: var(--kleur-wit);
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw);
    padding: 1rem;
}


/* --- DEZE IS VERDWAALD --- */
#fullscreen-toggle-knop {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
}

/* --- VOOR DE SERIE BALK FUNCTIES--- */
.filter-wrapper--open { max-height: 100px; overflow: visible; padding-top: 1rem; margin-top: 0rem; border-top: 0px solid #E9ECEF; }
.filter-wrapper .pill-bar { opacity: 1; transition: opacity 0.2s ease; transform: scale(0.98); }
.filter-wrapper--open .pill-bar { opacity: 1; transform: scale(1); transition-delay: 0.2s; }
.serie-builder__card > .pill-bar { margin-bottom: 1rem; }
#edit-serie-id {
    display: none;
}
#save-serie-balk .pill-bar__button { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; padding: 0; }
#submit-save-serie { background-color: var(--kleur-primair); color: var(--kleur-wit); }
#cancel-save-serie { background-color: #e0e0e0; color: var(--kleur-tekst); }
.series-dropdown__menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--kleur-wit); border-radius: var(--radius-klein); box-shadow: var(--schaduw); z-index: 200; gap: 1rem; padding: 1rem; min-width: 400px; margin-top: 5px; }
.series-dropdown__menu.is-open { display: flex; }
.series-dropdown__column { flex: 1; border-right: 1px solid #f0f2f5; padding-right: 1rem; }
.series-dropdown__column:last-child { border-right: none; padding-right: 0; }
.series-dropdown__title { margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #eee; font-size: 1em; color: var(--kleur-primair); }
.series-dropdown__placeholder { display: block; padding: 0.75rem 1.5rem; color: #999; font-style: italic; font-size: 0.9em; }
.series-dropdown__link { display: block; padding: 0.75rem 1.5rem; color: var(--kleur-tekst); text-decoration: none; white-space: nowrap; }
.series-dropdown__link:hover { background-color: #f0f2f5; }
.series-dropdown__item-wrapper { display: flex; justify-content: space-between; align-items: center; border-radius: 5px; }
.series-dropdown__item-wrapper:hover { background-color: #f0f2f5; }
.series-dropdown__item-wrapper .series-dropdown__link { flex-grow: 1; background-color: transparent !important; }
.series-dropdown__actions { display: flex; padding-right: 1rem; }
.series-dropdown__edit-btn, .series-dropdown__delete-btn { background: none; border: none; cursor: pointer; font-size: 1rem; color: #aaa; padding: 0.5rem; transition: color 0.2s; }
.series-dropdown__edit-btn:hover { color: var(--kleur-primair); }
.series-dropdown__delete-btn:hover { color: #D8000C; }
.series-dropdown__item-content, .series-dropdown__confirm-delete { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.series-dropdown__confirm-delete { font-size: 0.9em; padding: 0 1.5rem; height: 44px; box-sizing: border-box; border: 2px solid #D8000C; border-radius: var(--radius-klein); }
.series-dropdown__confirm-actions button { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0.5rem; border-radius: 50%; width: 32px; height: 32px; }
.series-dropdown__confirm-btn--yes { color: #4F8A10; }
.series-dropdown__confirm-btn--yes:hover { background-color: #DFF2BF; }
.series-dropdown__confirm-btn--no { color: #D8000C; }
.series-dropdown__confirm-btn--no:hover { background-color: #FFD2D2; }



.serie-builder__toggle {
    margin-bottom: 20px;
}



/* ==========================================================================
   1. LAYOUT: Mijn QIGO Pagina (Mobile-First Refactor)
   ========================================================================== */

/* --- 1. Mobiele Basis (Standaard) --- */
.mijnqigo-layout {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Ruimte tussen titel en de .mijnqigo-layout__columns */
    width: 100%;
    margin: 2rem auto 0 auto; /* 2rem boven, 0 onder, gecentreerd */
    padding: 0 1rem; /* 1rem (ca. 16-20px) padding aan de zijkanten */
    box-sizing: border-box;
    align-items: stretch;

    flex-grow: 1;
}

.mijnqigo-layout__columns {
    display: flex;
    flex-direction: column; /* Mobiel: stapel de kolommen */
    gap: 20px;
    align-items: flex-start;
}

.mijnqigo-layout__sidebar {
    width: 100%; /* Mobiel: sidebar is volle breedte */
    position: static; /* Mobiel: sidebar scrolt gewoon mee */
}

.mijnqigo-layout__main {
    flex-grow: 1; /* Neemt de rest van de ruimte (niet echt nodig op mobiel) */
    min-width: 0; /* Voorkomt flexbox-bugs */
    width: 100%; /* Zorgt dat het de volle breedte pakt */
}

/* --- 2. Desktop Aanpassingen (min-width) --- */
@media (min-width: 801px) {
    .mijnqigo-layout {
        /* AANGEPAST: Smaller gemaakt voor centrering (was 1400px) */
        max-width: 900px; 
        margin: 2rem auto; 
    }

    .mijnqigo-layout__columns {
        flex-direction: row; 
        gap: 40px;
        /* Zorgt dat de inhoud gecentreerd blijft binnen de flex container */
        justify-content: center; 
    }

    .mijnqigo-layout__sidebar {
        /* Sidebar blijft verborgen, zoals eerder ingesteld */
        width: 320px; 
        flex-shrink: 0; 
        position: relative; 
        align-self: flex-start;
        top: 0px; 
        z-index: 100;
    }
}

/* ==========================================================================
   #2. COMPONENT: Faserij (.phase-row) (DEFINITIEF GECORRIGEERD)
   ========================================================================== */

/* --- 1. De Container en Tellers --- */
.phase-row {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Ruimte tussen Titel en Kaarten */
    padding: 15px 0;
    border-bottom: none;
    
    /* Initialiseer de teller (reset op 0) */
    counter-reset: fase-teller 0;
}

/* Specifieke tellers per niveau instellen */
.phase-row[data-opbouw-level="1"] { counter-reset: fase-teller 1; }
.phase-row[data-opbouw-level="2"] { counter-reset: fase-teller 2; }
.phase-row[data-opbouw-level="3"] { counter-reset: fase-teller 3; }
.phase-row[data-opbouw-level="4"] { counter-reset: fase-teller 4; }
.phase-row[data-opbouw-level="5"] { counter-reset: fase-teller 5; }

/* --- 2. De Titel (Gele Knop + Tekst) --- */
.phase-row__title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 5px 0;
    
    font-family: var(--font-titel);
    font-size: 1.8rem;
    color: var(--kleur-primair);
}

/* De Gele Ronde Knop */
.phase-row__title::before {
    content: counter(fase-teller);
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    
    background-color: var(--kleur-accent);
    color: var(--kleur-wit);
    border-radius: 50%;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: var(--schaduw);
}

/* --- 3. De Grid voor Kaarten (OPLOSSING VOOR MARGE) --- */
.phase-row__exercises-wrapper {
    width: 100%;
}

.phase-row__active-exercises {
    display: grid;
    grid-template-columns: 1fr; /* Mobiel: 1 kolom */
    
    /* OPLOSSING 2: De verticale marge tussen de kaarten */
    gap: 15px; 
    
    width: 100%;
    overflow: visible;
    padding: 0;
    margin: 0;
   
}

/* --- 4. De "Voeg Toe" Knop (OPLOSSING VOOR VERDWENEN KNOP) --- */
.phase-row__toggle-button.meer-oefeningen-knop {
    display: flex !important;
    align-items: center;
    justify-content: flex-start; /* Links uitlijnen */
    gap: 15px; /* Ruimte tussen het plus-knopje en de tekst */
    
    width: 100%;
    padding: 5px 5px; /* Iets padding zodat het klikbare gebied fijn is */
    margin-top: 10px;
    
    /* Reset de oude 'balk' stijl */
    background-color: transparent;
    border: none;
    border-radius: 0;
    
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* De Witte Cirkel met het Plusje */
.phase-row__toggle-button.meer-oefeningen-knop .fa-plus {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 35px;
    height: 35px;
    
    background-color: #ffffff;
    color: var(--kleur-primair);
    border-radius: 50%; /* Maakt het rond */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtiele diepte */
    
    font-size: 1.2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* De Tekst "Voeg toe" (via CSS content) */
.phase-row__toggle-button.meer-oefeningen-knop::after {
    content: "Voeg toe"; /* Nieuwe tekst */
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--kleur-tekst); /* Of var(--kleur-primair) als je dat mooier vindt */
    transition: color 0.2s ease;
}

/* Hover Effecten */
.phase-row__toggle-button.meer-oefeningen-knop:hover .fa-plus {
    transform: scale(1.1); /* Plusje wordt iets groter */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: var(--kleur-accent); /* Icoontje kleurt op */
}

.phase-row__toggle-button.meer-oefeningen-knop:hover::after {
    color: var(--kleur-primair); /* Tekst wordt iets donkerder/duidelijker */
}



/* ==========================================================================
   #3. COMPONENT: Videokaart (.video-card) (DEFINITIEF - COMPACT & GECORRIGEERD)
   ========================================================================== */

/* --- 1. De Kaart Container --- */
.video-card {
    display: flex;
    flex-direction: row;
/* === NIEUWE CODE: FLEXIBELE HOOGTE === */
    min-height: 100px;
    height: auto; /* Laat de kaart meegroeien met 2 regels tekst */
/* === EINDE NIEUWE CODE === */
    width: 100%;
    margin: 0;
    
    background: #ffffff;
    border-radius: var(--radius-klein);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    
    overflow: hidden;
    position: relative;
    cursor: grab; 
    user-select: none;
    touch-action: pan-y;
}

/* Tijdens het slepen wordt het handje een vuistje */
.video-card:active {
    cursor: grabbing;
}

/* ... (Bestaande stijlen) ... */

/* NIEUW: Zorg dat interactieve elementen expliciet clickable blijven */
.video-card__media,
.video-card__rating,
.video-card__info-btn,
.video-card__remove-btn {
    cursor: pointer;
}

/* Tijdens het slepen mag het handje wel verschijnen (via SortableJS class) */
.video-card.sortable-drag {
    cursor: grabbing;
}

.video-card--playing {
    background-color: #fffbec; 
}

/* --- 2. Linkerzijde: Media (75px) --- */
.video-card__media {
    flex: 0 0 75px;
    height: 100%;
    position: relative;
    clip-path: none;
    
    /* AANPASSING 1: Achtergrond wit maken ipv zwart */
    
    
    margin: 0;
}

.video-card__thumbnail,
.video-card__media video,
.video-card__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; 
    left: 0;
    border: none;
    /* NIEUW: Help de browser renderen */
    will-change: transform; /* Optimalisatie voor animaties */
}

.video-card__play-overlay {
    display: none !important;
}

/* --- 3. Rechterzijde: Content --- */
.video-card__content-wrapper {
    flex: 1;
    display: flex;
/* === NIEUWE CODE: STACKING LOGICA === */
    flex-direction: column;
    justify-content: flex-start; /* Alles netjes onder elkaar vanaf de bovenkant */
    gap: 6px; /* Ruimte tussen titel en sterren */
/* === EINDE NIEUWE CODE === */
    padding: 8px 12px;
    overflow: hidden;
}

/* Titel */
.video-card__title {
    font-size: 1.0rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 40px 0 0 ; 
    color: var(--kleur-primair);
/* === NIEUWE CODE: RUIMTE VOOR 2 REGELS === */
    padding-bottom: 2px;
    height: auto; /* Laat de tekst zijn eigen hoogte bepalen */
/* === EINDE NIEUWE CODE === */
    white-space: normal;          
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Details */
.video-card__details {
    padding: 0;
    background: none;
    border-radius: 0;
    margin-top: auto;
}

.video-card__details-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

/* Sterren */
.video-card__rating {
    display: flex !important;
}

/* AANPASSING 2: Zorg dat lege sterren zichtbaar zijn */
.video-card__star {
    font-size: 30px;
    color: #ccc;      /* Lichtgrijs voor lege sterren */
    cursor: pointer;  /* Wel een handje op de sterren */
}

/* Dit ontbrak waarschijnlijk: De lege ster moet ook content hebben */
.video-card__star::before {
    content: '☆'; 
}

.video-card__star--filled::before { 
    content: '★'; 
    color: #ffc107;   /* Goud voor gevulde sterren */
}

/* Info knop */
.video-card__info-btn {
    font-size: 18px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer; /* Wel een handje op de knop */
    padding: 0;
}
.video-card__info-btn:hover {
    color: var(--kleur-primair);
}

.video-card__progress-container {
    display: none; /* Standaard verborgen */
    width: 100%;
    height: 8px; /* Iets dikker voor duidelijkheid */
    background-color: #f0f0f0; /* Lichte achtergrond van de balk */
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px; /* Ruimte tussen sterren en balk */
}
/* Toon de balk ALLEEN als de kaart speelt */
.video-card--playing .video-card__progress-container {
    display: block; 
}

.video-card__progress-bar {
    height: 100%;
    width: 0%;
    background-color: #FFC400; /* Jouw Gele/Gouden accentkleur */
    border-radius: 4px;
    transition: width 0.1s linear; /* Soepele beweging */
}


/* Verwijder Knop (X) - Rechtsboven */
.video-card__remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    
    width: 24px;
    height: 24px;
    
    background: transparent;
    color: #bbb;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.video-card__remove-btn:hover {
    color: #D8000C;
}
/* --- 5. Drag Styles --- */
.video-card.sortable-ghost {
    opacity: 0.5;
    background: #f0f8ff;
    border: 1px dashed #ccc;
}

/* ==========================================================================
   DESKTOP AANPASSINGEN (min-width: 801px)
   ========================================================================== */
@media (min-width: 801px) {

    /* 1. CONTAINER: Flexibele rijen ('Wrappen') */
    .phase-row__active-exercises {
        display: flex;
        flex-wrap: wrap;
        gap: 30px; /* Ruime marge tussen de kaarten */
        
        /* Reset mobiele instellingen */
        grid-template-columns: none;
        margin: 0 ;
        padding: 0;
        overflow: visible;
         

        /* Dit isoleert de berekeningen van de browser tot alleen dit blok */
    contain: layout paint style; 
    content-visibility: auto; /* Browser rendert het pas als het in beeld komt */
    contain-intrinsic-size: 100px 260px; /* Schatting van de grootte van een kaart */
    }


    /* 2. KAART: Exacte stijl van de afbeelding */
    .video-card {
        /* Layout: Video Boven, Tekst Onder */
        flex-direction: column; 
        
        /* FORMAAT: Staand en 'Tall' */
        width: 260px; 
        height: auto; /* Vaste hoogte zorgt voor uniformiteit */
        
        /* STIJL: Wit, zeer rond, zachte schaduw */
        background-color: var(--kleur-wit);
        border: none; /* Geen rand, de schaduw doet het werk */
        border-radius: 24px; /* Grote ronde hoeken zoals op de foto */
        box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Zachte, diepe schaduw */
        
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: default;
        margin-bottom: 10px;

        /* --- PERFORMANCE BOOST --- */
    /* Zorgt dat de schaduw/border-radius niet de hele pagina vertraagt */
    transform: translateZ(0); /* Forceert GPU rendering */
    backface-visibility: hidden;
    contain: layout paint;
    }

    /* Hover Effect: Subtiel omhoog */
    .video-card:hover {
      
        box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    }

    /* 3. MEDIA: Grote header afbeelding */
    .video-card__media {
        flex: none; 
        
        /* Formaat */
        width: 100%;
        height: 210px; 
        
        /* Alleen bovenhoeken afronden */
        border-radius: 24px 24px 0 0; 
        
        margin: 0;
        position: relative;
        
        /* BELANGRIJK: Dit zorgt dat de zoomende foto binnen de lijntjes blijft */
        overflow: hidden; 
    }

    .video-card__thumbnail,
    .video-card__media video,
    .video-card__placeholder {
        width: 100%;
        height: 100%;
        object-fit: contain; 
        
        /* DE FIX: Soepele overgang voor het zoomen */
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    /* DE FIX: Zoom in op de foto als je over de kaart hovert */
    .video-card:hover .video-card__thumbnail {
        
        background-color: rgba(0, 0, 0, 0.25); /* 25% Zwart/Grijs */
    transition: background-color 0.4s ease;
    }

    /* Play Overlay: Subtiel zichtbaar */
    .video-card__play-overlay {
        display: flex !important;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: transparent;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
        z-index: 2;
    }
    
    .video-card:hover .video-card__play-overlay {
    background-color: rgba(0, 0, 0, 0.25); /* 25% Zwart/Grijs */
    }
    /* 4. CONTENT: Ruimte en verdeling */
    .video-card__content-wrapper {
        flex-grow: 1;
        /* Ruime padding rondom de tekst */
        padding: 20px 20px; 
        
        display: flex;
        flex-direction: column;
        /* Duwt titel naar boven en footer (sterren) naar beneden */
        justify-content: space-between; 
    }

    /* Titel: Groot, Dik, Donkerblauw */
    .video-card__title {
        font-family: var(--font-titel); /* Of sans-serif */
        font-size: 1.4rem; /* Groot */
        font-weight: 700;  /* Dikgedrukt */
        color: #0E4F5F;    /* De donkerblauwe/petrol kleur van de foto */
        margin: 0;
        line-height: 1.2;
        margin: 0 0 0 0 ;
        /* Afkappen na 2 regels */
        white-space: normal; 
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Het sleep-icoon: verticaal grip-icoon */
    .video-card__title::after {
        content: '\f58e'; /* FontAwesome grip-vertical */
        font-family: "Font Awesome 7 Free";
        font-weight: 900;
        font-size: 0.9rem;
        color: var(--kleur-accent2); /* Accentkleur van QiGO */
        
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
        
        /* Standaard verborgen */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Toon het icoon zodra de gebruiker over de KAART beweegt */
    .video-card:hover .video-card__title::after {
        opacity: 1;
    }

    .video-card__title:active {
        cursor: grabbing;
    }

    /* 5. DETAILS (Footer) */
    .video-card__details {
        width: 100%;
        /* Geen margin-top nodig door space-between op de parent */
    }

    .video-card__details-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; /* Uitlijnen op de onderkant */
    }
}

    /* KAART STIJLEN VOOR AUTO SERIE */

    .video-card[data-gegenereert] { position: relative; }
    .video-card[data-gegenereert="P1-Gefilterd"] { border: 2px solid #00c853 ; }
    .video-card[data-gegenereert="P2-Statisch"] { border: 2px solid #ff9100; }
    .video-card[data-gegenereert="P3-Context"] { border: 2px solid #ff9100; }
    .video-card[data-gegenereert="P4-Fallback"] { border: 2px solid ; }


/* ==========================================================================
   GEGENEREERDE FILTERS WEERGAVE (LINKS UITGELIJND)
   ========================================================================== */

.generated-filters-container {
    display: flex;
    flex-direction: column;
    /* NIEUW: Links uitlijnen */
    align-items: flex-start; 
    gap: 8px; /* Iets minder ruimte tussen titel en tags */
    margin-bottom: 20px;
    animation: fadeIn 0.5s ease-out;
    padding-left: 5px; /* Klein beetje ruimte vanaf de rand */
}

.generated-filters-label {
    font-size: 0.85rem;
    color: #999;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.generated-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* NIEUW: Tags ook links uitlijnen */
    justify-content: flex-start; 
    gap: 8px;
}

/* De visuele Tag */
.generated-tag {
    background-color: #fff;
    border: 1px solid var(--kleur-primair);
    color: var(--kleur-primair);
    padding: 4px 12px; /* Iets compacter */
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Desktop: Ook hier alles onder elkaar en links (override oude center code) */
@media (min-width: 801px) {
    .generated-filters-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .generated-filters-label {
        margin-right: 0;
        margin-bottom: 5px;
    }
}
/* ==========================================================================
   AANPASSING STERREN (3-STERREN + SLIMME HOVER)
   ========================================================================== */

/* 1. Basis styling van de ster */
.video-card__star {
    font-size: 30px !important;
    margin-right: 2px;
    color: #d1d5db; /* Standaard Grijs */
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.1s ease;
    display: inline-block;
}

/* Inhoud is altijd een ster */
.video-card__star::before {
    content: '★'; 
}

/* 2. De opgeslagen score (Goud als je NIET hovert) */
.video-card__star--filled {
    color: #FFC400 !important; 
}

/* ---------------------------------------------------------
   3. DE HOVER MAGIE (Vul tot aan de muis)
   --------------------------------------------------------- */

/* Stap A: Zodra je de container binnenkomt, worden ALLE sterren Goud */
.video-card__rating:hover .video-card__star {
    color: #FFC400 !important;
}

/* Stap B: Maak de sterren die NA de cursor komen weer Grijs */
/* De tilde (~) selecteert alle broertjes/zusjes die ná het gehoverde element komen */
.video-card__rating .video-card__star:hover ~ .video-card__star {
    color: #d1d5db !important;
}

/* Stap C: Pop-effect voor de ster waar je daadwerkelijk op staat */
.video-card__star:hover {
    transform: scale(1.3);
}
    /* Info knop (Rechts) */
    .video-card__info-btn {
        color: #9ca3af; /* Grijs */
        font-size: 1.4rem; /* Iets groter icoon */
        font-weight: bold;
        transition: color 0.2s;
        padding: 0;
    }
    .video-card__info-btn:hover {
        color: var(--kleur-primair);
    }

    /* 6. ACTIES: Badge & Remove (Alleen bij Hover) */
   
    
    .video-card__remove-btn {
        opacity: 1;
        width: 32px;
        height: 32px;
        top: 10px; 
        right: 10px;
        background-color: rgba(255,255,255,0.9);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: opacity 0.2s ease;
        cursor: pointer;
        color: #ef4444;
    }

    
    .video-card:hover .video-card__remove-btn {
        opacity: 1;
    }

.video-card__title {
    cursor: grab; /* Geeft aan dat de titel vastgepakt kan worden */
    padding: 4px 0px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}



/* De kaart die je op dit moment versleept */
.sortable-fallback {
    opacity: 0.95 !important;
    transform: scale(1.05); /* Maakt de kaart iets groter (optillen effect) */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    border-radius: 20px !important; /* Behoud ronde vormen */
    background: white;
    z-index: 9999;
}

/* De 'lege' plek waar de kaart gaat landen */
.sortable-ghost {
    opacity: 0.3;
    background: var(--kleur-accent, #FFC400) !important;
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 20px !important;
}

/* De kaart die geselecteerd is maar nog niet beweegt */
.sortable-chosen {
    background-color: #f9f9f9;
}

.video-card__title:active {
    cursor: grabbing;
}
    /* --- DESKTOP STIJL (Alleen zichtbaar bij hover) --- */
    @media (min-width: 801px) {
        .video-card__remove-btn {
            opacity: 0 !important; /* Verberg standaard op desktop */
            
            /* Desktop specifieke styling */
            top: 10px; 
            right: 10px;
            background-color: rgba(255,255,255,0.9);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        /* Toon knop als je over de kaart muist */
        .video-card:hover .video-card__remove-btn {
            opacity: 1 !important;
        }
    }


/* ==========================================================================
   #4. COMPONENT: Seriebalk (.serie-toolbar) (GECORRIGEERD)
   ========================================================================== */

.filter-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

/* De Flex Container */
.serie-toolbar {
    display: flex;
    align-items: stretch; /* Zorg dat ze even hoog zijn */
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap; /* Voorkom dat de tijdbalk naar onder springt */
}

/* --- BALK 1: De Serie Kiezer (Links) --- */
#filter-balk-standaard.pill-bar {
    flex-grow: 1;  /* GROEI: Pak alle beschikbare ruimte */
    flex-shrink: 1; /* KRIMP: Mag kleiner worden als het moet */
    min-width: 0;   /* CRUCIAAL: Laat flexbox weten dat hij kleiner mag dan zijn inhoud (voor text-overflow) */
    
    display: flex;
    align-items: center; /* Verticaal centreren */
    justify-content: flex-start; /* Alles links uitlijnen */
    
    width: auto; /* Laat flexbox de breedte bepalen */
    max-width: none;
    
    padding: 10px 15px;
    border-radius: 40px;
    border: 2px solid #E9ECEF;
    background-color: #fff;
}

/* De container van label + knop */
.series-dropdown {
    display: flex;
    flex-direction: column; /* Zorgt dat label BOVEN tekst komt */
    justify-content: center;
    align-items: flex-start; /* CRUCIAAL voor wrapping: dwingt breedte af */
    
    flex-grow: 1; 
    min-width: 0; /* CRUCIAAL voor wrapping: voorkomt oneindige groei */
    margin-right: 10px;
}

/* De knop met de serienaam */
#filter-balk-standaard .series-dropdown .pill-bar__button {
    width: 100%;
    text-align: left;
    
    /* Wrapping Logica */
    white-space: normal !important; /* Forceer afbreken */
    overflow-wrap: break-word;      /* Extra zekerheid */
    line-height: 1.3;
    height: auto;
    
    padding: 0;
    background-color: transparent !important;
    border: none;
    color: var(--kleur-tekst);
    font-weight: 600;
    font-size: 1rem;
}

/* --- BALK 2: De Tijdsduur (Rechts) --- */
.serie-toolbar .pill-bar--time {
    flex-grow: 0;    /* NIET GROEIEN: Blijf compact */
    flex-shrink: 0;  /* NIET KRIMPEN: Blijf leesbaar */
    width: auto;     /* Breedte is gebaseerd op inhoud */
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    padding: 10px 20px;
    border-radius: 40px;
    border: 2px solid #E9ECEF;
    background-color: #fff;
    
    font-weight: 600;
    color: var(--kleur-tekst);
    white-space: nowrap; /* Tijd mag nooit afbreken */
}

.pill-bar--save {
    /* 1. Reset standaard button gedrag */
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent;
    border: none;
    cursor: pointer;
    
    /* 2. Kleurstelling */
    background-color: #ffffff !important; 
    border: 2px solid var(--kleur-accent) !important; 
    color: var(--kleur-primair) !important; 
    
    /* 3. Positie & Flexbox Fixes (DIT IS DE FIX) */
    align-self:flex-end !important; /* Centreer verticaal in de balk */
    margin: 5px 0 0 0 !important;
    
    /* Zorg dat hij NIET groeit of krimpt in de toolbar */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 44px !important;
    
    /* 4. Afmetingen Forceren (Harde reset) */
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    
    /* 5. Inhoud Centreren */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    
    /* 6. Vorm */
    border-radius: 50% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    animation: popIn 0.4s ease-out;
}

.pill-bar--save:hover {
    background-color: var(--kleur-accent) !important; 
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 196, 0, 0.3);
}

/* Verberg de tekst KEIHARD op mobiel */
.pill-bar--save .save-btn-text { 
    display: none !important; 
}

/* --- DESKTOP OVERRIDE: PIL VORM (> 600px) --- */
@media (min-width: 601px) {
    .pill-bar--save {
        /* Reset de beperkingen voor Desktop */
        width: auto !important; 
        min-width: 0 !important; 
        max-width: none !important; 
        flex-basis: auto !important;
        
        /* Vorm aanpassen naar Pil */
        padding: 10px 20px !important; 
        border-radius: 40px !important;
        
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.3; 
    }
    
    .pill-bar--save .save-btn-text { 
        display: inline-block !important; 
        margin-left: 8px; 
    }
}
/* --- RESPONSIVE TWEAKS --- */
@media (max-width: 600px) {
    /* Op mobiel mag de padding iets kleiner om ruimte te winnen */
    #filter-balk-standaard.pill-bar {
        padding: 8px 12px;
    }
    .serie-toolbar .pill-bar--time {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    
    /* Het label "Huidige serie:" verbergen we op mobiel voor ruimte */
    .pill-bar__label {
        display: none; 
    }
    
    /* Serienaam iets kleiner op mobiel */
    #filter-balk-standaard .series-dropdown .pill-bar__button {
        font-size: 0.95em;
    }
}

/* ==========================================================================
   WORKFLOW BALK (ROUTEBOEK - BOVENAAN)
   ========================================================================== */

.workflow-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 10px 15px;
    margin-bottom: 20px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    flex-wrap: wrap;
    gap: 10px;
}

.workflow-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.workflow-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workflow-start-btn {
    display: flex;             /* <--- NIEUW: Flexbox voor uitlijning */
    align-items: center;       /* <--- NIEUW: Verticaal centreren */
    gap: 10px;                 /* <--- NIEUW: Ruimte tussen icoon en tekst */
    
    background-color: #FFC400; /* Geel */
    color: #999;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.workflow-start-btn:hover {
    background-color: #ffdb4d;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

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

.workflow-actions {
    display: flex;
    gap: 8px;
}

.workflow-btn {
    background-color: #f7f9fa;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kleur-primair);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.workflow-btn:hover {
    background-color: #e0eaf1;
    border-color: var(--kleur-primair);
    transform: translateY(-1px);
}

/* --- AANGEPAST: Icoontjes in Accentkleur 2 (Paars) --- */
.workflow-btn i {
    font-size: 0.9rem;
    color: var(--kleur-accent2); /* Accentkleur 2 */
}

.workflow-divider {
    width: 1px; height: 25px; background-color: #eee;
    display: none;
}

/* Responsive */
@media (max-width: 800px) {
    .workflow-bar { flex-direction: column; align-items: flex-start; }
    .workflow-group { width: 100%; justify-content: space-between; }
    
    /* Zorg dat de startknop op mobiel goed uitlijnt */
    .workflow-group--play { margin-top: 5px; border-top: 1px dashed #eee; padding-top: 10px; }
}
@media (min-width: 801px) {
    .workflow-divider { display: block; }
    .workflow-group--play { margin-left: auto; }
}

/* Verberg in Start Modus */
body.body--start-mode .workflow-bar {
    display: none !important;
}





/* ==========================================================================
   #8. COMPONENT: Info Paneel (Bottom Sheet Style)
   ========================================================================== */

/* De Overlay Achtergrond */
#info-paneel-overlay {
    z-index: 10050; /* Hoogste niveau, boven fullscreen en drawer */
    align-items: flex-end; /* Zorgt dat paneel onderaan plakt op mobiel */
    padding: 0;
}

/* Het Paneel zelf */
.info-panel {
    background-color: var(--kleur-wit);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    z-index: 10051;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* --- MOBILE FIRST (Standaard): BOTTOM SHEET --- */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 80vh; /* Max 80% van schermhoogte */
    
    border-radius: 20px 20px 0 0; /* Alleen bovenhoeken rond */
    
    /* Startpositie: Verborgen (naar beneden geschoven) */
    transform: translateY(100%); 
}

/* De 'Open' staat */
.overlay--visible .info-panel {
    transform: translateY(0); /* Schuif in beeld */
}

/* Header (Titel + Kruisje) */
.info-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.info-panel__title {
    font-family: var(--font-titel);
    color: var(--kleur-primair);
    margin: 0;
    font-size: 1.4rem;
    max-width: 85%; /* Ruimte voor kruisje */
}

.info-panel__close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
}

/* Content Area */
.info-panel__content {
    padding: 20px;
    overflow-y: auto; /* Scrollbaar als tekst lang is */
    flex-grow: 1;
}

/* Inhoud Styling */
#info-inhoud p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kleur-tekst);
    margin-bottom: 15px;
}
#info-inhoud strong {
    color: var(--kleur-primair);
}

/* --- INFO PANEEL INHOUD STYLING --- */

.info-detail-row {
    display: flex;
    align-items: flex-start; /* Icoon lijn met eerste regel tekst */
    gap: 15px;
    margin-bottom: 12px;
    color: var(--kleur-tekst);
    font-size: 1rem;
    line-height: 1.5;
}

.info-detail-row i {
    color: var(--kleur-accent2); /* Of var(--kleur-primair) */
    font-size: 1.2rem;
    width: 25px; /* Vaste breedte voor uitlijning */
    text-align: center;
    margin-top: 3px; /* Optisch uitlijnen met tekst */
}

.info-sectie-titel {
    font-family: var(--font-titel);
    color: var(--kleur-primair);
    font-size: 1.1rem;
    margin: 20px 0 10px 0;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

/* Tags Container */
.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

/* Tag Stijl (Pill) */
.info-tag {
    background-color: #f0f8ff;
    color: var(--kleur-primair);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #e0eaf1;
}

/* Klikbare Tag (Begrippen) */
.info-tag--link {
    cursor: pointer;
    background-color: #fff8e1; /* Lichtgeel voor leren */
    border-color: #ffe082;
    color: #f57f17;
    transition: all 0.2s ease;
    text-decoration: none; /* Als het een <a> is */
}
.info-tag--link:hover {
    background-color: #ffe082;
    color: #fff;
}

/* Series Lijst */
.info-series-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.info-serie-link {
    color: var(--kleur-primair);
    text-decoration: none;
    font-weight: 600;
}
.info-serie-link:hover {
    text-decoration: underline;
}

/* --- DESKTOP AANPASSINGEN (min-width: 801px) --- */
@media (min-width: 801px) {
    #info-paneel-overlay {
        align-items: flex-start; /* Reset align */
        /* Zorg dat de overlay klikbaar blijft maar geen pointer-events blokkeert als hij leeg is (optioneel) */
    }

    .info-panel {
        /* Positie: Rechts vastgeplakt (Sidebar) */
        top: 0;
        bottom: 0;
        left: auto; 
        right: 0;   
        
        width: 450px;
        height: 100%;
        max-height: 100%;
        
        /* --- DE WAVE TERUGHALEN --- */
        clip-path: url(#wavy-clip);       /* De golfvorm (SVG ID uit je content.php) */
        padding-left: 60px;               /* Extra padding links zodat tekst niet in de golf valt */
        border-radius: 0;                 /* Geen ronde hoeken nodig */
        
        /* Schaduw die de golf volgt (box-shadow werkt niet met clip-path) */
        box-shadow: none;
        filter: drop-shadow(-5px 0 15px rgba(0,0,0,0.1));
        
        /* Startpositie: Verborgen (naar rechts geschoven) */
        transform: translateX(100%); 
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .overlay--visible .info-panel {
        transform: translateX(0);
    }
    
    /* Maak het kruisje iets kleiner/netter op desktop */
    .info-panel__close-btn {
        font-size: 1.5rem;
    }
}
/* ==========================================================================
   #9. COMPONENT: QIGO Start Blok (Mobile-First Accordion)
   ========================================================================== */

/* --- 1. Mobiele Basis (Standaard < 801px) --- */

.qigo-start-blok {
    background-color: transparent;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: var(--radius-klein);
    border: 2px dashed rgba(26, 83, 92, 0.2);
    /* NIEUW: Voorkom dat padding 'springt' bij openen/sluiten */
    overflow: hidden; 
}

/* De titel wordt nu de klikbare trigger/knop */
.qigo-start-blok__titel-trigger {
    /* Reset knop-stijlen (voor als we een <button> gebruiken) */
    background: none;
    border: none;
    width: 100%;
    padding: 0;

    /* Layout */
    display: flex;
    justify-content: space-between; /* Titel links, chevron rechts */
    align-items: center;
    cursor: pointer;

    /* Stijlen van de oude __titel */
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left; /* Moet nu links zijn */
    color: var(--kleur-primair);
    margin: 0; /* Verwijder de oude margin-bottom */
}

/* De Chevron */
.qigo-start-blok__chevron {
    font-size: 1rem;
    color: var(--kleur-primair);
    transition: transform 0.4s ease;
    padding: 5px; /* Maakt het makkelijker te raken */
}

/* De knoppen-container (standaard verborgen op mobiel) */
.qigo-start-blok__knoppen {
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* NIEUW: De accordion animatie */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding-top 0.4s ease-out;
    padding-top: 0; /* Geen padding als gesloten */
}

/* 'is-open' Staat (getoggled door JS) */
.qigo-start-blok.is-open .qigo-start-blok__knoppen {
    max-height: 500px; /* Ruime waarde voor de animatie */
    padding-top: 15px; /* Voegt ruimte toe als het open is */
}
.qigo-start-blok.is-open .qigo-start-blok__chevron {
    transform: rotate(180deg);
}

/* Knoppen (stijlen blijven hetzelfde) */
.qigo-start-blok__knop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background-color: #f7f9fa;
    border-radius: var(--radius-groot);
    color: var(--kleur-tekst);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}
.qigo-start-blok__knop:hover {
    background-color: #eaf1f5;
    border-color: var(--kleur-accent);
    color: var(--kleur-primair);
    transform: translateX(3px);
}
.qigo-start-blok__knop .fa-solid {
    color: var(--kleur-primair);
    font-size: 1.1em;
    width: 20px;
    text-align: center;
}
.qigo-start-blok__knop--disabled {
    color: #999;
    background-color: #f8f8f8;
    cursor: not-allowed;
    pointer-events: none;
}
.qigo-start-blok__knop--disabled:hover {
    transform: none;
    border-color: #e0e0e0;
}


/* --- 2. Desktop Aanpassingen (min-width: 801px) --- */
@media (min-width: 801px) {

    /* Herstel het 'altijd open' uiterlijk */
    .qigo-start-blok__titel-trigger {
        cursor: default; /* Is geen knop meer */
        text-align: center; /* Terug naar gecentreerd */
        display: block; /* Geen flex-layout meer */
        margin: 0 0 15px 0; /* Oude margin terug */
    }

    /* Verberg de chevron */
    .qigo-start-blok__chevron {
        display: none;
    }

    /* Maak de knoppen-container altijd zichtbaar */
    .qigo-start-blok__knoppen {
        max-height: none; /* Verwijder de accordion-limiet */
        padding-top: 0; /* Geen extra padding */
        overflow: visible; /* Reset overflow */
    }
}
/* ==========================================================================
   10. COMPONENT: FILTERS
   ========================================================================== */
/* --- 1. Mobiele Basis (Standaard < 801px) --- */

/* Verwijder de standaard padding van de kaart, de knop regelt dit */
#filter-opties-blok {
    padding: 0;
    overflow: hidden; /* Nodig voor de animatie */
}

/* De trigger-knop (gestyled als een pill-button) */
.filter-opties__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    /* Styling geleend van .pill-bar__button */
    padding: 10px 20px;
    font-size: 1.1em;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #E9ECEF; /* Rand van .pill-bar */
    border-radius: 40px; /* Radius van .pill-bar */
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--kleur-tekst);
    gap: 8px;
    box-sizing: border-box; /* Zorgt dat padding netjes past */
}
.filter-opties__trigger:hover {
     background-color: #f0f2f5;
     color: var(--kleur-primair);
}

.filter-opties__chevron {
    font-size: 1rem;
    color: var(--kleur-primair);
    transition: transform 0.4s ease;
}

/* De content (sliders) (standaard verborgen) */
.filter-opties__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 1rem; /* Padding voor als het open is */
}

/* 'is-open' Staat (getoggled door JS) */
#filter-opties-blok.is-open .filter-opties__content {
    max-height: 500px; /* Ruime waarde */
    padding: 15px 1rem 1rem 1rem; /* Ruimte boven/onder de sliders */
}
#filter-opties-blok.is-open .filter-opties__trigger {
    /* Actieve look voor de knop */
    background-color: #e0eaf1;
    color: var(--kleur-primair);
    border-color: transparent;
}
#filter-opties-blok.is-open .filter-opties__chevron {
    transform: rotate(180deg);
}

.tempo-regelaar {
    padding: 1rem 0.5rem;
    border-top: 1px solid #eee;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tempo-regelaar__label {
    font-weight: 600;
    color: var(--kleur-primair);
    text-align: center;
}
.tempo-regelaar__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tempo-regelaar__slider-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}
.tempo-regelaar__slider--filter {
    background: linear-gradient(to right, #4682B4, #9ACD32 50%, #FFC400); 
}
.tempo-regelaar__indicator {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: #555;
}
.tempo-regelaar__indicator--langzaam { color: #4682B4; }
.tempo-regelaar__indicator--snel { color: #FF6347; }
.tempo-regelaar__indicator--links { color: #4682B4; text-align: left; }
.tempo-regelaar__indicator--rechts { color: #FFC400; text-align: right; }
.tempo-regelaar__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 25px;
    background: linear-gradient(to right, #4682B4, #9ACD32 50%, #FF6347); 
    border-radius: 50px;
    border: none;
    cursor: pointer;
    margin: 0;
    z-index: 1; 
}
.tempo-regelaar__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kleur-wit);
    border: 3px solid var(--kleur-primair);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tempo-regelaar__slider::-webkit-slider-thumb:hover {
    background: #f0f8ff;
    border-color: var(--kleur-accent);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.tempo-regelaar__slider::-moz-range-thumb {
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: var(--kleur-wit); 
    border: 3px solid var(--kleur-primair); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tempo-regelaar__slider::-moz-range-thumb:hover {
    background: #f0f8ff;
    border-color: var(--kleur-accent);
}


/* --- 2. Desktop Aanpassingen (min-width: 801px) --- */
@media (min-width: 801px) {
    
    /* Geef de kaart zijn padding terug */
    #filter-opties-blok {
        padding: 1rem;
    }

    /* Maak van de trigger weer een simpele titel */
    .filter-opties__trigger {
        background: none;
        border: none;
        cursor: default;
        color: var(--kleur-primair);
        font-size: 1.2rem;
        font-weight: 600;
        justify-content: center; /* Centreer de tekst */
        padding: 0;
        margin: 0 0 15px 0;
    }
    .filter-opties__trigger:hover {
         background: none;
         color: var(--kleur-primair);
    }

    .filter-opties__chevron {
        display: none; /* Verberg chevron op desktop */
    }

    /* Maak de content altijd zichtbaar */
    .filter-opties__content {
        max-height: none;
        overflow: visible;
        padding: 0; /* Geen extra padding nodig */
    }
}

/* ==========================================================================
   10-b. COMPONENT: FILTERS (AANVULLING VOOR TREFWOORDEN)
   ========================================================================== */

/* Container voor de nieuwe filter-inputs (klacht, doel, etc.) */
.filter-groep-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Ruimte tussen de invoervelden */
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* Scheiding van de sliders */
}

/* Stijl voor één filter-groep (label + input) */
.filter-groep {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-groep__label {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--kleur-primair);
    padding-left: 10px;
}

/* Wrapper voor de input + autocomplete resultaten */
.filter-groep__input-wrapper {
    position: relative;
}

/* Het daadwerkelijke invoerveld */
.filter-groep__input {
    width: 100%;
    box-sizing: border-box; /* Zorgt dat padding netjes past */
    
    /* Leen stijlen van .pill-bar__button voor consistentie */
    padding: 10px 20px;
    font-size: 1.0em;
    font-weight: 500;
    background-color: transparent;
    border: 2px solid #E9ECEF;
    border-radius: 40px; /* Ronde vorm */
    color: var(--kleur-tekst);
    transition: all 0.3s ease;
}

.filter-groep__input:focus,
.filter-groep__input:active {
    outline: none;
    border-color: var(--kleur-accent);
    background-color: var(--kleur-wit);
    box-shadow: var(--schaduw);
}
/* ==========================================================================
   NIEUW: STEPPER CONTROL (Plus/Min)
   ========================================================================== */

/* Hoofdcontainer: Vangt de volle breedte en centreert de stepper */
.stepper-control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

/* De knoppen (Pillen) */
.stepper-btn {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border: 2px solid #E9ECEF;
    background-color: #fff;
    color: var(--kleur-primair);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Rond de hoeken van de uiterste knoppen af */
.stepper-btn--minus {
    border-radius: 40px 0 0 40px; /* Links rond */
    margin-right: -1px; /* Sluit aan op input */
}

.stepper-btn--plus {
    border-radius: 0 40px 40px 0; /* Rechts rond */
    margin-left: -1px; /* Sluit aan op input */
}

.stepper-btn:hover {
    background-color: #f0f2f5;
    color: var(--kleur-accent);
}

/* De Invoer (Midden) */
.stepper-input {
    width: 80px; /* Vaste breedte voor de tijd */
    height: 45px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kleur-primair);
    
    /* Vaste styling en voorkom selectie/styling van de browser */
    border: 2px solid #E9ECEF;
    border-left: 0;
    border-right: 0;
    background-color: #f7f9fa;
    
    /* Verberg de standaard pijltjes in de number input */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}

/* De labels centreren */
.tempo-regelaar__label {
    text-align: center;
    width: 100%;
}

/* Container voor de 'chips' (geselecteerde filters) */
.filter-chips-container {
    display: flex;
    flex-wrap: wrap; /* Chips vloeien naar de volgende regel */
    gap: 8px;
    padding: 5px 0;
}

/* Stijl voor één 'chip' */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e0eaf1; /* Lichte kleur (past bij actieve pill-bar) */
    color: var(--kleur-primair);
    font-size: 0.9em;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 30px; /* Rond */
    animation: zoomIn 0.3s ease; /* Leuke animatie */
}

.filter-chip__remove {
    background: none;
    border: none;
    color: var(--kleur-primair);
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0;
    margin-left: 2px;
}
.filter-chip__remove:hover {
    opacity: 1;
    color: #D8000C; /* Rood bij hover */
}

/* 1. De Container voor autocomplete resultaten */
.autocomplete-results {
    display: none; 
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    
    background-color: var(--kleur-wit);
    border-radius: var(--radius-klein);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* Iets sterkere schaduw */
    z-index: 500;
    border: 1px solid #eee;

    /* --- NIEUW: Dynamische Hoogte --- */
    height: auto;          /* Groeit mee met de inhoud */
    max-height: 60vh;      /* Maximaal 60% van de schermhoogte */
    overflow-y: auto;      /* Scrollbalk als het groter wordt dan 60vh */
    
    /* Scrollbar styling (netjes maken) */
    scrollbar-width: thin;
    scrollbar-color: #bbb #f1f1f1;
}

.autocomplete-results.is-visible {
    display: block;
}
.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 500;
    border-bottom: 1px solid #f0f2f5;
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.is-active { /* Voor toetsenbordnavigatie */
    background-color: #f0f2f5;
    color: var(--kleur-primair);
}

/* Animatie voor de chips */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   10-c. COMPONENT: FILTERS (RESET KNOP)
   ========================================================================== */

.filter-reset-container {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    /* Verberg de container als de knop verborgen is */
    display: none; 
}

.filter-reset__knop {
    display: inline-flex; /* Wordt 'inline-flex' door JS */
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    
    /* Stijl van een 'gevaren' knop */
    background-color: #FFD2D2;
    color: #D8000C;
    border: 2px solid #D8000C;
    
    padding: 10px 15px;
    font-size: 1.0em;
    font-weight: 600;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-reset__knop:hover {
    background-color: #D8000C;
    color: var(--kleur-wit);
}

/* * Wanneer JS de knop toont (display: inline-flex), 
 * toon dan ook de container.
 */
.filter-reset-container:has(.filter-reset__knop[style*="display: inline-flex"]) {
    display: block;
}

/* ==========================================================================
   10-d. COMPONENT: FILTERS (NIEUWE COMPACTE GRID-WEERGAVE)
   ========================================================================== */

/* 1. Verberg het 5-fase grid (blijft hetzelfde) */
.body--is-filtering .series-grid {
    display: none;
}

/* 2. Het nieuwe Filter-Grid (AANGEPAST) */
#filter-results-grid {
    display: none;
}
/* 1. Het Grid (Ruimte Fix) */
.body--is-filtering #filter-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mobiel: 2 kolommen */
    gap: 15px; /* Ruimte TUSSEN de kaarten */
    
    /* NIEUW: Ruimte aan de ZIJKANTEN van het scherm */
    padding: 0 10px 20px 10px; 
    box-sizing: border-box;
    width: 100%;
}

/* De 'Terug'-knop (blijft hetzelfde) */
.filter-results-header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%; <-- VERWIJDERD */
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: 600;
    background-color: #f5f0fa;
    color: #6a0dad;
    border: 2px solid #6a0dad;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 10px;
    
    /* grid-column: 1 / -1; <-- VERWIJDERD */
    flex-grow: 1; /* NIEUW: Neemt de meeste ruimte */
}
.filter-results-header:hover {
    background-color: #6a0dad;
    color: var(--kleur-wit);
}
/* ==========================================================================
   AANPASSING: TERUG KNOP & HEADER WRAPPER
   ========================================================================== */

/* 1. De Wrapper (Container voor de knop) */
.filter-header-wrapper {
    display: flex;
    flex-direction: column; /* Mobiel: Onder elkaar */
    align-items: flex-start;
    gap: 15px; /* Ruimte tussen knop en titel */
    margin-bottom: 20px;
    width: 100%;
}

/* 2. De Titel in de Header */
.filter-header-wrapper .suggestion-dashboard__title {
    margin: 0; /* Reset margins, de gap van de wrapper regelt de ruimte */
    text-align: left;
    font-size: 1.4rem;
}

/* 2. De Knop Zelf (Mobiel Basis) */
.filter-results-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Tekst centreren */
    gap: 10px;
    
    width: 100%; /* Mobiel: Volle breedte */
    box-sizing: border-box; /* Padding telt mee in breedte */
    
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    background-color: #f5f0fa;
    color: #6a0dad;
    border: 2px solid #6a0dad;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-results-header:hover {
    background-color: #6a0dad;
    color: var(--kleur-wit);
}

/* Verberg de oude pill als hij er per ongeluk nog is */
.filter-header-wrapper .mode-indicator-pill {
    display: none !important;
}

/* 3. Desktop Aanpassing (Compacte knop) */
@media (min-width: 801px) {
    /* De Wrapper: Lijn alles links uit */
   .filter-header-wrapper {
        flex-direction: row; 
        align-items: center; /* Verticaal centreren */
        justify-content: flex-start; 
    }

    /* Knop: Terug naar compact */
    .filter-results-header {
        width: auto !important; /* Forceer auto breedte */
        display: inline-flex !important;
        padding-left: 30px;
        padding-right: 30px;
        flex-grow: 0; 
    }
    
    /* Titel: Iets groter en marge links (als backup voor gap) */
    .filter-header-wrapper .suggestion-dashboard__title {
        font-size: 1.8rem;
    }
}

/* 3. De NIEUWE Filter-Kaart Stijlen */
.filter-results-card {
    display: flex;
    flex-direction: row; /* Dit is de basis: media + content */
    gap: 10px;
    
    background-color: #fcfaff; /* Paarse tint */
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw);
    border: 1px solid #e8dff5;
    padding: 8px;
    overflow: hidden; /* Voorkomt dat content 'lekt' */
}

/* Linker kant: Portret Media */
.filter-card__media {
    width: 60px; /* Smalle, vaste breedte */
    height: 90px; /* Vaste portret-hoogte */
    flex-shrink: 0;
    border-radius: var(--radius-klein);
    overflow: hidden;
    
}
.filter-card__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dit 'zoomt' in en vult de portret-box */
}

/* Rechter kant: Content */
.filter-card__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spreid de titel en knoppen verticaal */
    min-width: 0; /* Voorkomt 'flex-overflow' */
}


/* 5. De Knoppen Footer (GECORRIGEERD: Naast elkaar) */
.filter-card__actions {
    display: flex !important;        /* Forceer flexbox */
    flex-direction: row !important;  /* Forceer horizontaal */
    flex-wrap: nowrap !important;    /* Verbied 'wrappen' naar volgende regel */
    align-items: center;
    justify-content: space-between;  /* Info links, Actie rechts */
    gap: 8px;
    margin-top: auto;                /* Duw naar onderkant van kaart */
    width: 100%;                     /* Vul de breedte */
}

/* Algemene stijl voor de ronde knoppen */
.filter-card__action-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0; /* Voorkom dat de knop in elkaar wordt gedrukt */
    
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    color: var(--kleur-primair);
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    
    /* Reset eventuele oude positioning */
    position: static !important;
    margin: 0 !important;
}

.filter-card__action-btn:hover {
    background-color: var(--kleur-primair);
    color: #fff;
    border-color: var(--kleur-primair);
}

/* Specifieke stijl voor de Plus knop (Rechts) */
/* Specifieke stijl voor de Plus knop (Rechts) - GEEL ACCENT */
.filter-card__knop--add,  .filter-card__knop--trigger-overlay {
    width: 40px; 
    height: 40px;
    max-width: none; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; 
    
    padding: 6px 12px;
    font-size: 0.9rem;

    /* --- NIEUWE KLEUREN --- */
    background-color:var(--kleur-accent);       /* Heel licht geel als achtergrond */
    color: #fff;      /* Gele tekst/icoon */
    border: 1px solid var(--kleur-accent); /* Gele rand */
    transition: all 0.2s ease;
}


.filter-card__knop--add:hover {
    background-color: var(--kleur-accent); /* Volledig geel bij hover */
    color: #fff;                           /* Witte tekst */
    transform: translateY(-1px);           /* Klein lift effect */
    box-shadow: 0 4px 8px rgba(255, 196, 0, 0.2); /* Subtiele gele gloed */
}

/* Zorg dat het icoontje binnenin de knop ook de kleuren volgt */
.filter-card__knop--add i {
    font-size: 1rem;
    color: inherit; /* Neemt de kleur van de knop over */
}
/* Specifieke stijl voor de Info knop (Links) */
.filter-card__info-btn {
    background-color: #fff;
    color: #999;
}
.filter-card__info-btn:hover {
    color: var(--kleur-primair);
    background-color: #f0f2f5;
}

/* Stijl voor 'Toegevoegd' (Vinkje) */
.filter-card__knop--toegevoegd {
    background-color: #DFF2BF !important;
    color: #4F8A10 !important;
    border-color: #4F8A10 !important;
    cursor: default;
}
/* Maak de media-div klikbaar */
.filter-card__media {
    position: relative; /* Nodig voor de play-knop */
    cursor: pointer;
}

/* Play-icoon voor de filter-kaart */
.filter-card__media::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
    opacity: 0.8;
    transition: all 0.2s ease;
    pointer-events: none; /* Laat de klik 'doorvallen' naar de media-div */
}
.filter-card__media:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}
/* Verberg de play-knop als de video speelt */
.filter-card__media.is-playing::after {
    display: none;
}

/* De video zelf (wordt getoond door JS) */
.filter-card__media video {
    display: none; /* Standaard verborgen */
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--kleur-wit);
}
/* Toon video en verberg thumbnail bij 'is-playing' */
.filter-card__media.is-playing .filter-card__thumbnail {
    display: none;
}
.filter-card__media.is-playing video {
    display: block;
}

/* Maak de rechter content-kant ook klikbaar (voor info) */
.filter-card__content {
    cursor: default;
}

@media (min-width: 801px) {
    .body--is-filtering #filter-results-grid {
        grid-template-columns: repeat(4, 1fr); /* Desktop: 4 kolommen */
        gap: 20px;
        padding: 0; /* Op desktop regelt de main-container de marge */
    }
}
/* ==========================================================================
   10-e. COMPONENT: FILTERS (ACTIE-KNOPPEN PANEEL)
   ========================================================================== */

.filter-actions-container {
    display: flex;
    gap: 10px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

.filter-actions__knop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
    font-weight: 600;
    padding: 12px 15px;
    border-radius: 40px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* De 'Reset' knop (subtiel) */
.filter-actions__knop--reset {
    flex: 1; /* Neemt 1/3e ruimte */
    background-color: transparent;
    color: #888;
    border-color: #e0e0e0;
}
.filter-actions__knop--reset:hover {
    background-color: #f0f2f5;
    color: var(--kleur-primair);
    border-color: var(--kleur-primair);
}

/* De 'Toon' knop (paars, valt op) */
.filter-actions__knop--apply {
    flex: 2; /* Neemt 2/3e ruimte */
    background-color: #f5f0fa;
    color: #6a0dad;
    border-color: #6a0dad;
}
.filter-actions__knop--apply:hover {
    background-color: #6a0dad;
    color: var(--kleur-wit);
}

/* ==========================================================================
   #11. COMPONENT: Responsive UI Wissel & Mobiele Balk
   ========================================================================== */

/* --- 1. Mobiele Basis (Standaard < 801px) --- */

/* 1.1: Verberg de desktop-componenten */
.desktop-only-component {
    display: none;
}

/* 1.2: Stijl de nieuwe mobiele balk */
.mobile-beheerbalk {
    display: flex; /* Knoppen naast elkaar */
    gap: 10px;
    margin-bottom: 1rem;
    width: 100%;
}

/* 1.3: Stijl de knoppen in de mobiele balk */
.mobile-beheerbalk .pill-bar__button {
    flex: 1; /* Beide knoppen 50% breedte */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Stijlen geleend van de pill-bar */
    padding: 10px 15px; /* Iets compacter voor mobiel */
    font-size: 1.0em;  /* Iets compacter */
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #E9ECEF;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--kleur-tekst);
    gap: 8px;
}
.mobile-beheerbalk .pill-bar__button:hover {
     background-color: #f0f2f5;
     color: var(--kleur-primair);
}
/* Actieve state voor als het paneel open is */
.mobile-beheerbalk .pill-bar__button.is-actief {
    background-color: #e0eaf1;
    color: var(--kleur-primair);
    border-color: transparent;
}


/* 1.4: Stijl de nieuwe Tabs in het Info Paneel */
.info-panel__tabs {
    display: flex;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    /* Zorg dat de tabs 'plakken' bovenaan het paneel */
    position: sticky;
    top: -25px; /* Compenseert voor de padding van .info-panel */
    background: var(--kleur-wit);
    z-index: 10;
    margin-left: -55px; /* Compenseert padding .info-panel */
    margin-right: -25px; /* Compenseert padding .info-panel */
    padding: 0 20px 0 55px;
}
.info-panel__tab {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kleur-tekst);
    opacity: 0.6;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Lijn op met de border */
    transition: all 0.2s ease;
}
    /* 1. Verberg de 'Info' tab standaard */
#info-paneel .info-panel__tab[data-tab="info"] {
    display: none;
}

/* 2. Toon de 'Info' tab ALLEEN als het paneel de class 'showing-info' heeft */
#info-paneel.info-panel--showing-info .info-panel__tab[data-tab="info"] {
    display: block; 
}
.overlay.overlay--fullscreen-mode .info-panel__tab[data-tab="filters"],
.overlay.overlay--fullscreen-mode .info-panel__tab[data-tab="opslaan"] {
    display: none;
}
.info-panel__tab:hover {
    opacity: 1;
}
.info-panel__tab.is-actief {
    opacity: 1;
    color: var(--kleur-primair);
    border-bottom-color: var(--kleur-accent);
}

/* 1.5: Stijl de Tab-Panelen in het Info Paneel */
.info-panel__paneel {
    display: none; /* Standaard verborgen */
}
.info-panel__paneel.is-actief {
    display: block; /* Toon actief paneel */
}

/* 1.6: Stijl de 'Opslaan' knoppen-lijst (mobiel) */
.save-opties-mobiel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* De .save-opties__button stijl bestaat al en wordt hergebruikt */


/* --- 2. Desktop Aanpassingen (min-width: 801px) --- */
@media (min-width: 801px) {

    /* 2.1: Toon de desktop-componenten */
    .desktop-only-component {
        display: block;
    }
    
    /* 2.2: Verberg de mobiele balk */
    .mobile-beheerbalk {
        display: none;
    }
    
    /* 2.3: Verberg de tabs in het Info Paneel */
    /* Op desktop toont het paneel ALLEEN video-info, zoals voorheen */
    .info-panel__tabs {
        display: none;
    }


    
    /* 2.4: Zorg dat alleen het 'info' paneel zichtbaar is op desktop */
    .info-panel__paneel {
        display: none; /* Verberg alle panelen */
    }
    .info-panel__paneel#paneel-info {
        display: block; /* Toon ALLEEN het info-paneel */
    }
}

/* ==========================================================================
   STIJLEN VOOR NIEUWE SAVE-OPTIES (3-knops UI)
   ========================================================================== */

/* De container in de partial (vult de partial) */
.save-actions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Haal padding weg als het in de .save-opties (desktop) zit */
    .save-opties & {
        padding: 0;
    }
}

/* Elke rij (bv "Opslaan", "Bewerken") */
.save-action-item {
    position: relative;
    width: 100%;
    /* Jouw "transparant donkere" achtergrond */
    background-color: rgba(26, 83, 92, 0.05); /* Heel lichte tint van --kleur-primair */
    border-radius: var(--radius-groot); /* Pill-vorm */
    overflow: hidden;
    transition: all 0.3s ease;
}

/* De standaard-knop */
.save-action__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 12px 18px;
    font-size: 1.05em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    color: var(--kleur-tekst);
    transition: all 0.2s ease;
}
.save-action__trigger:hover {
    background-color: rgba(26, 83, 92, 0.1);
    color: var(--kleur-primair);
}
.save-action__trigger .fa-solid {
    color: var(--kleur-primair);
    font-size: 1.1em;
    width: 20px;
    text-align: center;
}
.save-action__trigger--danger {
    color: #D8000C;
}
.save-action__trigger--danger .fa-solid {
    color: #D8000C;
}
.save-action__trigger--danger:hover {
    background-color: rgba(216, 0, 12, 0.1);
    color: #D8000C;
}

/* Het verborgen paneel (input/bevestiging) */
.save-action__confirm-panel {
    display: none; /* Standaard verborgen */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
}

/* De "is-open" state, beheerd door JS */
.save-action-item.is-open {
    /* Donkerder als hij open is */
    background-color: rgba(26, 83, 92, 0.08); 
}
.save-action-item.is-open .save-action__trigger {
    display: none; /* Verberg de trigger-knop */
}
.save-action-item.is-open .save-action__confirm-panel {
    display: flex; /* Toon het paneel */
}

/* Elementen in het paneel */
.save-action__confirm-panel p {
    margin: 0;
    font-weight: 600;
    color: var(--kleur-tekst);
    flex-grow: 1;
}
.save-action__input {
    flex-grow: 1;
    margin: 0;
    width: auto; /* Override de 100% width */
}
.save-action__buttons {
    display: flex;
    gap: 5px;
}
.save-action__btn {
    background: var(--kleur-wit);
    border: 1px solid #ccc;
    color: var(--kleur-tekst);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.save-action__btn:hover {
    transform: scale(1.1);
}
.save-action__btn--confirm {
    border-color: #4F8A10;
    color: #4F8A10;
}
.save-action__btn--confirm:hover {
    background-color: #DFF2BF;
}
.save-action__btn--confirm-danger {
    border-color: #D8000C;
    color: #D8000C;
}
.save-action__btn--confirm-danger:hover {
    background-color: #FFD2D2;
}
.save-action__btn--cancel:hover {
    background-color: #eee;
}

/* --- Stijlen voor de lijst in het Opslaan Paneel (Gematched met Save Bars) --- */

.save-options-separator {
    height: 1px;
    background-color: #eee;
    margin: 25px 0 15px 0;
}

/* Container aanpassingen */
.saved-series-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Zelfde tussenruimte als de knoppen erboven */
   max-height: none; 
    overflow-y: visible; 
    padding-right: 0;
}

/* De Item Wrapper (die nu ook .save-action-item heeft) */
.saved-series-list-container .save-action-item--list-mode {
    /* Reset specifieke dropdown stijlen die we niet willen */
    border: none;
    background-color: rgba(26, 83, 92, 0.05); /* Zelfde kleur als de save bars */
    border-radius: var(--radius-groot); /* Zelfde ronde hoeken */
    transition: all 0.2s ease;
}

.saved-series-list-container .save-action-item--list-mode:hover {
    background-color: rgba(26, 83, 92, 0.1); /* Zelfde hover effect */
}

/* De Inhoud (Lijkt op .save-action__trigger) */
.saved-series-list-container .series-dropdown__item-content {
    padding: 12px 18px; /* Zelfde padding als de triggers erboven */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* De Link (Naam van de serie) */
.saved-series-list-container .series-dropdown__link {
    flex-grow: 1;
    color: var(--kleur-tekst);
    font-weight: 600;
    font-size: 1.05em; /* Match font size */
    text-decoration: none;
    /* Zorg dat de link het hele klikbare gebied vult voor UX */
    display: block; 
}

/* De Acties (Prullenbak) */
.saved-series-list-container .series-dropdown__delete-btn {
    color: #ccc;
    transition: color 0.2s;
    padding: 5px;
    font-size: 1rem;
}
.saved-series-list-container .series-dropdown__delete-btn:hover {
    color: #D8000C; /* Rood bij hover */
}

/* Bevestiging state */
.saved-series-list-container .series-dropdown__confirm-delete {
    background-color: #FFF0F0; /* Lichtrode achtergrond bij bevestiging */
    border-radius: var(--radius-groot);
}

/* ==========================================================================
   FIX VOOR MOBIEL SAVE-KNOPOPPEN (#paneel-opslaan)
   ========================================================================== */

/*
 * Target specifiek het opslaan-paneel in de mobiele slide-in
 * (NIET de desktop dropdown-variant)
 */
#paneel-opslaan .save-action__confirm-panel {
    flex-direction: column;  /* Stapel de elementen (input boven, knoppen onder) */
    align-items: stretch;    /* Laat de kinderen 100% breed worden */
    gap: 15px;               /* Wat meer verticale ruimte */
}

/* Zorg dat het inputveld de volle breedte pakt in deze context */
#paneel-opslaan .save-action__input {
    width: 100%;
    box-sizing: border-box; /* Zorgt dat padding netjes meerekent */
    flex-basis: auto;       /* Reset de desktop-basis-breedte */
}

/* Lijn de knoppen (V en X) netjes rechts uit */
#paneel-opslaan .save-action__buttons {
    justify-content: flex-end;
}

/*
 * Speciale centering voor de 'Verwijder'-prompt,
 * omdat die geen inputveld heeft.
 */
#paneel-opslaan #save-action-delete .save-action__confirm-panel {
    align-items: center; /* Centreer de "Weet je het zeker?" tekst en knoppen */
}


/* =====================================================================
   BESTAND: mijnqigo.css (of style.css)
   SECTIE:  Filter Accordion (Nieuw)
   ===================================================================== */

/* =====================================================================
   BESTAND: mijnqigo.css (AANPASSING)
   REDE:    Scrollbar UI (Fix 2)
   ===================================================================== */

/* Vervang de vorige '.filter-accordion' stijl door deze */
.autocomplete-results .filter-accordion {
    padding: 0;
    
    /* NIEUW: max-hoogte is relatief aan het venster */
    max-height: 60vh; /* 60% van de vensterhoogte */
    overflow-y: auto;
    
    /* NIEUW: Minimalistische scrollbar (voor Webkit/Blink browsers) */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #bbb #f1f1f1; /* Firefox */
}

/* Webkit (Chrome, Safari, Edge) */
.autocomplete-results .filter-accordion::-webkit-scrollbar {
    width: 8px;
}
.autocomplete-results .filter-accordion::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.autocomplete-results .filter-accordion::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px;
}
.autocomplete-results .filter-accordion::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.filter-accordion__item {
    /* We gebruiken een ronde vorm die past bij de site-stijl */
    border-radius: 8px;
    margin: 4px;
    overflow: hidden;
    background: #f7f7f7; /* Lichte achtergrond voor de hele groep */
}

.filter-accordion__header {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    color: var(--kleur-primair);
    border-bottom: 1px solid #f0f2f5;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.filter-accordion__header:hover {
    background-color: #f9f9f9;
}
/* Pijltje voor de accordion */
/* --- FIX VOOR DE VIERKANTJES (CHEVRONS) --- */
.filter-accordion__header::after {
    content: '\f078'; /* Chevron Down */
    font-family: "Font Awesome 6 Free", "FontAwesome"; /* Fallback toegevoegd */
    font-weight: 900; /* CRUCIAAL: 900 = Solid icons */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    
    font-size: 0.9rem;
    color: #999;
    transition: transform 0.3s ease;
}

/* Pijltje draaien als hij open is */
.filter-accordion__item.is-open .filter-accordion__header::after {
    transform: rotate(180deg);
}
.filter-accordion__body {
    display: none;
    padding: 0px 5px 10px 5px;
    background: #fff; /* Witte achtergrond voor de opties */
}

.filter-accordion__item.is-open .filter-accordion__body {
    display: block;
}

/* We hergebruiken de .autocomplete-item stijl,
   maar geven het een beetje indent */
.filter-accordion__body .autocomplete-item {
    padding-left: 20px;
    font-size: 0.9rem;
    /* De rest van de stijlen (hover, etc.) wordt overgenomen */
}

/* =====================================================================
   BESTAND: mijnqigo.css (Toevoeging voor Subcategorieën)
   ===================================================================== */

/* Sub-accordion (genest) */
.sub-accordion {
    padding: 0 0 5px 10px; /* Indentatie links */
}

.sub-accordion__item {
    background: #fdfdfd;
    border-radius: 6px;
    margin-top: 4px;
    overflow: hidden;
}

.sub-accordion__header {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px 10px; /* Iets kleiner dan de hoofd-header */
    font-weight: 500; /* Lichter dan de hoofd-header */
    font-style: italic;
    cursor: pointer;
    font-size: 0.9rem;
    color: #444;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-accordion__header:hover {
    background-color: #f9f9f9;
}

.sub-accordion__header::after {
    content: '\f078'; /* FontAwesome pijl-omlaag */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.sub-accordion__item.is-open .sub-accordion__header::after {
    transform: rotate(-180deg);
}

.sub-accordion__body {
    display: none;
    padding: 0 5px 5px 5px;
}

.sub-accordion__item.is-open .sub-accordion__body {
    display: block;
}

/* Trefwoorden binnen de sub-categorie */
.sub-accordion__body .autocomplete-item {
    padding-left: 25px; /* Extra indentatie */
    font-size: 0.9rem;
}
/* =====================================================================
   BESTAND: app.css
   SECTIE:  12. Suggestie Overzicht (Nieuw, voor Taak 1)
   REDE:    Stijlen voor het 'Aanbevolen, Populair' scherm.
   ===================================================================== */

/* De container die de titel en knoppen vasthoudt */
.suggestion-overview {
    width: 100%;
    max-width: 900px; /* Zorgt voor een mooie marge op brede schermen */
    margin: 1rem auto; /* Centreert het overzicht */
    padding: 1rem;
    
    /* Spant over alle kolommen in de grid */
    grid-column: 1 / -1; 
}

.suggestion-overview__title {
    font-family: var(--font-titel);
    color: var(--kleur-primair);
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.suggestion-overview__title span {
    /* De 'Fase Naam' (bv. De Kern) */
    color: var(--kleur-accent); 
    display: block;
    font-size: 1.3rem;
}

/* De grid voor de 3 knoppen */
.suggestion-overview__knoppen {
    display: grid;
    grid-template-columns: 1fr; /* Mobiel: 1 kolom */
    gap: 15px;
    margin-top: 1.5rem;
}

/* De stijl voor 1 knop (Aanbevolen, etc.) */
.suggestion-knop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background-color: var(--kleur-wit);
    border: 2px solid transparent;
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.suggestion-knop:hover {
    transform: translateY(-5px);
    border-color: var(--kleur-accent);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07);
}

.suggestion-knop .fa-solid {
    font-size: 2rem;
    color: var(--kleur-accent);
    margin-bottom: 0.75rem;
    
    /* Mooi detail: maak een 'cirkel' achtergrond */
    background-color: #f5f0fa; /* Lichte paarse tint */
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
}

.suggestion-knop span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kleur-primair);
    margin-bottom: 0.25rem;
}

.suggestion-knop p {
    font-size: 0.9rem;
    color: var(--kleur-tekst);
    line-height: 1.4;
    margin: 0;
}

/* De 'loading' state (spinner) */
.suggestion-knop:disabled {
    background-color: #f9f9f9;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.suggestion-knop:disabled .fa-solid {
    color: #888;
    background-color: #eee;
}

/* =====================================================================
   AANPASSING: SUGGESTIE KAARTEN (Groter + Info + Tekst)
   ===================================================================== */

/* 1. Iets bredere kaarten in de scroller */
.suggestion-row__scroller .filter-results-card {
    width: 210px; /* Was 170px */
}

@media (min-width: 801px) {
    .suggestion-row__scroller .filter-results-card {
        width: 260px; /* Was 220px */
    }
}

/* 2. De Info Knop (Rechtsboven op de thumbnail) */
.filter-card__media {
    position: relative; /* Context voor absolute positionering */
}

.filter-card__info-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--kleur-primair);
    font-size: 0.9rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index: 5; /* Boven de video/afbeelding */
    transition: transform 0.2s ease, background-color 0.2s;
}

.filter-card__info-btn:hover {
    background-color: var(--kleur-primair);
    color: #fff;
    transform: scale(1.1);
}


/* Als hij is toegevoegd (het vinkje) */
.filter-card__knop--toegevoegd {
    justify-content: center;
    gap: 5px;
}

/* Desktop: 3 kolommen */
@media (min-width: 801px) {
    .suggestion-overview__knoppen {
        grid-template-columns: repeat(3, 1fr); /* 3 kolommen naast elkaar */
        gap: 25px;
    }

    .suggestion-overview__title {
        font-size: 2.2rem;
    }
    
    .suggestion-overview__title span {
         display: inline; /* Titel en fase op één lijn */
         font-size: 1.8rem;
         margin-left: 10px;
    }
}
/* =====================================================================
   BESTAND: app.css
   SECTIE:  13. Suggestie Dashboard (Nieuw, voor Taak 1 V2)
   REDE:    Stijlen voor het gestapelde preview-dashboard.
   ===================================================================== */

/* 1. De 'Loading' state (spinner) */
.suggestion-loading {
    /* Zorgt dat het netjes in de grid-layout past */
    grid-column: 1 / -1; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kleur-primair);
    opacity: 0.8;
}
.suggestion-loading .fa-solid {
    font-size: 2rem;
}

/* 2. De Hoofd-wrapper voor het dashboard */
.suggestion-dashboard {
    /* Zorgt dat het dashboard de volle breedte pakt */
    grid-column: 1 / -1; 
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Ruimte tussen de 'Aanbevolen', 'Populair' secties */
}

/* 3. De Hoofdtitel (bv. "Suggesties voor: De Kern") */
.suggestion-dashboard__title {
    font-family: var(--font-titel);
    color: var(--kleur-primair);
    font-size: 1.4rem;
    text-align: left;
    margin: 0 0 0 0;
}
.suggestion-dashboard__title span {
    color: var(--kleur-accent); /* De paarse kleur */
    display: inline; /* Op mobiel onder de titel */
    font-size: 1.4rem;
}

/* 4. Eén rij-sectie (bv. de hele "Populair" sectie) */
.suggestion-row {
    border-top: 1px solid #f0f2f5;
    padding-top: 1rem;
}

/* 5. De Header van een rij (Titel + "Toon alle" knop) */
.suggestion-row__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    /* Zorg voor padding links/rechts op mobiel */
    padding: 0 0.5rem; 
}

.suggestion-row__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--kleur-primair);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.suggestion-row__title .fa-solid {
    color: var(--kleur-accent);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* 6. De "Toon alle" knop */
.suggestion-row__show-all {
    background: none;
    border: none;
    color: var(--kleur-primair);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.8;
    padding: 5px;
    transition: opacity 0.2s ease;
    
    display: flex;
    align-items: center;
    gap: 5px;
}
.suggestion-row__show-all:hover {
    opacity: 1;
    text-decoration: underline;
}

/* 7. De Horizontale Scroller */
.suggestion-row__scroller {
    display: flex;
    flex-wrap: nowrap; /* Forceer één lijn */
    gap: 12px;
    overflow-x: auto; /* Maak horizontaal scrollen mogelijk */
    
    /* Scrollbar-styling (Verberg de lelijke balken) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */

    /* --- FADE OUT EFFECT (HERSTELD) --- */
    /* Zorgt voor een zachte overgang aan de rechterkant */
    /* We gebruiken 85% ipv 90% om zeker te zijn dat het zichtbaar is op mobiel */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.suggestion-row__scroller::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* 8. De Preview-Kaarten IN de scroller */
/* BELANGRIJKE OVERRIDE: 
   We hergebruiken .filter-results-card, maar die is 100% breed.
   Dat moeten we hier overschrijven! */
.suggestion-row__scroller .filter-results-card {
    width: 170px; /* Vaste breedte voor een preview-kaart */
    flex-shrink: 0; /* Voorkom dat de kaart krimpt */
}

/* 9. De rand-tot-rand scroll-truc (voor mobiel) */
/* We gaan ervan uit dat .mijnqigo-layout 1rem padding heeft */
@media (max-width: 800px) {
    .suggestion-row__scroller {
        /* Trek de scroller naar de randen van het scherm */
        margin-left: -1rem;
        margin-right: -1rem;
        
        /* AANGEPAST: Meer padding rechts (2rem) */
        /* Dit compenseert voor de fade-out, zodat de laatste kaart leesbaar is */
        padding: 0 2rem 1rem 1rem; 
    }

    /* We verwijderen de ::after van de hele kaart en zetten deze op de content wrapper */
    .video-card::after { display: none; } 

    .video-card__content-wrapper {
        position: relative;
        padding-top: 18px; /* Maak bovenin ruimte voor de streep */
    }

    .video-card__content-wrapper::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 40%;
        transform: translateX(-50%); /* Perfecte centrering ongeacht titel-lengte */
        width: 30px;
        height: 3px;
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        z-index: 10;
        display: none; /* STANDAARD VERBORGEN */
    }

    /* TOON DE DRAG HANDLE ALLEEN IN EDIT MODE */
    body.mode-editing .video-card__content-wrapper::before {
        display: block;
    }
}
/* 10. Desktop Aanpassingen */
@media (min-width: 801px) {
    .suggestion-dashboard__title {
        font-size: 1.8rem;
    }
    .suggestion-dashboard__title span {
         display: inline; /* Titel en fase op één lijn */
         font-size: 1.8rem;
         margin-left: 10px;
    }

    .suggestion-row__header {
        padding: 0; /* Geen extra padding nodig op desktop */
    }
    
    /* Grotere preview-kaarten op desktop */
    .suggestion-row__scroller .filter-results-card {
        width: 220px; 
    }
    .filter-card__title {
    font-size: 1.2rem; /* Iets kleiner font */
    font-weight: 500;
    }
}

/* =====================================================================
   BESTAND: app.css
   SECTIE:  10-d. COMPONENT: FILTERS (AANVULLING)
   REDE:    Task 3.1: Stijlen voor de nieuwe '[+]' / '[Kies Fase]' knoppen
   ===================================================================== */

/* De container voor de knoppen */
.filter-card__knoppen {
    display: flex;
    flex-wrap: wrap; /* Laat fase-knoppen (1,2,3) wrappen */
    gap: 5px;
}

/* Standaard knop-stijl (gedeeld) */
.filter-card__knop {
    background-color: #f0f2ff; /* Licht paars/blauw */
    border: 1px solid #d0d0ff;
    color: var(--kleur-primair);
    font-size: 0.8em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-grow: 1; /* Laat knoppen meegroeien */
    flex-basis: 0; /* Zorgt voor gelijke verdeling */
}

.filter-card__knop:hover {
    background-color: #e0e0ff;
    border-color: var(--kleur-accent);
}


/* Specifieke stijl voor de 'Auto' knop (Filter Modus) */
.filter-card__knop--auto {
    max-width: 40px;
    flex-grow: 0;
    font-size: 1.2em;
    padding: 2px 10px;
}

/* Stijl voor de 'Kies Fase' knop */
.filter-card__knop--manual-trigger {
    /* Neemt de rest van de ruimte in */
    flex-basis: 100px; 
}

/* 'Toegevoegd' status */
.filter-card__knop--toegevoegd,
.filter-card__knop--toegevoegd:hover {
    background-color: #DFF2BF;
    color: #4F8A10;
    border-color: #4F8A10;
    pointer-events: none;
    flex-grow: 0; /* Stop met groeien */
}
/* Verberg de 'oude' grote knop, we gebruiken nu de knop IN de badge */
.phase-row__toggle-button.meer-oefeningen-knop {
    display: none;
}

/* NIEUWE REGEL: Verbergt de kaart in de seriebouwer */
.card--hidden-in-serie {
    display: none;
}

/* =====================================================================
   BESTAND: app.css
   AANPASSING: Sterren in Filter/Suggestie Kaarten
   ===================================================================== */

/* Container voor sterren in de filter-kaart */
.filter-card__rating {
    display: flex;
    align-items: center;
    margin-top: 4px; /* Ruimte tussen titel en sterren */
    height: 20px;
}

/* De sterren zelf (kleiner dan normaal) */
.filter-card__rating .video-card__star {
    font-size: 1.2rem !important; /* Compacter */
    margin-right: 2px;
    cursor: default; /* In dit overzicht alleen kijken, niet klikken */
}

/* Zorg dat de titel niet te veel ruimte inneemt nu er sterren zijn */
.filter-card__title {
    margin-bottom: 2px;
}

/* ==========================================================================
   14. COMPONENT: QIGO START DASHBOARD
   ========================================================================== */

.qigo-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 1rem;
    max-width: 800px;
    margin: 0 auto;
    /* Zachte animatie bij binnenkomst */
    animation: fadeIn 0.5s ease-out; 
    flex-grow: 1;
    justify-content: center;
}

.qigo-dashboard__header {
    text-align: center;
}

.qigo-dashboard__header h2 {
    font-family: var(--font-titel);
    font-size: 1.8rem;
    color: var(--kleur-primair);
    margin-bottom: 0.5rem;
}

.qigo-dashboard__header p {
    color: var(--kleur-tekst);
    font-size: 1.1rem;
    opacity: 0.8;
}

.qigo-dashboard__cards {
    display: grid;
    grid-template-columns: 1fr; /* Mobiel: onder elkaar */
    gap: 1.2rem;
    width: 100%;
}

/* Basisstijl voor de Dashboard Kaarten */
.dashboard-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background-color: var(--kleur-wit);
    border: 2px solid transparent;
    border-radius: 80px; /* Lekker rond */
    padding: 1.5rem;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--schaduw);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    width: 100%; /* Zorg dat button breedte pakt */
}

.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--kleur-accent);
}

/* Icoon styling */
.dashboard-card__icon {
    width: 50px;
    height: 50px;
    background-color: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--kleur-primair);
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dashboard-card:hover .dashboard-card__icon {
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
}

/* Tekst Content */
.dashboard-card__content h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
    color: var(--kleur-primair);
    font-weight: 700;
}

.dashboard-card__content p {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
}

/* --- SPECIFIEKE STIJL VOOR DE GENERATOR (PRIMARY) --- */
.dashboard-card--primary {
    background: linear-gradient(135deg, #ffffff 0%, #fdfbff 100%);
    border-color: #e8dff5; /* Licht paars randje */
}

.dashboard-card--primary .dashboard-card__icon {
    background-color: #f5f0fa;
    color: #6a0dad; /* Paars accent */
}

.dashboard-card--primary:hover {
   /* border-color: #6a0dad; */
}

.dashboard-card--primary:hover .dashboard-card__icon {
    background-color: #6a0dad;
    color: #fff;
}

/* Pijltje rechts bij de primary card */
.dashboard-card__action {
    margin-left: auto; /* Duwt naar rechts */
    color: #ccc;
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.dashboard-card--primary:hover .dashboard-card__action {
    color: #6a0dad;
    transform: translateX(5px);
}

/* Desktop aanpassingen */
@media (min-width: 801px) {
    .qigo-dashboard__cards {
        /* Op desktop de Bibliotheek en Mijn QiGO naast elkaar */
        grid-template-columns: 1fr 1fr; 
    }
    
    /* De Generator knop over de volle breedte bovenaan */
    .dashboard-card--primary {
        grid-column: 1 / -1;
        padding: 2rem; 
    }
    
    .dashboard-card--primary h3 {
        font-size: 1.5rem;
    }
    
    .qigo-dashboard__header h2 {
        font-size: 2.5rem;
    }
    
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}




 /* ==========================================================================
   GEDRAG VAN SIDEBAR (DESKTOP
   ========================================================================== */

/* 1. Verberg de oude Sidebar ALTIJD (ook op desktop) */
.mijnqigo-layout__sidebar {
    display: none !important;
}

/* 2. Centreer de main content */
.mijnqigo-layout__main {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* 3. Verberg desktop-specifieke blokken die nu in de lade zitten */
.desktop-only-component {
    display: none !important;
}


/* PERFORMANCE: Simpelere weergave op schermen kleiner dan 800px */
.video-card, .serie-builder__card, .pill-bar {
        /* Vervang de zware wazige schaduw door een simpele border of een harde schaduw */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; 
        /* Of zelfs: box-shadow: none !important; border: 1px solid #eee; */
    }
    
    /* Zet dure effecten uit tijdens scrollen/laden */
    .video-card {
        will-change: transform; /* Vertelt de browser om dit op een eigen laag te zetten */
    }


/* 1. De Container: Alles uitlijnen aan de BOVENKANT (Start) */
.serie-toolbar {
    display: flex;
    align-items: flex-start; /* CRUCIAAL: Voorkomt uitrekken (stretch) */
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}

/* --- NIEUWE CODE: Container voor rechts (Tijd + Vraagteken) --- */
.serie-toolbar__right {
    display: flex;
    flex-direction: column; /* Stapel ze onder elkaar */
    align-items: flex-end;    /* Centreer ze horizontaal */
    gap: 5px;               /* Ruimte tussen tijd en knop */
    flex-shrink: 0;         /* Mag niet krimpen */
}
/* --- EINDE NIEUWE CODE --- */


/* 2. De Toggle Knop (Vraagteken) */
.toolbar-icon-btn {
    /* Vaste afmetingen voorkomen vervorming */
    width: 44px;
    height: 44px;
    flex-shrink: 0; 
    
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* AANGEPAST: Margin weggehaald, want hij zit nu in een flex-column met gap */
    margin-top: 0; 
    margin-right: 0;
}

.toolbar-icon-btn:hover {
    color: var(--kleur-primair);
    background-color: rgba(0,0,0,0.03);
    transform: rotate(15deg);
}
.toolbar-icon-btn.is-active {
    color: var(--kleur-accent);
}

/* 3. De Titel Sectie (Links Uitgelijnd) */
#filter-balk-standaard {
    flex-grow: 1; 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; 
    
    justify-content: flex-start !important; 
    height: auto !important;
}

/* De Knop Inhoud (Tekst) */
.series-title-btn {
    display: flex !important;
    flex-direction: column !important;
    
    align-items: flex-start !important; 
    text-align: left !important;
    
    background: transparent !important;
    border: none !important;
    padding: 5px 0 !important;
    
    gap: 2px;
    width: 100% !important;

    height: auto !important;
    white-space: normal !important;
}

/* 4. De Tijdsbalk (Rechtsboven) */
#total-duration-display.pill-bar--time {
    /* Stop het uitrekken */
    
    
    /* Vaste hoogte behouden */
    height: auto; 
    padding: 8px 15px;
    
    /* AANGEPAST: Margin-top aangepast om optisch uit te lijnen met de titel links */
    margin-top: 12px; 
    
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}
.series-meta-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 2px;
    color: #aaa;
    margin-bottom: 2px;
}

.series-main-title {
    font-family: var(--font-titel);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--kleur-primair);
    line-height: 1.1;
    /* NIEUW: Tekst mag naar volgende regel (Wrap) */
    white-space: normal;
    overflow-wrap: break-word; /* Breekt lange woorden indien nodig */
}

.series-meta-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #888;
    font-weight: 400;
    margin-top: 4px;
    max-width: 100%; /* Mag breeduit */
    cursor:auto;
    
    /* AANGEPAST: Wrap aan, afkappen uit */
    white-space: normal;     /* Was nowrap */
    overflow: visible;       /* Was hidden */
    text-overflow: clip;     /* Was ellipsis */
}

/* 4. De Tijdsbalk (Rechtsboven) */
#total-duration-display.pill-bar--time {
    /* Stop het uitrekken */
    align-self: flex-end; 
    
    /* Vaste hoogte behouden */
    height: auto; 
    padding: 8px 15px;
    
    /* Optisch uitlijnen met de bovenkant van de titel */
    margin-top: 10px; 
    
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}
.title-icon {
    font-size: 0.7rem; /* AANGEPAST: Kleiner en eleganter */
    color: #ddd; /* Bijna onzichtbaar grijs */
    vertical-align: middle;
    margin-left: 8px;
    
    /* Omdat hij kleiner is, moet hij iets meer omhoog om verticaal in het midden te lijken */
    transform: translateY(-5px); 
    
    transition: all 0.3s ease;
}

/* =====================================================================
   WORKFLOW TOGGLE & ANIMATIE
   ===================================================================== */

/* 1. De Toggle Knop (Kompas) */
.toolbar-icon-btn {
    background: transparent;
    border: none;
    color: #ccc; /* Subtiel grijs */
    font-size: 1.4rem;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.toolbar-icon-btn:hover {
    color: var(--kleur-primair);
    background-color: rgba(0,0,0,0.03);
    transform: rotate(15deg); /* Speels effectje */
}

/* Als de balk actief is, mag het icoon 'aan' staan */
.toolbar-icon-btn.is-active {
    color: var(--kleur-accent); /* Geel/Oranje */
}

/* 2. De Workflow Bar Animatie (Collapsible) */
.workflow-bar {
    /* Basis state (Open) */
    max-height: 200px; /* Genoeg ruimte voor de inhoud */
    opacity: 1;
    overflow: hidden; /* Nodig voor de animatie */
    margin-bottom: 20px;
    padding: 10px 15px; /* De originele padding */
    border: 1px solid #e0e0e0; /* De originele border */
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* De Verborgen State */
.workflow-bar.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0; /* Verberg de rand ook */
    pointer-events: none; /* Niet klikbaar als weg */
}

/* ==========================================================================
   AANPASSING: FILTER GRID & KAART (Smal & Video Zichtbaar)
   ========================================================================== */

/* 1. Het Grid (Meer ruimte = Smallere kaarten) */
.body--is-filtering #filter-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolommen */
    gap: 15px; /* Ruimte tussen kaarten zorgt dat ze smaller worden */
    padding: 0 10px 20px 10px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 801px) {
    .body--is-filtering #filter-results-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding: 0;
    }
}

/* 2. De Basis Kaart */
.filter-results-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: var(--radius-klein);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   
    overflow: hidden; 
    
    /* Compacter gemaakt */
    height: auto; 
    min-height: 120px; 
    width: 90%;
    position: relative;
}

/* 3. De Bovenkant (Video + Knoppen) */
.filter-card__top-section {
    display: flex;
    flex-direction: row;
    height: 85px; /* Iets minder hoog */
    width: 100%;
   
}

/* 4. Media (Video/Thumbnail) - DE FIX VOOR AFSNIJDEN */
.filter-card__media {
    flex-grow: 1; 
    height: 100%;
    
   
    
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Zorg dat de afbeelding/video er HELEMAAL in past */
.filter-card__thumbnail,
.filter-card__media video {
    width: 100%;
    height: 100%;
    
    /* CRUCIAAL: 'contain' zorgt dat niets wordt afgesneden */
    object-fit: contain; 
}

/* Play Icoon */
.filter-card__media::after {
    content: '▶';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    opacity: 0.9;
    pointer-events: none;
}

/* 5. Acties (Knoppen kolom) */
.filter-card__actions {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    
    width: 45px; /* Iets smaller */
    flex-shrink: 0;
    
    gap: 6px;
    padding: 0 2px;
    
}

/* Knoppen (Rondjes iets kleiner) */

/* 6. De Titel (Onderkant) */
.filter-card__content {
    padding: 6px 8px;
   
    height: auto;
}

.filter-card__title {
    font-size: 0.9rem; /* Iets kleiner font */
    font-weight: 500;
    color: var(--kleur-primair);
    margin: 0;
    line-height: 1.2;
    text-align: left;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ==========================================================================
   AANPASSING: SUCCES STATUS (Groene Rand voor Nieuwe Oefeningen)
   ========================================================================== */

/* Geldt nu voor zowel de suggestie-kaart als de kaart in je serie */
.filter-results-card.card--added-success,
.video-card.card--added-success {
    border: 2px solid #4F8A10 !important; /* Succes groen */
    background-color: #f4fcf0 !important; /* Heel lichte groene achtergrond */
    transition: all 0.3s ease;
    
    /* Optioneel: subtiele animatie om de aandacht te trekken */
    animation: highlightPulse 1s ease-out;
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(79, 138, 16, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(79, 138, 16, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 138, 16, 0); }
}

/* ==========================================================================
   VERWIJDER DRAG BADGE (Overbodig, hele kaart is sleepbaar)
   ========================================================================== */
.video-card__drag-badge {
    display: none !important;
}

/* 2. De Overlay (Standaard verborgen) */
.filter-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: rgba(255, 255, 255, 0.98); /* Iets minder transparant voor leesbaarheid */
    z-index: 10;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px; /* Meer padding binnenin */
    box-sizing: border-box;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-align: center;
}

.filter-card__overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* 3. Typografie in de Overlay */
.overlay-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kleur-primair);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.overlay-divider {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
    margin: 2px 0;
}

/* 4. Knoppen in de Overlay (FIX: Tekstgrootte & Breedte) */
.overlay-btn-auto {
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Breedte: Laat de tekst de breedte bepalen, maar begrens het */
    width: auto; 
    min-width: 100px; /* Minimaal formaat */
    max-width: 95%;   /* Blijf binnen de kaart */
    
    margin: 5px auto; 
    padding: 8px 16px; /* Ruime padding rondom de tekst */
    
    /* Stijl */
    background-color: var(--kleur-accent);
    color: #fff;
    border: none;
    
    /* AANGEPAST: Minder rond zodat tekst in de hoeken past */
    border-radius: 8px; 
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    
    /* Tekst */
    font-weight: 600;
    font-size: 0.85rem; 
    line-height: 1.2;
    text-align: center;
    white-space: normal; /* Tekst mag naar volgende regel als kaart heel smal is */
}

.overlay-btn-auto:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.overlay-phase-grid {
    display: flex;
    gap: 8px; /* Iets meer ruimte tussen bolletjes */
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.overlay-btn-fase {
    width: 32px; /* Iets groter voor de vingers */
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--kleur-primair); /* Duidelijkere rand */
    color: var(--kleur-primair);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s;
    
    /* Reset flex-grow van algemene knopstijl */
    flex-grow: 0 !important; 
    flex-basis: auto !important;
}
.overlay-btn-fase:hover {
    background-color: var(--kleur-primair);
    color: #fff;
}

/* Sluitknopje */
.overlay-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 1.4rem; /* Iets groter om makkelijk te raken */
    line-height: 1;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
}
.overlay-close:hover {
    color: #D8000C;
}

/* --- Ronde Reset Knop in Actiebalk --- */
.filter-actions__knop--reset-round {
    /* Vaste afmetingen voor een cirkel */
    width: 48px; 
    height: 48px;
    padding: 0;
    flex: 0 0 48px; /* Voorkom dat flexbox hem indrukt */
    
    border-radius: 50%; /* Maakt hem rond */
    justify-content: center;
    align-items: center;
    
    background-color: #fff;
    border: 2px solid #e0e0e0;
    color: #999;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.filter-actions__knop--reset-round:hover {
    background-color: #ffebeb; /* Heel licht rood */
    border-color: #D8000C;
    color: #D8000C;
    transform: rotate(-180deg); /* Leuke animatie bij hover */
}
/* ==========================================================================
   STYLING VOOR FAVORIETEN VIEW (FIX VOOR GRID & KNOP)
   ========================================================================== */

/* 1. Zorg dat de header over de hele breedte van de grid loopt */
#filter-results-grid .filter-header-wrapper {
    grid-column: 1 / -1; /* Span over alle kolommen (mobiel en desktop) */
    width: 100%;
    margin-bottom: 20px;
}

/* 2. Specifieke styling voor de Favorieten Terug-knop */
#favorieten-terug-knop {
    /* Mobiel: Volle breedte */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Desktop Aanpassingen (min-width: 801px) */
@media (min-width: 801px) {
    #favorieten-terug-knop {
        /* Desktop: Breedte van de tekst (compact) */
        width: auto !important;
        display: inline-flex !important;
        flex-grow: 0;
        
        /* Iets meer padding aan de zijkanten voor de 'pil' look */
        padding-left: 30px;
        padding-right: 30px;
    }
    
    /* Zorg dat de titel netjes naast de knop staat op desktop */
    #filter-results-grid .filter-header-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   NIEUWE HERO KAART (MOBILE FIRST - SCHOON)
   ========================================================================== */

/* 1. De Container (Mobiel Standaard) */
.hero-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3; 
    
    background-color: #ffffff; /* <--- AANGEPAST NAAR WIT */
    border-radius: 20px; 
    overflow: hidden;    
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    margin-bottom: 30px;
}

/* 2. De Achtergrond (Video/Foto) */
.hero-card__media,
.hero-card__bg,
.hero-card video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    margin: 0; padding: 0;
}

/* 3. De Overlay (Grid) */
.hero-card__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    padding: 20px; /* Mobiele padding */
    
    /* Flexbox: Tekst boven, Knop onder */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; /* Links uitlijnen */
    
    /* Gradient voor leesbaarheid */
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.7) 0%, 
        rgba(0,0,0,0.1) 40%, 
        rgba(0,0,0,0.1) 60%, 
        rgba(0,0,0,0.8) 100%
    );
    
    pointer-events: none; /* Laat klikken door naar video */
}

/* 4. Titel */
.hero-card__title {
    font-family: var(--font-titel);
    font-size: 1.8rem; /* Mobiel formaat */
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    margin: 0;
    line-height: 1.1;
    text-align: left;
}

/* 5. Play Knop (Absoluut Midden) */
.hero-card__play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    
    width: 60px; height: 60px; /* Mobiel formaat */
    
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    
    display: flex; justify-content: center; align-items: center;
    padding-left: 4px;
    
    pointer-events: auto; /* Klikbaar */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hero-card:hover .hero-card__play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(255, 255, 255, 0.4);
}

/* 6. Actie Knop */
.hero-card__action-btn {
    pointer-events: auto; /* Klikbaar */
    display: flex; align-items: center; gap: 10px;
    
    background-color: #fff;
    color: var(--kleur-primair);
    border: 1px solid #fff;
    
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.hero-card__action-btn:hover {
    background-color: var(--kleur-accent);
    color: #fff;
    border-color: var(--kleur-accent);
    transform: translateY(-2px);
}

/* ==========================================================================
   AANPASSING: INTRO DUO-MODUS (2 VIDEO'S NAAST ELKAAR)
   ========================================================================== */

/* 1. De Basis (Mobiel) */
.intro-video-row {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Ruimte tussen de kaarten onder elkaar */
    width: 100%;
    margin-bottom: 30px;
}

/* 2. Desktop Grid (Alleen als er meerdere video's zijn) */
@media (min-width: 801px) {
    
    /* Activeer het rooster alleen als de PHP class '--split' is toegevoegd */
    .intro-video-row.intro-video-row--split {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Twee gelijke kolommen */
        gap: 30px; /* Ruimte tussen de twee kaarten */
        align-items: start; /* Uitlijnen aan de bovenkant */
    }

    /* Specifieke aanpassing voor de Hero Card wanneer hij in een split-row zit.
       Normaal heeft hij een max-width van 600px, dat is te breed voor 2 kolommen.
    */
    .intro-video-row.intro-video-row--split .hero-card {
        max-width: 100%; /* Laat hem de breedte van de kolom vullen */
        margin: 0;       /* Reset eventuele centrering */
        
        /* De aspect-ratio van 4/3 zorgt automatisch dat hij minder hoog wordt 
           naarmate hij smaller wordt. Dit blijft dus netjes in verhouding! */
    }
}

/* =========================================
   DESKTOP (min-width: 801px)
   ========================================= */
@media (min-width: 801px) {
    .hero-card {
        /* Desktop: Beperkte breedte (halve pagina) */
        max-width: 600px; 
        
        /* Links uitlijnen (reset margin auto van vorige pogingen) */
        margin-left: 0;
        margin-right: auto;
        
        aspect-ratio: 4 / 3; /* Blijft 4:3 */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    .hero-card__overlay {
        padding: 30px; /* Meer padding */
    }

    .hero-card__title {
        font-size: 2.2rem; /* Grotere tekst */
    }

    .hero-card__play-btn {
        width: 80px; height: 80px; font-size: 28px;
    }
}

/* ==========================================================================
   HERO PLAYER CONTROLS (Gecorrigeerd voor Mobiele Overloop)
   ========================================================================== */

.hero-player-controls {
    display: none; 
    position: absolute;
    /* --- AANGEPAST: Iets meer ruimte van de bodem, minder aan de zijkanten --- */
    bottom: 15px;
    left: 10px;
    right: 10px;
    /* --- EINDE AANGEPAST --- */
    z-index: 100;
    align-items: center;
    /* --- AANGEPAST: Gap verkleind van 12px naar 8px voor meer ruimte --- */
    gap: 8px;
    
}

/* Toon de controls als de kaart de status 'playing' krijgt */
.hero-card.video-card--playing .hero-player-controls {
    display: flex;
}

/* 1. DE TIJDSBALK */
.video-controls__progress-container {
    flex-grow: 1;
    /* --- NIEUW: Voorkom dat de container groter wordt dan de beschikbare ruimte --- */
    min-width: 0; 
    display: flex;
    align-items: center;
    /* --- AANGEPAST: Gap verkleind voor mobiel --- */
    gap: 8px;
    /* UITGEZET VOOR MINIMALE WEERGAVE
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* --- AANGEPAST: Padding verkleind van 18px naar 12px --- */
    padding: 0 12px;
    height: 40px; /* Iets minder hoog voor betere fit */
    border-radius: 25px; 
    /*border: 1px solid rgba(255, 255, 255, 0.2); */
}

.video-time {
    color: white;
    font-size: 0.75rem; /* Iets kleiner font */
    font-family: 'Comfortaa', sans-serif;
    /* --- AANGEPAST: Vaste breedte weg voor flexibiliteit --- */
    white-space: nowrap;
}

.video-progress-bar {
    flex-grow: 1;
    -webkit-appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    cursor: pointer;
    /* --- NIEUW: Zorg dat de bar niet onzichtbaar klein wordt --- */
    min-width: 50px; 
    accent-color: var(--kleur-accent, #FFC400);
}


/* 2. DE KNOPPEN */
.hero-ctrl-btn {
    flex-shrink: 0;
    /* --- AANGEPAST: Iets kleinere knoppen op mobiel (40px ipv 45px) --- */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

/* --- NIEUWE MEDIA QUERY VOOR EXTRA SMALLE SCHERMEN (< 380px) --- */
@media (max-width: 380px) {
    .hero-player-controls {
        gap: 5px;
        bottom: 10px;
    }
    .video-controls__progress-container {
        padding: 0 8px;
        gap: 5px;
    }
    .hero-ctrl-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}
/* --- EINDE NIEUWE SECTIE --- */

/* === FASE TITELS & KNOPPEN TOGGLE LOGICA === */

/* 1. STANDAARD: VERBORGEN (Alleen kijken modus) */
.phase-row__header,
.phase-row__add-btn,
.video-card__remove-btn,
.video-card__handle-icon,
.video-card__title::after { 
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.phase-row {
    padding-top: 10px;
    transition: padding 0.3s ease;
}

/* 2. EDIT MODUS: ALTIJD ZICHTBAAR (Knoppen & Titels) */
body.mode-editing .phase-row__header,
body.mode-editing .phase-row__add-btn,
body.mode-editing .video-card__remove-btn,
body.mode-editing .video-card__handle-icon {
    display: flex !important;
    opacity: 1;
    animation: fadeIn 0.4s ease forwards;
}

/* 3. EDIT MODUS: ALLEEN BIJ HOVER (Het Sleep Handje) */
/* Stap A: Zorg dat het element bestaat (display), maar nog onzichtbaar is (opacity 0) */
body.mode-editing .video-card__title::after {
    display: inline-block !important; /* Het element is er technisch wel... */
    opacity: 0;                       /* ...maar je ziet hem nog niet */
    transition: opacity 0.2s ease;
}

/* Stap B: Maak zichtbaar als je over de KAART hovert */
body.mode-editing .video-card:hover .video-card__title::after {
    opacity: 1; /* Nu verschijnt hij */
}

/* Animatie voor het soepel verschijnen */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === VOEG TOE KNOPPEN (TOGGLE LOGICA) === */

/* 1. STANDAARD: VERBORGEN */
/* De knop is standaard onzichtbaar */
.phase-row__toggle-button.meer-oefeningen-knop {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 2. EDIT MODUS: ZICHTBAAR (Oorspronkelijke stijl) */
/* Als de toggle aan staat, komt de knop tevoorschijn zoals hij oorspronkelijk was */
body.mode-editing .phase-row__toggle-button.meer-oefeningen-knop {
    display: flex !important; /* Of inline-flex/block, afhankelijk van je originele CSS */
    opacity: 1;
    animation: fadeIn 0.4s ease forwards;
}

/* Zorg dat de animatie soepel verloopt */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   CONTEXT ACTION BAR & TIPS - COMPLETE FIX
   ========================================= */

/* --- 1. DE HOOFDCONTAINER --- */
.context-action-bar {
    display: flex;
    align-items: center;
    /* Belangrijk: flex-wrap zorgt dat items naar de volgende regel mogen op mobiel */
    flex-wrap: wrap; 
    
    width: 100%;
    margin-bottom: 25px;
    background: transparent;
    pointer-events: none; /* Klikken door lege ruimte */
    z-index: 90;
    position: relative;
    
    /* Desktop hoogte: vast. Mobiel wordt dit 'auto' */
    height: 60px; 
    padding: 0 5px;
    /* TOEVOEGEN: Fix voor iOS rendering */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    will-change: transform; /* Hint voor de browser dat dit kan bewegen/veranderen */
}

.sticky-action-bar {
    position: sticky;
    top: 15px;
}

/* Zorg dat de inhoud klikbaar is */
.action-bar__controls,
.action-bar__passive-elements,
.action-bar__tip-wrapper,
#quick-play-btn {
    pointer-events: auto;
}

/* --- 2. DE LINKERKANT (Toggle) --- */
.action-bar__controls {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    flex-grow: 0;
    width: auto;
    /* Animatie eigenschappen voor de balk */
    transition: flex-grow 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}

.action-bar__morph-container {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 5px;
    border-radius: 50px;
    background-color: color-mix(in srgb, var(--kleur-accent2, #ffe0b2), transparent 70%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    width: 100%;
    transition: width 0.3s ease;
}

/* Toggle Switch Styling */
.qigo-toggle {
    position: relative; display: inline-block; width: 60px; height: 34px; flex-shrink: 0; z-index: 2;
}
.qigo-toggle input { opacity: 0; width: 0; height: 0; }
.qigo-toggle__slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.6); transition: .4s; border-radius: 34px;
}
.qigo-toggle__slider:before {
    position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px;
    background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
input:checked + .qigo-toggle__slider { background-color: var(--kleur-primair, #1A535C); }
input:checked + .qigo-toggle__slider:before { transform: translateX(26px); }

/* --- 3. DE KNOPPEN IN DE BALK (Opslaan/Login) --- */
.action-bar__hidden-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    max-width: 0;
    transform: translateX(30px);
    transition: opacity 0.2s ease, max-width 0.3s ease, transform 0.2s ease;
}

.action-pill--save, .action-pill--login {
    display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 34px;
    border-radius: 20px; background-color: rgba(0, 0, 0, 0.06); color: var(--kleur-tekst);
    font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer;
    white-space: nowrap; text-decoration: none;
}
.action-pill:hover { background-color: rgba(0, 0, 0, 0.1); }

/* --- 4. DE RECHTERKANT (Startknop & Tekst) --- */
.action-bar__passive-elements {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease 0.2s;
}

.action-bar__label { font-family: var(--font-titel, 'Comfortaa'); font-weight: 700; color: var(--kleur-tekst); font-size: 1rem; white-space: nowrap; }
.action-bar__separator { font-family: var(--font-titel, 'Comfortaa'); font-weight: 700; color: #888; font-size: 1.1rem; white-space: nowrap; }

/* DE START KNOP MET HOVER */
#quick-play-btn {
    display: flex; align-items: center; gap: 10px; padding: 10px 25px;
    background-color: #FFC400; color: #1A535C; border: none; border-radius: 50px;
    font-weight: 700; font-size: 1rem; box-shadow: 0 4px 12px rgba(255, 196, 0, 0.3);
    cursor: pointer; white-space: nowrap;
    
    /* De Hover Transitie */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect (Alleen als device hover ondersteunt) */
@media (hover: hover) {
    #quick-play-btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 20px rgba(255, 196, 0, 0.5); /* Felle gloed */
        background-color: #ffd54f;
    }
}
#quick-play-btn:active {
    transform: scale(0.96);
}

/* --- 5. DE TIPS (FIX VOOR MOBIEL & DESKTOP) --- */
.action-bar__tip-wrapper {
    /* FORCEER ZICHTBAARHEID: */
    display: flex !important;
    align-items: center;
    gap: 10px;
    opacity: 1;
    z-index: 5;
    transition: all 0.3s ease;
}

.tip-icon {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background-color: rgba(255,255,255,0.8); color: #666;
    border: 1px solid rgba(0,0,0,0.05); cursor: pointer; flex-shrink: 0;
}
.tip-text {
    font-size: 0.85rem; color: #666; cursor: pointer;
    line-height: 1.3;
     opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* === DESKTOP LAYOUT (768px en groter) === */
@media (min-width: 768px) {
    .context-action-bar {
        flex-wrap: nowrap; /* Alles op 1 regel */
    }
    .action-bar__tip-wrapper {
        margin-left: auto; /* Duw naar rechts */
        padding-right: 10px;
        width: auto;
    }
    .tip-text {
        text-align: left;
        max-width: 260px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
    }
}

/* === MOBIEL LAYOUT (Kleiner dan 768px) === */
@media (max-width: 767px) {
    .context-action-bar {
        height: auto;
        /* Zorgt dat de balk nooit 'inzakt' tijdens de wissel */
        min-height: 70px; 
        padding-bottom: 24px; /* Ruimte voor label */
        gap: 10px;
        position: relative;
        /* Zorg dat items verticaal in het midden blijven van hun 'regel' */
        align-items: center; 
    }

    /* 1. CONTAINER: Statisch maken en animaties UITZETTEN */
    .action-bar__passive-elements {
        position: static !important; 
        margin-left: auto; 
        padding: 0;
        display: flex;
        
        /* Stop animaties op de container zelf */
        transition: none !important;
        transform: none !important;
        opacity: 1 !important; 
        max-width: none !important; 
    }

    /* 2. OVERRIDE EDIT-MODE */
    body.mode-editing .action-bar__passive-elements {
        opacity: 1 !important;
        transform: none !important;
        max-width: none !important;
        margin-left: auto !important; 
    }

    /* 3. VERBERG DE KNOPPEN (Startknop) */
    body.mode-editing #quick-play-btn,
    body.mode-editing .action-bar__separator {
        display: none !important;
    }

    /* 4. LABEL: Stabiel en Fade-effect */
    .action-bar__label {
        position: absolute;
        bottom: 6px;  /* Ietsje hoger voor optische balans */
        left: 15px;
        z-index: 100;
        
        font-size: 0.7rem;
        color: #999;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;

        /* STANDAARD ZICHTBAAR */
        opacity: 1; 
        visibility: visible;
        display: block !important;
        transform: none !important;
        pointer-events: none;
        
        /* ANIMATIE: Vloeiend verschijnen/verdwijnen zonder sprong */
        transition: opacity 0.2s ease-in-out;
    }

    /* 5. TIJDENS EDIT MODE: Maak onzichtbaar (maar laat staan) */
    /* We gebruiken opacity 0 in plaats van display:none om sprongen te voorkomen */
    body.mode-editing .action-bar__label {
        opacity: 0 !important; 
    }

    /* Verberg tips en separator standaard op mobiel */
    
    .action-bar__tip-wrapper {
        display: none !important;
    }
}
/* === MODUS: EDITING ACTIVE === */
body.mode-editing .action-bar__controls {
    flex-grow: 0; width: auto; min-width: 0;
    transition: flex-grow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
body.mode-editing .action-bar__hidden-actions {
    opacity: 1; max-width: 500px; transform: translateX(0); margin-left: 15px; padding-right: 15px;
    transition: max-width 0.4s ease 0.1s, transform 0.4s ease 0.2s, opacity 0.4s ease 0.2s;
}
body.mode-editing .action-bar__passive-elements {
    opacity: 0; max-width: 0; margin-left: 0; transform: translateX(-10px);
    transition: all 0.3s ease; pointer-events: none; position: absolute;
}
body.mode-editing .action-bar__morph-container {
    width: auto; padding-right: 5px; box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* ==========================================================================
   FASE 0: COMPLETE STYLING (Video, Tags, Knoppen & Fullscreen)
   ========================================================================== */

/* --- 1. DE CONTAINER & VIDEO (16:9 Fix) --- */
.fase-0-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* Forceer de kaart naar 16:9, behalve in fullscreen */
.fase-0-wrapper .hero-card {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    max-width: 600px;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    transition: margin-bottom 0.4s ease;
    border-radius: 20px;
    overflow: hidden; 
}

/* Zorg dat video/afbeelding de kaart vult (Standaard: COVER) */
.fase-0-wrapper .hero-card .video-card__thumbnail,
.fase-0-wrapper .hero-card img,
.fase-0-wrapper .hero-card video {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important; /* Dit zorgt voor het afsnijden in de kaart, wat mag */
    position: absolute;
    top: 0;
    left: 0;
}

/* --- 2. KNOPPEN IN OVERLAY --- */
.hero-card__actions {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    z-index: 5;
    pointer-events: auto; 
}

.hero-card__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: var(--font-body, sans-serif);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.2s ease;
}

/* Secundaire knop */
.hero-card__btn--secondary {
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
}
.hero-card__btn--secondary:hover,
.hero-card__btn--secondary.is-active {
    background-color: #fff;
    color: var(--kleur-primair, #333);
}

/* Primaire knop */
.hero-card__btn--primary {
    background-color: #fff;
    color: var(--kleur-primair, #333);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.hero-card__btn--primary:hover {
    transform: translateY(-2px);
    background-color: var(--kleur-accent, #f9d856);
}

/* --- 3. TAGS & INHOUD PANEEL --- */
.fase-0-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(-20px);
    margin-top: -10px;
    margin-bottom: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    position: relative;
}

.fase-0-wrapper.is-playing .fase-0-tags {
    opacity: 1;
    transform: translateY(0);
    margin-top: 15px;
    margin-bottom: 10px;
    pointer-events: auto;
}

.tag-pill {
    display: inline-block;
    padding: 6px 14px;
    background-color: #f0f8ff;
    color: var(--kleur-primair, #333);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    border: 1px solid #d1e3f0;
    transition: all 0.2s ease;
}
.tag-pill:hover {
    background-color: var(--kleur-accent, #f9d856);
    border-color: var(--kleur-accent, #f9d856);
    color: #fff;
}

.fase-0-info-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    background: transparent;
    margin-top: 0;
}
.fase-0-info-panel.is-open {
    grid-template-rows: 1fr;
    margin-top: 10px; 
}
.fase-0-info-content { overflow: hidden; }
.fase-0-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    padding: 10px 5px;
    max-width: 650px;
}

/* --- 4. FULLSCREEN FIX (VERBETERD) --- */

/* Situatie A: De KAART is fullscreen */
.fase-0-wrapper .hero-card:fullscreen,
.fase-0-wrapper .hero-card:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    aspect-ratio: unset !important; /* Vrijlaten ratio */
    border-radius: 0 !important;
    background-color: #000;
    padding: 0; margin: 0;
}

/* Situatie B: De VIDEO ZELF is fullscreen (Veelvoorkomend op mobiel/iOS) */
/* We targeten hier direct het video element in fullscreen modus */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
.fase-0-wrapper .hero-card video:fullscreen,
.fase-0-wrapper .hero-card video:-webkit-full-screen {
    object-fit: contain !important; /* CRUCIAAL: Zorg dat alles zichtbaar is! */
    width: 100vw !important;
    height: 100vh !important;
    background: #000;
}

/* Zorg dat als de KAART fullscreen is, de video daarbinnen ook 'contain' volgt */
.fase-0-wrapper .hero-card:fullscreen video,
.fase-0-wrapper .hero-card:-webkit-full-screen video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
}

/* Verberg overlays in fullscreen */
.fase-0-wrapper .hero-card:fullscreen .hero-card__overlay,
.fase-0-wrapper .hero-card:-webkit-full-screen .hero-card__overlay {
    display: none !important;
}

/* MOBIEL SPECIFIEK */
@media (max-width: 600px) {
    .hero-card__actions { bottom: 20px; left: 15px; right: 15px; }
    .hero-card__btn { padding: 8px 14px; font-size: 0.85rem; }
}
/* --- CSS CONTROLE --- */
.js-description-panel {
    /* Startpositie: onzichtbaar */
    display: none; 
}

.js-description-panel.is-open {
    /* Als class 'is-open' erop staat: zichtbaar */
    display: block;
    /* Of flex/grid, afhankelijk van je layout */
}

/* --- LOGIN PROMO BOX (Voor niet-ingelogde gebruikers) --- */
.login-promo-box {
    background-color: var(--kleur-bg-geel, #f7f7ea); /* De zachte achtergrondkleur */
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.login-promo-icon {
    font-size: 2rem;
    color: var(--kleur-goud, #C5A059);
    margin-bottom: 5px;
}

.login-promo-text {
    font-family: 'Comfortaa', sans-serif;
    color: var(--kleur-tekst-primair, #1A535C);
    margin: 0;
    font-size: 0.95rem;
}

/* De knop stijl */
.btn-login-action {
    background-color: var(--kleur-primair, #FFC400); /* QiGO Geel */
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Comfortaa', sans-serif;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}

.btn-login-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    background-color: #ffcd1f; /* Iets lichter bij hover */
}