/**
 * Schadefonds Korte vragenlijst — frontend styles.
 * Visueel afgestemd op Figma design (nodes 1:252 en 1:168):
 * - Twee kolommen: links "Uitleg", rechts formulier op licht-blauw (#d0ebf5)
 * - Fonts: open_sansregular / open_sanssemibold / open_sansbold / open_sansextrabold
 *   (worden door theme geladen; fallback op systeem sans-serif)
 * - Kleuren volgen SGM tokens: sgm-zwart #343035, wcag-tekst-blauw #015593,
 *   wcag-blauw-op-blauw #00497e
 * - WCAG 2.2 AA: focus-visible states, contrast, keyboard nav, radio semantics.
 */

/* ========== Tokens ========== */
.qs-root {
	--qs-zwart: #343035;
	--qs-tekst-blauw: #015593;
	--qs-blauw-donker: #00497e;
	--qs-blauw-licht: #d0ebf5;
	--qs-blauw-licht-alt: #eaf4fa;
	--qs-wit: #ffffff;
	--qs-grijs-licht: #f6f4ef;
	--qs-border: rgba(0, 73, 126, 0.2);
	--qs-danger: #a11c1c;

	--qs-font-regular: "open_sansregular", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--qs-font-semibold: "open_sanssemibold", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--qs-font-bold: "open_sansbold", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--qs-font-extrabold: "open_sansextrabold", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--qs-radius: 10px;
	--qs-radius-sm: 8px;
	--qs-shadow: 0 11px 24px rgba(0, 0, 0, 0.1), 0 43px 43px rgba(0, 0, 0, 0.09), 0 97px 58px rgba(0, 0, 0, 0.05);

	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	color: var(--qs-zwart);
	font-family: var(--qs-font-regular);
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
}

.qs-root *,
.qs-root *::before,
.qs-root *::after {
	box-sizing: border-box;
}

/* ========== Preview banner ========== */
.qs-preview-banner {
	max-width: 1170px;
	margin: 0 auto 1rem;
	padding: 0.75rem 1rem;
	background: #fff9e6;
	border: 1px solid #f0d98a;
	border-radius: var(--qs-radius);
	font-size: 0.9rem;
	color: #6b5700;
	font-family: var(--qs-font-regular);
	text-align: center;
}

/* ========== Modal card (twee kolommen) ========== */
.qs-modal {
	background: var(--qs-wit);
	border-radius: var(--qs-radius);
	box-shadow: var(--qs-shadow);
	overflow: hidden;
	position: relative;
}

.qs-modal-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
	position: relative;
}

/* ========== Links: Uitleg-paneel ========== */
/* .qs-uitleg is de grid-cel; hij strekt automatisch mee met de hoogte van
 * .qs-panel (grid align-items: stretch). De echte content zit in de
 * .qs-uitleg-scroll wrapper — die is absolute-gepositioneerd zodat hij géén
 * height bijdraagt aan het grid, waardoor .qs-panel de rij-hoogte bepaalt en
 * de linkerkant intern scrollt als z'n content langer is. */
.qs-uitleg {
	background: var(--qs-wit);
	color: var(--qs-zwart);
	position: relative;
	padding: 0;
	overflow: hidden;
}

.qs-uitleg-scroll {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: 3rem 3rem 3rem 3.5rem;
	max-height: 100%;
}

.qs-uitleg-title {
	font-family: var(--qs-font-bold);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--qs-zwart);
	margin: 0 0 1rem;
	padding: 0;
}

.qs-uitleg-text {
	font-family: var(--qs-font-regular);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--qs-zwart);
	margin: 0;
}

.qs-uitleg-text p:first-child { margin-top: 0; }
.qs-uitleg-text p:last-child { margin-bottom: 0; }

.qs-uitleg-hint {
	color: #6d6a70;
	font-style: italic;
}

