/* =====================================================================
   exam-card.css — AmadeosTheorie Exam Card Redesign
   Deel 1: Normale vraagtypen (ABCD, ja/nee, 1/2/3, nummer, abc, ab)
   Niet van toepassing op DD2 (.exam-root--dd2) — volgt in deel 2.
   ===================================================================== */

/* ------------------------------------------------------------------
   Hoogte-keten: html → body → user-shell → content-wrap → question-wrapper → section.
   GEEN hardcoded calc(100vh - 84px) meer — die was 60px te hoog wanneer
   de early-release banner zichtbaar was, waardoor nav-knoppen geclipped werden.
   ------------------------------------------------------------------ */
html:has(.question-section) {
    height: 100dvh;
    overflow: hidden !important;
}
html:has(.question-section) body {
    height: 100% !important;
    min-height: unset !important;
    overflow: hidden !important;
}
.user-shell:has(.question-section) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.user-shell:has(.question-section) .early-release {
    flex: 0 0 auto !important;
}
.user-shell:has(.question-section) .user-footer {
    display: none !important;
}
.content-wrap:has(.question-section) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.question-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Override legacy style.css (.question-body { width: 700px })
   ------------------------------------------------------------------ */
.question-body {
    float: none !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------------
   Viewport-scaler uitschakelen voor normale vragen — in plaats daarvan
   flex-keten die de hoogte doorgeeft van .question-section tot .exam-shell.
   Voor DD2 blijft de bestaande no-scale-logica intact.
   ------------------------------------------------------------------ */
.exam-viewport-shell:not(:has(.exam-root--dd2)) {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    position: static !important;
}

.exam-viewport-shell:not(:has(.exam-root--dd2)) .exam-viewport-scale {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: initial !important;
    will-change: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

#exam-question-root.exam-root:not(.exam-root--dd2) {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
}

/* ------------------------------------------------------------------
   Sectie-wrapper — centreert de card horizontaal, vult resterende hoogte
   ------------------------------------------------------------------ */
.question-section {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 16px 10px !important;
    background: #f0f2f8 !important;
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   De card — alleen voor normale vragen
   Vult de volledige hoogte van .question-section via flex: 1 1 auto,
   zodat navigatieknoppen altijd zichtbaar blijven.
   ------------------------------------------------------------------ */
.question-body:not(:has(.exam-root--dd2)) {
    max-width: 720px;
    width: 100%;
    background: #ffffff;
    border-radius: 24px;
    box-shadow:
        0 4px 40px rgba(88, 80, 218, 0.10),
        0 1px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* DD2: geen card-styling — laat DD2 de volledige breedte houden */
.question-body:has(.exam-root--dd2) {
    max-width: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* ------------------------------------------------------------------
   .exam-shell — flex-kolom binnen de card, vult 100% van .question-body
   Padding/gap worden hier via !important overschreven omdat de inline
   <style> in question_page.php ID-selectors gebruikt met hogere
   specificiteit (gap: 18px; padding: 28px 30px 24px).
   ------------------------------------------------------------------ */
.exam-root:not(.exam-root--dd2) .exam-shell {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
}

/* ------------------------------------------------------------------
   Header: voortgangsbalk + narrator-controls — altijd bovenaan, niet inklapbaar
   ------------------------------------------------------------------ */
.exam-root:not(.exam-root--dd2) .exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 16px;
    border-bottom: 1px solid #f0f2f8;
    gap: 16px;
    margin-bottom: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.exam-root:not(.exam-root--dd2) .exam-progress {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#exam-progress-text {
    font-size: 13px;
    font-weight: 700;
    color: #5850DA;
    min-width: 44px;
    white-space: nowrap;
}

.exam-root:not(.exam-root--dd2) .exam-progress-track {
    flex: 1 1 auto;
    height: 6px;
    background: #e8eaf6;
    border-radius: 999px;
    overflow: hidden;
    max-width: none;
    min-width: 60px;
}

.exam-root:not(.exam-root--dd2) .exam-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #5850DA, #7c74f0);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ------------------------------------------------------------------
   Media-afbeelding (vraag met losse foto, niet DD2)
   flex: 1 1 auto zodat het alle beschikbare ruimte vult.
   Antwoorden pakken hun natuurlijke hoogte (flex: 0 0 auto).
   ------------------------------------------------------------------ */
.exam-root:not(.exam-root--dd2) .exam-media {
    padding: 12px 28px;
    flex: 1 1 auto !important;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exam-root:not(.exam-root--dd2) .exam-media img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 14px;
    background: #f8f9ff;
    border: 1px solid #e8eaf6;
    box-shadow: none;
    display: block;
}

/* ------------------------------------------------------------------
   Vraaggebied: topic-badge + vraagnummer + tekst
   Dubbele selector (met + zonder ID) zodat we zowel de normale
   class-regels als de !important ID-regel in question_page.php
   overschrijven (specificity 1,3,0 > 1,2,0).
   ------------------------------------------------------------------ */
#exam-question-root.exam-root:not(.exam-root--dd2) .col-md-12.p-3,
.exam-root:not(.exam-root--dd2) .col-md-12.p-3 {
    padding: 16px 28px 8px !important;
    flex: 0 0 auto !important;
    overflow: visible;
    min-height: 0 !important;
}

.exam-topic {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5850DA;
    background: rgba(88, 80, 218, 0.08);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.exam-root:not(.exam-root--dd2) .exam-question {
    font-size: 18px;
    font-weight: 600;
    color: #1f2a44;
    line-height: 1.4;
    margin: 0;
}

/* ------------------------------------------------------------------
   Antwoordknoppen — nemen hun natuurlijke hoogte, groeien niet mee.
   De media-sectie vult de resterende ruimte.
   ------------------------------------------------------------------ */
.exam-root:not(.exam-root--dd2) .exam-answers {
    padding: 8px 28px 20px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* Bootstrap grid-rijen binnen exam-answers */
.exam-root:not(.exam-root--dd2) .exam-answers .row {
    margin: 0 -6px;
}

.exam-root:not(.exam-root--dd2) .exam-answers .row > [class*="col-"] {
    padding: 0 6px;
}

/* Elke antwoordknop */
.exam-root:not(.exam-root--dd2) .answers.answer-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #e8eaf6;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #1f2a44;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
    text-align: left;
    min-height: 52px;
    box-shadow: none;
    margin-top: 0;
}

.exam-root:not(.exam-root--dd2) .answers.answer-card:hover {
    border-color: #5850DA;
    background: rgba(88, 80, 218, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(88, 80, 218, 0.12);
}

/* Geselecteerd antwoord */
.exam-root:not(.exam-root--dd2) .answers.answer-card.is-selected,
.exam-root:not(.exam-root--dd2) .answers.answer-card.answer-selected {
    border-color: #5850DA;
    background: rgba(88, 80, 218, 0.08);
    box-shadow: none;
    transform: none;
}

/* Feedback: goed antwoord */
.exam-root:not(.exam-root--dd2) .answers.answer-card.answer-success {
    border-color: #5BBEB7 !important;
    background: rgba(91, 190, 183, 0.07) !important;
}

/* Feedback: fout antwoord */
.exam-root:not(.exam-root--dd2) .answers.answer-card.answer-faile {
    border-color: #EC645E !important;
    background: rgba(236, 100, 94, 0.07) !important;
}

/* Label binnen de antwoordknop */
.exam-root:not(.exam-root--dd2) .answers.answer-card label {
    margin: 0;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    line-height: 1.3;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
    text-align: left;
    white-space: normal;
    color: inherit;
}

/* Verborgen radio-inputs */
.exam-root:not(.exam-root--dd2) .answers.answer-card input[type="radio"] {
    display: none !important;
}

/* Nummerinvoer */
.exam-root:not(.exam-root--dd2) .number-input-wrap {
    max-width: 360px;
    margin: 8px auto;
}

/* ------------------------------------------------------------------
   Navigatieknoppen — altijd onderaan, nooit ingeklapt
   ------------------------------------------------------------------ */
.exam-root:not(.exam-root--dd2) .exam-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px 20px;
    border-top: 1px solid #f0f2f8;
    gap: 12px;
    margin-top: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

/* Vorige-knop */
.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn.secondary {
    padding: 13px 28px;
    border-radius: 14px;
    border: 2px solid #e8eaf6;
    background: #fff;
    color: #6c7a92;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
    box-shadow: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn.secondary:hover {
    border-color: #5850DA;
    color: #5850DA;
    transform: none;
    box-shadow: none;
    background: #fff;
}

/* Volgende/Afronden-knop */
.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn:not(.secondary) {
    padding: 13px 32px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #5850DA, #7c74f0);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(88, 80, 218, 0.30);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    width: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn:not(.secondary):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(88, 80, 218, 0.40);
    background: linear-gradient(135deg, #5850DA, #7c74f0);
    color: #fff;
}

.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn:not(.secondary):active {
    transform: none;
    box-shadow: none;
    color: #fff;
}

.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn:visited {
    color: inherit;
}

/* Pijltje-afbeelding in de volgende-knop: position:absolute staat inline
   → zet terug naar flow zodat het netjes naast de tekst staat */
.exam-root:not(.exam-root--dd2) .exam-nav .exam-btn img {
    position: static !important;
    width: 14px !important;
    top: auto !important;
    right: auto !important;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Vragen zonder afbeelding (.exam-root--no-media) — inhoud op
   dezelfde verticale positie als bij fotovragen.
   .exam-media is verborgen; margin-top:auto op het vraag-/topic-blok
   absorbeert alle vrije ruimte erboven — question + antwoorden + nav
   landen daardoor op dezelfde plek als wanneer de afbeelding de ruimte
   had gevuld. Scoped op :not(.exam-root--dd2).
   ------------------------------------------------------------------ */
#exam-question-root.exam-root.exam-root--no-media:not(.exam-root--dd2) .col-md-12.p-3 {
    margin-top: auto !important;
}

/* ------------------------------------------------------------------
   "Vraag delen met instructeur" link — altijd onderaan zichtbaar
   ------------------------------------------------------------------ */
.exam-root:not(.exam-root--dd2) .exam-share-inside {
    text-align: center;
    padding: 0 0 12px;
    border-top: none;
    margin-top: 0;
    flex: 0 0 auto;
}

/* Hogere specificiteit dan inline style in question_page.php
   (#exam-question-root.exam-root = 1,2,0 — hieronder is 1,3,0) */
#exam-question-root.exam-root:not(.exam-root--dd2) .exam-share-inside {
    padding: 0 0 8px !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    border-top: none !important;
    text-align: center !important;
}

.exam-root:not(.exam-root--dd2) .exam-share-inside .exam-share-btn {
    font-size: 12px;
    color: #9aa5b8;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
    padding: 4px 8px;
    border-radius: 6px;
}

.exam-root:not(.exam-root--dd2) .exam-share-inside .exam-share-btn:hover {
    color: #5850DA;
    text-decoration-color: #5850DA;
}

/* ------------------------------------------------------------------
   Fade-in animatie bij vraagwisseling
   ------------------------------------------------------------------ */
@keyframes examCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exam-shell.exam-enter {
    animation: examCardIn 0.25s ease forwards;
}

/* ------------------------------------------------------------------
   Responsive — tablet (768px – 991px)
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .exam-root:not(.exam-root--dd2) .exam-header {
        padding: 14px 20px 12px;
    }

    .exam-root:not(.exam-root--dd2) .exam-media {
        padding: 12px 20px 0;
    }

    .exam-root:not(.exam-root--dd2) .col-md-12.p-3 {
        padding: 14px 20px 8px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-answers {
        padding: 6px 20px 16px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-nav {
        padding: 14px 20px 18px;
    }
}

/* ------------------------------------------------------------------
   Responsive — mobiel (≤ 600px)
   ------------------------------------------------------------------ */
@media (max-width: 600px) {

    .question-body:not(:has(.exam-root--dd2)) {
        border-radius: 16px;
    }

    .exam-root:not(.exam-root--dd2) .exam-header {
        padding: 14px 16px 12px;
    }

    .exam-root:not(.exam-root--dd2) .exam-media {
        padding: 12px 16px 0;
    }

    /* Fotohoogte op telefoon wordt door __fitExamMobile (question_page.php) bepaald:
       eerst de helft van het scherm, kleiner alleen als de vraag anders niet past. */

    .exam-root:not(.exam-root--dd2) .col-md-12.p-3 {
        padding: 12px 16px 6px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-question {
        font-size: 16px;
    }

    .exam-root:not(.exam-root--dd2) .exam-answers {
        padding: 6px 16px 12px !important;
        gap: 8px;
    }

    .exam-root:not(.exam-root--dd2) .answers.answer-card {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 48px;
    }

    .exam-root:not(.exam-root--dd2) .exam-nav {
        padding: 12px 16px 16px;
        gap: 8px;
    }

    .exam-root:not(.exam-root--dd2) .exam-nav .exam-btn.secondary,
    .exam-root:not(.exam-root--dd2) .exam-nav .exam-btn:not(.secondary) {
        padding: 11px 20px;
        font-size: 14px;
    }
}

/* ------------------------------------------------------------------
   Responsive — tablet landscape en kleine hoogte (bijv. 768px hoog)
   Verkleint afbeelding + paddings zodat nav-knoppen altijd zichtbaar blijven.
   Geldt boven 991px breedte (desktop-breakpoint) maar beperkte hoogte.
   ------------------------------------------------------------------ */
@media (max-height: 760px) and (min-width: 992px) {
    .question-section {
        padding: 8px 16px 8px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-header {
        padding: 10px 24px 8px;
    }

    .exam-root:not(.exam-root--dd2) .exam-media {
        padding: 8px 24px;
    }

    .exam-root:not(.exam-root--dd2) .col-md-12.p-3 {
        padding: 10px 24px 6px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-nav {
        padding: 10px 24px 14px;
    }
}

/* ------------------------------------------------------------------
   Tablet portrait/landscape (<991px breedte, <680px hoogte)
   Extra compact voor landscape iPhone of kleine tablet landscape.
   ------------------------------------------------------------------ */
@media (max-width: 991px) and (max-height: 680px) and (orientation: landscape) {
    .question-section {
        padding: 8px 10px 6px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-header {
        padding: 8px 16px 6px;
    }

    .exam-root:not(.exam-root--dd2) .exam-media img {
        max-height: min(110px, 16vh) !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-media {
        padding: 6px 16px 0;
    }

    .exam-root:not(.exam-root--dd2) .col-md-12.p-3 {
        padding: 8px 16px 4px !important;
    }

    .exam-root:not(.exam-root--dd2) .exam-question {
        font-size: 15px;
    }

    .exam-root:not(.exam-root--dd2) .exam-answers {
        padding: 4px 16px 8px !important;
        gap: 6px;
    }

    .exam-root:not(.exam-root--dd2) .answers.answer-card {
        padding: 10px 14px;
        min-height: 42px;
        font-size: 13px;
    }

    .exam-root:not(.exam-root--dd2) .exam-nav {
        padding: 8px 16px 12px;
    }
}

/* ------------------------------------------------------------------
   DD2 — tablet landscape en korte schermen
   ------------------------------------------------------------------ */
@media (max-height: 760px) {
    #exam-question-root.exam-root.exam-root--dd2 .dd2-image {
        max-height: min(46vh, 380px);
    }
}

@media (max-height: 600px) {
    #exam-question-root.exam-root.exam-root--dd2 .dd2-image {
        max-height: min(40vh, 280px);
    }
}

/* KRITIEKE FIX: root moet groeien zodat de flex-keten werkt */
#exam-question-root.exam-root--dd2 {
    flex: 0 1 auto !important;
    min-height: 0 !important;
}

/* dd2 div zelf ook */
#exam-question-root.exam-root--dd2 .dd2 {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#exam-question-root.exam-root--dd2 .dd2-stage {
    flex: 0 1 auto !important;
    height: auto !important;
}

/* imageWrap blijft inline-block zodat het krimpt naar de afbeeldingsbreedte.
   De dd2-overlay (position:absolute; inset:0) valt dan precies over de <img>,
   waardoor visuele zone-indicatoren en de JS zone-detectie op dezelfde pixels
   liggen. display:block zou de wrap breder maken dan de afbeelding en de
   overlay-coördinaten doen afwijken van imgElement.getBoundingClientRect(). */
#exam-question-root.exam-root--dd2 .dd2-imageWrap {
    display: inline-block !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
}