/* ============================================================
   SimplyComplAI GAP Analysis — Frontend Styles
   Clean, professional, no "AI look"
   ============================================================ */
:root {
    --scai-blue: #013F63;
    --scai-orange: #FFAA33;
    --scai-accent: #e7992d;
    --scai-green: #2E7D32;
    --scai-red: #C62828;
    --scai-gray: #8896a7;
    --scai-light: #f7f8fa;
    --scai-white: #ffffff;
    --scai-text: #2c3e50;
    --scai-text-light: #5a6b7d;
    --scai-border: #e8ecf1;
    --scai-radius: 10px;
    --scai-radius-lg: 16px;
    --scai-shadow: 0 1px 3px rgba(0,0,0,.05);
    --scai-shadow-lg: 0 4px 20px rgba(0,0,0,.07);
}

/* Verberg de WordPress pagina-titel als de survey actief is */
.page:has(.scai-survey-container) .entry-header,
.page:has(.scai-survey-container) .entry-title {
    display: none;
}

.scai-survey-container {
    max-width: 760px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--scai-text);
    position: relative;
    line-height: 1.6;
}

/* ── Progress ────────────────────────────────── */
.scai-progress-wrap {
    margin-bottom: 20px;
}
.scai-progress {
    height: 4px;
    background: var(--scai-border);
    border-radius: 2px;
    margin-bottom: 6px;
    overflow: hidden;
}
.scai-progress-bar {
    height: 100%;
    background: var(--scai-blue);
    border-radius: 2px;
    transition: width .5s ease;
}
.scai-progress-text {
    text-align: right;
    font-size: 12px;
    color: var(--scai-gray);
    letter-spacing: .2px;
}

/* ── Intro page ──────────────────────────────── */
.scai-intro {
    text-align: center;
    padding: 48px 40px;
}
.scai-intro-badge {
    display: inline-block;
    padding: 6px 18px;
    background: var(--scai-blue);
    color: var(--scai-orange);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 20px;
}
.scai-intro-title {
    font-size: 2em;
    font-weight: 800;
    color: var(--scai-blue);
    margin: 0 0 16px;
    line-height: 1.2;
}
.scai-intro-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--scai-text-light);
    max-width: 520px;
    margin: 0 auto 32px;
}
.scai-intro-meta {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}
.scai-intro-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scai-intro-meta-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--scai-blue);
    line-height: 1;
}
.scai-intro-meta-label {
    font-size: 12px;
    color: var(--scai-gray);
    margin-top: 4px;
    text-transform: lowercase;
}
.scai-intro-note {
    font-size: 12px;
    color: var(--scai-gray);
    margin-top: 16px;
    margin-bottom: 0;
}

/* ── Step header ─────────────────────────────── */
.scai-step-header {
    margin-bottom: 24px;
}
.scai-step-num {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--scai-gray);
    letter-spacing: .3px;
    margin-bottom: 6px;
}
.scai-detail-intro {
    font-size: 13px;
    color: var(--scai-gray);
    margin: 0 0 12px;
    font-style: italic;
}

/* ── Step container ──────────────────────────── */
.scai-step-content {
    background: var(--scai-white);
    border-radius: var(--scai-radius-lg);
    padding: 40px;
    box-shadow: var(--scai-shadow-lg);
    border: 1px solid var(--scai-border);
}

/* ── Section title ───────────────────────────── */
.scai-step-title {
    color: var(--scai-blue);
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 24px;
    padding: 0 0 16px;
    border-bottom: 2px solid var(--scai-border);
    line-height: 1.3;
}

/* ── Intro ───────────────────────────────────── */
.scai-step-content > h2 {
    color: var(--scai-blue);
    font-size: 1.5em;
    margin: 0 0 12px;
}
.scai-intro-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--scai-text-light);
    margin-bottom: 20px;
}
.scai-intro-info {
    color: var(--scai-gray);
    font-size: 13px;
    margin-bottom: 28px;
    font-style: normal;
}

