a.button,
a.nextButton,
a.prevButton {
	text-decoration: none;
	font-family: var(--font-bold);
	font-size: 1.1rem;
	text-align:left;
}
	.loading {
		background-image: url(/images/spinner-mw.gif) !important;
		background-size: 35px 35px !important;
		background-position: left center !important;
		background-repeat: no-repeat !important;
		padding-left: 35px !important;
	}

section.form {
	padding: 1rem;
	background-color: var(--gray-light);
}

	section.form section.qWrap {
		padding: 1rem 1rem;
		background-color: var(--gray-light);
		line-height:1.8rem;
	}

.formWrap {
	border-radius: 10px;
	background-color: #fff;
	padding: 2rem;
	box-shadow: var(--shadow);
	width: 100%;
	
}
.formWrap h2.subTitle{
	margin: 1rem;
	font-family: var(--font-bold);
	border-bottom: 1px solid #CCC;
	padding: 0.5rem 0;
	width: calc(100% - 2rem);
}
	.formWrap p.subIntro {
		margin: 1rem;
		width: 100%;
	}
.qWrap {
	padding: 0 1rem;
	text-align: left;
	border: 0px;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	margin: 0.5rem 0;
}

div.form-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	width: 70%;
	padding:0;
}

/* Koppeling van utility-class naar variabele */
.cols-1 {
	--cols: 1;
}

.cols-2 {
	--cols: 2;
}

.cols-3 {
	--cols: 3;
}

.cols-4 {
	--cols: 4;
}
.cols-5 {
	--cols: 5;
}

/* Spans voor fieldsets */
.col-span-1 {
	grid-column: span 1 / span 1;
}
.col-span-2 {
	grid-column: span 2 / span 2;
}
.col-span-3 {
	grid-column: span 3 / span 3;
}
.col-span-4 {
	grid-column: span 4 / span 5;
}

.col-span-5 {
	grid-column: span 5 / span 5;
}

button.btn-remove {
	width: 25px;
	border: 0;
	background: transparent;
	font-size: 1.15rem;
	cursor: pointer;
	margin: 0.5rem 0;
}

/* Eerste kapitaal heeft labels, dus delete button moet lager */
#grp-kapitaal_1 .kapitaal-delete {
	margin-top: 2.8rem; /* Compenseer voor label hoogte */
}

section.explainer {
	padding: 1rem 1rem;
	background-color: var(--gray-light);
	line-height: 1.8rem;
	text-align: left;
	border: 0px;
	width: 100%;
	border-radius: var(--border-radius);
	margin: 1rem 0;
	font-size:1.15rem;
}
section.explainer[hidden] {
	display: none !important;
}

	section.explainer h2 {
		font-family: var(--font-bold);
		font-size: 1.35rem;
	}

	section.explainer p {
		font-size: 1.15rem;
	}
	section.explainer ul {
		font-size: 1.15rem;
	}

	section.explainer p em{
		text-decoration: underline;
		color: var(--color-link);
		cursor:pointer;
	}

	section.explainer div.bttn {
		background-color: var(--secundary-blue);
		color: var(--text-light);
		border: 1px solid var(--primary-blue);
		width: 30%;
		padding: 0.5rem;
		border-radius: 10px;
		text-align: center;
		cursor: pointer;
		transition: background 0.3s ease, color 0.3s ease;
		font-size: 1.1rem;
		font-weight: bold;
		margin: 1rem 0;
	}

	section.explainer div.grid {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 12px;
		row-gap: 5px;
		align-items: baseline;
		margin: 1rem 0;
		font-size: 1.15rem;
	}

.qWrap span.uitleg {
	background-color: var(--primary-blue);
	border-radius: 50%;
	border: 1px solid var(--gray-light);
}

/* "Meer info"-knop met uitklaptekst onder een vraag (zelfde stijl als .meerinfo in MwCore.css) */
.qWrap button.meerinfo {
	align-self: flex-start;
	margin-top: 0.75rem;
	background-color: var(--gray-light);
	border: 1px solid var(--gray-dark);
	color: var(--text-dark);
	padding: 0.5rem 1rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 1rem;
	font-weight: bold;
	transition: background 0.3s ease;
}

	.qWrap button.meerinfo:hover {
		background-color: #EBF8FE;
	}

.qWrap p.toelichting {
	margin: 0.75rem 0 0;
	padding: 1rem;
	background-color: var(--gray-light);
	border-radius: var(--border-radius);
	font-size: 1.05rem;
	line-height: 1.6;
}

	.qWrap p.toelichting[hidden] {
		display: none;
	}

.qWrap div.bttn {
	background-color: var(--secundary-blue);
	color: var(--text-light);
	border: 1px solid var(--primary-blue);
	width: 30%;
	padding: 0.5rem;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
	font-size: 1.1rem;
	font-weight: bold;
	margin: 1rem 0;
}


header.qWrap {
	background: var(--gray-light);
	border-radius: 10px;
	padding: 1rem;
	position: relative;
	margin: 0 0 2rem 0;
}

	/* de foto of het logo staat absoluut rechts (200px + marge); kop en intro blijven daar links van.
	   Alleen als er echt een afbeelding in de kop staat: zonder foto (stappenhub, offerte) mag de kop
	   de volle breedte gebruiken, anders breekt hij onnodig af. */
	@media (min-width: 641px) {
		header.qWrap:has(img, figure) h1,
		header.qWrap:has(img, figure) p {
			max-width: calc(100% - 220px);
		}
	}

	header.qWrap p {
		font-size: 1.25rem;
		line-height: 2rem;
	}

	@media (max-width: 640px) {
		header.qWrap h1,
		header.qWrap p {
			max-width: 100%;
		}

		header.qWrap img {
			display: none;
		}
	}

	header.qWrap img {
		position: absolute;
		right: 1rem;
		bottom: -0.75rem; 
		max-width: 200px; 
		height: auto;
	}
		header.qWrap img.product {
			max-width: 250px;
			border: none;
			background: none;
			bottom: 0.5rem;
		}

		/* Twee aanbieders op één productpagina (verdeling over kaders): de logo's naast elkaar, rechts */
		header.qWrap figure.brand.duo {
			position: absolute;
			right: 1rem;
			bottom: 0.5rem;
			margin: 0;
			gap: 1.5rem;
		}

			header.qWrap figure.brand.duo img.product {
				position: static;
				max-width: 150px;
			}
.qWrap h1 {
	font-family: var(--font-bold);
	font-size: 2.5rem;
	color: var(--primary-blue);
	margin-bottom: 1rem;
}

/* De kop schaalt mee met de breedte van het kopblok (container query): een lange titel in een smalle
   kolom (naast de zijbalk, op een tablet) wordt iets kleiner in plaats van over drie regels te breken.
   Breekt hij toch, dan verdeelt text-wrap: balance de woorden gelijk over de regels, zonder een
   los woord op de tweede regel. */
header.qWrap {
	container-type: inline-size;
}

	header.qWrap h1 {
		font-size: clamp(1.6rem, 5.2cqi, 2.5rem);
		line-height: 1.15;
		text-wrap: balance;
	}

.qWrap legend {
	font-size: var(--font-size-h3);
	margin-bottom: 0.5rem;
	font-family: var(--font-bold);
	color: #1B75BA;
}

	.qWrap legend em {
		font-size: 0.95rem;
		color: var(--secundary-blue);
	}
	.qWrap legend em.link {
		cursor:pointer;
	}

.qWrap label, .qWrap span {
	font-size: var(--font-size-h3);
	margin-bottom: 0.5rem;
	font-family: var(--font-bold);
	color: #1B75BA;
}
	.qWrap label em, .qWrap span em {
		font-size: 0.95rem;
		color: var(--secundary-blue);
	}

	.qWrap label em.link, .qWrap span em.link {
		text-decoration: underline;
		color:var(--color-link);
		cursor:pointer;
	}

fieldset.qWrap:has(label.checkbox) {
	margin: 1.5rem 0;
}
	.qWrap label.checkbox span {
		font-family: var(--font-main);
		color: var(--color-text);
	}

