/* ============================================================================
   AILoopbaancoaching.nl — Testen CSS
   ============================================================================
   Bestand:  app/static/css/testen.css
   Doel:     Vraagcomponenten, voortgangsbalk, rapport-weergave, uitslag.
   Geladen via {% block extra_css %} op testpagina's.
   ============================================================================ */


/* ============================================================================
   CONSISTENTIE: herbruikbare spacing
   ============================================================================ */

.uitslag-mb       { margin-bottom: 2rem; }
.uitslag-terug    { display: inline-block; font-size: 0.875rem; margin-bottom: 1.5rem; color: var(--kleur-link); }
.uitslag-terug:hover { text-decoration: underline; }


/* ============================================================================
   VOORTGANGSBALK (test-flow)
   ============================================================================ */

.voortgang-container { height: 4px; background: var(--border-standaard); border-radius: 9999px; overflow: hidden; }
.voortgang-balk      { height: 100%; background: var(--kleur-primair); border-radius: 9999px; transition: width 0.3s ease; }


/* ============================================================================
   FASE-LABEL
   ============================================================================ */

.fase-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--tekst-meta);
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-standaard);
}


/* ============================================================================
   KEUZE-OPTIES (radio + checkbox)
   ============================================================================ */

.keuze-optie {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border: 1px solid var(--border-standaard);
    border-radius: var(--radius-knop); cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.keuze-optie:hover,
.keuze-optie:has(input:checked) {
    border-color: var(--kleur-link); background: var(--kleur-link-licht);
}
.keuze-label { font-size: 0.875rem; color: var(--tekst-primair); }


/* ============================================================================
   OPEN ANTWOORD (textarea)
   ============================================================================ */

.open-antwoord {
    width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-standaard);
    border-radius: var(--radius-knop); font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem; line-height: 1.6; color: var(--tekst-primair); resize: vertical;
    transition: border-color 0.15s;
}
.open-antwoord:focus { outline: none; border-color: var(--kleur-link); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.open-antwoord::placeholder { color: var(--tekst-placeholder); }
.open-vraag-disclaimer { font-size: 0.6875rem; color: var(--tekst-meta); margin-top: 0.375rem; font-style: italic; }


/* ============================================================================
   FORCED CHOICE (twee kaarten)
   ============================================================================ */

.forced-choice-container { display: flex; align-items: center; gap: 1rem; }
.forced-choice-optie     { flex: 1; cursor: pointer; }
.forced-choice-kaart {
    display: block; padding: 1.25rem; border: 2px solid var(--border-standaard);
    border-radius: var(--radius-card); text-align: center;
    font-size: 0.875rem; font-weight: 500; color: var(--tekst-primair);
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.forced-choice-kaart:hover { border-color: var(--kleur-link); transform: translateY(-2px); }
.forced-choice-optie:has(input:checked) .forced-choice-kaart { border-color: var(--kleur-link); background: var(--kleur-link-licht); }
.forced-choice-of { font-size: 0.75rem; font-weight: 600; color: var(--tekst-meta); text-transform: uppercase; }

@media (max-width: 639px) {
    .forced-choice-container { flex-direction: column; }
    .forced-choice-of { margin: -0.25rem 0; }
}


/* ============================================================================
   SLIDER
   ============================================================================ */

.slider-container { padding: 0.5rem 0; }
.slider-input {
    width: 100%; height: 6px; border-radius: 9999px; background: var(--border-standaard);
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--kleur-primair); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer;
}
.slider-input::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--kleur-primair); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer;
}


/* ============================================================================
   RANKING (drag & drop)
   ============================================================================ */

.ranking-lijst { display: flex; flex-direction: column; gap: 0.5rem; }
.ranking-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-knop); cursor: grab; font-size: 0.875rem;
    color: var(--tekst-primair); transition: box-shadow 0.15s, border-color 0.15s; user-select: none;
}
.ranking-item:active   { cursor: grabbing; }
.ranking-item.dragging { opacity: 0.5; border-color: var(--kleur-link); box-shadow: var(--shadow-card-hover); }
.ranking-handle        { color: var(--tekst-meta); font-size: 1rem; }