/* ── Questions ───────────────────────────────── */
.scai-question {
    margin-bottom: 16px;
    padding: 20px 24px;
    background: var(--scai-light);
    border-radius: var(--scai-radius);
    border: none;
    transition: background .2s;
}
.scai-question:hover {
    background: #eef1f5;
}
.scai-question-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
    font-weight: 500;
    color: var(--scai-text);
}
.scai-question-text a {
    color: var(--scai-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--scai-blue);
}

/* ── Answer buttons ──────────────────────────── */
.scai-answer-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.scai-radio { cursor: pointer; }
.scai-radio input[type="radio"] { display: none; }
.scai-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border: 1.5px solid var(--scai-border);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all .15s;
    text-align: center;
    min-width: 70px;
    color: var(--scai-text-light);
    background: var(--scai-white);
    user-select: none;
}
.scai-radio-label:hover {
    border-color: var(--scai-blue);
    color: var(--scai-blue);
}
.scai-radio input:checked + .scai-radio-yes {
    background: var(--scai-green);
    color: #fff;
    border-color: var(--scai-green);
}
.scai-radio input:checked + .scai-radio-no {
    background: var(--scai-red);
    color: #fff;
    border-color: var(--scai-red);
}
.scai-radio input:checked + .scai-radio-na {
    background: #78909c;
    color: #fff;
    border-color: #78909c;
}
.scai-mc-options {
    flex-direction: column;
}
.scai-mc-options .scai-radio-label {
    justify-content: flex-start;
    text-align: left;
}
.scai-mc-options .scai-radio input:checked + .scai-radio-label {
    background: var(--scai-blue);
    color: #fff;
    border-color: var(--scai-blue);
}

/* ── Detail rows ─────────────────────────────── */
.scai-detail-rows {
    margin-top: 16px;
    padding: 16px 0 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--scai-border);
    animation: scai-fade-in .3s ease;
}
.scai-detail-rows ul,
.scai-detail-rows ol,
.scai-row-item ul,
.scai-row-item ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.scai-row-text p {
    margin: 0;
}
.scai-row-text div {
    margin: 0;
}

/* Article reference links */
.scai-row-text .scai-art-ref {
    color: var(--scai-orange);
    font-weight: 500;
    cursor: default;
    white-space: nowrap;
}

/* Inline panels: standaard verborgen, JS toggled display via inline style */
.scai-row-text [class*="-panel"]:not([style*="display"]),
.scai-question-text [class*="-panel"]:not([style*="display"]) {
    display: none;
}
@keyframes scai-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.scai-row-item {
    padding: 16px 0;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.scai-row-item:last-child { border-bottom: none; }
.scai-row-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: var(--scai-text-light);
}
.scai-answer-inline {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}
.scai-radio-sm .scai-radio-label {
    padding: 7px 16px;
    font-size: 12px;
    min-width: 40px;
    border-radius: 50px;
}

/* ── Navigation ──────────────────────────────── */
.scai-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--scai-border);
}

/* ── Buttons ─────────────────────────────────── */
.scai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    line-height: 1.4;
}
.scai-btn-primary {
    background: var(--scai-blue);
    color: var(--scai-white) !important;
}
.scai-btn-primary:hover {
    background: #025180;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(1,63,99,.2);
    color: var(--scai-white) !important;
}
.scai-btn-secondary {
    background: transparent;
    color: var(--scai-text-light) !important;
    border: 1.5px solid var(--scai-border);
}
.scai-btn-secondary:hover {
    border-color: var(--scai-blue);
    color: var(--scai-blue) !important;
}
.scai-btn-cta {
    background: var(--scai-orange);
    color: var(--scai-white) !important;
    font-size: 16px;
    padding: 16px 40px;
    border-radius: 50px;
}
.scai-btn-cta:hover {
    background: var(--scai-accent);
    color: var(--scai-white) !important;
}

/* ── Form inputs ─────────────────────────────── */
.scai-form-group {
    margin-bottom: 20px;
}
.scai-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--scai-text);
}
.scai-input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--scai-border);
    border-radius: var(--scai-radius);
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    color: var(--scai-text);
    background: var(--scai-white);
}
.scai-input:focus {
    outline: none;
    border-color: var(--scai-blue);
    box-shadow: 0 0 0 3px rgba(1,63,99,.08);
}
.scai-input::placeholder {
    color: #b0bec5;
}

