/* ScanBuilder – Frontend CSS */

/* ── Reset & basis ─────────────────────────────────────────────────────── */
.instroomscan-wrap *,
.instroomscan-wrap *::before,
.instroomscan-wrap *::after { box-sizing: border-box; }

.instroomscan-wrap {
	/* ── Primaire kleuren ── */
	--iscan-accent:        #111827;
	--iscan-badge-kleur:   var(--iscan-accent);
	--iscan-knop-kleur:    var(--iscan-accent);
	--iscan-nav-kleur:     var(--iscan-knop-kleur);
	--iscan-tekst:         #111827;
	--iscan-subtekst:      #4b5563;

	/* ── Achtergronden ── */
	--iscan-wrap-bg:       #ffffff;
	--iscan-vraag-bg:      #ffffff;
	--iscan-cta-bg:        #111827;
	--iscan-result-bg:     #ffffff;
	--iscan-input-bg:      #ffffff;

	/* ── Randen ── */
	--iscan-vraag-border:  #e2e8f0;
	--iscan-result-border: #e2e8f0;
	--iscan-input-border:  #e2e8f0;
	--iscan-label-kleur:   #374151;

	/* ── Voortgangsbalk ── */
	--iscan-progress-track: #e2e8f0;

	/* ── Domein header ── */
	--iscan-domein-tekst:  #ffffff;

	/* ── Knoppen tekst & hover ── */
	--iscan-knop-tekst:       #ffffff;
	--iscan-knop-hover-tekst: var(--iscan-knop-tekst);
	--iscan-nav-tekst:        #ffffff;
	--iscan-nav-hover-tekst:  var(--iscan-nav-tekst);
	--iscan-terug-hover-tekst: var(--iscan-terug-kleur);

	/* ── Stats balk ── */
	--iscan-stats-kleur:   var(--iscan-subtekst);

	/* ── Navigatieknoppen ── */
	--iscan-terug-bg:           #f1f5f9;
	--iscan-terug-border:       #e2e8f0;
	--iscan-terug-kleur:        #475569;
	--iscan-terug-hover-border: var(--iscan-terug-border);

	/* ── Vraagkaarten ── */
	--iscan-vraag-tekst-kleur:  var(--iscan-tekst);
	--iscan-input-placeholder:  #9ca3af;
	--iscan-vraag-nr-kleur:     var(--iscan-accent);

	/* ── Schaalcirkels ── */
	--iscan-cirkel-border:        #d1d5db;
	--iscan-cirkel-bg:            #f3f4f6;
	--iscan-cirkel-tekst:         #6b7280;
	--iscan-cirkel-hover-bg:      #ffffff;
	--iscan-cirkel-hover-tekst:   var(--iscan-cirkel-tekst);
	--iscan-cirkel-active-tekst:  #ffffff;
	--iscan-cirkel-lbl-kleur:     #6b7280;
	--iscan-schaal-opt-border:    var(--iscan-vraag-border);

	/* ── Resultaat / CTA ── */
	--iscan-cta-knop:          var(--iscan-accent);
	--iscan-range-kleur:       #f97316;
	--iscan-advies-bg:         var(--iscan-range-kleur);
	--iscan-advies-tekst:      #ffffff;
	--iscan-result-subtitel-kleur: #374151;
	--iscan-result-tekst-kleur:    #374151;
	--iscan-score-deler-kleur: #6b7280;
	--iscan-bar-track-kleur:   #e5e7eb;
	--iscan-domein-score-kleur: #374151;
	--iscan-cta-tekst:         #ffffff;
	--iscan-cta-inhoud-kleur:  rgba(255,255,255,.9);
	--iscan-teaser-kleur:      #4b5563;

	/* ── Afmetingen ── */
	--iscan-intro-breedte:       560px;
	--iscan-intro-tekst-breedte: 460px;
	--iscan-cirkel:       52px;
	--iscan-radius:       12px;
	--iscan-k-radius:     99px;
	--iscan-font-size:    16px;

	font-size: var(--iscan-font-size);
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
	color: var(--iscan-tekst);
	line-height: 1.6;
	background: var(--iscan-wrap-bg);
	margin: 0 auto;
	padding: 0 16px 48px;
}

