/* ══════════════════════════════════════════════════════════════════════════
   INR Survey

   Het scherm waarin vragenlijsten worden samengesteld, uitgezet en ingevuld.
   Volgt de opmaak van de rest van de leeromgeving: witte vlakken met zachte
   randen, rustige kleuren, en de accentkleur alleen waar iets klikbaar is.
   ══════════════════════════════════════════════════════════════════════════ */

.inr-sv {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: #0F172A !important;
	padding: 4px 2px 40px !important;
}
.inr-sv * { box-sizing: border-box !important; }

/* ── Kop van het overzicht ───────────────────────────────────────────────── */
.inr-sv-kop {
	display: flex !important; align-items: flex-start !important; gap: 20px !important;
	margin-bottom: 22px !important; flex-wrap: wrap !important;
}
/* Het tekstblok in de kop mag groeien; zonder dit blijft het op zijn natuurlijke
   breedte staan en loopt een lange inleiding niet door. */
.inr-sv-kop > div:first-child { flex: 1 1 100% !important; min-width: 0 !important; }
.inr-sv-kop h2 {
	font-size: 21px !important; font-weight: 600 !important; margin: 0 0 4px !important;
	color: #0F172A !important; line-height: 1.25 !important;
}
.inr-sv-kop p {
	font-size: 13.5px !important; font-weight: 300 !important; color: #64748B !important;
	margin: 0 !important; line-height: 1.55 !important; max-width: 62ch !important;
}
/* De inleiding van een vragenlijst is geen korte uitleg onder een kop maar een
   tekst die de deelnemer leest. Die mag de volle breedte gebruiken, net als de
   tekstblokken eronder; anders staat hij in een smalle kolom terwijl de rest
   doorloopt. */
/* LET OP DE SELECTOR. Dit moet .inr-sv-kop p zijn en niet alleen de klasse: de
   regel hierboven heeft twee selectoren en wint anders, hoe laat deze ook staat
   en hoeveel !important je er ook bij zet. Dat is waarom de inleiding eerder in
   een smalle kolom bleef staan terwijl de tekst eronder wel doorliep. */