/* ── Results / Preview ───────────────────────── */
.scai-results-summary {
    text-align: center;
}
.scai-score-display {
    margin: 24px 0;
}
.scai-score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 38px;
    font-weight: 800;
    color: #fff;
}
.scai-score-label {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}
.scai-gaps-count {
    font-size: 14px;
    color: var(--scai-gray);
    margin-bottom: 28px;
}

/* ── Donut chart ─────────────────────────────── */
.scai-donut-wrap {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 32px auto 16px;
}
.scai-donut-wrap canvas {
    display: block;
}
.scai-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.scai-donut-pct {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: var(--scai-blue);
    line-height: 1;
}
.scai-donut-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-top: 4px;
}

/* ── Blurred category preview ────────────────── */
.scai-preview-cats {
    position: relative;
    margin: 24px 0;
    border-radius: var(--scai-radius-lg);
    overflow: hidden;
    border: 1px solid var(--scai-border);
}
.scai-preview-cats-inner {
    filter: blur(6px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
    padding: 8px 0;
}
.scai-preview-cats-inner .scai-category-score,
.scai-preview-cats-inner .scai-category-badge {
    letter-spacing: 2px;
}
.scai-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2px);
    color: var(--scai-blue);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
    line-height: 1.5;
}

/* ── Radar chart ─────────────────────────────── */
.scai-chart-container {
    margin: 24px auto;
    max-width: 460px;
}
.scai-chart-container canvas {
    width: 100% !important;
    height: auto !important;
}

/* ── Category scores ─────────────────────────── */
.scai-category-scores {
    text-align: left;
    margin: 24px 0;
}
.scai-category-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--scai-radius);
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: background .15s;
}
.scai-category-item:nth-child(odd) {
    background: var(--scai-light);
}
.scai-category-item:hover {
    background: #edf1f5;
}
.scai-category-name {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}
.scai-category-score {
    font-weight: 700;
    font-size: 15px;
    margin-right: 12px;
    min-width: 40px;
    text-align: right;
}
.scai-category-badge {
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    min-width: 90px;
    text-align: center;
}

/* ── Teaser / CTA ────────────────────────────── */
.scai-teaser {
    background: var(--scai-blue);
    color: var(--scai-white);
    padding: 36px;
    border-radius: var(--scai-radius-lg);
    margin: 32px 0;
    text-align: center;
}
.scai-teaser h3 {
    color: var(--scai-orange);
    font-size: 1.3em;
    margin: 0 0 8px;
}
.scai-teaser p {
    opacity: .85;
    line-height: 1.6;
    margin: 0 0 24px;
    font-size: 15px;
}

/* ── Loading ─────────────────────────────────── */
.scai-loading {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: var(--scai-radius-lg);
    backdrop-filter: blur(2px);
}
.scai-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--scai-border);
    border-top-color: var(--scai-blue);
    border-radius: 50%;
    animation: scai-spin .7s linear infinite;
    margin-bottom: 12px;
}
@keyframes scai-spin { to { transform: rotate(360deg); } }
.scai-loading p {
    font-size: 14px;
    color: var(--scai-gray);
    margin: 0;
}

/* ── Error ───────────────────────────────────── */
.scai-error {
    background: #fef2f2;
    color: var(--scai-red);
    padding: 14px 18px;
    border-radius: var(--scai-radius);
    margin-top: 16px;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid #fecaca;
}