.qs-uitleg-intro p + p { margin-top: 0.75rem; }
.qs-uitleg-intro ul,
.qs-uitleg-intro ol {
	margin: 0.75rem 0;
	padding-left: 1.5rem;
}
.qs-uitleg-intro a {
	color: var(--qs-tekst-blauw);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.qs-uitleg-intro a:hover,
.qs-uitleg-intro a:focus-visible { color: var(--qs-blauw-donker); }

/* Muis-hint: getoond op scherm 1 wanneer er nog geen antwoord is aangeklikt.
 * Toont een subtiel muisje + instructie ("Klik op de keuzes voor een uitleg"). */
.qs-uitleg-mouse {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #6d6a70;
}
.qs-uitleg-mouse-icon {
	width: 32px;
	height: 32px;
	margin-bottom: 0.5rem;
	transform: rotate(90deg);
}
.qs-uitleg-mouse-icon path {
	fill: currentColor;
}
.qs-uitleg-mouse-text {
	font-family: var(--qs-font-semibold);
	font-size: 1rem;
	line-height: 1.4;
	color: #6d6a70;
	margin: 0;
	max-width: 260px;
}

.qs-uitleg-antwoord {
	margin-top: 1.75rem;
	padding: 1.25rem 1.5rem;
	background: var(--qs-blauw-licht);
	border-radius: var(--qs-radius-sm);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--qs-zwart);
	font-family: var(--qs-font-regular);
}

.qs-uitleg-antwoord p:first-child { margin-top: 0; }
.qs-uitleg-antwoord p:last-child { margin-bottom: 0; }

.qs-uitleg-image {
	margin-top: auto;
}

/* ========== Advice mode: linker kolom is een afbeelding ========== */
.qs-modal-inner--advice .qs-uitleg {
	padding: 0;
	background: var(--qs-grijs-licht);
	overflow: hidden;
	min-height: 100%;
}

.qs-modal-inner--advice .qs-advice-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	min-height: 520px;
}

/* ========== Rechts: formulier-paneel ========== */
.qs-panel {
	background: var(--qs-blauw-licht);
	padding: 2.25rem 3rem 5.5rem; /* extra bottom-padding voor de absoluut geplaatste nav */
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Close-icon rechtsboven binnen het paneel — blauwe cirkel + wit kruisje,
 * consistent met de bestaande popup uit het theme (variant A overschrijft
 * daar de oranje cirkel ook naar blauw via CSS). */
.qs-panel-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.15s ease;
	z-index: 3;
}
.qs-panel-close svg {
	width: 25px;
	height: 25px;
	pointer-events: none;
	transition: transform 0.15s ease;
}
/* Oranje cirkel (eerste path in de SVG) forceren naar blauw. Dit spiegelt
 * wat de bestaande popup-close in het theme al doet, zodat A en B er hetzelfde
 * uitzien zonder dat we de SVG-bron hoeven aan te passen. */
.qs-panel-close svg path:nth-child(1) {
	fill: var(--qs-tekst-blauw);
}
.qs-panel-close:hover svg { transform: scale(1.08); }
.qs-panel-close:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 3px;
}

/* ========== Progress ========== */
/* Witte pill met blauwe fill — visueel identiek aan variant A:
 * totaal 17px hoog, 3px witte "ring" boven/onder en aan de zijkanten. */
.qs-progress {
	background: var(--qs-wit);
	padding: 3px;
	border-radius: 25px;
	margin-bottom: 1.75rem;
	width: 236px;
	max-width: calc(100% - 3.5rem);
	box-sizing: border-box;
	height: 17px;
}

.qs-progress-track {
	height: 11px;
	background: var(--qs-wit);
	border-radius: 25px;
	overflow: hidden;
}

.qs-progress-fill {
	height: 100%;
	background: var(--qs-blauw-donker);
	border-radius: 25px;
	transition: width 0.35s ease;
	min-width: 2%;
}

/* Screen-reader tekst zit al in .qs-sr-only, dus geen zichtbare stap-tekst. */

/* ========== Form ========== */
.qs-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
}