.inr-sv-kop p.inr-sv-kop-intro {
	max-width: none !important; width: 100% !important;
	font-size: 14px !important; color: #475569 !important;
	line-height: 1.65 !important; white-space: pre-wrap !important;
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.inr-sv-knop {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	padding: 10px 18px !important; border: 0 !important; border-radius: 999px !important;
	background: #0B0B0F !important; color: #fff !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 13.5px !important; font-weight: 500 !important;
	line-height: 1 !important; white-space: nowrap !important; margin-left: auto !important;
	transition: background .16s ease !important;
}
.inr-sv-knop:hover { background: #1E293B !important; }
.inr-sv-knop-licht {
	background: rgba(15,23,42,.05) !important; color: #0F172A !important; margin: 0 !important;
}
.inr-sv-knop-licht:hover { background: rgba(15,23,42,.09) !important; }

.inr-sv-terug {
	display: inline-flex !important; align-items: center !important; gap: 6px !important;
	border: 0 !important; background: transparent !important; padding: 6px 0 !important;
	color: #64748B !important; cursor: pointer !important; font-family: inherit !important;
	font-size: 13px !important; font-weight: 400 !important; margin-bottom: 16px !important;
}
.inr-sv-terug:hover { color: #0F172A !important; }
.inr-sv-terug::before { content: '\2190' !important; }

/* ── Het overzicht van vragenlijsten ─────────────────────────────────────── */
.inr-sv-rijen { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-sv-rij {
	display: flex !important; align-items: center !important; gap: 16px !important;
	width: 100% !important; padding: 15px 18px !important; text-align: left !important;
	border: 1px solid rgba(15,23,42,.08) !important; border-radius: 14px !important;
	background: #fff !important; cursor: pointer !important; font-family: inherit !important;
	transition: border-color .16s ease, box-shadow .16s ease !important;
}
.inr-sv-rij:hover {
	border-color: rgba(116,72,253,.35) !important;
	box-shadow: 0 4px 14px -6px rgba(11,11,15,.14) !important;
}
.inr-sv-rij-naam {
	font-size: 14.5px !important; font-weight: 500 !important; color: #0F172A !important;
	flex: 1 1 auto !important; min-width: 0 !important;
}
.inr-sv-rij-meta {
	display: flex !important; align-items: center !important; gap: 10px !important;
	flex: 0 0 auto !important; font-size: 12px !important; font-weight: 300 !important;
	color: #94A3B8 !important;
}
.inr-sv-taal {
	padding: 3px 8px !important; border-radius: 6px !important;
	background: rgba(15,23,42,.06) !important; color: #475569 !important;
	font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: .04em !important;
}
.inr-sv-concept {
	padding: 3px 8px !important; border-radius: 6px !important;
	background: rgba(251,146,60,.14) !important; color: #C2620F !important;
	font-weight: 500 !important; font-size: 11px !important;
}

/* ── Leeg en laden ───────────────────────────────────────────────────────── */
.inr-sv-leeg, .inr-sv-laden {
	padding: 34px 4px !important; color: #94A3B8 !important;
	font-size: 14px !important; font-weight: 300 !important;
}
.inr-sv-leeg h2 {
	font-size: 19px !important; font-weight: 600 !important; color: #0F172A !important;
	margin: 0 0 6px !important;
}
.inr-sv-leeg p { margin: 0 !important; line-height: 1.55 !important; }

/* ── Het bewerkscherm ────────────────────────────────────────────────────── */
.inr-sv-velden {
	display: grid !important; grid-template-columns: 1fr 200px !important;
	gap: 14px !important; margin-bottom: 24px !important;
}
.inr-sv-veld { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.inr-sv-veld-breed { grid-column: 1 / -1 !important; }
.inr-sv-veld > span {
	font-size: 11.5px !important; font-weight: 600 !important; color: #64748B !important;
	letter-spacing: .05em !important; text-transform: uppercase !important;
}
.inr-sv-vraag textarea { min-height: 78px !important; }
.inr-sv-veld input[type="text"],
.inr-sv-veld select,
.inr-sv-veld textarea,
.inr-sv-vraag textarea,
.inr-sv-optie input {
	width: 100% !important; padding: 10px 12px !important;
	border: 1px solid rgba(15,23,42,.12) !important; border-radius: 10px !important;
	background: #fff !important; color: #0F172A !important;
	font-family: inherit !important; font-size: 14px !important; line-height: 1.45 !important;
}
.inr-sv-veld input:focus,
.inr-sv-veld select:focus,
.inr-sv-veld textarea:focus,
.inr-sv-vraag textarea:focus,
.inr-sv-optie input:focus {
	outline: none !important; border-color: #7448FD !important;
	box-shadow: 0 0 0 3px rgba(116,72,253,.12) !important;
}

/* ── Een vraag ───────────────────────────────────────────────────────────── */
.inr-sv-vragen { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.inr-sv-vraag {
	padding: 16px !important; border: 1px solid rgba(15,23,42,.08) !important;
	border-radius: 14px !important; background: rgba(255,255,255,.7) !important;
}
.inr-sv-vraag-kop {
	display: flex !important; align-items: center !important; gap: 12px !important;
	margin-bottom: 10px !important; flex-wrap: wrap !important;
}
.inr-sv-nummer {
	flex: 0 0 auto !important; width: 24px !important; height: 24px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border-radius: 999px !important; background: rgba(116,72,253,.1) !important;
	color: #7448FD !important; font-size: 12px !important; font-weight: 600 !important;
}
.inr-sv-vraag-kop select {
	padding: 6px 10px !important; border: 1px solid rgba(15,23,42,.12) !important;
	border-radius: 8px !important; background: #fff !important;
	font-family: inherit !important; font-size: 13px !important; color: #0F172A !important;
}
.inr-sv-verplicht, .inr-sv-klaar {
	display: inline-flex !important; align-items: center !important; gap: 6px !important;
	font-size: 12.5px !important; font-weight: 300 !important; color: #64748B !important;
	cursor: pointer !important;
}
.inr-sv-verplicht input, .inr-sv-klaar input { margin: 0 !important; }
.inr-sv-weg {
	flex: 0 0 auto !important; margin-left: auto !important;
	width: 26px !important; height: 26px !important; padding: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border: 0 !important; border-radius: 8px !important; background: transparent !important;
	color: #94A3B8 !important; cursor: pointer !important; font-size: 18px !important;
	line-height: 1 !important; font-family: inherit !important;
}
.inr-sv-weg:hover { background: rgba(253,76,92,.1) !important; color: #C0392B !important; }

/* ── De opties van een keuzevraag ────────────────────────────────────────── */
.inr-sv-opties {
	margin-top: 10px !important; padding-left: 36px !important;
	display: flex !important; flex-direction: column !important; gap: 6px !important;
}
.inr-sv-opties[hidden] { display: none !important; }
.inr-sv-optie { display: flex !important; align-items: center !important; gap: 6px !important; }
.inr-sv-optie input { flex: 1 1 auto !important; padding: 7px 10px !important; font-size: 13px !important; }
.inr-sv-optie-erbij {
	align-self: flex-start !important; border: 0 !important; background: transparent !important;
	padding: 5px 0 !important; color: #7448FD !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 12.5px !important; font-weight: 500 !important;
}
.inr-sv-optie-erbij:hover { text-decoration: underline !important; }
.inr-sv-geen-vragen {
	padding: 22px 4px !important; color: #94A3B8 !important;
	font-size: 13.5px !important; font-weight: 300 !important; margin: 0 !important;
}

/* ── De voet van het bewerkscherm ────────────────────────────────────────── */
.inr-sv-voet {
	display: flex !important; align-items: center !important; gap: 16px !important;
	margin-top: 22px !important; padding-top: 18px !important;
	border-top: 1px solid rgba(15,23,42,.07) !important; flex-wrap: wrap !important;
}
/* Rechtsonder in het scherm hangt het paneel met de eerste stappen, en dat ligt
   over de onderkant van de pagina heen. De knop staat links, maar bij een korte
   vragenlijst valt het paneel er alsnog overheen. Deze ruimte houdt de onderkant
   vrij zodat de knop altijd aan te klikken is. */
.inr-sv-invul + .inr-sv-voet,
.inr-sv-voet { padding-bottom: 4px !important; }
.inr-sv .inr-sv-let-op { margin-bottom: 96px !important; }
.inr-sv-melding { font-size: 13px !important; color: #64748B !important; }

@media (max-width: 720px) {
	.inr-sv-velden { grid-template-columns: 1fr !important; }
	.inr-sv-knop { margin-left: 0 !important; }
	.inr-sv-opties { padding-left: 0 !important; }
}

/* ── Tabbladen: bij klanten of de vragenlijsten zelf ─────────────────────── */
.inr-sv-tabs {
	display: flex !important; gap: 4px !important; margin-bottom: 22px !important;
	padding: 4px !important; border-radius: 999px !important;
	background: rgba(15,23,42,.05) !important; width: fit-content !important;
}
.inr-sv-tab {
	padding: 8px 18px !important; border: 0 !important; border-radius: 999px !important;
	background: transparent !important; color: #64748B !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important;
	transition: background .16s ease, color .16s ease !important;
}
.inr-sv-tab:hover { color: #0F172A !important; }
.inr-sv-tab.is-actief { background: #fff !important; color: #0F172A !important;
	box-shadow: 0 1px 3px rgba(11,11,15,.08) !important; }

/* ── Een ronde aanzetten ─────────────────────────────────────────────────── */
.inr-sv-nieuw {
	display: flex !important; align-items: center !important; gap: 10px !important;
	margin-bottom: 22px !important; flex-wrap: wrap !important;
}
.inr-sv-nieuw select {
	flex: 1 1 260px !important; padding: 10px 12px !important;
	border: 1px solid rgba(15,23,42,.12) !important; border-radius: 10px !important;
	background: #fff !important; font-family: inherit !important; font-size: 14px !important;
	color: #0F172A !important;
}
.inr-sv-nieuw .inr-sv-knop { margin-left: 0 !important; }

/* ── De rondes van een klant ─────────────────────────────────────────────── */
.inr-sv-rondes { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-sv-ronde {
	padding: 16px 18px !important; border: 1px solid rgba(15,23,42,.08) !important;
	border-radius: 14px !important; background: #fff !important;
}
.inr-sv-ronde.is-lopend { border-color: rgba(61,158,99,.34) !important; background: rgba(61,158,99,.04) !important; }
.inr-sv-ronde-kop {
	display: flex !important; align-items: center !important; gap: 12px !important;
	margin-bottom: 12px !important; flex-wrap: wrap !important;
}
.inr-sv-ronde-naam { font-size: 14.5px !important; font-weight: 500 !important; color: #0F172A !important; }
.inr-sv-ronde-aantal {
	margin-left: auto !important; font-size: 12px !important; font-weight: 300 !important;
	color: #94A3B8 !important;
}
.inr-sv-loopt, .inr-sv-rij-meta .inr-sv-loopt {
	padding: 3px 9px !important; border-radius: 999px !important;
	background: rgba(61,158,99,.14) !important; color: #2F7A4D !important;
	font-size: 11px !important; font-weight: 600 !important;
}
.inr-sv-ronde-velden {
	display: flex !important; align-items: flex-end !important; gap: 12px !important;
	flex-wrap: wrap !important;
}
.inr-sv-ronde-velden label {
	display: flex !important; flex-direction: column !important; gap: 5px !important;
	font-size: 11px !important; font-weight: 600 !important; color: #64748B !important;
	letter-spacing: .04em !important; text-transform: uppercase !important;
}
.inr-sv-ronde-velden input[type="date"] {
	padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.12) !important;
	border-radius: 9px !important; background: #fff !important;
	font-family: inherit !important; font-size: 13.5px !important; color: #0F172A !important;
	text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important;
}
.inr-sv-aan {
	flex-direction: row !important; align-items: center !important; gap: 7px !important;
	text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important;
	font-size: 13px !important; padding-bottom: 9px !important; cursor: pointer !important;
}
.inr-sv-aan input { margin: 0 !important; }
.inr-sv-ronde-velden .inr-sv-knop { margin-left: 0 !important; margin-bottom: 1px !important; }
.inr-sv-ronde-velden .inr-sv-weg { margin-left: 0 !important; margin-bottom: 4px !important; }

/* ── Het scherm van de deelnemer ─────────────────────────────────────────── */
.inr-sv-rij-open { border-color: rgba(116,72,253,.28) !important; background: rgba(116,72,253,.03) !important; }
.inr-sv-dagen {
	padding: 3px 9px !important; border-radius: 999px !important;
	background: rgba(251,146,60,.14) !important; color: #C2620F !important;
	font-size: 11px !important; font-weight: 600 !important;
}
.inr-sv-ga { color: #7448FD !important; font-weight: 500 !important; font-size: 13px !important; }
.inr-sv-subkop {
	font-size: 12px !important; font-weight: 600 !important; color: #94A3B8 !important;
	letter-spacing: .06em !important; text-transform: uppercase !important;
	margin: 28px 0 10px !important;
}

/* ── Het invullen ────────────────────────────────────────────────────────── */
.inr-sv-invul { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.inr-sv-iv {
	padding: 18px !important; border: 1px solid rgba(15,23,42,.08) !important;
	border-radius: 14px !important; background: #fff !important;
	transition: border-color .2s ease, background .2s ease !important;
}
.inr-sv-iv.is-mist { border-color: rgba(253,76,92,.45) !important; background: rgba(253,76,92,.03) !important; }
.inr-sv-iv-vraag {
	display: flex !important; align-items: flex-start !important; gap: 12px !important;
	margin-bottom: 12px !important;
}
.inr-sv-iv-vraag > span:last-child {
	font-size: 14.5px !important; font-weight: 500 !important; color: #0F172A !important;
	line-height: 1.45 !important;
}
.inr-sv-ster { color: #FD4C5C !important; font-style: normal !important; }
.inr-sv-keuzes { display: flex !important; flex-direction: column !important; gap: 0 !important; padding-left: 36px !important; }
.inr-sv-keuze {
	display: flex !important; align-items: center !important; gap: 10px !important;
	padding: 9px 12px !important; border-radius: 10px !important; cursor: pointer !important;
	font-size: 14px !important; color: #334155 !important;
	transition: background .15s ease !important;
}
.inr-sv-keuze input { margin: 0 !important; flex: 0 0 auto !important; }
/* Het veld waarin de deelnemer zijn antwoord typt.

   Dit stond eerder alleen ingesprongen en kreeg verder de opmaak van de
   browser: scherpe hoeken, een harde rand en een grijp-driehoek in de hoek.
   Nu volgt het de rest van de omgeving: zachte hoeken, een rustige rand, en
   het groeit mee met wat je typt in plaats van een handvat te tonen. */
.inr-sv-iv textarea {
	margin-left: 36px !important; width: calc(100% - 36px) !important;
	padding: 13px 15px !important;
	border: 1px solid rgba(15,23,42,.11) !important;
	border-radius: 14px !important;
	background: rgba(15,23,42,.02) !important;
	color: #0F172A !important;
	font-family: inherit !important; font-size: 14.5px !important;
	line-height: 1.6 !important;
	resize: vertical !important;      /* alleen in hoogte, niet scheef trekken */
	/* Ruim genoeg om een paar zinnen te zien zonder te scrollen. Bij deze vragen
	   schrijven mensen hele alinea's; een veld van drie regels is dan te krap om
	   je eigen tekst nog te kunnen overzien. */
	min-height: 150px !important;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
	-webkit-appearance: none !important; appearance: none !important;
}
.inr-sv-iv textarea::placeholder { color: #A8B3C4 !important; }
.inr-sv-iv textarea:hover { border-color: rgba(15,23,42,.18) !important; }
.inr-sv-iv textarea:focus {
	outline: none !important;
	border-color: #7448FD !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(116,72,253,.1) !important;
}

/* Ook de keuzevakjes wat vriendelijker: een groter raakvlak en de accentkleur
   van de omgeving in plaats van het blauw van de browser. */
.inr-sv-keuze input { width: 17px !important; height: 17px !important; accent-color: #7448FD !important; cursor: pointer !important; }

/* Elke optie krijgt een eigen rand. Stond hier eerder een doorzichtige rand die
   alleen bij een gekozen antwoord opkleurde; dan zweefden de niet-gekozen
   opties los in het wit en zag je niet waar je kon klikken. */
.inr-sv-keuze {
	border: 1px solid rgba(15,23,42,.1) !important;
	background: #fff !important;
	margin-bottom: 6px !important;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.inr-sv-keuze:hover {
	border-color: rgba(116,72,253,.3) !important;
	background: rgba(116,72,253,.02) !important;
}
.inr-sv-keuze:has(input:checked) {
	background: rgba(116,72,253,.06) !important;
	border-color: #7448FD !important;
	box-shadow: 0 0 0 3px rgba(116,72,253,.09) !important;
}
.inr-sv-keuze:has(input:checked) > span { color: #0F172A !important; font-weight: 500 !important; }
.inr-sv-let-op {
	margin-top: 14px !important; font-size: 12.5px !important; font-weight: 300 !important;
	color: #94A3B8 !important; line-height: 1.5 !important;
}

/* ── Na het versturen ────────────────────────────────────────────────────── */
.inr-sv-dank { padding: 48px 4px !important; text-align: center !important; }
.inr-sv-dank-vink {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 54px !important; height: 54px !important; margin-bottom: 16px !important;
	border-radius: 999px !important; background: rgba(61,158,99,.14) !important; color: #3D9E63 !important;
}
.inr-sv-dank-vink svg { width: 26px !important; height: 26px !important; }
.inr-sv-dank h2 { font-size: 20px !important; font-weight: 600 !important; margin: 0 0 6px !important; }
.inr-sv-dank p {
	font-size: 14px !important; font-weight: 300 !important; color: #64748B !important;
	margin: 0 0 22px !important; line-height: 1.55 !important;
}
.inr-sv-dank .inr-sv-knop { margin: 0 auto !important; }

/* ── Teruglezen ──────────────────────────────────────────────────────────── */
.inr-sv-iv.is-gelezen { background: rgba(15,23,42,.02) !important; }
.inr-sv-gegeven {
	margin: 0 0 0 36px !important; padding: 10px 12px !important;
	border-radius: 10px !important; background: rgba(15,23,42,.04) !important;
	font-size: 14px !important; color: #334155 !important; line-height: 1.5 !important;
	white-space: pre-wrap !important;
}
.inr-sv-gegeven em { color: #94A3B8 !important; font-style: italic !important; }

/* ── Resultaten ──────────────────────────────────────────────────────────── */
.inr-sv-wie {
	display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
	margin-bottom: 24px !important; padding-bottom: 20px !important;
	border-bottom: 1px solid rgba(15,23,42,.07) !important;
}
.inr-sv-wie-knop {
	padding: 6px 12px !important; border: 1px solid rgba(15,23,42,.1) !important;
	border-radius: 999px !important; background: #fff !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 12.5px !important; color: #475569 !important;
	transition: border-color .15s ease, color .15s ease !important;
}
.inr-sv-wie-knop:hover { border-color: rgba(116,72,253,.4) !important; color: #7448FD !important; }

.inr-sv-bundel { display: flex !important; flex-direction: column !important; gap: 24px !important; }
.inr-sv-bv { }

/* Staven bij een keuzevraag. Geen taartdiagram: bij vijf mensen zegt een
   percentage weinig, maar de verhouding zie je zo wel meteen. */
.inr-sv-staven {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
	padding-left: 36px !important;
}
.inr-sv-staaf { display: flex !important; align-items: center !important; gap: 12px !important; }
.inr-sv-staaf-naam {
	flex: 0 0 150px !important; font-size: 13px !important; color: #334155 !important;
	overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.inr-sv-staaf-baan {
	flex: 1 1 auto !important; height: 8px !important; border-radius: 999px !important;
	background: rgba(15,23,42,.07) !important; overflow: hidden !important;
}
.inr-sv-staaf-baan > span {
	display: block !important; height: 100% !important; border-radius: 999px !important;
	background: linear-gradient(90deg, #7448FD, #4F8BFF) !important;
	transition: width .4s cubic-bezier(.4,0,.2,1) !important;
}
.inr-sv-staaf-getal {
	flex: 0 0 30px !important; text-align: right !important;
	font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important;
}

/* Open antwoorden onder elkaar. */
.inr-sv-open-lijst {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
	padding-left: 36px !important;
}
.inr-sv-open-antw {
	padding: 12px 14px !important; border-radius: 12px !important;
	background: rgba(15,23,42,.03) !important;
}
.inr-sv-open-naam {
	display: block !important; font-size: 11.5px !important; font-weight: 600 !important;
	color: #94A3B8 !important; margin-bottom: 4px !important;
}
.inr-sv-open-antw p {
	margin: 0 !important; font-size: 14px !important; color: #334155 !important;
	line-height: 1.55 !important; white-space: pre-wrap !important;
}

/* De verwijderknop staat bewust apart en rustig: je moet hem kunnen vinden,
   maar hij hoeft niet te lokken. Pas bij aanwijzen wordt hij rood. */
.inr-sv-verwijder {
	border: 0 !important; background: transparent !important;
	padding: 8px 12px !important; border-radius: 999px !important;
	color: #94A3B8 !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important;
	transition: background .16s ease, color .16s ease !important;
}
.inr-sv-verwijder:hover { background: rgba(253,76,92,.1) !important; color: #C0392B !important; }

/* ── Tekstblok: het kader waarbinnen de volgende vragen gesteld worden ────── */
.inr-sv-iv.is-tekstblok {
	background: rgba(116,72,253,.04) !important;
	border-color: rgba(116,72,253,.16) !important;
	padding: 20px 22px !important;
}
.inr-sv-tekstblok {
	font-size: 14px !important; color: #334155 !important; line-height: 1.65 !important;
	font-weight: 300 !important;
	/* De regelovergangen uit de tekst aanhouden. Eerder werden die met de hand
	   omgezet naar een regeleinde, en dat ging mis: dan zag je losse letters n
	   in de tekst staan waar een witregel hoorde. */
	white-space: pre-wrap !important;
}
.inr-sv-tekstblok br + br { content: '' !important; display: block !important; margin-top: 8px !important; }
.inr-sv-iv[hidden] { display: none !important; }

/* ── De toonregel in het beheerscherm ────────────────────────────────────── */
.inr-sv-regel {
	margin-top: 10px !important; padding: 10px 12px !important;
	border-radius: 10px !important; background: rgba(15,23,42,.03) !important;
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}
.inr-sv-regel > label {
	display: flex !important; align-items: center !important; gap: 10px !important;
	font-size: 12px !important; color: #64748B !important;
}
.inr-sv-regel > label > span { flex: 0 0 auto !important; }
.inr-sv-regel select {
	flex: 1 1 auto !important; min-width: 0 !important;
	padding: 6px 10px !important; border: 1px solid rgba(15,23,42,.12) !important;
	border-radius: 8px !important; background: #fff !important;
	font-family: inherit !important; font-size: 12.5px !important; color: #0F172A !important;
}
.inr-sv-regel-waarden {
	display: flex !important; flex-wrap: wrap !important; align-items: center !important;
	gap: 8px !important; padding-left: 4px !important;
}
.inr-sv-regel-waarden[hidden] { display: none !important; }
.inr-sv-regel-uitleg { font-size: 11.5px !important; color: #94A3B8 !important; }
.inr-sv-regel-keuze {
	display: inline-flex !important; align-items: center !important; gap: 5px !important;
	padding: 4px 9px !important; border-radius: 999px !important;
	border: 1px solid rgba(15,23,42,.1) !important; background: #fff !important;
	font-size: 12px !important; color: #334155 !important; cursor: pointer !important;
}
.inr-sv-regel-keuze input { margin: 0 !important; accent-color: #7448FD !important; }
.inr-sv-regel-keuze:has(input:checked) {
	background: rgba(116,72,253,.08) !important; border-color: rgba(116,72,253,.35) !important;
}

/* Het tekstvak waarin je de vraag schrijft. Ruimer dan het was: een vraag is
   vaak twee of drie regels, en dan wil je kunnen lezen wat je typt. */
.inr-sv-vraag textarea {
	min-height: 92px !important;
	line-height: 1.6 !important;
	resize: vertical !important;
}

/* De balk boven het voorbeeld: duidelijk dat je kijkt en niet invult. */
.inr-sv-voorbeeld-balk {
	margin-bottom: 20px !important; padding: 12px 16px !important;
	border-radius: 12px !important;
	background: rgba(116,72,253,.07) !important;
	border: 1px solid rgba(116,72,253,.18) !important;
	color: #5B3AC4 !important; font-size: 13px !important; line-height: 1.55 !important;
	font-weight: 400 !important;
}

/* De balk boven een voorbeeld: duidelijk maken dat dit niet het echte scherm is
   en dat wat je invult nergens heen gaat. */
.inr-sv-voorbeeld-balk {
	margin-bottom: 18px !important; padding: 11px 15px !important;
	border-radius: 10px !important;
	background: rgba(251,146,60,.1) !important; color: #A8560C !important;
	font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important;
}

/* ── Een kop die de vragenlijst opdeelt ──────────────────────────────────── */
.inr-sv-iv.is-kop {
	background: transparent !important; border: 0 !important;
	border-bottom: 1px solid rgba(15,23,42,.1) !important;
	border-radius: 0 !important;
	padding: 26px 2px 12px !important;
}
/* De eerste kop hoeft niet zoveel lucht erboven: daar begint de lijst. */
.inr-sv-invul > .inr-sv-iv.is-kop:first-child { padding-top: 4px !important; }
.inr-sv-sectie h3 {
	margin: 0 !important; font-size: 17px !important; font-weight: 600 !important;
	color: #0F172A !important; line-height: 1.3 !important; letter-spacing: -.01em !important;
}
.inr-sv-sectie p {
	margin: 6px 0 0 !important; font-size: 13.5px !important; font-weight: 300 !important;
	color: #64748B !important; line-height: 1.6 !important; white-space: pre-wrap !important;
}

/* Een korte uitleg onder een invoerveld, bijvoorbeeld bij een kop waar de
   eerste regel de titel is en de rest de toelichting. */
.inr-sv-hulp {
	margin: 6px 0 0 !important; font-size: 12px !important; font-weight: 300 !important;
	color: #94A3B8 !important; line-height: 1.5 !important;
}
.inr-sv-hulp[hidden] { display: none !important; }

/* Een naam in de resultaten, met een kruisje om die antwoorden weg te halen.
   Het kruisje blijft rustig tot je erover beweegt: verwijderen hoort niet te
   lokken, maar wel vindbaar te zijn. */
.inr-sv-wie-item {
	display: inline-flex !important; align-items: center !important;
	border: 1px solid rgba(15,23,42,.1) !important; border-radius: 999px !important;
	background: #fff !important; overflow: hidden !important;
	transition: border-color .15s ease !important;
}
.inr-sv-wie-item:hover { border-color: rgba(116,72,253,.4) !important; }
.inr-sv-wie-item .inr-sv-wie-knop {
	border: 0 !important; border-radius: 0 !important; padding: 6px 4px 6px 12px !important;
}
.inr-sv-wie-item .inr-sv-wie-knop:hover { border: 0 !important; }
.inr-sv-wie-weg {
	border: 0 !important; background: transparent !important;
	padding: 0 10px 0 6px !important; height: 100% !important;
	color: #CBD5E1 !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 16px !important; line-height: 1 !important;
	transition: color .15s ease !important;
}
.inr-sv-wie-weg:hover { color: #C0392B !important; }