/* ══ INTRO ══════════════════════════════════════════════════════════════ */

.iscan-intro {
	display: flex;
	justify-content: center;
	padding: 48px 8px 48px;
}

.iscan-intro-inner {
	max-width: var(--iscan-intro-breedte, 560px);
	width: 100%;
	text-align: center;
}

.iscan-intro-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 14px 6px 10px;
	border-radius: 99px;
	border: 1px solid;
	margin-bottom: 28px;
	/* Kleuren via CSS vars + color-mix voor alpha */
	color: var(--iscan-badge-kleur);
	background: rgba(17, 24, 39, 0.09);
	background: color-mix(in srgb, var(--iscan-badge-kleur) 9%, transparent);
	border-color: rgba(17, 24, 39, 0.22);
	border-color: color-mix(in srgb, var(--iscan-badge-kleur) 22%, transparent);
}

.iscan-intro-titel {
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.18;
	margin: 0 0 18px;
	color: var(--iscan-tekst);
	letter-spacing: -.02em;
}

.iscan-intro-tekst {
	font-size: 1rem;
	color: var(--iscan-subtekst);
	margin: 0 auto 28px;
	max-width: var(--iscan-intro-tekst-breedte, 460px);
	line-height: 1.75;
}
.iscan-intro-tekst p {
	margin: 0 0 1em;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
.iscan-intro-tekst p:last-child { margin-bottom: 0; }

/* Stats strip */
.iscan-intro-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	color: var(--iscan-stats-kleur);
}

.iscan-intro-stat {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: .82rem;
	font-weight: 600;
}

.iscan-intro-stat-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #cbd5e1;
	flex-shrink: 0;
}