/* ── Validation ──────────────────────────────── */
.scai-question.scai-invalid {
    border-color: var(--scai-red);
    background: #fef8f8;
    animation: scai-shake .3s;
}
@keyframes scai-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ── Mobile ──────────────────────────────────── */
@media (max-width: 768px) {
    .scai-intro {
        padding: 32px 24px;
    }
    .scai-intro-title {
        font-size: 1.6em;
    }
    .scai-intro-meta {
        gap: 20px;
    }
    .scai-intro-meta-num {
        font-size: 20px;
    }
    .scai-step-content {
        padding: 24px 20px;
        border-radius: var(--scai-radius);
    }
    .scai-question {
        padding: 16px 18px;
    }
    .scai-answer-options {
        gap: 6px;
    }
    .scai-radio-label {
        padding: 10px 20px;
        font-size: 13px;
        min-width: 60px;
    }
    .scai-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .scai-intro {
        padding: 28px 18px;
    }
    .scai-intro-title {
        font-size: 1.4em;
    }
    .scai-intro-desc {
        font-size: 14px;
    }
    .scai-step-content {
        padding: 20px 16px;
    }
    .scai-answer-options {
        flex-direction: row;
    }
    .scai-radio-label {
        flex: 1;
        padding: 10px 8px;
        min-width: 0;
        font-size: 13px;
    }
    .scai-row-item {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .scai-answer-inline {
        width: 100%;
        justify-content: flex-start;
    }
    .scai-radio-sm .scai-radio-label {
        flex: 1;
    }
    .scai-nav-buttons {
        gap: 10px;
    }
    .scai-btn {
        flex: 1;
        text-align: center;
    }
    .scai-btn-cta {
        padding: 14px 24px;
        font-size: 15px;
    }
    .scai-category-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .scai-category-score {
        margin-right: 8px;
    }
    .scai-donut-wrap {
        width: 200px;
        height: 200px;
    }
    .scai-donut-pct {
        font-size: 36px;
    }
    .scai-score-circle {
        width: 110px;
        height: 110px;
        font-size: 30px;
    }
}

/* ── Collapsible intro sections ──────────────── */
.scai-section-header {
    font-weight: bold;
    cursor: pointer;
    margin-top: 1em;
    margin-bottom: 0.3em;
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--scai-blue);
}
.scai-section-header:hover {
    color: var(--scai-orange);
}
.scai-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.9em;
}
.scai-toggle-icon.open {
    transform: rotate(90deg);
}
.scai-collapsible-content {
    display: none;
    margin-bottom: 1em;
    line-height: 1.4;
    color: var(--scai-text);
}
.scai-collapsible-content.open {
    display: block;
}
.scai-bullet-list {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}
.scai-bullet-list li {
    margin-bottom: 0.3em;
}
.scai-ready-text {
    margin-top: 2em;
    color: var(--scai-text);
}

