/* =========================================================================
   H2 Centre for FID — Componenten
   Herbruikbare UI-onderdelen: glaskaart, toggle, voortgangsbalk, quiz-states.
   ========================================================================= */

/* --- Glassmorphism Card --- */
.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* --- Custom Toggle Checkbox --- */
.custom-toggle input:checked + div {
    border-color: #1D9E75;
    background-color: #E1F5EE;
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(29, 158, 117, 0.2);
}
.custom-toggle input:checked + div .indicator {
    background-color: #1D9E75;
    border-color: #1D9E75;
}
.custom-toggle input:checked + div .indicator svg {
    opacity: 1;
}

/* --- Progress Bar --- */
.progress-bar-fill {
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Quiz answer states --- */
.quiz-option.locked { pointer-events: none; }
.quiz-option.correct { border-color: #0F6E56 !important; background-color: #E1F5EE !important; }
.quiz-option.incorrect { border-color: #A32D2D !important; background-color: #FCEBEB !important; opacity: 0.7; }

/* --- Mouse-hover animaties UITGESCHAKELD (op verzoek) ---
   Geen beweging/scale/zoom op muis-hover. Neutraliseert Tailwind utilities als
   hover:-translate-y-1, hover:scale-105 en group-hover:translate-x-1.
   Reveal-on-scroll blijft onaangeroerd; de checked-toggle scale (geen
   hover-animatie) wordt hieronder bewust opnieuw afgedwongen. */
/* Geen hover-BEWEGING (lift/scale), maar transitions blijven smooth.
   De hover-vertraging zat in de stagger-delays (zie globals.css), niet hier. */
*:hover { transform: none !important; }
.group:hover * { transform: none !important; }
.custom-toggle input:checked + div { transform: scale(1.02) !important; }