.qs-field {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.qs-legend {
	font-family: var(--qs-font-bold);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--qs-zwart);
	margin: 0 0 1.25rem;
	padding: 0;
	width: 100%;
	display: block;
}
.qs-legend:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 4px;
	border-radius: 4px;
}

.qs-required {
	color: var(--qs-danger);
	font-family: var(--qs-font-semibold);
	font-size: 0.9em;
	margin-left: 0.25em;
}

.qs-help-inline {
	font-family: var(--qs-font-regular);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--qs-zwart);
	margin: -0.5rem 0 1rem;
	padding: 0;
}

/* ========== Options ========== */
.qs-options {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qs-choice {
	position: relative;
	margin: 0;
	padding: 0;
}

.qs-choice input[type="radio"] {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}

.qs-choice-label {
	display: block;
	padding: 1rem 1.25rem;
	background: var(--qs-wit);
	border: 1.5px solid transparent;
	border-radius: 0;
	font-family: var(--qs-font-regular);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--qs-zwart);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	position: relative;
	z-index: 0;
}

.qs-choice input[type="radio"]:hover + .qs-choice-label,
.qs-choice-label:hover {
	border-color: var(--qs-tekst-blauw);
	background: var(--qs-blauw-licht-alt);
}

.qs-choice input[type="radio"]:checked + .qs-choice-label {
	border-color: var(--qs-blauw-donker);
	background: var(--qs-wit);
	box-shadow: 0 0 0 1px var(--qs-blauw-donker);
}

/* Vinkje vóór de tekst wanneer de optie geselecteerd is — spiegelt het
 * gedrag van variant A ('\2713' = ✓ unicode checkmark). */
.qs-choice input[type="radio"]:checked + .qs-choice-label::before {
	content: "\2713";
	color: var(--qs-blauw-donker);
	font-weight: 700;
	margin-right: 0.75rem;
	display: inline-block;
}

.qs-choice input[type="radio"]:focus-visible + .qs-choice-label {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 3px;
}

/* Verplicht ivm WCAG: verhoog border-dikte in high-contrast/forced-colors */
@media (prefers-contrast: more), (forced-colors: active) {
	.qs-choice-label {
		border-color: CanvasText;
		border-width: 2px;
	}
	.qs-choice input[type="radio"]:checked + .qs-choice-label {
		border-width: 3px;
	}
}

/* ========== Mobile-only inline help + choice tooltip ========== */
/* Op desktop staat de uitleg links in de aside; op mobiel klapt de aside weg
 * en verschijnen deze twee elementen inline in het formulier. */
.qs-mobile-help,
.qs-choice-tooltip {
	display: none;
}

/* ========== Error ========== */
.qs-error {
	color: var(--qs-danger);
	font-family: var(--qs-font-semibold);
	font-size: 0.9rem;
	margin-top: 0.5rem;
	min-height: 1.25em;
}
.qs-error:empty { display: none; }

/* ========== Navigation ========== */
/* Nav absoluut onderaan het paneel; knoppen vast in de linker- en
 * rechteronderhoek van de blauwe rechterhelft. Matcht visueel met variant A. */
.qs-nav {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	margin: 0;
}

.qs-btn {
	font-family: var(--qs-font-bold);
	font-size: 1rem;
	line-height: 1.2;
	border-radius: var(--qs-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}

/* Volgende — blauwe knop rechtsonder in de hoek, wit met pijl-rechts. */
.qs-btn-primary {
	background: var(--qs-blauw-donker);
	color: var(--qs-wit);
	border-color: var(--qs-blauw-donker);
	padding: 1rem 1.25rem 1rem 1.75rem;
	min-width: 200px;
}
.qs-btn-primary:hover,
.qs-btn-primary:focus-visible {
	background: #003a67;
	border-color: #003a67;
	color: var(--qs-wit);
	text-decoration: none;
}
.qs-btn-primary:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 3px;
}