.qWrap label.checkbox input {
	height: 18px;
	width: 18px;
}

	p.error {
		color: red;
		margin: 0.5rem 0;
		display: none;
	}
	p.error:not(:empty) {
		display: flex;
	}
input.txt {
	max-width: 350px;
	width: 100%;
	padding: 0.6rem 1rem;
	font-size: 1rem;
	border: 1px solid var(--gray-medium);
	border-radius: var(--border-radius);
	font-family: var(--font-main);
	background: #fff;
}

/* De vrije tekstvelden (opmerkingen e.d.); zelfde look als de inputs, alleen breder en in
   hoogte aanpasbaar. input.txt matcht een textarea niet, vandaar een eigen regel. */
textarea.txt {
	width: 100%;
	max-width: 550px;
	padding: 0.6rem 1rem;
	font-size: 1rem;
	border: 1px solid var(--gray-medium);
	border-radius: var(--border-radius);
	font-family: var(--font-main);
	background: #fff;
	resize: vertical;
}

	input.txt[disabled] {
		background: var(--color-gray-light);
		border: 1px solid var(--color-border);
		cursor: not-allowed;
		color: #000;
		-webkit-text-fill-color: #000; /* 🔑 dit is de sleutel */
		opacity: 1; /* voorkomt grijs worden */
	}

	input.txt[data-valid=false]
	{
		border: 1px solid red;
	}

	input.txt.date {
		max-width: 250px;
		padding-right: 2rem;
	}

	input.txt.iban {
		text-transform: uppercase;
	}

	input.txt[data-valid=true] {
		background: #FFF url("/images/icons/check_icon.gif") no-repeat 95% center;
		background-size: 10px;
	}

select.AutoCompletedClass {
	width: 100%;
	padding: 1rem 0;
	border: 2px solid var(--gray-medium);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	font-family: var(--font-main);
	transition: border-color 0.3s ease;
}


	select.AutoCompletedClass option {
		font-size: 1rem;
		padding: 0.5rem 1rem;
	}
		select.AutoCompletedClass option:hover {
			background: var(--secundary-blue);
			color:var(--color-white);
		}
		
.qWrap select.AutoCompletedClass {
	max-width: 350px;
	border:1px solid #CCC;
}

.rbl {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
}

	.rbl.column {
		flex-direction: column;
		gap: 0;
	}

	.rbl label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background-color: var(--gray-light);
		padding: 0.75rem 1rem;
		border-radius: var(--border-radius);
		cursor: pointer;
		border: 1px solid var(--gray-medium);
		font-family: var(--font-main);
	}
		.rbl label.radio:hover {
			background: #EBF8FE;
		}

		.rbl label input[type="radio"] {
			accent-color: var(--primary-blue);
			cursor: pointer;
		}

		.rbl label:has(input:disabled) {
			opacity: 0.5;
			cursor: not-allowed;
		}

		.rbl label span {
			font-size: 1rem;
			margin-bottom: 0;
		}

			.rbl label span em.advies {
				font-weight: bold;
				background: #EBF8FE url(/images/owlicon.png) no-repeat 3px 4px;
				background-size: 20px;
				margin-left: 10px;
				padding: 3px 5px 6px 30px;
				border: 1px solid #CCC;
				border-radius: 5px;
				font-size: 11pt;
			}


		.rbl label:has(input:checked) {
			background-color: var(--primary-blue);
		}
		.rbl label:has(input:checked):hover {
			background-color: var(--primary-blue);
		}

			.rbl label:has(input:checked) span {
				color: #FFF;
			}

select.ddl {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--white);
	padding: 0.75rem 1rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	border: 1px solid var(--gray-medium);
	font-family: var(--font-main);
	font-size:11pt;
	min-width: 250px;
}

.buttonWrap {
	display: flex;
	justify-content: flex-start;
	gap: 0 20%;
	margin: 2rem 0 0 0;
	width: 100%;
	border-top: 1px solid #CCC;
	padding: 1rem 0;
}

	.buttonWrap.product {
		display: flex;
		justify-content: flex-end;
		gap: 20%;
		margin: 0;
		width: 60%;
		flex-direction: column;
		align-content: flex-end;
		align-items: flex-end;
		border: none;
	}

	.buttonWrap.offerte {
		display: flex;
		margin: 2rem 0 -2rem 0;
		align-content: center;
		border: none;
		align-items: flex-start;
		flex-direction: column;
		padding: 0 1rem;
	}
	.buttonWrap.offerte span{
		font-size:0.8rem;
		margin: 0.75rem 0;
	}
	
.prevButton {
	background: transparent url(/images/icons/back.png) no-repeat 10px center;
	background-size: 25px;
	color: #000;
	padding: 0.7rem 3rem;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	display: inline-block;
}

	.prevButton:hover {
		background-color: var(--gray-light);
	}

.nextButton {
	background-color: var(--primary-blue);
	color: var(--text-light);
	border: 1px solid var(--primary-blue);
	width: 30%;
	padding: 0.75rem 2rem;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
	font-size: 1rem;
	font-weight: bold;
}
	.nextButton.grey {
		background-color: var(--gray-dark);
		color: var(--text-dark);
		border: 1px solid var(--color-border);
		width: 30%;
		padding: 0.75rem 2rem;
		border-radius: 10px;
		text-align: center;
		cursor: pointer;
		transition: background 0.3s ease, color 0.3s ease;
		font-size: 1rem;
		font-weight: bold;
	}
	.nextButton:hover {
		background-color: var(--secundary-blue);
		color: var(--text-light);
	}

	.nextButton[disabled=disabled] {
		background-color: var(--gray-dark);
		color: var(--text-dark);
		border: 1px solid var(--color-border);
		width: 30%;
		padding: 0.75rem 2rem;
		border-radius: 10px;
		text-align: center;
		cursor: not-allowed;
		transition: background 0.3s ease, color 0.3s ease;
		font-size: 1rem;
		font-weight: bold;
	}
		.nextButton[disabled=disabled]:hover {
			background-color: var(--gray-dark);
			color: var(--text-dark);
			border: 1px solid var(--color-border);
			width: 30%;
			padding: 0.75rem 2rem;
			border-radius: 10px;
			text-align: center;
			cursor: not-allowed;
			transition: background 0.3s ease, color 0.3s ease;
			font-size: 1rem;
			font-weight: bold;
		}



.range{
	width: 100%; /* breder maken */
	appearance: none; /* eigen styling toestaan */
	background: transparent;
}

	/* Track (balk) */
	.range::-webkit-slider-runnable-track {
		height: 12.5px; /* DIKKER */
		background: var(--secundary-blue); /*		  linear-gradient(#ddd, #ccc);*/
		border-radius: 999px;
	}

	/* Thumb (knopje) */

	.range::-webkit-slider-thumb {
		appearance: none;
		width: 28px; /* GROTER */
		height: 28px;
		border-radius: 50%;
		background: var(--primary-blue);
		border: 2px solid #666;
		margin-top: -9px; /* centreert thumb op dikkere track */
		box-shadow: 0 1px 3px rgba(0,0,0,.25);
		cursor: pointer;
	}

	/* focus/hover toegankelijkheid */
.range:focus {
	outline: none;
}

	.range:focus::-webkit-slider-thumb,
	.range:hover::-webkit-slider-thumb {
		border-color: #000;
	}

.inputoutput{
	display:flex;
	width: 50%;
	min-width: 150px;
	gap: 25px;

}
fieldset.qWrap.range 
{
}

output.rangeOutput {
	font-size:15pt;
	color: var(--primary-blue);
	font-weight:bold;
}

textarea.toelichting {
	display: flex;
	width: 100%;
	min-height: 250px;
	padding: 1rem;
	font-size: 13pt;
}

section.flow-region {
	text-align: left;
	border: 0px;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 0 0 0;

}
.flow-region[hidden] {
	display: none !important;
}

/*Product overzicht*/