/* (rapport-hero verwijderd — vervangen door profiel-kaart) */


/* ============================================================================
   PROFIEL-KAART
   ============================================================================ */

.profiel-kaart {
    background: linear-gradient(135deg, #EFF6FF 0%, white 50%, #F5F3FF 100%);
    border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 2.5rem;
}

@media (max-width: 639px) { .profiel-kaart { padding: 1.5rem; } }

.profiel-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.25rem 0.75rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem;
    background: rgba(37,99,235,0.08); color: #1e40af; border: 1px solid rgba(37,99,235,0.18);
}

.profiel-test-titel { font-size: 0.8125rem; color: var(--tekst-meta); margin-bottom: 0.5rem; }

.profiel-naam {
    font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 800;
    margin: 0 0 0.75rem; line-height: 1.2;
    background: linear-gradient(135deg, #1E40AF, #7C3AED);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profiel-kernzin {
    font-size: 1.0625rem; line-height: 1.6; color: var(--tekst-secundair);
    margin-bottom: 1rem; max-width: 48rem;
}

.profiel-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: var(--tekst-meta); }


/* ============================================================================
   TACHOMETERS — 4 naast elkaar
   ============================================================================ */

.tacho-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 767px) { .tacho-grid { grid-template-columns: repeat(2, 1fr); } }

.tacho-card {
    background: var(--achtergrond-card);
    border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem 1rem 1rem;
    text-align: center;
}

.tacho-canvas {
    display: block;
    margin: 0 auto;
}

.tacho-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tekst-primair);
    margin: 0.5rem 0 0.25rem;
}

.tacho-uitersten {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--tekst-meta);
    padding: 0 0.5rem;
}

.tacho-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--tekst-meta);
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}


/* ============================================================================
   UITSLAG SECTIES — genummerd met kleur-headers
   ============================================================================ */

.uitslag-sectie {
    background: var(--achtergrond-card); border-radius: var(--radius-card);
    border: 1px solid var(--border-standaard); box-shadow: var(--shadow-card);
    overflow: hidden;
}

.uitslag-sectie-header {
    display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem;
}

.uitslag-sectie-nr {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    font-family: 'Poppins', sans-serif; font-size: 0.875rem;
    font-weight: 700; flex-shrink: 0; color: white;
}

.uitslag-sectie-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.125rem;
    font-weight: 700; margin: 0;
}

.uitslag-sectie-badge {
    font-size: 0.75rem; font-weight: 600;
    padding: 0.125rem 0.625rem; border-radius: 9999px; margin-right: 0.25rem;
}

.uitslag-sectie-body { padding: 1.5rem 2rem; }

@media (max-width: 639px) {
    .uitslag-sectie-body { padding: 1.25rem; }
}