/* Vorige — geen border in default state; verschijnt pas bij hover/focus,
 * matcht daarmee variant A. Transparante border in default voorkomt dat de
 * knop verspringt zodra de border verschijnt. */
.qs-btn-back {
	background: transparent;
	color: var(--qs-tekst-blauw);
	border: 1px solid transparent;
	padding: 1rem 1.75rem 1rem 1.25rem;
	font-family: var(--qs-font-bold);
	text-decoration: none;
}
.qs-btn-back:hover,
.qs-btn-back:focus-visible {
	color: var(--qs-tekst-blauw);
	background: rgba(1, 85, 147, 0.08);
	border-color: var(--qs-tekst-blauw);
	text-decoration: none;
}
.qs-btn-back:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 3px;
}

.qs-btn-icon {
	width: 17px;
	height: 15px;
	display: inline-block;
	flex: none;
}

.qs-btn-text { display: inline-block; }
.qs-nav-spacer { flex: 1 1 auto; }

/* ========== Advies (rechts) ========== */
.qs-advice {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.qs-advice-title {
	font-family: var(--qs-font-bold);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--qs-zwart);
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.qs-advice-title-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	display: inline-block;
}
.qs-advice-title-icon--positive { color: #1f8a52; }
.qs-advice-title-icon--negative { color: #c8352c; }

.qs-advice-body {
	font-family: var(--qs-font-regular);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--qs-zwart);
	background: var(--qs-wit);
	padding: 1.5rem 1.75rem;
	border-radius: var(--qs-radius-sm);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.qs-advice-body a {
	color: var(--qs-tekst-blauw);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.qs-advice-body a:hover,
.qs-advice-body a:focus-visible {
	color: var(--qs-blauw-donker);
}
.qs-advice-body b,
.qs-advice-body strong {
	font-family: var(--qs-font-bold);
	color: var(--qs-zwart);
}

/* Vaste positie linksonder/rechtsonder in het paneel — matcht de nav-layout
 * van de vraag-pagina's. Voorkomt dat het advies-scherm onnodig hoog wordt
 * omdat de knoppen anders inline onder de content zouden hangen, bovenop de
 * padding-bottom-reservering van .qs-panel. */
.qs-advice-actions {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.qs-restart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--qs-font-bold);
	font-size: 1rem;
	color: var(--qs-zwart);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	padding: 0.5rem 0.25rem;
	cursor: pointer;
}
.qs-restart:hover,
.qs-restart:focus-visible {
	color: var(--qs-tekst-blauw);
}
.qs-restart:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 3px;
	border-radius: 4px;
}

.qs-restart-icon {
	width: 1rem;
	height: 1rem;
}

/* ========== Answers summary (verborgen tenzij toegankelijkheid) ========== */
.qs-summary {
	margin: 0.5rem 0 0;
	font-family: var(--qs-font-regular);
	font-size: 0.95rem;
	color: var(--qs-zwart);
}
.qs-summary summary {
	cursor: pointer;
	font-family: var(--qs-font-semibold);
	color: var(--qs-tekst-blauw);
	padding: 0.5rem 0;
	list-style: none;
}
.qs-summary summary::-webkit-details-marker { display: none; }
.qs-summary summary:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 3px;
	border-radius: 4px;
}
.qs-summary-list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.qs-summary-list li strong {
	display: block;
	font-family: var(--qs-font-semibold);
	color: var(--qs-blauw-donker);
	margin-bottom: 0.25rem;
}

