/*
 * Aanpak overgenomen van IAM Quick Scan (aantoonbaar werkend op deze site):
 * de plugin forceert zijn EIGEN lichte kaart-vormgeving (witte/lichtgrijze
 * achtergronden, zwarte tekst met !important) volledig los van het
 * thema — in plaats van te proberen de licht/donker-toggle van de site te
 * volgen. Alleen de radar-chart-labels zijn wit (die tekenen we zelf op een
 * canvas dat op een donkere ondergrond staat binnen de zijbalk).
 */

:root {
	--iamcbwk-orange: #d9541e;
	--iamcbwk-orange-dark: #b8461a;
	--iamcbwk-tekst: #1a1a1a;
}

.iamcbwk-stap1 {
	max-width: 1100px;
	margin: 0 auto;
	/* Geen geforceerde tekstkleur hier — Stap 1 heeft geen eigen lichte
	   kaart-achtergrond zoals de vraag-blokken in Stap 2, dus de tekst moet
	   gewoon de paginakleur volgen (licht/donker-toggle van de site). */
}

.iamcbwk-stap2,
.iamcbwk-rapport {
	color: var(--iamcbwk-tekst) !important;
	max-width: 1100px;
	margin: 0 auto;
}

.iamcbwk-resultaat {
	max-width: 1100px;
	margin: 0 auto;
	/* Zelfde reden als .iamcbwk-stap1 hierboven: geen eigen lichte kaart,
	   dus geen geforceerde tekstkleur — volgt de paginakleur. */
}

.iamcbwk-stap2 p,
.iamcbwk-stap2 span,
.iamcbwk-stap2 label,
.iamcbwk-stap2 h2,
.iamcbwk-stap2 h3,
.iamcbwk-stap2 input,
.iamcbwk-stap2 textarea,
.iamcbwk-rapport p,
.iamcbwk-rapport span,
.iamcbwk-rapport td,
.iamcbwk-rapport th {
	color: var(--iamcbwk-tekst) !important;
}

.iamcbwk-subtitel {
	font-style: italic;
	opacity: 0.8;
}

.iamcbwk-stap1 select,
.iamcbwk-stap1 input[type="text"] {
	display: block;
	width: 100%;
	max-width: 480px;
	padding: 0.5em;
	margin-top: 0.25em;
	background: #fff !important;
	color: var(--iamcbwk-tekst) !important; /* eigen witte achtergrond, dus hier wél vaste donkere tekst nodig */
	border: 1px solid #d1d5db;
	box-sizing: border-box;
}

.iamcbwk-stap1 label {
	display: block;
	margin-top: 1em;
	font-weight: 600;
}

.iamcbwk-stap1 form label input[type="checkbox"] {
	margin-right: 0.5em;
}

.iamcbwk-button,
.iamcbwk-stap1 button,
.iamcbwk-stap2 button {
	background: var(--iamcbwk-orange);
	color: #fff !important;
	border: none;
	border-radius: 4px;
	padding: 0.7em 1.4em;
	font-size: 1em;
	cursor: pointer;
	display: inline-block;
	text-decoration: none !important;
	margin-top: 1.5em;
}

.iamcbwk-button:hover,
.iamcbwk-stap1 button:hover,
.iamcbwk-stap2 button:hover {
	background: var(--iamcbwk-orange-dark);
}

.iamcbwk-resultaat .iamcbwk-label {
	font-size: 1.2em;
}

.iamcbwk-disclaimer {
	margin-top: 2em;
	font-size: 0.85em;
	opacity: 0.75;
}

.iamcbwk-notice {
	background: #fef3c7;
	border-left: 4px solid var(--iamcbwk-orange-dark);
	padding: 0.75em 1em;
	color: var(--iamcbwk-tekst) !important;
}

.iamcbwk-pdf-form {
	margin: 1em 0 2em;
}

.iamcbwk-scores-tabel {
	border-collapse: collapse;
	width: 100%;
	max-width: 480px;
	background: #fff;
}