/* Kleurvarianten — header achtergrond + border + nr + titel */
.uitslag-header-blauw  { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-bottom: 2px solid #93C5FD; }
.nr-blauw              { background: #2563EB; }
.titel-blauw           { color: #1E40AF; }

.uitslag-header-groen  { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); border-bottom: 2px solid #86EFAC; }
.nr-groen              { background: #16A34A; }
.titel-groen           { color: #166534; }

.uitslag-header-paars  { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); border-bottom: 2px solid #C4B5FD; }
.nr-paars              { background: #7C3AED; }
.titel-paars           { color: #5B21B6; }

.uitslag-header-oranje { background: linear-gradient(135deg, #FFF7ED, #FFEDD5); border-bottom: 2px solid #FDBA74; }
.nr-oranje             { background: #EA580C; }
.titel-oranje          { color: #9A3412; }

.uitslag-header-goud   { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border-bottom: 2px solid #FCD34D; }
.titel-goud            { color: #92400E; }
.uitslag-header-goud .uitslag-sectie-badge { background: linear-gradient(135deg, #F59E0B, #D97706); color: white; }

/* Actieve sectie (tips) */
.uitslag-sectie-actief { border: 2px solid #FDBA74; box-shadow: 0 4px 12px rgba(234,88,12,0.08); }

/* Premium markering */
.uitslag-sectie-premium { border-left: 3px solid #F59E0B; }


/* ============================================================================
   RAPPORT — AI-tekst content
   ============================================================================ */

.rapport-content          { font-size: 0.9375rem; color: var(--tekst-secundair); line-height: 1.8; }
.rapport-content h1,
.rapport-content h2,
.rapport-content h3       { font-family: 'Poppins', sans-serif; color: var(--tekst-primair); margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.3; }
.rapport-content h1       { font-size: 1.25rem; }
.rapport-content h2       { font-size: 1.125rem; padding-top: 1.5rem; border-top: 1px solid var(--border-standaard); }
.rapport-content h3       { font-size: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border-standaard); }
.rapport-content h1:first-child,
.rapport-content h2:first-child,
.rapport-content h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rapport-content p        { margin-bottom: 1rem; }
.rapport-content p > strong:only-child {
    display: block; font-family: 'Poppins', sans-serif; font-size: 1.125rem;
    color: var(--tekst-primair); margin-top: 2.5rem; margin-bottom: 0.75rem;
    padding-top: 1.5rem; border-top: 1px solid var(--border-standaard); line-height: 1.3;
}
.rapport-content p:first-child > strong:only-child { margin-top: 0; padding-top: 0; border-top: none; }
.rapport-content strong   { color: var(--tekst-primair); font-weight: 600; }
.rapport-content ul,
.rapport-content ol       { margin-bottom: 1rem; padding-left: 1.5rem; }
.rapport-content li       { margin-bottom: 0.375rem; }
.rapport-content ul li    { list-style-type: disc; }
.rapport-content ol li    { list-style-type: decimal; }
.rapport-content a        { color: var(--kleur-link); text-decoration: underline; }
.rapport-content blockquote { border-left: 3px solid var(--kleur-link); padding-left: 1rem; margin: 1rem 0; color: var(--tekst-meta); font-style: italic; }
.rapport-content hr       { border: none; border-top: 1px solid var(--border-standaard); margin: 1.5rem 0; }


/* ============================================================================
   SECTIE BODY — tekstelementen (consistent)
   ============================================================================ */

.uitslag-body-tekst   { font-size: 0.875rem; line-height: 1.7; color: var(--tekst-secundair); margin-bottom: 1rem; }
.uitslag-body-italic  { font-size: 0.875rem; font-style: italic; color: var(--tekst-meta); margin-top: 1rem; }


/* ============================================================================
   HERKENNING-LIJST (In deze situatie)
   ============================================================================ */

.uitslag-herkenning-lijst { display: flex; flex-direction: column; gap: 0.625rem; }
.uitslag-herkenning-item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem 1rem; background: #F0FDF4; border: 1px solid #BBF7D0;
    border-radius: var(--radius-knop); font-size: 0.875rem;
    color: var(--tekst-secundair); line-height: 1.5;
}
.uitslag-herkenning-check { color: #16A34A; font-weight: 700; flex-shrink: 0; margin-top: 0.125rem; }


/* ============================================================================
   RICHTINGEN (Wat mensen doen)
   ============================================================================ */

.uitslag-richtingen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

@media (max-width: 639px) { .uitslag-richtingen-grid { grid-template-columns: 1fr; } }

.uitslag-richting-kaart {
    display: flex; gap: 0.875rem; padding: 1rem 1.25rem;
    background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: var(--radius-knop);
}
.uitslag-richting-nr {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: #7C3AED;
    color: white; font-family: 'Poppins', sans-serif; font-size: 0.75rem;
    font-weight: 700; flex-shrink: 0;
}
.uitslag-richting-titel { font-size: 0.875rem; font-weight: 600; color: var(--tekst-primair); margin-bottom: 0.25rem; }
.uitslag-richting-tekst { font-size: 0.8125rem; line-height: 1.5; color: var(--tekst-secundair); }


/* ============================================================================
   TIPS (3 kaarten)
   ============================================================================ */

.uitslag-tips-grid { display: flex; flex-direction: column; gap: 0.75rem; }

.uitslag-tip-kaart {
    padding: 1rem 1.25rem; background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
    border: 1px solid #FDBA74; border-radius: var(--radius-knop);
    transition: transform 0.15s, box-shadow 0.15s;
}
.uitslag-tip-kaart:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(234,88,12,0.1); }
.uitslag-tip-top   { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.uitslag-tip-icon  { font-size: 1.25rem; }
.uitslag-tip-label {
    font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: #9A3412;
}
.uitslag-tip-tekst { font-size: 0.875rem; line-height: 1.6; color: var(--tekst-secundair); margin: 0; }


/* ============================================================================
   HULP-KAARTEN (professionele hulp)
   ============================================================================ */

.uitslag-hulp-grid      { display: flex; flex-direction: column; gap: 0.75rem; }
.uitslag-hulp-kaart     { padding: 1rem 1.25rem; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-knop); }
.uitslag-hulp-situatie  { font-size: 0.75rem; font-weight: 600; color: var(--tekst-meta); margin-bottom: 0.25rem; }
.uitslag-hulp-actie     { font-size: 0.875rem; font-weight: 700; color: var(--kleur-link); }
.uitslag-hulp-toelichting { font-size: 0.8125rem; line-height: 1.5; color: var(--tekst-secundair); margin-top: 0.25rem; }


/* ============================================================================
   MINI-CARDS (reflectievragen, checklist)
   ============================================================================ */

.uitslag-twee-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

@media (max-width: 767px) { .uitslag-twee-kolommen { grid-template-columns: 1fr; } }

.uitslag-mini-card {
    background: var(--achtergrond-card); border-radius: var(--radius-card);
    border: 1px solid var(--border-standaard); box-shadow: var(--shadow-card); padding: 1.5rem;
}
.uitslag-mini-kop {
    font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.uitslag-mini-lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.uitslag-mini-lijst li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--tekst-secundair); }
.uitslag-mini-nr { font-weight: 700; color: var(--kleur-primair); flex-shrink: 0; }

.uitslag-checklist { display: flex; flex-direction: column; gap: 0.75rem; }
.uitslag-check-item {
    display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem;
    line-height: 1.6; color: var(--tekst-secundair); cursor: pointer;
}
.uitslag-check-item input { margin-top: 0.25rem; accent-color: var(--kleur-primair); }


/* ============================================================================
   KADER-DISCLAIMER (bovenaan rapport)
   ============================================================================ */

.kader-disclaimer {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #EFF6FF, #F0F9FF);
    border: 1px solid #BFDBFE;
    border-left: 4px solid #2563EB;
    border-radius: var(--radius-knop);
    font-size: 0.8125rem; line-height: 1.6; color: #1E40AF;
}

.kader-disclaimer-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 0.125rem; }


/* ============================================================================
   INLINE DISCLAIMER (in secties)
   ============================================================================ */

.uitslag-inline-disclaimer {
    font-size: 0.75rem; font-style: italic; color: var(--tekst-meta);
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px solid var(--border-standaard);
}


/* ============================================================================
   AFSLUITING-BLOK (onder sectie 4)
   ============================================================================ */

.afsluiting-blok {
    background: var(--achtergrond-card);
    border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 2rem;
    text-align: center;
}

.afsluiting-tekst {
    font-size: 0.9375rem; line-height: 1.6; color: var(--tekst-secundair);
    margin-bottom: 0.75rem;
}

.afsluiting-professioneel {
    font-size: 0.875rem; line-height: 1.6; color: var(--kleur-link);
    font-weight: 600; margin-bottom: 0.75rem;
}

.afsluiting-verantwoordelijkheid {
    font-size: 0.75rem; line-height: 1.5; color: var(--tekst-meta);
    font-style: italic;
}


/* ============================================================================
   BETEKENIS AI TEKST (geëxtraheerd uit rapport)
   ============================================================================ */

.betekenis-ai-tekst {
    font-size: 0.9375rem; line-height: 1.8; color: var(--tekst-secundair);
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    background: #F0F9FF; border: 1px solid #BAE6FD;
    border-radius: var(--radius-knop); border-left: 3px solid #2563EB;
}

.betekenis-ai-tekst p { margin-bottom: 0.5rem; }
.betekenis-ai-tekst p:last-child { margin-bottom: 0; }


/* ============================================================================
   INZICHT-KAARTEN (getitelde observaties uit AI-rapport)
   ============================================================================ */

.inzicht-kaarten-grid {
    display: flex; flex-direction: column; gap: 1rem;
}

.inzicht-kaart {
    padding: 1.25rem 1.5rem;
    background: white;
    border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card);
    border-left: 4px solid var(--kleur-link);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}

.inzicht-kaart:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.inzicht-kaart:nth-child(2) { border-left-color: #7C3AED; }
.inzicht-kaart:nth-child(3) { border-left-color: #EA580C; }
.inzicht-kaart:nth-child(4) { border-left-color: #16A34A; }
.inzicht-kaart:nth-child(5) { border-left-color: #0891B2; }

.inzicht-kaart-top {
    display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem;
}

.inzicht-kaart-icon { font-size: 1.25rem; }

.inzicht-kaart-titel {
    font-family: 'Poppins', sans-serif; font-size: 0.9375rem;
    font-weight: 700; color: var(--tekst-primair); margin: 0;
}

.inzicht-kaart-tekst {
    font-size: 0.875rem; line-height: 1.7; color: var(--tekst-secundair); margin: 0;
}


/* ============================================================================
   HERKENNING-BLOK (normalisatie, "je bent niet alleen")
   ============================================================================ */

.herkenning-blok {
    background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
    border: 1px solid #FDE68A;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.herkenning-inner {
    display: flex; gap: 1rem; padding: 1.5rem 2rem;
}

.herkenning-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.25rem; }

#herkenning-content { font-size: 0.9375rem; line-height: 1.8; color: var(--tekst-secundair); }
#herkenning-content p { margin-bottom: 0.5rem; }
#herkenning-content p:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
    .herkenning-inner { flex-direction: column; gap: 0.5rem; padding: 1.25rem; }
}


/* ============================================================================
   ANTWOORDEN DROPDOWN (in sectie 1)
   ============================================================================ */

.antwoorden-dropdown {
    margin-top: 1.5rem;
    border: 1px solid var(--border-standaard);
    border-radius: var(--radius-knop);
    overflow: hidden;
}

.antwoorden-summary {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--achtergrond-pagina);
    font-size: 0.8125rem; font-weight: 600; color: var(--tekst-secundair);
    cursor: pointer; user-select: none;
    list-style: none;
}

.antwoorden-summary::-webkit-details-marker { display: none; }

.antwoorden-summary-icon { font-size: 1rem; }

.antwoorden-chevron {
    margin-left: auto;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--tekst-meta);
    transition: transform 0.2s;
}

details[open] .antwoorden-chevron { transform: rotate(180deg); }

.antwoorden-lijst { padding: 0.5rem 1.25rem 1.25rem; }

.antwoord-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-standaard);
}

.antwoord-item:last-child { border-bottom: none; }

.antwoord-vraag {
    font-size: 0.8125rem; font-weight: 600; color: var(--tekst-primair);
    margin-bottom: 0.25rem;
}

.antwoord-waarde {
    font-size: 0.8125rem; color: var(--tekst-secundair); line-height: 1.5;
}

.antwoord-tag {
    display: inline-block; padding: 0.125rem 0.5rem; margin: 0.125rem 0.25rem 0.125rem 0;
    background: var(--kleur-link-licht); border: 1px solid rgba(37,99,235,0.15);
    border-radius: 9999px; font-size: 0.75rem; color: var(--kleur-link);
}

.antwoord-rank { font-weight: 700; color: var(--kleur-primair); }


/* ============================================================================
   UPGRADE + SESSIE CTA's
   ============================================================================ */

.uitslag-upgrade {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border: 2px solid #FCD34D;
    border-radius: var(--radius-card); padding: 2.5rem; text-align: center;
}
.uitslag-sessie {
    background: linear-gradient(135deg, #FFF7ED, #FFEDD5); border: 2px solid #FDBA74;
    border-radius: var(--radius-card); padding: 2.5rem; text-align: center;
}
.uitslag-upgrade-icon  { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.uitslag-upgrade-titel { font-family: 'Poppins', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--tekst-primair); margin-bottom: 0.5rem; }
.uitslag-upgrade-tekst { font-size: 0.875rem; line-height: 1.6; color: var(--tekst-secundair); margin-bottom: 1.25rem; }
.uitslag-upgrade-knop  { display: inline-block; color: white; padding: 0.75rem 1.5rem; border-radius: var(--radius-knop); font-size: 0.875rem; font-weight: 600; }


/* ============================================================================
   WAT NU — vervolgacties
   ============================================================================ */

.uitslag-wat-nu-kop {
    font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 1rem;
}

.uitslag-wat-nu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

@media (max-width: 767px) { .uitslag-wat-nu-grid { grid-template-columns: 1fr; } }

.rapport-vervolg-kaart {
    display: block; background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); padding: 1.5rem; text-align: center;
    text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.rapport-vervolg-kaart:hover { border-color: var(--kleur-link); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.rapport-vervolg-icon  { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.rapport-vervolg-titel { font-size: 0.875rem; font-weight: 600; color: var(--tekst-primair); margin-bottom: 0.25rem; }
.rapport-vervolg-sub   { font-size: 0.75rem; color: var(--tekst-meta); }


/* ============================================================================
   FOOTER NOTE
   ============================================================================ */

.uitslag-footer-note { text-align: center; font-size: 0.75rem; color: var(--tekst-meta); margin-bottom: 1rem; }

/* ── Print knop ── */
.print-knop {
    background: none; border: 1px solid var(--border-standaard);
    border-radius: var(--radius-knop); padding: 0.375rem 0.75rem;
    font-size: 0.75rem; color: var(--tekst-meta); cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.print-knop:hover { border-color: var(--kleur-link); color: var(--kleur-link); }


/* ============================================================================
   PRINT STYLING
   ============================================================================ */

@media print {
    /* Verberg navigatie, footer, knoppen, CTAs */
    nav, footer, .print-knop, .uitslag-terug, .uitslag-upgrade,
    .uitslag-sessie, .uitslag-wat-nu-kop, .uitslag-wat-nu-grid,
    .uitslag-footer-note, .rapport-vervolg-kaart, .antwoorden-dropdown,
    .knop-primair, .knop-secundair, .flash-succes, .flash-fout,
    .flash-waarschuwing, .flash-info { display: none !important; }

    /* Achtergrond wit, geen schaduwen */
    body { background: white !important; }
    .profiel-kaart, .uitslag-sectie, .tacho-card, .kader-disclaimer,
    .afsluiting-blok, .herkenning-blok, .inzicht-kaart, .uitslag-tip-kaart {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }

    /* Maximale breedte opheffen */
    .max-w-6xl, .max-w-7xl { max-width: 100% !important; }

    /* Tachometers: vaste grootte */
    .tacho-grid { grid-template-columns: repeat(4, 1fr) !important; }

    /* Profiel-naam: gradient werkt niet in print */
    .profiel-naam {
        background: none !important;
        -webkit-text-fill-color: #1E40AF !important;
        color: #1E40AF !important;
    }

    /* Links niet tonen als URL */
    a { text-decoration: none !important; color: inherit !important; }

    /* Pagina-informatie onderaan */
    @page {
        margin: 1.5cm;
        @bottom-center { content: "AILoopbaancoaching.nl"; }
    }
}