/* ========== Screen reader only ========== */
.qs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ========== Fallback foutmelding ========== */
.qs-fatal {
	padding: 1.5rem;
	color: var(--qs-danger);
	font-family: var(--qs-font-semibold);
	background: #fdecec;
	border-radius: var(--qs-radius);
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
	.qs-modal-inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	/* Verberg de linker uitleg-aside volledig op mobiel; de content komt
	 * inline terug via .qs-mobile-help en .qs-choice-tooltip. */
	.qs-uitleg,
	.qs-modal-inner--advice .qs-uitleg {
		display: none;
	}
	.qs-panel {
		/* padding-top afgestemd zodat de progressbar (17px) verticaal precies
		 * gecentreerd is met de close-button (44px op top:1.25rem = center 42px).
		 * 42 - 17/2 = 33.5px = ~2.1rem. */
		padding: 2.1rem 1.5rem 5.5rem;
	}
	.qs-progress {
		margin-bottom: 1.25rem;
		margin-top: 0.6rem;
	}

	/* Uitleg bij de vraag komt onder de legend — transparente kop + tekst,
	 * matcht de A-versie. Wanneer een antwoord gekozen is verplaatst JS dit
	 * block naar binnen de gekozen .qs-choice (zie hieronder). */
	.qs-mobile-help {
		display: block;
		background: transparent;
		padding: 0;
		border-radius: 0;
		margin: 0.25rem 0 1.5rem;
		font-size: 1rem;
		line-height: 1.55;
		color: var(--qs-zwart);
	}
	.qs-mobile-help-title {
		font-family: var(--qs-font-bold);
		font-size: 1.5rem;
		line-height: 2rem;
		margin: 0 0 0.5rem;
		font-weight: 700;
		color: var(--qs-zwart);
	}
	.qs-mobile-help-text > p:first-child { margin-top: 0; }
	.qs-mobile-help-text > p:last-child  { margin-bottom: 0; }
	.qs-mobile-help-text ul,
	.qs-mobile-help-text ol {
		margin: 0.5rem 0;
		padding-left: 1.5rem;
	}
	/* Wanneer de mobile-help binnen een .qs-choice is verplaatst: hij zit
	 * dan in dezelfde witte kaart als label + tooltip, dus alleen wat
	 * horizontale padding en verticale spacing tussen delen. */
	.qs-choice > .qs-mobile-help {
		margin: 0.25rem 0 0.75rem;
		padding: 0 1.25rem;
	}

	/* Op scherm 1 (intro-tekst) verbergt de meta-zin "In dit scherm vindt u
	 * uitleg…" zodra de intro binnen een gekozen antwoord terechtkomt. Vóór
	 * selectie (in het top-blok) blijft de volledige intro zichtbaar. */
	.qs-choice > .qs-mobile-help[data-mobile-help-type="intro"] .qs-mobile-help-text > p:first-child {
		display: none;
	}

	/* Antwoord-uitleg zit visueel binnen dezelfde witte kaart als het gekozen
	 * label. We laten .qs-choice zelf de rand/achtergrond dragen zodra er een
	 * radio in checked is; label en tooltip binnenin worden transparent zodat
	 * ze samen één blok vormen. */
	.qs-choice:has(input[type="radio"]:checked) {
		background: var(--qs-wit);
		border: 1.5px solid var(--qs-blauw-donker);
		box-shadow: 0 0 0 1px var(--qs-blauw-donker);
	}
	.qs-choice:has(input[type="radio"]:checked) > .qs-choice-label {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}
	.qs-choice input[type="radio"]:checked ~ .qs-choice-tooltip {
		display: block;
		background-color: #D0EBF5;
		padding: 1.5rem;
		/* 15px inset rondom binnen de witte kaart. */
		margin: 15px;
	}
	.qs-choice-tooltip { font-size: 1rem; line-height: 1.55; }
	/* Het geneste .vraag-uitleg-blok (indien in de tooltip aanwezig) heeft
	 * al z'n eigen light-blue styling van A — hier laten we het met rust. */
	.qs-choice-tooltip .vraag-uitleg {
		background: transparent;
		padding: 0;
		margin-top: 0;
	}
	.qs-choice-tooltip p:first-child { margin-top: 0; }
	.qs-choice-tooltip p:last-child { margin-bottom: 0; }
	.qs-choice-tooltip ul,
	.qs-choice-tooltip ol {
		margin: 0.5rem 0;
		padding-left: 1.5rem;
	}

	.qs-legend,
	.qs-uitleg-title,
	.qs-advice-title {
		font-size: 1.3rem;
	}
}

