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);
	
}
.formWrap h2.subTitle{
	margin: 1rem;
	font-family: var(--font-bold);
	border-bottom: 1px solid #CCC;
	padding: 0.5rem 0;
	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;
}

/* etc. */

section.explainer {
	padding: 1rem 1rem;
	background-color: var(--gray-light);
	line-height: 1.8rem;
	text-align: left;
	border: 0px;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	border-radius: var(--border-radius);
	margin: 1rem 0;
}
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 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);
}


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

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

	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;
		}
.qWrap h1 {
	font-family: var(--font-bold);
	font-size: 2.5rem;
	color: var(--primary-blue);
	margin-bottom: 1rem;
}

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

.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;
	}

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;
}

	input.txt[disabled] {
		background: var(--color-gray-light);
		border: 1px solid var(--color-border);
		cursor:not-allowed;
	}

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

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

	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 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) 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);
	
}

.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;
}

.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;
}

/* ====== 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: 1.75rem;
			color: var(--primary-blue);
			margin: 0;
			line-height:2rem;
		}
		.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;
	}


/* Documentkaarten */
.doc-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}

.doc-row {
	margin: 10px 0;
}

.doc-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--mw-linkbg);
	padding: 12px 14px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--mw-navy);
	font-weight: 600;
	transition: background .2s ease, transform .06s ease;
}

	.doc-card:hover {
		background: var(--mw-linkbg-hover);
	}

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

.doc-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 500;
	color: var(--mw-muted);
	font-size: 12px;
}

	.doc-meta .dot {
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #cbd5e1;
		display: inline-block;
	}

/*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;
}

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;
		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: 2rem;
}

.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 {
	background: #e74c3c;
	color: white;
}

	.btn-delete:hover {
		background: #c0392b;
		transform: scale(1.1);
	}

.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);
	}

.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;
}