div.productWrap {
	display: flex;
	flex-direction: column;
	/* de kolom-flex van header.qWrap (align-items: flex-start) maakt deze wrapper zo breed als
	   zijn inhoud; de h1-regel 'max-width: calc(100% - 220px)' voor de fotokoppen rekent dan
	   met die smalle breedte en breekt de aanbiedernaam per woord af. Hier is geen foto rechts:
	   de wrapper vult de kop en de naam mag de volle breedte gebruiken. */
	align-self: stretch;
}

	header.qWrap div.productWrap h1 {
		max-width: none;
	}

.brand {
	display: flex;
	align-items: center;
	gap: .5rem;
}

	.brand img {
		width: auto;
		height: 44px;
		object-fit: contain;
		display: block;
		filter: saturate(0.9) contrast(1.05);
	}

@media (max-width: 640px) {

	.brand {
		justify-content: flex-start;
	}
}

/* ====== Definition lists (details + scenario’s) ====== */

.product {
	margin-top: 1rem;
}
.product,
.scenario-list {
	display: grid;
	gap: 0;
	border: 1px solid color-mix(in oklab, currentColor 18%, #0000);
	border-radius: 12px;
	overflow: hidden;
	background: color-mix(in oklab, #fff 92%, #0000);
/*	width: 60%;*/
}

	/* Rij-opbouw met 2 kolommen: label (dt) en waarde (dd) */
	.product > .detail,
	.scenario-list > .scenario {
		display: grid;
		grid-template-columns: minmax(12ch, 22ch) 1fr;
		gap: 1rem;
		padding: .875rem 1rem;
		align-items: center;
		border-bottom: 1px solid color-mix(in oklab, currentColor 18%, #0000);
	}

		.product > .detail:last-child,
		.scenario-list > .scenario:last-child {
			border-bottom: 0;
		}

	.product dt,
	.scenario-list dt {
		font-family:var(--font-bold);
		color: color-mix(in oklab, currentColor 60%, #0000);
	}

	.product dd,
	.scenario-list dd {
		margin: 0;
	}

/* Typografie voor bedragen en datums */
data, time {
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

/* Sectietitel eindsaldo */

	.scenarios h2 {
		font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
		margin: 0 0 .5rem 0;
	}

/* Subtle extra info */
.scenario-list small {
	margin-left: .5ch;
	color: color-mix(in oklab, currentColor 55%, #0000);
	font-variant-numeric: tabular-nums;
}

/* ====== Tip-banner ====== */
.tip-banner {
	padding: .5rem 1rem;
	font-size: .85rem;
	font-family: var(--font-bold);
	color: #5a4b00;
	background: #fff8db;
	border-left: 3px solid #e6c619;
	border-bottom: 0;
}

.product > .detail.has-tip {
	background: #fffdf0;
	border-bottom: 0;
}

/* ====== Responsiviteit ====== */
@media (max-width: 560px) {
	.product > .detail,
	.scenario-list > .scenario {
		grid-template-columns: 1fr; /* label boven waarde */
		gap: .25rem;
		padding: .75rem .875rem;
	}

	.product dt,
	.scenario-list dt {
		font-size: .9375rem;
	}
}

/* ====== Focus states ====== */
.product .detail:focus-within,
.scenario-list .scenario:focus-within {
	outline: 2px solid color-mix(in oklab, #0c5adb 60%, #fff);
	outline-offset: -2px;
}

/* ====== Print (compact) ====== */
@media print {
	.brand img {
		filter: none;
	}

	.product > .detail,
	.scenario-list > .scenario {
		padding: .5rem .75rem;
	}
}

/* === Stamrecht 3-stappen flow (scannable & compact) === */
.gw-flow {
	margin-block: 1.25rem;
}

.gw-flow h2 {
	margin: 0 0 .5rem;
	font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
	line-height: 1.25;
}


/* Steps */
.gw-steps {
	counter-reset: step;
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gw-3steps {
	counter-reset: step;
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	
	grid-template-columns: repeat(3, minmax(0,1fr));
}

.gw-4steps {
	counter-reset: step;
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(4, minmax(0,1fr));
}

.gw-step {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: .75rem;
	align-items: start;
	padding: .65rem .7rem;
	border: 1px solid color-mix(in oklab, currentColor 14%, #0000);
	border-radius: 12px;
	background: #fff;
}

	.gw-step .gw-ico {
		width: 48px;
		height: 48px;
		object-fit: contain;
	}

.gw-copy h3 {
	margin: .1rem 0 .15rem;
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 700;
}

.gw-copy p {
	margin: .15rem 0 0;
	color: color-mix(in oklab, currentColor 60%, #0000);
}

.gw-micro {
	font-size: .825rem;
	color: color-mix(in oklab, currentColor 55%, #0000);
}

/* CTA */
.gw-cta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .6rem;
	align-items: center;
	margin-top: .9rem;
}

.gw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .65rem .9rem;
	border-radius: 10px;
	text-decoration: none;
	line-height: 1;
	min-height: 44px;
	border: 1px solid transparent;
	font-weight: 600;
}

.gw-btn-primary {
	background: #0c5adb;
	color: #fff;
	border-color: color-mix(in oklab, #0c5adb 80%, #0000);
}

	.gw-btn-primary:focus-visible {
		outline: 2px solid #0c5adb;
		outline-offset: 2px;
	}

.gw-btn-ghost {
	background: transparent;
	border-color: color-mix(in oklab, currentColor 22%, #0000);
	color: inherit;
}

	.gw-btn-ghost:hover {
		background: color-mix(in oklab, currentColor 5%, #0000);
	}

.gw-trust {
	margin: 0;
	font-size: .9rem;
	color: color-mix(in oklab, currentColor 60%, #0000);
}

/* Responsive */
@media (min-width: 768px) {
	.gw-3steps {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
	.gw-4steps {
		grid-template-columns: repeat(4, minmax(0,1fr));
	}

	.gw-step {
		grid-template-columns: 48px 1fr;
	}
}

.bttnOfferte {
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 2rem;
	margin: 1rem 0 0 0;
}

	.bttnOfferte b {
		border: 1px solid var(--color-border);
		padding: 0.5rem 1rem;
		border-radius: 5px;
		cursor: pointer;
	}
		.bttnOfferte b:hover {
			background: var(--color-gray-light);
		}

/*OFFERTE PAGINA*/
.offerteWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	width: 100%;
}
	.offerteWrap .qWrap .offerteHeadWrap {
		display: flex;
		flex-direction: column;
	}
		.offerteWrap .qWrap .offerteHeadWrap h1 {
			font-family: var(--font-bold);
			font-size: clamp(1.35rem, 4cqi, 1.75rem); /* schaalt mee met het kopblok, zie header.qWrap h1 */
			color: var(--primary-blue);
			margin: 0;
			line-height: 1.2;
			text-wrap: balance;
		}
		.offerteWrap .qWrap .offerteHeadWrap h2 {
			font-family: var(--font-bold);
			font-size: 1.5rem;
			color: var(--secundary-blue);
			margin: 0 0 1rem 0;
		}
		.offerteWrap .qWrap .offerteHeadWrap p {
			width: 100%;
			font-size: 1.05rem;
			line-height: 1.5rem;
		}

	.formWrap.offerte {
		flex: 1 1 65%;
		padding: var(--padding-default);
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius);
		background-color: #fff;
		padding: 2rem;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
		border: 1px solid var(--gray-dark);
	}

.offerteWrap .offerteSideBar {
	flex: 1 1 30%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

	.offerteWrap .offerteSideBar .hulp {
		background: #d5f4ff;
		padding: 1rem;
		border: 1px solid #CCC;
		border-radius: var(--border-radius);
	}
		.offerteWrap .offerteSideBar .hulp h2 {
			font-weight: bold;
		}
		.offerteWrap .offerteSideBar .hulp p {
			font-size: var(--font-size-p);
			line-height: 1.65;
			font-weight: normal;
			margin-bottom: 10px;
		}
		.offerteWrap .offerteSideBar .hulp span {
			line-height: 1.65;
			font-weight: normal;
			margin: 0;
			font-size: 0.8rem;
		}
		.offerteWrap .offerteSideBar .hulp a {
			display: flex;
			background: #1B75BA;
			height: 50px;
			border-radius: 5px;
			font-size: 15pt !important;
			font-weight: bold;
			cursor: pointer;
			color: #FFF;
			padding: 12px 25px;
			text-decoration: none;
			align-items: baseline;
			justify-content: center;
		}
			.offerteWrap .offerteSideBar .hulp a.hulp-Wa {
				display: flex;
				background: #49C858 url(/images/social/whatsapp.svg) no-repeat 15px center;
				background-size: 25px;
				height: 50px;
				border-radius: 5px;
				font-size: 15pt !important;
				font-weight: bold;
				cursor: pointer;
				color: #FFF;
				padding: 12px 25px;
				text-decoration: none;
				align-items: baseline;
				justify-content: center;
			}

	.offerteWrap .offerteSideBar .gekozenproduct {
		padding: 1rem;
		border: 1px solid #CCC;
		border-radius: var(--border-radius);
	}

.card h2 {
	font-family: var(--font-bold);
	font-size: 1.25rem;
	padding: 0 1rem;
}
.card p {
	
	padding: 0 1rem;
}
/* Offertechips */
.offerte-meta {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

	.offerte-meta .chip {
		background: #eef3f8;
		color: var(--mw-navy);
		border-radius: 999px;
		padding: 6px 10px;
		font-size: 12px;
		font-weight: 600;
	}


/* Documentrijen (partial _DocumentRij): pictogram, naam met toelichting, en twee knoppen.
   De rij is geen link; "Bekijk" en "Download" zijn de klikdoelen. */
.doc-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.doc-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	background: var(--mw-card);
	border: 1.5px solid #d6dee8;
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--mw-navy);
}

.doc-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var(--mw-linkbg);
	color: var(--primary-blue);
}

	.doc-offerte .doc-icon {
		background: #fde8e8;
		color: #c62828;
	}

.doc-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.doc-name {
	font-weight: 700;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.doc-meta {
	font-weight: 500;
	color: var(--mw-muted);
	font-size: 12px;
}

.doc-actions {
	display: flex;
	gap: 8px;
}

.doc-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	background: var(--mw-card);
	color: var(--primary-blue);
	border: 1.5px solid var(--primary-blue);
	transition: background .15s ease, color .15s ease;
}

	.doc-act:hover,
	.doc-act:focus-visible {
		background: var(--primary-blue);
		color: #fff;
		outline: none;
	}

	.doc-act:active {
		transform: translateY(1px);
	}

	.doc-act svg {
		flex: none;
	}

@media (max-width: 560px) {
	.doc-row {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.doc-actions {
		grid-column: 1 / -1;
	}

	.doc-act {
		flex: 1;
		justify-content: center;
	}
}

/*aflsuitstraat*/
div.produtwrapSmall {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-gray-light);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
}

div.produtwrapSmall img{
	width: 150px;
}

div.produtwrapSmall div.resultData {
	display:flex;
}
	div.produtwrapSmall div.compareResult {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1rem;
	}
	div.produtwrapSmall div.compareResult span{
		font-family:var(--font-bold);
		font-size: 1.25rem;
	}
		div.produtwrapSmall div.compareResult span.small {
			font-family: var(--font-normal);
			font-size: 0.9rem;
		}

ol.steps {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
	ol.steps li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid var(--color-border);
		background: #fff;
		border-radius: 12px;
		padding: 12px 14px;
		margin-bottom: 10px;
	}


	ol.steps div.stepTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		font-family: var(--font-bold);
		font-size: 0.95rem;
	}

	ol.steps li span.badge {
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		border-radius: 999px;
		background: #e2e8f0;
		color: #334155;
		font-size: 12px;
		font-weight: 700;
		padding:0;
		margin-right: 10px;
	}

	ol.steps li.done span.badge {
		background: var(--color-green);
		color: var(--color-white);
	}
	ol.steps li.current {
		border: 1px solid var(--primary-blue);
		background: var(--light-blue);
	}
		ol.steps li.current span.badge {
			background: var(--primary-blue);
			color: var(--color-white);
		}

ol.steps li .tag {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 9px;
	background: #ecfdf5;
	color: #166534;
	font-weight: 600;
}

	ol.steps li .cta {
		text-decoration:none;
		border: 0;
		background: var(--primary-blue);
		color: #fff;
		padding: 0.5rem 1rem;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

/*VLK INTERFACE*/

div.kapitaal-card {
	background: var(--color-white);
	padding: 2rem;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
/*	box-shadow: var(--shadow);*/
	margin-bottom: 1.5rem;
}

/* Overzichtslijst */
.kapitaal-overview {
	margin-top: 0rem;
}

.kapitaal-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.kapitaal-item {
	background: var(--very-light-blue);
	border: 2px solid var(--light-blue);
	border-radius: var(--border-radius);
	padding: 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.3s ease;
}

	.kapitaal-item:hover {
		border-color: var(--primary-blue);
		transform: translateX(4px);
	}

.kapitaal-info {
	flex: 1;
}

.kapitaal-title {
	font-weight: 600;
	color: var(--primary-blue);
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.kapitaal-details {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.9rem;
	color: #555;
}

.kapitaal-detail {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.kapitaal-detail-label {
	font-weight: 600;
}

.kapitaal-actions {
	display: flex;
	gap: 0.5rem;
}

.btn-icon {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.btn-edit {
	background: var(--primary-blue);
	color: white;
}

	.btn-edit:hover {
		background: var(--accent-blue);
		transform: scale(1.1);
	}

.btn-delete {
	color: white;
}

	.btn-delete:hover {
		transform: scale(1.1);
		border: 1px solid var(--primary-color);
	}

.btn-add {
	width: 100%;
	padding: 1rem;
	background: white;
	border: 2px dashed var(--primary-blue);
	color: var(--primary-blue);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

	.btn-add:hover {
		background: var(--very-light-blue);
		border-color: var(--accent-blue);
	}

	.btn-add.vlk {
		width: 25%;
		justify-content: left;
		padding: 0.5rem 1rem;
		border: dashed;
	}


	.empty-state {
		text-align: center;
		padding: 3rem 1rem;
		color: #999;
	}

	.empty-state-icon {
		font-size: 3rem;
		margin-bottom: 1rem;
	}

	.empty-state p.sub {
		font-size: 0.9rem;
		margin-top: 0.5rem;
	}
	/* Modal */

	.formModal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		width: 90%;
		max-width: 700px;
		border-radius: 8px;
		border: 1px solid #CCC;
	}

		.formModal::backdrop {
			background: rgba(2,6,23,.6);
			backdrop-filter: blur(2px);
		}

	.formbtn {
		padding: 1rem 2rem;
		border: none;
		border-radius: var(--border-radius);
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		font-family: var(--font-main);
	}

	.btn-primary {
		background: var(--highlight-green);
		color: white;
		flex: 1;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.modal {
		background: white;
		border-radius: var(--radius);
		width: 100%;
		max-width: 600px;
		max-height: 90vh;
		display: flex;
		flex-direction: column;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
		animation: slideUp 0.3s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(50px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.modal-header {
		padding: 1.5rem 2rem;
		border-bottom: 2px solid var(--gray-light);
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: var(--primary-blue);
		color: white;
		border-radius: var(--border-radius);
	}

		.modal-header h3 {
			font-size: 1.5rem;
			font-weight: 600;
			color: var(--color-white);
		}

	.modal-close {
		background: rgba(255, 255, 255, 0.2);
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: white;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
	}

		.modal-close:hover {
			background: rgba(255, 255, 255, 0.3);
		}

	.modal-progress {
		padding: 1rem 2rem;
		background: var(--very-light-blue);
		border-bottom: 2px solid var(--light-blue);
	}

	.progress-steps {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.progress-step {
		height: 8px;
		flex: 1;
		background: var(--gray-medium);
		border-radius: 4px;
		transition: background 0.3s ease;
	}

		.progress-step.active {
			background: var(--highlight-green);
		}

	.progress-text {
		margin-top: 0.5rem;
		font-size: 0.85rem;
		color: #666;
		text-align: center;
	}

	.modal-body {
		padding: 3rem 2rem;
		overflow-y: auto;
		flex: 1;
	}

	.wizard-step {
		display: none;
		animation: fadeInStep 0.4s ease;
	}

		.wizard-step.active {
			display: block;
		}

	@keyframes fadeInStep {
		from {
			opacity: 0;
			transform: translateX(20px);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.step-title {
		font-size: 1.4rem;
		color: var(--primary-blue);
		margin-bottom: 1rem;
		font-weight: 600;
	}

	.step-description {
		color: #666;
		margin-bottom: 2rem;
		line-height: 1.6;
	}

	.question-label {
		display: block;
		font-weight: 600;
		font-size: 1.05rem;
		margin-bottom: 1rem;
		color: var(--text-dark);
	}

	.input-field {
		width: 100%;
		padding: 1rem;
		border: 2px solid var(--gray-medium);
		border-radius: var(--border-radius);
		font-size: 1rem;
		font-family: var(--font-main);
		transition: border-color 0.3s ease;
	}

		.input-field:focus {
			outline: none;
			border-color: var(--primary-blue);
			box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
		}

	.select-cards {
		display: grid;
		gap: 1rem;
	}

		.select-cards .radio {
			border: 2px solid var(--gray-medium);
			border-radius: var(--border-radius);
			padding: 1.5rem;
			cursor: pointer;
			transition: all 0.3s ease;
			background: white;
		}

			.select-cards .radio:hover {
				border-color: var(--primary-blue);
				background: var(--very-light-blue);
				transform: translateX(4px);
			}

			.select-cards label:has(input[type="radio"]:checked),
			.select-cards .radio.active {
				border-width: 3px;
				border-color: var(--highlight-green);
				background: var(--very-light-blue);
			}

			.select-cards .radio input {
				display: none;
			}

	.select-card-title {
		font-weight: 600;
		font-size: 1.1rem;
		margin-bottom: 0.5rem;
		color: var(--text-dark);
	}

	.select-card-description {
		color: #666;
		font-size: 0.95rem;
	}

	.checkbox-options {
		display: grid;
		gap: 1rem;
	}

		.checkbox-options .checkbox-wrapper {
			border: 2px solid var(--gray-medium);
			border-radius: var(--border-radius);
			padding: 1.5rem;
			cursor: pointer;
			transition: all 0.3s ease;
			background: white;
		}

			.checkbox-options .checkbox-wrapper:hover {
				border-color: var(--primary-blue);
				background: var(--very-light-blue);
				transform: translateX(4px);
			}


	.checkbox-title {
		font-weight: 600;
		font-size: 1.1rem;
		margin-bottom: 0.5rem;
		color: var(--text-dark);
	}

	.checkbox-description {
		color: #666;
		font-size: 0.95rem;
	}

	.info-box {
		background: #fff9e6;
		border-left: 4px solid #ffa726;
		padding: 1rem;
		margin-top: 1rem;
		border-radius: 4px;
	}

	.info-box-icon {
		display: inline-block;
		margin-right: 0.5rem;
		font-weight: 600;
	}

	.info-box-text {
		color: #555;
		font-size: 0.9rem;
	}

	.modal-footer {
		padding: 1.5rem 2rem;
		border-top: 2px solid var(--gray-light);
		display: flex;
		gap: 1rem;
		background: white;
	}

	.checkbox-wrapper {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 1rem;
		background: var(--gray-light);
		border-radius: var(--border-radius);
		cursor: pointer;
		transition: background 0.3s ease;
	}

		.checkbox-wrapper:hover {
			background: var(--very-light-blue);
		}

		.checkbox-wrapper input[type="checkbox"] {
			width: 20px;
			height: 20px;
			cursor: pointer;
			margin-top: 2px;
			flex-shrink: 0;
		}

		.checkbox-wrapper label {
			cursor: pointer;
			font-size: 0.95rem;
			line-height: 1.5;
		}

	.badge {
		display: inline-block;
		padding: 0.25rem 0.75rem;
		border-radius: 12px;
		font-size: 0.8rem;
		font-weight: 600;
	}

	.badge-polis {
		background: var(--light-blue);
		color: var(--primary-blue);
	}

	.badge-banksparen {
		background: #e8f5e9;
		color: #2e7d32;
	}

	.badge-sparen {
		background: #fff3e0;
		color: #e65100;
	}

	.badge-beleggen {
		background: #fce4ec;
		color: #c2185b;
	}

	@media (max-width: 768px) {
		body {
			padding: 1rem 0.5rem;
		}

		.page-header {
			padding: 1.5rem;
		}

			.page-header h1 {
				font-size: 1.5rem;
			}

		.intro {
			flex-direction: column-reverse;
		}

		.intro-avatar {
			align-self: center;
		}

		.card {
			padding: 1.5rem;
		}

		.button-group {
			flex-direction: column-reverse;
		}

		.kapitaal-item {
			flex-direction: column;
			align-items: flex-start;
		}

		.kapitaal-actions {
			margin-top: 1rem;
			width: 100%;
			justify-content: flex-end;
		}

		.kapitaal-details {
			flex-direction: column;
			gap: 0.5rem;
		}

		.modal {
			max-height: 95vh;
		}

		.modal-body {
			padding: 2rem 1.5rem;
		}

		.step-title {
			font-size: 1.2rem;
		}
	}

	.progress-bar {
		height: 4px;
		background: var(--gray-medium);
		border-radius: 2px;
		overflow: hidden;
		margin-bottom: 2rem;
	}

	.progress-fill {
		height: 100%;
		background: var(--highlight-green);
		transition: width 0.3s ease;
	}
	/*BETALEN*/
	/* Order Summary */
	.order-summary {
		background: #f8f9fa;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		padding: 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 2.5rem !important;
		font-weight: bold;
		color: #0066cc;
	}
	/* Service Cards */
	.service-question {
		font-size: 20px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 600;
	}

	.service-explanation {
		color: #666;
		margin-bottom: 25px;
		font-size: 15px;
	}

	.service-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-bottom: 20px;
	}

	.service-card {
		border: 3px solid #e0e0e0;
		border-radius: 12px;
		padding: 30px;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
		background: white;
		margin-top: 35px;
	}

		.service-card:hover {
			border-color: #0066cc;
			box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
		}

		.service-card.active {
			border-color: #0066cc;
			background: #f0f7ff;
			box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
		}

		.service-card.recommended {
			border-color: #28a745;
		}

			.service-card.recommended.active {
				background: #f0f7ff;
				border-color: #0066cc;
			}

		/* niet-beschikbare optie (bijv. vaste rente zonder eenmalige storting) */
		.service-card.disabled,
		.service-card:has(input[type="radio"]:disabled) {
			opacity: 0.55;
			cursor: not-allowed;
			background: #f5f5f5;
			border-style: dashed;
		}

			.service-card.disabled:hover,
			.service-card:has(input[type="radio"]:disabled):hover {
				border-color: #e0e0e0;
				box-shadow: none;
			}

			.service-card.disabled input[type="radio"],
			.service-card:has(input[type="radio"]:disabled) input[type="radio"] {
				cursor: not-allowed;
			}

			.service-card.disabled .card-warning.card-disabled-reason {
				color: #b3261e;
				font-style: normal;
				font-weight: 600;
			}

	.recommended-badge {
		position: absolute;
		top: -18px;
		left: 50%;
		transform: translateX(-50%);
		background: #28a745;
		color: white !important;
		padding: 5px 15px;
		border-radius: 20px;
		font-size: 13px !important;
		font-weight: 600;
		white-space: nowrap;
		box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
	}

	.card-radio {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

		.card-radio input[type="radio"] {
			width: 24px;
			height: 24px;
			margin-right: 12px;
			cursor: pointer;
			accent-color: #0066cc;
		}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.card-price {
		font-size: 24px;
		font-weight: bold;
		color: #0066cc;
		margin: 15px 0;
	}

	.card-benefits {
		list-style: none;
		margin-top: 15px;
		margin: 0;
	}

		.card-benefits li {
			padding: 8px 0;
			color: #555;
			display: flex;
			align-items: flex-start;
			font-family: var(--font-main);
			gap: 10px;
		}

			.card-benefits li::before {
				content: "✓";
				color: #28a745;
				font-weight: bold;
				font-size: 18px;
				flex-shrink: 0;
			}

	.card-warning {
		color: #666;
		font-size: 14px;
		margin-top: 15px;
		font-style: italic;
	}
	/* Payment Section */
	.trust-banner {
		background: #f0f7ff;
		/*	border: 2px solid #0066cc;*/
		border-radius: 8px;
		padding: 20px;
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 25px;
	}

	.trust-icon {
		font-size: 32px;
	}

	.trust-text {
		flex: 1;
	}

		.trust-text strong {
			display: block;
			font-size: 18px;
			color: #0066cc;
			margin-bottom: 5px;
		}

		.trust-text p {
			color: #555;
			font-size: 14px;
		}

	.payment-options {
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 0 0.5rem;
	}

	.payment-option {
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		padding: 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		gap: 15px;
	}

		.payment-option:hover {
			border-color: #0066cc;
			background: #f8f9fa;
		}

		.payment-option.active {
			border-color: #0066cc;
			background: #f0f7ff;
		}

		.payment-option input[type="radio"] {
			width: 20px;
			height: 20px;
			cursor: pointer;
			accent-color: #0066cc;
		}

	.payment-label {
		flex: 1;
		font-size: 16px;
		color: #333;
		cursor: pointer;
	}
	/* Responsive */
	@media (max-width: 1024px) {
		.service-cards {
			grid-template-columns: 1fr;
		}
	}
	/*overzicht kapitaal bij betalen*/

	section.herkomst {
		padding: 0;
	}

	.capital-box {
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 40px;
	}

	.capital-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #f0f0f0;
		background: #fff;
	}

		.capital-row:last-child {
			border-bottom: none;
		}

	.bank-info {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.bank-icon {
		width: 36px;
		height: 36px;
		background: #eaf6fb;
		color: #007dc3;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}

	.bank-details strong {
		display: block;
		color: #333;
		font-size: 15px;
	}

	.bank-details small {
		color: #888;
		font-size: 12px;
	}

	.amount {
		font-weight: 700;
		color: #333;
	}

	.total-row {
		background-color: #f4faff;
		padding: 15px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2px solid #fff;
	}

	.total-label {
		color: #005a8c;
		font-weight: 600;
	}

	.total-amount {
		color: #005a8c;
		font-weight: 800;
		font-size: 18px;
	}
	/*CONFETTIE*/
	#confetti-layer {
		position: fixed;
		inset: 0;
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		max-width: 100vw;
		max-height: 100vh;
		pointer-events: none;
		overflow: hidden;
	}

	.confetti-piece {
		position: fixed;
		width: 8px;
		height: 12px;
		background-color: red;
		top: -20px;
		pointer-events: none;
		opacity: 0.9;
		animation: confetti-fall linear forwards;
	}

	@keyframes confetti-fall {
		to {
			transform: translateY(110vh) rotate(360deg);
			opacity: 1;
		}
	}
	/*AFRONDEN*/
	/**
 * Afronden pagina - Controleren & Indienen
 */
	/* ===== CONTAINER ===== */

	.afronden-container {
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		gap: 2rem;
		align-items: flex-start;
	}

	.summary-section {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 65%;
	}
	/* ===== SUMMARY CARDS ===== */

	.summary-card {
		background: var(--white, #ffffff);
		border-radius: 12px;
		border: 1px solid var(--border, #e2e8f0);
		overflow: hidden;
		transition: box-shadow 0.2s;
	}

		.summary-card:hover {
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
		}

	.summary-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 1rem 1.25rem;
		background: transparent;
		border: 1px solid var(--color-border);
		border-radius: 12px;
		cursor: pointer;
		text-align: left;
		font-family: inherit;
		transition: background 0.15s;
	}

		.summary-header[aria-expanded=true] {
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		.summary-header:hover {
			background: var(--bg, #f8fafc);
		}

		.summary-header:focus {
			outline: 2px solid var(--primary, #0052CC);
			outline-offset: -2px;
		}

	.summary-header-left {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		flex: 1;
		min-width: 0;
	}

	.summary-icon {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		background: var(--primary-light, #e6f0ff);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--primary, #0052CC);
		flex-shrink: 0;
	}

	.summary-info {
		flex: 1;
		min-width: 0;
	}

	.summary-title {
		display: block;
		font-weight: 600;
		font-size: 1.05rem;
		color: var(--text-dark, #1e293b);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.summary-subtitle {
		display: block;
		font-size: 0.9rem;
		color: var(--mw-muted, #64748b);
		margin-top: 0.125rem;
	}

	.summary-highlight {
		text-align: right;
		flex-shrink: 0;
	}

	.summary-highlight-value {
		display: block;
		font-weight: 700;
		font-size: 1.1rem;
		color: var(--primary, #0052CC);
	}

	.summary-highlight-label {
		display: block;
		font-size: 0.75rem;
		color: var(--text-muted, #64748b);
	}

	.expand-icon {
		width: 24px;
		height: 24px;
		color: var(--text-muted, #64748b);
		flex-shrink: 0;
		transition: transform 0.2s;
	}

	.summary-header[aria-expanded="true"] .expand-icon {
		transform: rotate(180deg);
	}
	/* ===== SUMMARY DETAILS (Accordion Panel) ===== */

	.summary-details {
		border-top: 1px solid var(--border, #e2e8f0);
		padding: 1.25rem;
		background: var(--bg, #f8fafc);
		overflow: hidden;
		border: 1px solid var(--color-border);
		transition: max-height 0.3s ease-out, padding 0.3s ease-out, border-color 0.3s ease-out;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}

		.summary-details.collapsed {
			max-height: 0 !important;
			padding-top: 0;
			padding-bottom: 0;
			border-top-color: transparent;
			overflow: hidden;
			border: none;
		}

	.detail-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.detail-item {
		padding: 0.75rem 1rem;
		background: var(--white, #ffffff);
		border-radius: 8px;
		border: 1px solid var(--border, #e2e8f0);
	}

	.detail-label {
		display: block;
		font-size: 0.75rem;
		color: var(--text-muted, #64748b);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 0.25rem;
	}

	.detail-value {
		display: block;
		font-weight: 600;
		font-size: 0.95rem;
		color: var(--text, #1e293b);
	}

	.detail-small {
		display: block;
		font-size: 0.75rem;
		color: var(--text-muted, #64748b);
		margin-top: 0.25rem;
	}
	/* ===== PERSON CARD ===== */

	.person-card .person-avatar {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--primary-blue, #0052CC), var(--primary-blue, #003d99));
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: 700;
		font-size: 1rem;
		flex-shrink: 0;
	}

	.person-role {
		font-size: 1rem;
		background: var(--secundary-blue);
		color: var(--color-white);
		padding: 0.2rem 0.75rem;
		border-radius: 4px;
		font-weight: 600;
	}
	/* ===== ACTION CARD ===== */

	.action-card {
		background: var(--white, #ffffff);
		border-radius: 12px;
		border: 1px solid var(--border, #e2e8f0);
		overflow: hidden;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	}

	.action-header {
		background: var(--primary-blue);
		color: white;
		padding: 1.25rem 1.5rem;
	}

	.action-title {
		font-weight: 700;
		font-size: 1.25rem;
		margin: 0 0 0.25rem 0;
		color: #fff;
	}

	.action-subtitle {
		font-size: 0.85rem;
		opacity: 0.9;
		margin: 0;
		color: #fff;
	}
	/* ===== COSTS SUMMARY ===== */

	.costs-summary {
		padding: 1.25rem 1.5rem;
		border-bottom: 1px solid var(--border, #e2e8f0);
		background: var(--bg, #f8fafc);
	}

	.cost-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0;
	}

	.cost-label {
		font-size: 1.05rem;
		color: var(--text-muted, #64748b);
	}

	.cost-value {
		font-weight: 600;
		color: var(--text, #1e293b);
	}

	.cost-row.total {
		border-top: 1px dashed var(--border, #e2e8f0);
		margin-top: 0.5rem;
		padding-top: 1rem;
	}

		.cost-row.total .cost-label {
			color: var(--text, #1e293b);
			font-weight: 600;
		}

		.cost-row.total .cost-value {
			font-size: 1.1rem;
			color: var(--primary, #0052CC);
		}
	/* ===== PROGRESS BAR ===== */

	.progress-bar {
		height: 4px;
		background: var(--border, #e2e8f0);
		margin: 0 1.5rem 1rem;
		border-radius: 2px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: var(--success, #22c55e);
		width: 0;
		transition: width 0.3s ease;
	}
	/* ===== AGREEMENTS ===== */

	.agreements {
		padding: 1.5rem;
	}

	.agreement-item {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 0.875rem 1rem;
		margin-bottom: 0.75rem;
		border-radius: 8px;
		background: var(--bg, #f8fafc);
		border: 1px solid var(--border, #e2e8f0);
		cursor: pointer;
		transition: all 0.15s;
	}

		.agreement-item:last-child {
			margin-bottom: 0;
		}

		.agreement-item:hover {
			border-color: var(--primary, #0052CC);
			background: var(--primary-light, #e6f0ff);
		}

		.agreement-item.checked {
			background: var(--success-bg, #dcfce7);
			border-color: var(--success, #22c55e);
		}

	.agreement-checkbox-wrap {
		flex-shrink: 0;
		cursor: pointer;
	}

	.agreement-checkbox-input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.agreement-checkbox {
		width: 22px;
		height: 22px;
		border: 2px solid var(--border, #e2e8f0);
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--white, #ffffff);
		transition: all 0.15s;
	}

		.agreement-checkbox svg {
			width: 14px;
			height: 14px;
			color: white;
			opacity: 0;
			transition: opacity 0.15s;
		}

	.agreement-checkbox-input:checked + .agreement-checkbox {
		background: var(--success, #22c55e);
		border-color: var(--success, #22c55e);
	}

		.agreement-checkbox-input:checked + .agreement-checkbox svg {
			opacity: 1;
		}

	.agreement-checkbox-input:focus + .agreement-checkbox {
		box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.2);
	}

	.agreement-text {
		flex: 1;
		min-width: 0;
	}

	.agreement-title {
		display: block;
		font-weight: 600;
		font-size: 0.9rem;
		color: var(--text, #1e293b);
		margin-bottom: 0.125rem;
	}

	.agreement-description {
		font-size: 0.8rem;
		color: var(--text-muted, #64748b);
		margin: 0;
	}

		.agreement-description a,
		.info-link {
			color: var(--primary, #0052CC);
			text-decoration: underline;
		}
	/* ===== ACTION BUTTONS ===== */

	.action-buttons {
		padding: 1.5rem;
		padding-top: 0;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.btn {
		padding: 1rem 1.5rem;
		border-radius: 8px;
		font-weight: 600;
		font-size: 1rem;
		cursor: pointer;
		transition: all 0.15s;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		border: none;
		font-family: inherit;
		text-decoration: none;
	}
	/*afronden*/
	.btn-primary.afronden {
		background: var(--mw-muted);
		color: white;
		box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
	}

	.btn-primary:hover:not(:disabled) {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(0, 82, 204, 0.4);
	}

	.btn-primary:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	.btn-primary.ready {
		background: linear-gradient(135deg, var(--success, #22c55e), #16a34a);
		box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
	}

	.btn-secondary {
		background: var(--bg, #f8fafc);
		color: var(--text-muted, #64748b);
		border: 1px solid var(--border, #e2e8f0);
	}

		.btn-secondary:hover {
			background: var(--white, #ffffff);
			color: var(--text, #1e293b);
		}

	.error-message {
		font-size: 0.85rem;
		color: var(--error, #dc2626);
		text-align: center;
		margin: 0;
	}
	/* ===== MOBILE TOGGLE ===== */

	.mobile-toggle {
		display: none;
	}
	/* ===== RESPONSIVE ===== */

	@media (max-width: 768px) {
		.afronden-container {
			flex-direction: column;
			padding: 1rem;
		}

		.detail-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 480px) {
		.summary-highlight {
			display: none;
		}
	}
	/*KLAAR!*/
	.success-title {
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 24px;
		font-weight: 700;
		color: var(--primary-blue);
		margin-bottom: 8px;
	}

		.success-title svg {
			width: 32px;
			height: 32px;
			color: var(--color-green);
		}

	.success-tip {
		margin: 1rem 0;
		color: var(--mw-text-muted);
	}

		.success-tip strong {
			color: var(--mw-text);
		}
	/* Steps */
	.steps-list {
		width: 65%;
	}

	.step-item {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 20px;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius);
		margin-bottom: 12px;
		transition: all 0.2s ease;
	}

		.step-item.active {
			border-color: var(--primary-blue);
			background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
		}

		.step-item.completed {
			background: var(--color-white);
		}

		.step-item.disabled {
			opacity: 0.6;
		}

	.step-number {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 600;
		flex-shrink: 0;
	}

	.step-item.completed .step-number {
		background: var(--color-green);
		color: white;
	}

	.step-item.active .step-number {
		background: var(--primary-blue);
		color: white;
	}

	.step-item.disabled .step-number,
	.step-item.pending .step-number {
		background: var(--mw-bg);
		color: var(--mw-text-muted);
	}

	.step-content {
		flex: 1;
	}

	.step-title {
		font-size: 1.05rem;
		font-weight: 600;
		color: var(--text-dark);
	}

	.step-subtitle {
		font-size: 0.95rem;
		color: var(--mw-muted);
	}

	.step-action {
		flex-shrink: 0;
	}

	.badge {
		display: inline-block;
		padding: 6px 14px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 500;
	}

	.badge-done {
		background: var(--mw-green-light);
		color: #16a34a;
		font-family: var(--font-bold);
		font-size: 0.95rem;
		padding: 0.5rem 1rem;
	}

	.badge-pending {
		background: var(--mw-orange-light);
		color: #ea580c;
		font-family: var(--font-bold);
		font-size: 0.95rem;
		padding: 0.5rem 1rem;
	}

	.btn-start {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 10px 20px;
		background: var(--primary-blue);
		color: white;
		font-size: 14px;
		font-weight: 600;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		text-decoration: none;
		transition: all 0.2s ease;
	}

		.btn-start:hover {
			background: var(--secundary-blue);
		}
	/* Document List in Step */
	.step-docs {
		margin-top: 12px;
		padding: 12px 16px;
		background: rgba(255,255,255,0.7);
		border-radius: 8px;
		border: 1px solid var(--color-border);
	}

	.step-docs-title {
		font-size: 12px;
		font-weight: 600;
		color: var(--mw-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		margin-bottom: 8px;
	}

	.doc-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 0;
		font-size: 14px;
		color: var(--mw-text);
	}

		.doc-item svg {
			width: 16px;
			height: 16px;
			color: var(--mw-orange);
			flex-shrink: 0;
		}
	/* CTA Section */
	.cta-section {
		padding: 24px 28px;
		background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
		border-top: 1px solid #a7f3d0;
		text-align: center;
	}

	.cta-text {
		font-size: 15px;
		color: var(--mw-text);
		margin-bottom: 16px;
	}

		.cta-text strong {
			display: block;
			font-size: 17px;
			margin-bottom: 4px;
		}

	.btn-cta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 14px 28px;
		background: var(--mw-green-light);
		color: white;
		font-size: 16px;
		font-weight: 600;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		text-decoration: none;
		transition: all 0.2s ease;
	}

		.btn-cta:hover {
			background: #16a34a;
			transform: translateY(-1px);
		}

		.btn-cta svg {
			width: 20px;
			height: 20px;
		}
	/*special bij pensioen scheiden*/
	/* Kosten sectie - Pensioenverevening */

	.kosten-sectie {
		background: #fff;
		border-radius: 8px;
		margin-bottom: 24px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	}

	.kosten-intro {
		background: linear-gradient(135deg, #e8f4fc 0%, #f0f7ff 100%);
		border-left: 4px solid #0066cc;
		padding: 16px 20px;
		margin: 1.5rem 1rem;
		border-radius: 0 8px 8px 0;
	}

		.kosten-intro p {
			color: #444;
			font-size: 0.95rem;
		}

		.kosten-intro strong {
			color: #0066cc;
		}

	.kosten-breakdown {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.kosten-regel {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		background: #fafbfc;
		border-radius: 8px;
		border: 1px solid #e9ecef;
	}

	.kosten-regel-info {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.kosten-icon {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

		.kosten-icon.uzelf {
			background: #e3f2fd;
			color: #1976d2;
		}

		.kosten-icon.partner {
			background: #fce4ec;
			color: #c2185b;
		}

		.kosten-icon.begeleiding {
			background: #e8f5e9;
			color: #388e3c;
		}

		.kosten-icon svg {
			width: 22px;
			height: 22px;
		}

	.kosten-details h4 {
		font-size: 1rem;
		font-weight: 600;
		color: #333;
		margin-bottom: 2px;
	}

	.kosten-details span {
		font-size: 0.875rem;
		color: #666;
	}

	.kosten-bedrag {
		font-size: 1.1rem;
		font-weight: 600;
		color: #333;
		white-space: nowrap;
	}
	/* Totaal regel */
	.kosten-totaal {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
		border-radius: 8px;
		margin-top: 8px;
	}

	.kosten-totaal-label {
		color: #fff;
		font-size: 1rem;
		font-weight: 500;
	}

	.kosten-totaal-bedrag {
		color: #fff;
		font-size: 1.35rem;
		font-weight: 700;
	}
	/* Info badge */
	.kosten-info-badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: #fff3cd;
		color: #856404;
		padding: 8px 14px;
		border-radius: 20px;
		font-size: 0.8rem;
		font-weight: 500;
		margin-top: 16px;
	}

		.kosten-info-badge svg {
			width: 16px;
			height: 16px;
		}
	/* Responsive */
	@media (max-width: 600px) {
		.kosten-regel {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}

		.kosten-bedrag {
			align-self: flex-end;
		}

		.kosten-totaal {
			flex-direction: column;
			gap: 8px;
			text-align: center;
		}
	}

/* Melding bovenaan de intake na een verlopen sessie (RouteController: ?sessie=verlopen). Zelfde
   kleurstelling als .mw-warning op de vergelijking. */
.form .sessieMelding {
	margin: 0 0 1rem;
	padding: 10px 16px;
	background: #FFF3CD;
	border: 1px solid #E0A800;
	border-radius: var(--border-radius);
	color: #664D03;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* ====== Sticky "Verder"-balk onderaan (productpagina, sticky-verder.js) ====== */
.stickyVerder {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: #fff;
	border-top: 1px solid var(--gray-dark);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	transform: translateY(110%);
	transition: transform 0.2s ease;
}

	.stickyVerder.zichtbaar {
		transform: none;
	}

	/* eigen regels boven die van .container (basics.css maakt daar een kolom-flex van) */
	.stickyVerder .stickyVerderInner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0;
	}

	.stickyVerder .stickyVerderTekst {
		flex: 1 1 0%;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: var(--font-bold);
		color: var(--primary-blue);
	}

	.stickyVerder .nextButton {
		width: auto;
		flex: 0 0 auto;
		margin: 0;
	}

/* ruimte onder de pagina zolang de balk in beeld is; de medewerkerwidget schuift mee omhoog */
body.heeftStickyVerder {
	padding-bottom: 5rem;
}

	body.heeftStickyVerder .mw-widget {
		bottom: calc(16px + 5rem);
	}

@media (max-width: 600px) {
	.stickyVerder .stickyVerderTekst {
		flex: 1 1 0%;
		font-size: 0.95rem;
	}

	.stickyVerder .nextButton {
		padding: 0.75rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stickyVerder {
		transition: none;
	}
}

/* ====== Offertepagina met meerdere offertes (verdeling over aanbieders) ====== */
.offerteDelen .offerteDeel { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--grijs-lijn, #E1E1E1); }
	.offerteDelen .offerteDeel:first-child { border-top: 0; }
	.offerteDelen .deelKop { display: grid; gap: 2px; }
	.offerteDelen .deelStatus { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b6772; }
	.offerteDelen .offerteDeel.nu .deelStatus { color: #5f9227; }
	.offerteDelen .deelMeta { font-size: .9rem; color: #5b6772; }
	.offerteDelen .offerteDeel.later { opacity: .85; }

/* Revisit met offertecontrole (sept 2026): uitkomst onder de laadbalk op het wachtscherm */
.revisitControle [hidden] { display: none; }
.revisitControle .revisitUitkomst { display: grid; gap: 14px; margin-top: 8px; text-align: center; justify-items: center; }
.revisitControle .revisitUitkomst h2 { margin: 8px 0 0; font-size: 1.2rem; }
.revisitControle .revisitUitkomst p { margin: 0; }
.revisitControle .uitkeringen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; width: 100%; max-width: 480px; text-align: left; }
.revisitControle .uitkeringen > div { padding: 12px 16px; border: 1px solid var(--grijs-lijn, #E1E1E1); border-radius: 8px; }
.revisitControle .uitkeringen dt { font-size: .85rem; color: var(--grijs-tekst, #666); }
.revisitControle .uitkeringen dd { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; }
.revisitControle .uitkeringen .oud dd { font-weight: 400; text-decoration: line-through; }
.revisitControle .aanbieder { margin: 0; color: var(--grijs-tekst, #666); }
.revisitControle .buttonWrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; align-items: center; border-top: 0; margin: 8px 0 0; padding: 0; }
.revisitControle .nextButton { width: auto; min-width: 0; }
.revisitControle .linkKnop { text-decoration: underline; cursor: pointer; }

/* Klaar-pagina bij een verdeling over twee aanbieders: de tweede aanvraag start hier (KlaarData.VolgendeAanvraag) */
.volgendeAanvraag { border: 2px solid var(--primary-blue, #1B75BB); border-radius: 12px; padding: 16px 20px; margin: 0 0 20px; }
.volgendeAanvraag h2 { margin: 0 0 8px; }
.volgendeAanvraag p { margin: 0; }
.volgendeAanvraag .buttonWrap { border-top: 0; margin: 12px 0 0; padding: 0; }
.volgendeAanvraag .nextButton { width: auto; }

/* ====== Klaar-pagina: uitleg over Mijn Moneywise (dialoog, klaar.js) ====== */
dialog.klaarMijn {
	max-width: 560px;
	padding: 2rem 2.25rem;
}

	dialog.klaarMijn::backdrop {
		background: rgba(0, 0, 0, 0.45);
	}

	dialog.klaarMijn .klaarMijnBody h2 {
		font-family: var(--font-bold);
		font-size: 1.5rem;
		color: var(--primary-blue);
		margin: 0 1.5rem 0.75rem 0;
		text-wrap: balance;
	}

	dialog.klaarMijn .klaarMijnBody p {
		margin: 0 0 0.75rem;
		line-height: 1.5;
	}

	dialog.klaarMijn .klaarMijnBody ul {
		margin: 0 0 1rem;
		padding-left: 1.25rem;
		line-height: 1.6;
	}

	dialog.klaarMijn .klaarMijnBody .buttonWrap {
		margin-top: 1.25rem;
	}

	dialog.klaarMijn .klaarMijnBody .nextButton {
		width: auto;
		display: inline-block;
	}

/* "Te doen" is op de klaar-pagina een knop (opent dezelfde uitleg), met de opmaak van het label */
.step-action button.badge {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-family: var(--font-bold);
}