.iamcbwk-scores-tabel th,
.iamcbwk-scores-tabel td {
	border: 1px solid #d1d5db;
	padding: 0.5em;
	text-align: left;
	background: #fff;
	color: var(--iamcbwk-tekst) !important;
}

/* ---------- Layout: sticky zijbalk (JS-gestuurd) + vragenkolom ---------- */

.iamcbwk-scan-layout {
	display: flex;
	align-items: flex-start;
	gap: 2.5em;
}

.iamcbwk-sidebar {
	flex: 0 0 300px;
	position: relative;
}

.iamcbwk-sidebar-inner {
	/* JS zet hier tijdens scrollen inline position:fixed op, en verplaatst
	   het element naar document.body — geen CSS-klasse nodig. */
}

.iamcbwk-vragen-kolom {
	flex: 1;
	min-width: 0;
}

@media (max-width: 782px) {
	.iamcbwk-scan-layout {
		flex-direction: column;
	}
	.iamcbwk-sidebar {
		width: 100%;
	}
}

/* ---------- As-secties ---------- */

.iamcbwk-as h3 {
	margin-top: 2em;
	border-bottom: 3px solid var(--iamcbwk-orange);
	padding-bottom: 0.3em;
	color: var(--iamcbwk-orange) !important;
}

.iamcbwk-vraag {
	margin: 1.2em 0;
	padding: 1em;
	background: #f7f8fa;
	border-radius: 6px;
	border-left: 3px solid transparent;
}

.iamcbwk-vraagtekst {
	font-weight: 600;
	margin: 0 0 0.6em;
}

.iamcbwk-opties label {
	margin-right: 1.2em;
	font-weight: normal;
}

.iamcbwk-toelichting {
	display: block;
	width: 100%;
	margin-top: 0.6em;
	min-height: 2.5em;
	box-sizing: border-box;
	background: #fff !important;
	border: 1px solid #d1d5db;
}

.iamcbwk-opslag-status {
	display: inline-block;
	margin-top: 0.4em;
	font-size: 0.85em;
	color: #16a34a !important;
}

.iamcbwk-vraag--onbeantwoord {
	border-left-color: #dc2626;
	background: #fef2f2;
	box-shadow: 0 0 0 1px #dc2626;
}

/* ---------- Radar ---------- */

#iamcbwk-radar-frontend {
	margin: 0 0 1.2em;
}

/* ---------- Voortgang ---------- */

.iamcbwk-voortgang-wrap {
	margin-bottom: 1.4em;
}

.iamcbwk-voortgang-balk-buiten {
	background: #e5e7eb;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.iamcbwk-voortgang-balk-binnen {
	background: var(--iamcbwk-orange);
	height: 100%;
	transition: width 0.3s ease;
}

.iamcbwk-voortgang-tekst {
	margin: 0.5em 0 0;
	font-size: 0.9em;
}

.iamcbwk-tip {
	margin: 0.6em 0 0;
	font-size: 0.82em;
	font-style: italic;
	opacity: 0.85;
}

/* ---------- As-navigatie (sprongknoppen) ---------- */

.iamcbwk-as-nav {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.iamcbwk-as-link {
	display: block;
	padding: 0.5em 0.8em;
	border-radius: 4px;
	border: 1px solid #d1d5db;
	background: #fff;
	text-decoration: none !important;
	font-size: 0.88em;
	color: var(--iamcbwk-tekst) !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.iamcbwk-as-link:hover {
	border-color: var(--iamcbwk-orange);
}

.iamcbwk-as-link.active {
	background: var(--iamcbwk-orange);
	border-color: var(--iamcbwk-orange);
	color: #fff !important;
}

/* ---------- Indienen ---------- */

.iamcbwk-indienen-wrap {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid #d1d5db;
	text-align: right;
}

.iamcbwk-indien-waarschuwing {
	margin-top: 0.8em;
	text-align: right;
	color: #dc2626 !important;
	font-weight: 600;
}