@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.sldp-scan-wrapper {
    max-width: 780px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82em;
    color: #1a1a1a;
    position: relative;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sldp-scan-header {
    text-align: center;
    padding: 20px 0 16px;
    border-bottom: 2px solid #e8d5fa;
    margin-bottom: 20px;
}
.sldp-scan-logo    { font-size: 0.78em; color: #a99cec; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.sldp-scan-titel   { font-size: 1.4em; font-weight: 700; color: #6905b0; margin: 0 0 4px; }
.sldp-scan-subtitel { font-size: 0.88em; color: #888; margin: 0; }

/* ── Introductie ──────────────────────────────────────────────────────────── */
.sldp-intro-blok { padding: 0 4px; }
.sldp-intro-h2   { font-size: 0.95em; color: #6905b0; margin: 0 0 8px; }
.sldp-intro-h3   { font-size: 0.88em; color: #6905b0; margin: 16px 0 8px; }
.sldp-intro-tekst { font-size: 0.85em; line-height: 1.7; color: #444; margin: 0 0 8px; }

/* ── Tijdstabel ───────────────────────────────────────────────────────────── */
.sldp-tijd-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
    margin-bottom: 4px;
}
.sldp-tijd-tabel th {
    background: #f5eeff;
    color: #6905b0;
    padding: 6px 10px;
    text-align: left;
    font-weight: 700;
}
.sldp-tijd-tabel td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.sldp-tijd-tabel tr:nth-child(even) td { background: #fafafa; }

/* ── Scorelegenda ─────────────────────────────────────────────────────────── */
.sldp-score-legenda--intro {
    background: #f5eeff;
    border: 1px solid #a99cec;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 4px;
}
.sldp-legenda-rij {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}
.sldp-legenda-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #6905b0;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.82em;
    flex-shrink: 0;
}
.sldp-legenda-tekst { font-size: 0.82em; color: #444; }

/* Compact legenda boven dimensie */
.sldp-score-legenda--compact {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: #f5eeff;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
}
.sldp-score-legenda--compact .sldp-legenda-item {
    font-size: 0.75em;
    color: #555;
}
.sldp-score-legenda--compact .sldp-legenda-item strong {
    color: #6905b0;
    margin-right: 2px;
}

/* ── Voortgangsbalk ───────────────────────────────────────────────────────── */
.sldp-voortgang-balk {
    height: 6px;
    background: #e8d5fa;
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}
.sldp-voortgang-vulling {
    height: 100%;
    background: #6905b0;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.sldp-voortgang-tekst {
    font-size: 0.75em;
    color: #a99cec;
    text-align: right;
    margin-bottom: 14px;
}

/* ── Dimensie header ──────────────────────────────────────────────────────── */
.sldp-dimensie-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sldp-dimensie-emoji { font-size: 1.4em; }
.sldp-dimensie-titel {
    font-size: 1em;
    font-weight: 700;
    color: #6905b0;
    margin: 0;
}

/* ── Vraagkaart compact ───────────────────────────────────────────────────── */
.sldp-vraag--compact {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.sldp-vraag-topic {
    font-size: 0.78em;
    font-weight: 700;
    color: #6905b0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.sldp-vraag-statement {
    font-size: 0.85em;
    font-style: italic;
    color: #1a1a1a;
    border-left: 3px solid #951af2;
    padding-left: 8px;
    margin: 0 0 10px;
    line-height: 1.5;
}

/* ── Score knoppen ────────────────────────────────────────────────────────── */
.sldp-score-knoppen {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.sldp-score-label {
    font-size: 0.75em;
    font-weight: 700;
    color: #6905b0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}
.sldp-score-knop {
    width: 34px;
    height: 34px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.15s;
    color: #666;
}
.sldp-score-knop:hover   { border-color: #951af2; color: #951af2; }
.sldp-score-actief       { background: #6905b0 !important; border-color: #6905b0 !important; color: #fff !important; }

/* ── Toelichtingen ────────────────────────────────────────────────────────── */
.sldp-toelichting-header {
    font-size: 0.75em;
    font-weight: 700;
    color: #6905b0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 12px 0 8px;
    padding-top: 10px;
    border-top: 1px solid #f0e6fa;
}
.sldp-toelichting-blok    { margin-bottom: 8px; }
.sldp-toelichting-label   { display: block; font-size: 0.78em; font-weight: 600; color: #555; margin-bottom: 4px; line-height: 1.4; }
.sldp-tekstvak--compact {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82em;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    color: #1a1a1a;
    transition: border-color 0.2s;
}
.sldp-tekstvak--compact:focus { outline: none; border-color: #951af2; box-shadow: 0 0 0 2px rgba(149,26,242,0.1); }

/* ── Navigatieknoppen ─────────────────────────────────────────────────────── */
.sldp-scan-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 8px;
    margin-top: 8px;
    border-top: 1px solid #eee;
}
.sldp-knop {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.sldp-knop--paars  { background: #6905b0; color: #fff; }
.sldp-knop--paars:hover { background: #951af2; }
.sldp-knop--grijs  { background: #f0f0f0; color: #aaa; border: 1px solid #ddd; }
.sldp-knop--uitgeschakeld { opacity: 0.4; cursor: not-allowed; }
.sldp-knop--finish { background: #5cb85c; }
.sldp-knop--finish:hover { background: #4cae4c; }
.sldp-knop--paars-omlijnd { background: #fff; color: #6905b0; border: 2px solid #6905b0; }
.sldp-knop--paars-omlijnd:hover { background: #f5eeff; }

/* ── Afronden scherm ──────────────────────────────────────────────────────── */
.sldp-afronden-blok {
    text-align: center;
    padding: 40px 20px;
}
.sldp-afronden-icoon  { font-size: 3em; margin-bottom: 16px; }
.sldp-afronden-titel  { font-size: 1.1em; font-weight: 700; color: #6905b0; margin: 0 0 12px; }
.sldp-afronden-tekst  { font-size: 0.85em; color: #555; line-height: 1.7; max-width: 500px; margin: 0 auto 10px; }

/* ── Laad overlay ─────────────────────────────────────────────────────────── */
.sldp-laden-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 8px;
}
.sldp-laden-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid #e8d5fa;
    border-top-color: #6905b0;
    border-radius: 50%;
    animation: sldp-spin 0.8s linear infinite;
}
@keyframes sldp-spin { to { transform: rotate(360deg); } }

/* ── Intro tip ────────────────────────────────────────────────────────────── */
.sldp-intro-tip {
    background: #f5eeff;
    border-left: 3px solid #6905b0;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin-top: 16px;
    font-style: italic;
}