@media (max-width: 480px) {
	.qs-uitleg { padding: 1.5rem 1.25rem 1rem; }
	.qs-panel { padding: 1.5rem 1.25rem 5.5rem; }
	.qs-nav {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		gap: 0.5rem;
	}
	.qs-btn-primary {
		min-width: 0;
		padding: 0.85rem 1rem 0.85rem 1.25rem;
		gap: 0.5rem;
	}
	.qs-btn-back {
		padding: 0.85rem 1.25rem 0.85rem 1rem;
		gap: 0.5rem;
	}
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
	.qs-root *,
	.qs-root *::before,
	.qs-root *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Variant C — extra CTA na advies + follow-up scherm.
   Alle styles hier zijn scoped op klassen die ALLEEN in variant C worden
   gerenderd. Variant A/B zien deze markup niet en worden dus niet beïnvloed.
   ========================================================================== */

.qs-root {
	--qs-paars: #6f2ca2;
	--qs-paars-donker: #571f80;
	--qs-paars-hover: #4a1a6d;
}

/* --- Blauwe "Start uw aanvraag" knop (hergebruikt qs-btn-primary) --- */
.qs-btn-c-start {
	/* Neem exact dezelfde vormgeving als de Volgende-knop over — geen extra
	   styling nodig, alleen een aparte hook zodat we later kunnen bijstellen
	   zonder qs-btn-primary te raken. */
}

/* --- Paarse "Ga naar slachtofferhulp Nederland" CTA bij negatief advies --- */
.qs-advice-c-extras {
	margin: 1rem 0 0.5rem;
	display: flex;
	justify-content: flex-start;
}

.qs-btn-negative-cta {
	background: var(--qs-paars);
	color: var(--qs-wit);
	border: 1px solid var(--qs-paars);
	padding: 1rem 1.5rem;
	min-width: 240px;
	font-family: var(--qs-font-bold);
	text-decoration: none;
}
.qs-btn-negative-cta:hover,
.qs-btn-negative-cta:focus-visible {
	background: var(--qs-paars-hover);
	border-color: var(--qs-paars-hover);
	color: var(--qs-wit);
	text-decoration: none;
}
.qs-btn-negative-cta:focus-visible {
	outline: 2px solid var(--qs-paars-donker);
	outline-offset: 3px;
}

/* --- Follow-up scherm ná "Start uw aanvraag" --- */
.qs-c-follow-up {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Match .qs-legend styling zodat de titel op het follow-up scherm identiek
   oogt aan de vraag-titels in de rest van de vragenlijst. */
.qs-c-follow-up-title {
	font-family: var(--qs-font-bold);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--qs-zwart);
	margin: 0 0 1.25rem;
	padding: 0;
	outline: none;
}
.qs-c-follow-up-title:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 4px;
	border-radius: 4px;
}

.qs-c-follow-up-image img {
	width: 100%;
	height: auto;
	border-radius: var(--qs-radius);
	display: block;
}

/* Grid van tegels — 3 kolommen op tablet/desktop zodat de standaard-set van
   3 varianten (zelf / gemachtigde / wettelijk vertegenwoordiger) op één rij
   past. Op smallere schermen vallen ze terug op 1 kolom. */
.qs-c-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0;
}
@media (min-width: 640px) {
	.qs-c-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.qs-c-tile {
	background: var(--qs-wit);
	border: 1px solid var(--qs-border);
	border-radius: var(--qs-radius);
	padding: 0.85rem 0.9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	color: var(--qs-zwart);
	text-align: center;
}
.qs-c-tile:hover,
.qs-c-tile:focus-within {
	border-color: var(--qs-tekst-blauw);
	box-shadow: 0 4px 12px rgba(1, 85, 147, 0.08);
}

/* Icoon boven de tegel-titel — matcht visueel de checklist-tegel, die ook
   een icoon boven de titel heeft. Zwart en gecentreerd. */
.qs-c-tile-icon--header {
	width: 28px;
	height: 28px;
	color: var(--qs-zwart);
	flex: none;
	align-self: center;
}

.qs-c-tile-title {
	font-family: var(--qs-font-bold);
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--qs-zwart);
	margin: 0;
	text-align: center;
}