/* ── Compliance Scan freemium-resultaat ─────────────────── */
.scai-result-ready { text-align: center; padding: 8px 0; }
.scai-result-check {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
    background: #013F63; color: #fff; font-size: 34px; line-height: 64px;
}
.scai-result-ready h3 { color: #013F63; font-size: 22px; margin: 0 0 6px; }
.scai-result-sub { color: #6b7a8d; margin: 0 auto 24px; max-width: 440px; }
.scai-teaser-locked {
    background: linear-gradient(180deg, #f8f9fb 0%, #eef2f7 100%);
    border: 1px solid #e3e8ef; border-radius: 14px; padding: 28px 24px; max-width: 540px; margin: 0 auto;
}
.scai-lock-icon { font-size: 30px; margin-bottom: 8px; }
.scai-teaser-locked p { color: #44515f; margin: 0 0 18px; line-height: 1.6; }

/* ── "Meer info" uitklap (help_text) ───────────────────── */
.scai-helptext { margin:8px 0 18px; }
.scai-helptext-summary { cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:4px 0; font-size:13px; font-weight:600; color:var(--scai-blue); list-style:none; transition:color .15s; }
.scai-helptext-summary::-webkit-details-marker { display:none; }
.scai-helptext-summary:hover { color:var(--scai-accent); }
.scai-helptext-icon { color:var(--scai-orange); font-size:15px; line-height:1; transition:transform .2s; display:inline-block; }
.scai-helptext[open] .scai-helptext-icon { transform:rotate(90deg); }
.scai-helptext-body { margin-top:8px; padding:14px 16px; background:var(--scai-light); border:1px solid var(--scai-border); border-radius:var(--scai-radius); font-size:13px; line-height:1.65; color:var(--scai-text-light); }

/* ── Compliance Scan: single/multiple choice — gap-look, toegankelijk ── */
.scai-choice-options { flex-direction: column; gap: 8px; width: 100%; }
.scai-choice {
    display: flex; align-items: center;
    padding: 13px 18px;
    border: 1.5px solid var(--scai-border);
    border-radius: 10px;
    background: var(--scai-white);
    cursor: pointer;
    transition: all .15s;
    font-weight: 600; font-size: 14px;
    color: var(--scai-text-light);
    text-align: left;
}
.scai-choice:hover { border-color: var(--scai-blue); color: var(--scai-blue); }
/* input visueel verbergen maar focusbaar/screenreader-bereikbaar houden (GEEN display:none) */
.scai-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.scai-choice-label { flex: 1; }
/* geselecteerd: zelfde blauw als gap-MC. De .scai-choice-checked-klasse wordt
   door scai-survey.js gesynct als fallback voor browsers zonder :has().
   BEWUST aparte regels: een browser zonder :has() gooit anders de héle
   selector-lijst weg — inclusief de fallback. */
.scai-choice:has(input:checked) {
    background: var(--scai-blue); color: #fff; border-color: var(--scai-blue);
}
.scai-choice.scai-choice-checked {
    background: var(--scai-blue); color: #fff; border-color: var(--scai-blue);
}
/* toegankelijkheid: zichtbare focus-ring op de box als de input focus heeft */
.scai-choice:focus-within { outline: 2px solid var(--scai-blue); outline-offset: 2px; }
/* fallback voor browsers zonder :has — markeer tenminste het label */
.scai-choice input:checked + .scai-choice-label { font-weight: 700; }

/* ── MC vs SC: ronde radio (één keuze) vs vierkant vinkje (meerkeuze) — M1 ── */
.scai-choice-hint { font-size: 13px; color: var(--scai-text-light); font-weight: 500; margin: 0 0 8px; }
.scai-choice::before {
    content: ''; flex: 0 0 auto;
    width: 18px; height: 18px; margin-right: 12px;
    border: 2px solid var(--scai-border); background: #fff;
    box-sizing: border-box; transition: all .15s;
}
.scai-choice-single .scai-choice::before { border-radius: 50%; }   /* radio = rond */
.scai-choice-multi  .scai-choice::before { border-radius: 5px; }   /* checkbox = vierkant */
.scai-choice:hover::before { border-color: var(--scai-blue); }
/* geselecteerd: witte marker op de blauwe box. Fallback-klasse in aparte
   regels — zie hierboven waarom die niet met :has() gecombineerd mag worden. */
.scai-choice-single .scai-choice:has(input:checked)::before {
    border-color: #fff; background: radial-gradient(#fff 0 42%, transparent 46%);
}
.scai-choice-single .scai-choice.scai-choice-checked::before {
    border-color: #fff; background: radial-gradient(#fff 0 42%, transparent 46%);
}
.scai-choice-multi .scai-choice:has(input:checked)::before {
    border-color: #fff;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23013F63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4'/%3E%3C/svg%3E") center/12px no-repeat;
}
.scai-choice-multi .scai-choice.scai-choice-checked::before {
    border-color: #fff;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23013F63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Pagina /compliance-test/: twee Spectra info-box beschrijvingen op de donkerblauwe
   hero hadden geen tekstkleur ingesteld → zwart op donkerblauw. Geef ze dezelfde
   lichte kleur als de kop (Astra color-5). Selector is block-id-specifiek, dus
   raakt geen andere info-boxes. */
.uagb-block-25a0aa1f .uagb-ifb-desc,
.uagb-block-09236040 .uagb-ifb-desc { color: var(--ast-global-color-5) !important; }

/* ── Sneak-peek van het scan-resultaat (teaser vóór betaling) ── */
.scai-peek { position:relative; text-align:left; max-width:540px; margin:8px auto 16px; padding:20px 22px 38px; background:var(--scai-light); border:1px solid var(--scai-border); border-radius:var(--scai-radius); color:var(--scai-text); line-height:1.65; max-height:260px; overflow:hidden; }
.scai-peek::after { content:''; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(180deg, rgba(247,248,250,0) 0%, var(--scai-light) 88%); pointer-events:none; }
.scai-peek p { margin:0 0 10px; }
.scai-peek h5, .scai-peek strong { color:var(--scai-blue); }
/* Visuele preview: de bovenkant van het echte rapport, flush + fade naar wit. */
.scai-peek-cap { max-width:540px; margin:4px auto 8px; font-size:.85em; color:#6b7785; text-align:center; letter-spacing:.02em; }
.scai-peek-img { padding:0; max-height:360px; background:#fff; border:1px solid var(--scai-border); box-shadow:0 8px 26px rgba(1,63,99,.10); }
.scai-peek-img img { display:block; width:100%; height:auto; }
.scai-peek-img::after { height:130px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 90%); }

/* ── Visuele risico-kaart (per-profiel sneak-peek) ── */
.scai-riskcard { --rc-color:#013F63; max-width:540px; margin:14px auto 18px; padding:22px 24px; background:#fff; border:1px solid var(--scai-border); border-radius:var(--scai-radius); box-shadow:0 8px 26px rgba(1,63,99,.08); text-align:left; }
.scai-tier-none, .scai-tier-minimal { --rc-color:#2e9e5b; }
.scai-tier-limited { --rc-color:#e0a32e; }
.scai-tier-high { --rc-color:#e35d4a; }
.scai-tier-prohibited { --rc-color:#b02a37; }
.scai-tier-advice { --rc-color:#013F63; }
.scai-rc-row + .scai-rc-row { margin-top:16px; padding-top:16px; border-top:1px solid #f0f3f7; }
.scai-rc-label { display:block; font-size:.72em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a94a3; margin-bottom:4px; }
.scai-rc-gauge { height:10px; background:#eef1f5; border-radius:6px; overflow:hidden; margin:8px 0 6px; }
.scai-rc-gauge > span { display:block; height:100%; border-radius:6px; background:var(--rc-color); transition:width .6s ease; }
.scai-rc-tier { font-size:1.15em; font-weight:800; color:var(--rc-color); }
.scai-rc-headline { margin:2px 0 0; font-size:1.1em; font-weight:700; color:var(--scai-blue); line-height:1.35; }
.scai-rc-points ul { list-style:none; margin:6px 0 0; padding:0; }
.scai-rc-points li { position:relative; padding:4px 0 4px 22px; color:var(--scai-text); line-height:1.5; }
.scai-rc-points li::before { content:''; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--rc-color); }
.scai-rc-points li.scai-rc-fade { color:#aab2bd; }
.scai-rc-points li.scai-rc-fade::before { opacity:.45; }

/* ── Visuele contact-CTA (na betaling) ── */
.scai-contact-cta { max-width:540px; margin:20px auto 0; padding:24px; background:var(--scai-light); border:1px solid var(--scai-border); border-radius:var(--scai-radius); text-align:center; }
.scai-contact-icon { font-size:30px; line-height:1; margin-bottom:8px; }
.scai-contact-cta h4 { margin:0 0 8px; color:var(--scai-blue); font-size:1.12em; font-weight:700; }
.scai-contact-cta p { margin:0 0 18px; color:var(--scai-text-light); line-height:1.55; }

/* ── Handmatig in-/uitklappen van detail-rows (v1.7) ── */
.scai-rows-toggle { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 10px; background:none; border:none; cursor:pointer; color:var(--scai-blue); font-size:.9em; font-weight:600; border-radius:6px; }
.scai-rows-toggle:hover { background:var(--scai-light); }
.scai-rows-toggle-icon { display:inline-block; transition:transform .2s ease; }
.scai-rows-toggle.open .scai-rows-toggle-icon { transform:rotate(90deg); }

/* ── Vervolgstap naar de Gap Survey (next_slug op het profiel) ── */
.scai-next-step { max-width:540px; margin:20px auto 0; padding:22px 24px; background:#fdf6ea; border:1px solid #f0dcb8; border-radius:var(--scai-radius); text-align:center; }
.scai-next-step p { margin:0 0 14px; color:var(--scai-text); line-height:1.55; }