.mv-vraagvak {
	position: fixed;
	inset-inline-start: max(12px, env(safe-area-inset-left, 0px));
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	z-index: 95;
	font-family: var(--mv-font-tekst);
	color: var(--mv-tekst);
	max-width: calc(100vw - 24px);
}

.mv-vraagvak__knop {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0 1.1em 0 0.9em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--mv-accent);
	color: var(--mv-accent-contrast);
	font-weight: var(--mv-gewicht-sterk);
	font-size: 0.95rem;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--mv-schaduw-hoog);
	cursor: pointer;
	transition: background-color var(--mv-overgang);
}

.mv-vraagvak__knop::-webkit-details-marker { display: none; }
.mv-vraagvak__knop::marker { content: ''; }
.mv-vraagvak__knop:hover { background: var(--mv-accent-hover); color: var(--mv-accent-contrast); }
.mv-vraagvak__knop:focus-visible { outline: 2px solid var(--mv-kop-kleur); outline-offset: 3px; }
.mv-vraagvak__knop .mv-icoon { width: 22px; height: 22px; flex: 0 0 22px; }

.mv-vraagvak__paneel {
	position: absolute;
	inset-inline-start: 0;
	bottom: calc(100% + 10px);
	width: min(calc(100vw - 24px), 400px);
	max-height: min(72vh, 600px);
	overflow: auto;
	padding: var(--mv-ruimte-5);
	background: var(--mv-bg);
	color: var(--mv-tekst);
	border: 1px solid var(--mv-rand);
	border-radius: var(--mv-radius-vlak);
	box-shadow: var(--mv-schaduw-hoog);
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
	.mv-vraagvak[open] .mv-vraagvak__paneel { animation: mv-vraagvak-in 160ms ease-out; }
	@keyframes mv-vraagvak-in { from { opacity: 0; transform: translateY(6px); } }
}

.mv-vraagvak__sluiten {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mv-tekst-zacht);
	cursor: pointer;
}
.mv-vraagvak__sluiten .mv-icoon { width: 18px; height: 18px; }
.mv-vraagvak__sluiten:hover, .mv-vraagvak__sluiten:focus-visible { color: var(--mv-accent-tekst); background: var(--mv-accent-zacht); }
.mv-vraagvak__sluiten:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }

.mv-vraagvak__kop {
	margin: 0 0 var(--mv-ruimte-2);
	padding-inline-end: 40px;
	font-family: var(--mv-font-kop);
	font-size: var(--mv-fs-h4);
	font-weight: var(--mv-gewicht-kop);
	line-height: 1.25;
	color: var(--mv-kop-kleur);
}
.mv-vraagvak__kop:focus { outline: none; }
.mv-vraagvak__intro { margin: 0 0 var(--mv-ruimte-3); font-size: var(--mv-fs-klein); color: var(--mv-tekst-zacht); }

.mv-vraagvak .mv-zoekformulier { margin: 0; }
.mv-vraagvak .mv-zoekformulier__veld { display: flex; align-items: stretch; max-width: none; }
.mv-vraagvak .mv-zoekformulier input[type="search"] { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; }
.mv-vraagvak .mv-zoekformulier__hint { display: block; margin: 0.4em 0 0; font-size: 0.75rem; line-height: 1.4; }

.mv-vraagvak__antwoord { margin-top: var(--mv-ruimte-4); padding-top: var(--mv-ruimte-4); border-top: 1px solid var(--mv-rand); }
.mv-vraagvak__antwoord[hidden] { display: none; }
.mv-vraagvak__antwoord .mv-vraagvak__kop { padding-inline-end: 0; }
.mv-vraagvak__bezig, .mv-vraagvak__geen { margin: 0 0 var(--mv-ruimte-3); }
.mv-vraagvak__bezig { color: var(--mv-tekst-zacht); font-size: var(--mv-fs-klein); }
.mv-vraagvak__geen:focus { outline: none; }

.mv-vraagvak__tekst {
	margin: 0 0 var(--mv-ruimte-3);
	padding: 0 0 0 var(--mv-ruimte-3);
	border: 0;
	border-inline-start: 3px solid var(--mv-accent);
	font-size: 1em;
}
.mv-vraagvak__tekst p { margin: 0; }
.mv-vraagvak mark { background: var(--mv-accent-zacht); color: inherit; padding: 0 0.15em; border-radius: 3px; }

.mv-vraagvak__bron { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mv-ruimte-2) var(--mv-ruimte-3); margin: 0 0 var(--mv-ruimte-3); font-size: var(--mv-fs-klein); }
.mv-vraagvak a { color: var(--mv-accent-tekst); text-decoration: underline; text-underline-offset: 0.15em; }
.mv-vraagvak a:hover { color: var(--mv-kop-kleur); }
.mv-vraagvak__voorlezen { font: inherit; font-size: 0.9em; padding: 0.25em 0.8em; border-radius: 999px; border: 1px solid var(--mv-rand-sterk); background: transparent; color: inherit; cursor: pointer; }
.mv-vraagvak__voorlezen:hover, .mv-vraagvak__voorlezen:focus-visible { border-color: var(--mv-accent); color: var(--mv-accent-tekst); }
.mv-vraagvak__voorlezen[aria-pressed="true"] { background: var(--mv-accent); border-color: var(--mv-accent); color: var(--mv-accent-contrast); }

.mv-vraagvak__meer { list-style: none; display: grid; gap: var(--mv-ruimte-2); margin: 0 0 var(--mv-ruimte-3); padding: 0; font-size: var(--mv-fs-klein); }
.mv-vraagvak__fragment { color: var(--mv-tekst-zacht); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.mv-vraagvak__vervolg { display: flex; flex-wrap: wrap; gap: var(--mv-ruimte-2); margin: 0 0 var(--mv-ruimte-3); }
.mv-vraagvak__vervolg .mv-knop { padding: 0.8em 1.2em; min-height: 44px; text-decoration: none; }
.mv-vraagvak__vervolg .mv-knop:not(.mv-knop--lijn) { color: var(--mv-accent-contrast); }
.mv-vraagvak__vervolg .mv-knop--lijn { color: var(--mv-accent-tekst); }
.mv-vraagvak__alle { margin: 0; font-size: var(--mv-fs-klein); }

@media (max-width: 599px) {
	.mv-vraagvak__paneel {
		position: fixed;
		inset-inline: 8px;
		bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 56px);
		width: auto;
		max-height: calc(100vh - 110px);
		padding: var(--mv-ruimte-4);
	}
	.mv-vraagvak__vervolg .mv-knop { flex: 1 1 100%; }
}

html.mv-ruim .mv-vraagvak__knop { min-height: 48px; }
@media (pointer: coarse) { .mv-vraagvak__knop { min-height: 48px; } }

@media print { .mv-vraagvak { display: none; } }