/* Actie-pillen horizontaal onderaan de tegel — twee compacte badges
   (icoon + kort label). Passen zo binnen een tegel van ~200px breed en
   houden de tegel-hoogte laag. */
.qs-c-tile-actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	width: 100%;
	margin-top: auto;
}

.qs-c-tile-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--qs-radius-sm);
	background: var(--qs-blauw-licht-alt);
	color: var(--qs-zwart);
	font-family: var(--qs-font-semibold);
	font-size: 0.85rem;
	text-decoration: none;
	border: 1px solid transparent;
	line-height: 1.2;
}
.qs-c-tile-action:hover,
.qs-c-tile-action:focus-visible {
	background: var(--qs-blauw-licht);
	border-color: var(--qs-tekst-blauw);
	color: var(--qs-zwart);
	text-decoration: none;
}
.qs-c-tile-action:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 2px;
}

/* Kleine icoontjes in de actie-pillen (online/PDF): zwart, iets kleiner
   dan de header omdat ze naast korte labels ("Online" / "PDF") staan. */
.qs-c-tile-action .qs-c-tile-icon {
	width: 16px;
	height: 16px;
	color: var(--qs-zwart);
	flex: none;
}

/* --- Checklist-blok onderaan --- */
.qs-c-checklist-block {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Intro-tekst boven de checklist-tegel in h3-stijl (past bij de tegel-titels
   op deze pagina, en gelijk aan de rest van de KV waar h3 in font-bold /
   zwart wordt gerenderd). */
.qs-c-checklist-intro {
	margin: 0.75rem 0 0.25rem;
	color: var(--qs-zwart);
	font-family: var(--qs-font-bold);
	font-size: 1rem;
	line-height: 1.3;
}

.qs-c-tile--checklist {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--qs-wit);
	color: var(--qs-zwart);
	border: 1px solid var(--qs-border);
	border-radius: var(--qs-radius);
	font-family: var(--qs-font-bold);
	text-decoration: none;
	max-width: 320px;
}
.qs-c-tile--checklist:hover,
.qs-c-tile--checklist:focus-visible {
	background: var(--qs-wit);
	border-color: var(--qs-tekst-blauw);
	color: var(--qs-zwart);
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(1, 85, 147, 0.08);
}
.qs-c-tile--checklist:focus-visible {
	outline: 2px solid var(--qs-blauw-donker);
	outline-offset: 2px;
}
/* Uitleg-kolom-image op het follow-up scherm: gebruikt geen padding van .qs-uitleg
   zodat de foto edge-to-edge staat, matcht Figma. */
.qs-modal--c-follow-up .qs-c-follow-up-image {
	padding: 0;
	display: flex;
	align-items: stretch;
	background: transparent;
}
.qs-modal--c-follow-up .qs-c-follow-up-image img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* Actie-balk in variant C: Vorige links, primaire actie rechts. Bij positief
   advies is de rechterknop de blauwe "Start uw aanvraag"; op het follow-up
   scherm is dat "Opnieuw invullen". space-between komt uit de basis-styling
   van .qs-advice-actions, dus expliciet niks overschrijven — wel voor de
   zekerheid uitlijning bevestigen. */
.qs-advice-actions--c-positive,
.qs-advice-actions--c-follow-up {
	justify-content: space-between;
}

@media (max-width: 480px) {
	.qs-c-follow-up-title {
		font-size: 1.25rem;
	}
	.qs-c-tile { padding: 0.9rem 1rem; }
	.qs-btn-negative-cta {
		min-width: 0;
		width: 100%;
	}
}