.iscan-btn-start {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 32px;
	border: none;
	color: var(--iscan-knop-tekst);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--iscan-knop-kleur);
	border-radius: var(--iscan-k-radius);
	box-shadow: 0 4px 20px rgba(0,0,0,.18);
	transition: background .15s, transform .12s, box-shadow .15s;
}
.iscan-btn-start:hover {
	background: var(--iscan-knop-hover, color-mix(in srgb, var(--iscan-knop-kleur) 82%, #000));
	color: var(--iscan-knop-hover-tekst);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0,0,0,.26);
}

/* ══ VOORTGANGSBALK ══════════════════════════════════════════════════════ */

.iscan-stap { padding-top: 24px; }

.iscan-progress-wrap { margin-bottom: 28px; }

.iscan-progress-bar {
	height: 6px;
	background: var(--iscan-progress-track);
	border-radius: 99px;
	overflow: hidden;
}

.iscan-progress-fill {
	height: 100%;
	border-radius: 99px;
	background: var(--iscan-accent);
	transition: width .4s ease;
}

.iscan-progress-info {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

.iscan-progress-tekst { font-size: .8rem; color: var(--iscan-subtekst); }
.iscan-progress-pct   { font-size: .8rem; font-weight: 700; color: var(--iscan-accent); }

/* ══ DOMEIN HEADER ═══════════════════════════════════════════════════════ */

.iscan-domein-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 32px 28px 26px;
	background: var(--iscan-domein-bg, var(--iscan-accent));
	border-radius: var(--iscan-radius);
}

.iscan-domein-badge-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.iscan-domein-badge {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255,255,255,.18);
	border: 2px solid rgba(255,255,255,.3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.25rem;
}

.iscan-badge-check { font-size: 1.4rem; }
.iscan-domein-teller { font-size: .65rem; color: var(--iscan-domein-tekst, rgba(255,255,255,.78)); font-weight: 600; letter-spacing: .05em; }
.iscan-domein-naam { font-size: 1.2rem; font-weight: 800; margin: 0 0 3px; color: var(--iscan-domein-tekst, #fff); }
.iscan-domein-sub  { font-size: .82rem; color: var(--iscan-domein-tekst, rgba(255,255,255,.85)); margin: 0; }

/* ══ VRAAGKAART ══════════════════════════════════════════════════════════ */

.iscan-vraag {
	background: var(--iscan-vraag-bg, #fff);
	border-radius: var(--iscan-radius);
	padding: 36px 24px 28px;
	margin-bottom: 14px;
	border: 1.5px solid var(--iscan-vraag-border, #e2e8f0);
	box-shadow: var(--iscan-vraag-shadow, none);
	transition: border-color .2s, box-shadow .2s;
	text-align: center;
}

.iscan-vraag:hover {
	border-color: #cbd5e1;
	box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

.iscan-vraag.iscan-onbeantwoord {
	border-color: #ef4444;
	background: #fef2f2;
	box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}

/* Vraag-nummer + tekst */
.iscan-vraag-tekst {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	width: 100%;
}

.iscan-vraag-tekst p {
	margin: 0;
}

.iscan-q-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: .75rem;
	font-weight: 800;
	flex-shrink: 0;
	color: var(--iscan-vraag-nr-kleur);
	background: color-mix(in srgb, var(--iscan-vraag-nr-kleur) 12%, transparent);
}

.iscan-vraag-content {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.55;
	color: var(--iscan-vraag-tekst-kleur);
	text-align: center;
	max-width: 540px;
}

/* ══ SCHAAL – CIRKELKNOPPEN ══════════════════════════════════════════════ */

.iscan-schaal-wrap {
	border-top: 1px solid #f1f5f9;
	padding-top: 22px;
}

.iscan-schaal {
	display: flex;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}

/* Block layout */
.iscan-schaal--block {
	flex-direction: column;
	align-items: stretch;
	max-width: 100%;
	gap: 8px;
}
.iscan-schaal--block .iscan-schaal-opt {
	flex-direction: row;
	justify-content: flex-start;
	padding: 10px 16px;
	background: var(--iscan-vraag-bg, #fff);
	border: 2px solid var(--iscan-schaal-opt-border);
	border-radius: calc( var(--iscan-radius) * 0.6 );
	gap: 14px;
}
.iscan-schaal--block .iscan-schaal-opt:hover {
	border-color: var(--c, var(--iscan-accent));
}
.iscan-schaal--block .iscan-schaal-opt input:checked + .iscan-cirkel + .iscan-cirkel-lbl,
.iscan-schaal--block .iscan-schaal-opt input:checked ~ .iscan-cirkel-lbl {
	color: var(--iscan-accent);
	font-weight: 700;
}
.iscan-schaal--block .iscan-schaal-opt:hover .iscan-cirkel {
	transform: none;
	box-shadow: none;
}
.iscan-schaal--block .iscan-schaal-opt input:checked + .iscan-cirkel {
	transform: none;
	box-shadow: none;
}
.iscan-schaal--block .iscan-cirkel {
	flex-shrink: 0;
	width: var(--iscan-cirkel, 44px);
	height: var(--iscan-cirkel, 44px);
	font-size: 1rem;
}
.iscan-schaal--block .iscan-cirkel-lbl {
	text-align: left;
	white-space: normal;
	font-size: .875rem;
	font-weight: 500;
	overflow: visible;
}

/* Schaal > 5: meer ruimte, standaard kleinere cirkels (overschrijfbaar via widget) */
.iscan-schaal[data-schaal-max="6"],
.iscan-schaal[data-schaal-max="7"] { max-width: 640px; }
.iscan-schaal[data-schaal-max="8"],
.iscan-schaal[data-schaal-max="9"],
.iscan-schaal[data-schaal-max="10"] { max-width: 100%; }

/* Standaard kleinere cirkels voor grote schalen — maar var() wint als het widget een waarde instelt */
.iscan-schaal[data-schaal-max="6"] .iscan-cirkel,
.iscan-schaal[data-schaal-max="7"] .iscan-cirkel { width: var(--iscan-cirkel, 46px); height: var(--iscan-cirkel, 46px); font-size: 1rem; }
.iscan-schaal[data-schaal-max="8"] .iscan-cirkel,
.iscan-schaal[data-schaal-max="9"] .iscan-cirkel,
.iscan-schaal[data-schaal-max="10"] .iscan-cirkel { width: var(--iscan-cirkel, 40px); height: var(--iscan-cirkel, 40px); font-size: .9rem; }

.iscan-schaal[data-schaal-max="8"] .iscan-cirkel-lbl,
.iscan-schaal[data-schaal-max="9"] .iscan-cirkel-lbl,
.iscan-schaal[data-schaal-max="10"] .iscan-cirkel-lbl { font-size: .6rem; }

.iscan-schaal[data-schaal-max="6"] .iscan-schaal-opt,
.iscan-schaal[data-schaal-max="7"] .iscan-schaal-opt,
.iscan-schaal[data-schaal-max="8"] .iscan-schaal-opt,
.iscan-schaal[data-schaal-max="9"] .iscan-schaal-opt,
.iscan-schaal[data-schaal-max="10"] .iscan-schaal-opt { padding: 0 2px; }

.iscan-schaal-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	flex: 1;
	padding: 0 4px;
	min-width: 0;
}

.iscan-schaal-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

/* Cirkel */
.iscan-cirkel {
	width: var(--iscan-cirkel, 52px);
	height: var(--iscan-cirkel, 52px);
	border-radius: 50%;
	border: 2px solid var(--iscan-cirkel-border);
	background: var(--iscan-cirkel-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--iscan-cirkel-tekst);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
	user-select: none;
	flex-shrink: 0;
}

/* Hover */
.iscan-schaal-opt:hover .iscan-cirkel {
	border-color: var(--c, #94a3b8);
	background: var(--iscan-cirkel-hover-bg);
	color: var(--iscan-cirkel-hover-tekst);
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Geselecteerd */
.iscan-schaal-opt input:checked + .iscan-cirkel {
	background: var(--iscan-cirkel-active-bg, var(--c, var(--iscan-accent)));
	border-color: var(--iscan-cirkel-active-border, var(--c, var(--iscan-accent)));
	color: var(--iscan-cirkel-active-tekst, #fff);
	transform: translateY(-4px) scale(1.08);
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Label onder cirkel */
.iscan-cirkel-lbl {
	font-size: .68rem;
	font-weight: 600;
	color: var(--iscan-cirkel-lbl-kleur);
	text-align: center;
	line-height: 1.25;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .15s;
}

.iscan-schaal-opt:hover .iscan-cirkel-lbl { color: #374151; }

.iscan-schaal-opt input:checked ~ .iscan-cirkel-lbl {
	color: var(--c, var(--iscan-accent));
	font-weight: 700;
}

/* ══ NAVIGATIE ════════════════════════════════════════════════════════════ */

.iscan-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	gap: 10px;
}

.iscan-btn-terug {
	background: var(--iscan-terug-bg);
	border: 1.5px solid var(--iscan-terug-border);
	border-radius: var(--iscan-k-radius);
	padding: 11px 20px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--iscan-terug-kleur);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.iscan-btn-terug:hover {
	background: var(--iscan-terug-hover, color-mix(in srgb, var(--iscan-terug-bg) 85%, #000));
	color: var(--iscan-terug-hover-tekst);
	border-color: var(--iscan-terug-hover-border);
}

.iscan-btn-volgende,
.iscan-btn-naar-contact {
	border: none;
	color: var(--iscan-nav-tekst);
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	margin-left: auto;
	background: var(--iscan-nav-kleur);
	padding: 12px 28px;
	border-radius: var(--iscan-k-radius);
	transition: background .15s, transform .12s, box-shadow .15s;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.iscan-btn-submit {
	border: none;
	color: var(--iscan-knop-tekst);
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	margin-left: auto;
	background: var(--iscan-knop-kleur);
	padding: 12px 28px;
	border-radius: var(--iscan-k-radius);
	transition: background .15s, transform .12s, box-shadow .15s;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.iscan-btn-volgende:hover,
.iscan-btn-naar-contact:hover {
	background: var(--iscan-nav-hover, color-mix(in srgb, var(--iscan-nav-kleur) 82%, #000));
	color: var(--iscan-nav-hover-tekst);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.iscan-btn-submit:hover {
	background: var(--iscan-knop-hover, color-mix(in srgb, var(--iscan-knop-kleur) 82%, #000));
	color: var(--iscan-knop-hover-tekst);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.iscan-btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ══ CONTACT STAP ════════════════════════════════════════════════════════ */

.iscan-veld-rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.iscan-veld { display: flex; flex-direction: column; gap: 6px; }

.iscan-veld label {
	font-weight: 600;
	font-size: .85rem;
	color: var(--iscan-label-kleur);
}

.iscan-form-input,
.iscan-veld input {
	border: 1.5px solid var(--iscan-input-border);
	border-radius: 8px;
	padding: 11px 14px;
	font-size: .95rem;
	font-family: inherit;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
	background: var(--iscan-input-bg);
	color: var(--iscan-tekst);
}
.iscan-form-input::placeholder,
.iscan-veld input::placeholder {
	color: var(--iscan-input-placeholder);
}
.iscan-veld input:focus {
	border-color: var(--iscan-accent);
	box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.iscan-req { color: #ef4444; }

.iscan-veld-check { margin: 6px 0 20px; }

.iscan-check-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: .9rem;
	color: #475569;
}
.iscan-check-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--iscan-accent);
}

.iscan-form-error,
.iscan-form-input.iscan-form-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 12px 16px;
	color: #dc2626;
	font-weight: 600;
	margin-bottom: 14px;
	font-size: .875rem;
}

.iscan-teaser-onder {
	text-align: center;
	font-size: .8rem;
	color: #6b7280;
	margin-top: 20px;
}

.iscan-loader {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: iscan-spin .65s linear infinite;
	vertical-align: middle;
	margin-left: 8px;
}
@keyframes iscan-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.iscan-loader { animation: none; border-top-color: #fff; }
	.iscan-resultaat-wrap { animation: none; }
	.iscan-cirkel { transition: none !important; }
	.iscan-btn-start, .iscan-btn-volgende, .iscan-btn-terug, .iscan-btn-naar-contact, .iscan-btn-submit { transition: none !important; }
}

/* ══ RESULTAAT ════════════════════════════════════════════════════════════ */

.iscan-resultaat-wrap { animation: iscan-fade .4s ease both; }
@keyframes iscan-fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ── Bedankmodus ──────────────────────────────────────────────────────────── */
.iscan-bedank-wrap { padding: 0; }
.iscan-bedank-inner {
	background: var(--iscan-vraag-bg);
	border-radius: var(--iscan-radius);
	padding: 48px 40px;
	text-align: center;
}
.iscan-bedank-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--iscan-accent);
	color: #fff;
	font-size: 2rem;
	line-height: 64px;
	margin: 0 auto 24px;
}
.iscan-bedank-titel {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--iscan-tekst);
	margin: 0 0 16px;
}
.iscan-bedank-tekst {
	color: var(--iscan-subtekst);
	font-size: 1rem;
	line-height: 1.7;
	max-width: 520px;
	margin: 0 auto;
}
.iscan-bedank-tekst p {
	margin: 0 0 1em;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
.iscan-bedank-tekst p:last-child { margin-bottom: 0; }

.iscan-result-header {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	background: var(--iscan-vraag-bg);
	border-left: 5px solid var(--iscan-range-kleur);
	padding: 32px 32px;
	margin-bottom: 28px;
	border-radius: var(--iscan-radius);
}

.iscan-score-circle {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 4px solid var(--iscan-range-kleur);
	color: var(--iscan-range-kleur);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.iscan-score-num   { font-size: 2rem; font-weight: 800; line-height: 1; }
.iscan-score-deler { font-size: .7rem; color: var(--iscan-score-deler-kleur); }

.iscan-pct-label       { font-size: .875rem; font-weight: 700; margin: 0 0 6px; color: var(--iscan-range-kleur); }
.iscan-result-titel    { font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; }
.iscan-result-subtitel { margin: 0 0 16px; color: var(--iscan-result-subtitel-kleur); font-size: .9rem; }
.iscan-advies-pill     { display: inline-block; color: var(--iscan-advies-tekst); background: var(--iscan-advies-bg); padding: 5px 16px; border-radius: 99px; font-size: .78rem; font-weight: 700; }

.iscan-result-tekst {
	background: var(--iscan-result-bg);
	border: 1.5px solid var(--iscan-result-border);
	border-radius: var(--iscan-radius);
	padding: 22px 26px;
	color: var(--iscan-result-tekst-kleur);
	margin-bottom: 36px;
	font-size: .9rem;
	line-height: 1.75;
}

.iscan-domeinen { margin-bottom: 36px; }
.iscan-domeinen h3 { font-size: .875rem; font-weight: 700; margin-bottom: 18px; color: var(--iscan-tekst); text-transform: uppercase; letter-spacing: .06em; }

.iscan-domein-bar {
	display: grid;
	grid-template-columns: 150px 1fr 52px;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.iscan-domein-label { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--iscan-tekst); }
.iscan-bar-track    { height: 8px; background: var(--iscan-bar-track-kleur); border-radius: 99px; overflow: hidden; }
.iscan-bar-fill     { height: 100%; border-radius: 99px; transition: width .9s cubic-bezier(.22,1,.36,1); }
.iscan-domein-score { font-size: .8rem; font-weight: 700; color: var(--iscan-domein-score-kleur); text-align: right; }

.iscan-cta-box {
	border-radius: var(--iscan-radius);
	padding: 36px 36px;
	background: var(--iscan-cta-bg);
	margin-bottom: 28px;
}
.iscan-cta-box h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; color: var(--iscan-cta-tekst); }
.iscan-cta-box ul  { margin: 0 0 24px 20px; padding: 0; }
.iscan-cta-box li  { margin-bottom: 10px; font-size: .9rem; color: var(--iscan-cta-inhoud-kleur); line-height: 1.6; }

.iscan-cta-btn {
	display: inline-block;
	padding: 13px 28px;
	color: #fff !important;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none !important;
	border-radius: var(--iscan-k-radius);
	background: var(--iscan-cta-knop);
	transition: filter .15s, transform .12s;
}
.iscan-cta-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.iscan-teaser { text-align: center; color: var(--iscan-teaser-kleur); font-size: .85rem; margin-top: 16px; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.instroomscan-wrap { padding: 0 12px 32px; }

	.iscan-intro { padding: 28px 0 32px; }
	.iscan-intro-titel { font-size: 1.55rem; letter-spacing: -.01em; }
	.iscan-intro-stats { gap: 8px; }
	.iscan-stap { padding-top: 16px; }
	.iscan-vraag { padding: 28px 16px 24px; }
	.iscan-result-header { padding: 24px 20px; gap: 18px; }
	.iscan-cta-box { padding: 28px 24px; }
	.iscan-result-tekst { padding: 18px 20px; }

	.iscan-vraag { padding: 22px 16px 20px; }
	.iscan-vraag-content { font-size: .95rem; }

	.iscan-schaal { max-width: 100%; }
	.iscan-cirkel { width: min(var(--iscan-cirkel, 52px), 46px); height: min(var(--iscan-cirkel, 52px), 46px); font-size: 1.05rem; }
	.iscan-cirkel-lbl { font-size: .6rem; }

	.iscan-veld-rij { grid-template-columns: 1fr; }

	.iscan-result-header { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
	.iscan-domein-bar { grid-template-columns: 90px 1fr 42px; }
	.iscan-cta-box { padding: 22px 20px; }
}

@media (max-width: 480px) {
	.iscan-cirkel { width: min(var(--iscan-cirkel, 52px), 42px); height: min(var(--iscan-cirkel, 52px), 42px); font-size: 1rem; }
	.iscan-cirkel-lbl { display: none; }
	.iscan-schaal-opt input:checked ~ .iscan-cirkel-lbl {
		display: block;
		font-size: .6rem;
	}
	.iscan-schaal-opt { gap: 6px; }
}

@media (max-width: 380px) {
	.iscan-cirkel { width: min(var(--iscan-cirkel, 52px), 38px); height: min(var(--iscan-cirkel, 52px), 38px); font-size: .9rem; }
}