section.vergelijking {
	padding: 1rem;
	background-color: var(--gray-light);
}
	section.vergelijking .container {
		max-width: 1400px;
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}
div.inputData {
	width: 30%;
}

	div.inputData a.back {
		background: transparent url(/images/navigatie/simple-back-blue.png) no-repeat left center;
		font-weight: bold;
		color: var(--primary-blue);
		padding: 4px 5px 5px 20px;
		font-size: 12pt;
		height: 45px;
		text-decoration: none;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	div.inputData div.data {
		border: 1px solid #CCC;
		background: #FFF;
		border-radius: var(--border-radius);
		padding: 1rem;
		display: flex;
		flex-direction: column;
	}
		div.inputData div.data h3 {
			font-weight: bold;
			font-size: 1.3rem;
			border-bottom: 1px solid var(--color-border);
			padding: 0 0 1rem 0;
		}

		div.inputData div.data h5 {
			font-weight: bold;
			font-size: 1rem;
			padding: 1rem 0 0 0;
		}
		div.inputData div.data div.resultaatFilters {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			padding-top: 1rem;
		}

			div.inputData div.data div.resultaatFilters div.filterVeld {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
			}

				div.inputData div.data div.resultaatFilters div.filterVeld label {
					font-weight: bold;
					font-size: 0.9rem;
				}

				div.inputData div.data div.resultaatFilters div.filterVeld input,
				div.inputData div.data div.resultaatFilters div.filterVeld select {
					border: 1px solid var(--color-border);
					border-radius: var(--border-radius);
					padding: 8px 10px;
					font-size: 1rem;
					background: var(--color-white);
					width: 100%;
					box-sizing: border-box;
				}

		div.inputData div.data div.dataFilterBlock {
			display: flex;
			flex-direction: column;
		}
			div.inputData div.data div.dataFilterBlock div.inputs {
				display: grid;
				grid-template-columns: 3fr 2fr;
				gap: 20px;
				height: 35px;
				align-items: center;
				justify-items: start;
				border-bottom: 1px dashed var(--color-border);
			}

			div.inputData div.data div.dataFilterBlock[data-edit=true] div.inputs {
				background: transparent url(/images/icons/edit.png) no-repeat center right;
				cursor: pointer;
			}

			div.inputData div.data div.dataFilterBlock span.change {
				color: var(--primary-blue);
				text-decoration: none;
				width: 25%;
				margin: 1rem 0;
				background-color: var(--color-white);
				text-align: center;
				border-radius: var(--border-radius);
				padding: 10px;
				font-size: 0.9rem;
				font-weight: bold;
				cursor: pointer;
				align-self: flex-end;
				border: 1px solid var(--color-border);
			}

/*body*/
div.resultBody {
	width: 70%;
	display: flex;
	flex-direction: column;
}

	div.resultBody div.resultHeader {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 45px;
		align-items: center;
	}

	div.resultBody div.resultHeader h5 {
		font-weight: bold;
		font-size: 20pt;
	}
		div.resultBody div.resultHeader span.bttnSave {
			background: transparent url(/images/navigatie/bookmark.png) no-repeat 5px center;
			background-size: 25px;
			color: #1B75BA;
			padding: 8px 10px 10px 35px;
			border: 2px solid #1B75BA;
			font-size: 13pt;
			border-radius: 5px;
			cursor: pointer;
			width: 190px;
			font-weight: bold;
		}
			div.resultBody div.resultHeader span.bttnSave:hover {
				background: #DCE8F7 url(/images/navigatie/bookmark.png) no-repeat 5px center;
				background-size: 25px;
			}

	div.resultBody div.resultFilter {
		width: 100%;
		display: flex;
		gap:0.25rem;
		flex-direction: row;
		justify-content: space-between;
		height: 45px;
		align-items: center;
		border: 1px solid var(--color-gray, #e6e9ef);
		border-radius: var(--border-radius, 16px);
		margin-bottom: 1rem;
		background:var(--color-white);
		padding:0.25rem;
	}

		div.resultBody div.resultFilter span.filter {
			width: 100%;
			text-align: center;
			font-family: var(--font-bold);
			font-size:1.1rem;
			background: var(--light-blue);
			color: var(--primary-blue);
			height: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
			div.resultBody div.resultFilter span.filter:hover {
				background: var(--secundary-blue);
				color: var(--color-white);
			}

			div.resultBody div.resultFilter span.filter.active {
				background: var(--primary-blue);
				color: var(--color-white);
			}

	div.resultBody div.resultRow {
		width: 100%;
		background: var(--color-white, #fff);
		border: 1px solid var(--gray-medium);
		border-radius: var(--border-radius, 16px);
		box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
		padding: 0 clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px);
		transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
		overflow: hidden;
		margin-bottom: 1rem;
	}

		div.resultBody div.resultRow [data-info]{
			cursor:pointer;
			color:var(--color-link);
			text-decoration: underline;
			font-weight:normal;
		}

		div.resultBody div.resultRow span.position {
			font-weight: bold;
			color: var(--primary-blue);
			text-align: center;
			border-bottom-left-radius: 35%;
			height: 30px;
			font-size: 14pt;
			border-bottom-right-radius: 35%;
			border: 2px solid #CCC;
			background: var(--very-light-blue);
			padding: 2px 10px;
			border-top: 1px solid #CCC;
		}

		div.resultBody div.resultRow .body {
			display: grid;
			grid-template-columns: 2fr 4fr 2fr;
			gap: 12px; /* optioneel */
			width: 100%;
			box-sizing: border-box;
		}

			div.resultBody div.resultRow .body .section {
				display: flex;
				flex-direction: column;
			}

				div.resultBody div.resultRow .body .section.logo {
					align-items: center;
				}
				div.resultBody div.resultRow .body .section.logo img {
					width: 75%;
				}
					div.resultBody div.resultRow .body .section.logo h3 {
						font-family: var(--font-bold);
						color: var(--color-link);
					}
			div.resultBody div.resultRow .body .section.center {
				display: flex;
			}
				div.resultBody div.resultRow .body .section.center h2 {
					font-family: var(--font-bold);
				}
				div.resultBody div.resultRow .body .section.center p,
				div.resultBody div.resultRow .body .section.center span.point {
					font-size: 1rem;
					line-height: 1.75rem;
					color: var(--font-color);
				}

					div.resultBody div.resultRow .body .section.center p{
						margin-top: 1rem;
					}

					div.resultBody div.resultRow .body .section.cta {
						flex-direction: column;
						align-items: center;
					}

						div.resultBody div.resultRow .body .section.cta span.figure {
							text-align: center;
							font-size: 26pt;
							font-weight: bold;
							color: var(--color-link);
							font-family: var(--font-bold);
							display: flex;
							flex-direction: row;
							align-items: flex-start;
						}
							div.resultBody div.resultRow .body .section.cta span.figure mw-pct,
							div.resultBody div.resultRow .body .section.cta span.figure mw-eur {
								margin-top: 5px;
								text-align: center;
								display: flex;
								flex-direction: row;
								align-items: flex-start;
							}

							div.resultBody div.resultRow .body .section.cta span.figure em {
								font-size: 14pt;
								margin-top: 5px;
							}

								div.resultBody div.resultRow .body .section.cta span.figure em.info {
									font-size: 13pt;
									border-radius: 50%;
									border: 2px solid var(--primary-blue);
									cursor: pointer;
									margin: 10px;
									width: 25px;
									height: 25px;
								}
									div.resultBody div.resultRow .body .section.cta span.figure em.info:hover {
										background: var(--light-blue);
									}
						div.resultBody div.resultRow .body .section.cta div.infoDict {
							display: grid;
							grid-template-columns: 1fr 1fr; /* twee even brede kolommen */
							gap: 8px 16px; /* rij- en kolomafstand */
						}

						div.resultBody div.resultRow .body .section.cta div.infoDict span{
						}
							
						div.resultBody div.resultRow .body .section.cta .prodbttn {
							color: #FFF;
							text-decoration: none;
							width: 100%;
							margin: 1rem;
							background-color: var(--color-green);
							text-align: center;
							border-radius: var(--border-radius);
							padding: 10px;
							font-size: 1.1rem;
							font-weight: bold;
							cursor: pointer;
						}
						div.resultBody div.resultRow .body .section.cta span.footer {
							display: flex;
							margin: 1rem 0;
						}

							div.resultBody div.resultRow .body .section.cta .prodbttn:hover {
								background-color: var(--color-dark-green);
							}

							div.resultBody div.resultRow .body .section.cta .prodbttn.disabled {
								background-color: var(--gray-light);
								color: var(--primary-blue);
							}
								div.resultBody div.resultRow .body .section.cta .prodbttn.disabled:hover {
									background-color: var(--gray-light);
									color: var(--primary-blue);
								}

						div.resultBody div.resultRow .body .section.cta .attention {
							background: #FFF;
							color: #1B75BA;
							font-family: var(--font-bold);
							width: 100%;
							border: 1px solid #CCC;
							margin: 1rem;
							padding: 8px;
							-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
							-moz-box-shadow: 0 0 0 0 rgba(0,0,0,0);
							box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
							border-radius: 25px;
							text-align: center;
							cursor: pointer;
						}
							div.resultBody div.resultRow .body .section.cta .attention:hover {
								background-color: var(--very-light-blue);
							}

						div.resultBody div.resultRow .body .section.cta .popover[hidden] {
							display: none
						}

						div.resultBody div.resultRow .body .section.cta .popover {
							position: absolute;
							inset: auto auto auto 0; /* of berekend naast de knop */
							min-width: 280px;
							max-width: 360px;
							border: 1px solid var(--color-border);
							border-radius: 10px;
							background: #fff;
							box-shadow: 0 10px 30px rgba(0,0,0,.08);
							padding: 12px;
						}

						div.resultBody div.resultRow .body .section.cta .popover-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							gap: 8px;
							margin-bottom: 8px
						}


		div.resultBody div.resultRow div.detailsWrap {
			border-top: 1px solid #CCC;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 1rem;
			flex-direction: column;
		}
		div.resultBody div.resultRow div.detailsWrap .details{
			width:100%;
		}
		
		div.resultBody div.resultRow div.detailsWrap span {
				cursor: pointer;
				width: 200px;
				border: 1px solid #CCC;
				padding: 0.5rem 0;
				border-radius: 5px;
				position: relative;
				text-align: center;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				align-items: center;
				justify-content: flex-start;
				background: var(--color-white);

			}

				div.resultBody div.resultRow div.detailsWrap span:hover {
					background: var(--very-light-blue);
				}

				div.resultBody div.resultRow div.detailsWrap span em {
					margin: 0 1rem;
					font-size: 1.5rem;
				}

			div.resultBody div.resultRow div.detailsWrap .tabsWrap {
				width: 100%;
				display: flex;
				gap: 0.5rem;
				margin-top: 1rem;
				background: var(--color-white);
				padding: 0.25rem;
				border-bottom: 1px solid var(--color-border);
				height: 45px;
			}
				div.resultBody div.resultRow div.detailsWrap .tabsWrap span {
					padding: 0.5rem 1rem;
					border-bottom: 0;
					border-bottom-left-radius: 0px;
					border-bottom-right-radius: 0px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					font-family: var(--font-bold);
					background: var(--color-gray-light);
					color: var(--primary-blue);
					height: 40px;
				}
					div.resultBody div.resultRow div.detailsWrap .tabsWrap span:hover {
						background: var(--color-white);
						color: var(--primary-blue);
						height: 40px;
					}
					div.resultBody div.resultRow div.detailsWrap .tabsWrap span.active {
						background: var(--color-white);
						color: var(--primary-blue);
						height: 41px;
					}

			div.resultBody div.resultRow div.detailsWrap .tabContent {
				display: flex;
				flex-direction: column;
			}
				

				div.resultBody div.resultRow div.detailsWrap p {
					width: 100%;
					margin: 1.5em 0;
					font-size: 1.05rem;
					padding: 0 0.5rem;
					color: var(--text-dark);
					line-height: 1.5rem;
				}

			div.resultBody div.resultRow div.detailsWrap table {
				border-collapse: collapse;
				width: 100%;
				margin: 1.5em 0;
				font-family: Arial, sans-serif;
				font-size: 1.25rem;
			}

				div.resultBody div.resultRow div.detailsWrap table caption {
					text-align: left;
					font-weight: bold;
					font-size: 1rem;
					margin-bottom: 0.5em;
					color: #004080;
					padding: 0 0.5rem;
				}

				div.resultBody div.resultRow div.detailsWrap table th, 
				div.resultBody div.resultRow div.detailsWrap table td {
					
					padding: 8px 10px;
					vertical-align: central;
				}

			div.resultBody div.resultRow div.detailsWrap table th {
				background-color: #f5f7fa;
				text-align: left;
				font-weight: 600;
			}

				div.resultBody div.resultRow div.detailsWrap table tr {
					border-bottom: 1px solid var(--gray-dark);
					font-size: 0.95rem;
					height: 45px;
				}

/*			div.resultBody div.resultRow div.detailsWrap table tr:nth-child(even) {
				background-color: #fafafa;
			}*/

				div.resultBody div.resultRow div.detailsWrap table td a{
					color:var(--color-link);
				}

				div.resultBody div.resultRow div.detailsWrap table em {
					color: #555;
				}

			div.resultBody div.resultRow div.detailsWrap table strong {
				color: #000;
			}

		div.resultBody div.resultRow.advert {
			background: var(--very-light-blue);
			border: 2px dashed var(--color-border);
		}

			div.resultBody div.resultRow.advert .body .section.center p {
				margin-top: 0rem;
			}
			div.resultBody div.resultRow.advert span.position {
				background: var(--primary-blue);
				color: #FFF;
			}

			div.resultBody div.resultRow.advert .body .section.cta .prodbttn {
				background-color: var(--primary-blue);
			}
				div.resultBody div.resultRow.advert .body .section.cta .prodbttn:hover {
					background-color: var(--secundary-blue);
				}


/* Basis styling */
.dialogVergelijking {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 1.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	width: 90%;
	max-width: 700px;
	border-radius: 8px;
	border: 1px solid #CCC;

}

/* Exit-intent retentie-popup: dezelfde opmaak als .resultModal + .exitTitle/.exitUsps in resultaat.css
   (beleggen-resultaten), zodat de popup op alle vergelijkingen gelijk oogt. */
.dialogVergelijking.exitIntent {
	max-width: 460px;
	padding: 28px;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

	.dialogVergelijking.exitIntent h2.exitTitle {
		margin: 0 0 12px;
		color: var(--primary-blue);
		font-size: 1.6rem;
	}

	.dialogVergelijking.exitIntent h3.exitSaveTitle {
		margin: 16px 0 12px;
		color: var(--primary-blue);
		font-family: var(--font-bold);
		font-size: 1.15rem;
	}

	.dialogVergelijking.exitIntent p {
		margin: 0 0 8px;
		font-size: 1.05rem;
	}

	.dialogVergelijking.exitIntent ul.exitUsps {
		list-style: none;
		padding: 0;
		margin: 12px 0;
	}

		.dialogVergelijking.exitIntent ul.exitUsps li {
			position: relative;
			padding-left: 30px;
			margin: 8px 0;
			font-size: 1.05rem;
		}

			.dialogVergelijking.exitIntent ul.exitUsps li::before {
				content: "\2713";
				position: absolute;
				left: 0;
				top: 1px;
				width: 20px;
				height: 20px;
				background: #16a34a;
				color: #fff;
				border-radius: 4px;
				text-align: center;
				line-height: 20px;
				font-size: 13px;
			}

	.dialogVergelijking.exitIntent .exitCta {
		display: block;
		width: 100%;
		margin-top: 20px;
		padding: 0.75rem 1rem;
		border: 0;
		border-radius: 10px;
		background-color: var(--color-green);
		color: var(--color-white);
		font-size: 1rem;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		transition: background 0.3s ease;
	}

		.dialogVergelijking.exitIntent .exitCta:hover {
			background-color: var(--color-dark-green);
		}
	.dialogVergelijking.custom {
		padding: 0rem;
	}

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

	.dialogVergelijking .close {
		position: absolute;
		right: 1rem;
		top: 1rem;
		font-size: 1.5rem;
		font-weight: bold;
		color: var(--gray-medium);
		cursor: pointer;
		background: none;
		border: none;
		line-height: 1;
	}

		.dialogVergelijking .close:hover {
			color: var(--text-dark);
		}

	.dialogVergelijking h2 {
		font-family: var(--font-bold);
	}

	.dialogVergelijking .body {
		display: grid;
		grid-template-columns: 2fr 3fr; /* verhouding 2:3 */
		gap: 1rem; /* optioneel: ruimte tussen kolommen */
	}
	.dialogVergelijking .body.email {
		display: flex;
		flex-direction: column;
	}
		.dialogVergelijking .body.tekst {
			display: flex;
			flex-direction: column;
		}
	
	.dialogVergelijking div.employee {
	display: flex;
	flex-direction: column;
}

	.dialogVergelijking div.mw-benefits {
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}

	.dialogVergelijking div.mw-input-wrap {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin: 1rem 0;
	}

		.dialogVergelijking div.mw-input-wrap label {
			font-size: 11pt;
			margin: 0 0 -10px 0;
		}
	
	.dialogVergelijking div.employee img {
		width: 80%;
		margin: 0 10%;
	}

.dialogVergelijking .body div h2 {
	font-family: var(--font-bold);
	font-size: 1.55rem;
	line-height: 1.75rem;
	margin-bottom: 2rem;
}
	.dialogVergelijking div.body p {
		font-size: 1rem;
		line-height: 1.75rem;
		margin: 1rem 0 0 0;
	}

.dialogVergelijking div.body  .button {
	color: #FFF;
	text-decoration: none;
	width: 50%;
	margin: 1rem 0;
	background-color: var(--primary-blue);
	text-align: center;
	border-radius: var(--border-radius);
	padding: 10px;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
}
	.dialogVergelijking div.mw-trust{
		display:flex;
		gap: 1.5rem;
	}
		.dialogVergelijking div.mw-trust span {
			font-size: 11pt;

			color: var(--color-dark-green);
		}


/* ===========================================
   PRICE LAYOUTS - Split & Grid
   =========================================== */

/* -------------------------------------------
   SPLIT LAYOUT (2 waarden: hoog-laag)
   ------------------------------------------- */
.price-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 15px;
	width: 100%;
}

.split-cell {
	background: white;
	padding: 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

	.split-cell.primary {
		background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
	}

.split-label {
	font-size: 0.7rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.split-amount {
	font-size: 1.4rem;
	font-weight: bold;
	color: #006b99;
	line-height: 1;
}

	.split-amount em {
		font-style: normal;
		font-size: 0.8rem;
		vertical-align: super;
	}

	.split-amount .info {
		font-size: 0.75rem;
		vertical-align: super;
		margin-left: 4px;
	}

.split-cell:not(.primary) .split-amount {
	color: #666;
	font-size: 1.2rem;
}

.split-suffix {
	font-size: 0.7rem;
	color: #999;
}

/* -------------------------------------------
   GRID LAYOUT (4 waarden: variabel pensioen)
   ------------------------------------------- */
.price-grid {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr; /* Eerste kolom minimaal 120px */
	gap: 2px;
	background: #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 15px;
}

.grid-cell {
	background: white;
	padding: 14px 18px;
	text-align: center;
}

	.grid-cell.jaar1 {
		grid-row: span 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; /* Centreer horizontaal */
		background: var(--very-light-blue);
		border-right: 2px solid #e0e0e0;
		padding: 18px 24px; /* Wat meer padding */
	}

.grid-label {
	font-size: 0.75rem;
	font-family: var(--font-bold);
	color: var(--cc-muted);
	margin-bottom: 4px;
}

.grid-amount {
	font-size: 1.75rem;
	font-family: var(--font-bold);
	color: #006b99;
	line-height: 1.1;
	white-space: nowrap; /* Voorkom tekstbreuk */
}

	.grid-amount em {
		font-style: normal;
		font-size: 0.75rem;
		vertical-align: super;
	}

	.grid-amount .info {
		font-size: 0.7rem;
		vertical-align: super;
		margin-left: 4px;
	}

.grid-suffix {
	font-size: 0.75rem;
	color: var(--color-muted);
	margin-top: 2px;
}

.grid-cell.expected {
	background: var(--gray-light);
}

	.grid-cell.expected .grid-amount {
		color: #006b99;
	}

/* Range row (laag/hoog) */
.grid-cell.range-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	background: #fafafa;
}

.range-item {
	text-align: center;
}

	.range-item .grid-label {
		font-size: 0.6rem;
		margin-bottom: 2px;
	}

	.range-item .grid-amount {
		font-size: 1.05rem;
		color: #777;
	}

	.range-item.pessimistic .grid-label {
		color: #c0392b;
	}

	.range-item.optimistic .grid-label {
		color: #27ae60;
	}

.range-divider {
	color: #ccc;
	font-size: 0.8rem;
}

/* -------------------------------------------
   RESPONSIVE: stack op kleine schermen
   ------------------------------------------- */
@media (max-width: 800px) {
	section.vergelijking .container {
		flex-direction: column;
	}

	div.inputData {
		width: 100%;
	}
}

@media (max-width: 400px) {
	.price-split {
		grid-template-columns: 1fr;
	}

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

	.grid-cell.jaar1 {
		grid-row: auto;
		border-right: none;
		border-bottom: 2px solid #e0e0e0;
	}
}

.risk-indicator {
	padding: 14px 16px;
	background: #F7FAFC;
	border-radius: 8px;
}

.risk-indicator__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
}

.risk-indicator__title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #718096;
	margin: 0;
}

.risk-indicator__score {
	font-size: 13px;
	font-weight: 600;
	color: #2D3748;
}

.risk-indicator__bar {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient( to right, #48BB78 0%, #48BB78 20%, #9AE6B4 20%, #9AE6B4 40%, #ECC94B 40%, #ECC94B 60%, #ED8936 60%, #ED8936 80%, #E53E3E 80%, #E53E3E 100% );
	margin-bottom: 8px;
}

.risk-indicator__marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	background: white;
	border: 3px solid #2D3748;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	left: calc(var(--score) * 1%);
}

.risk-indicator__label {
	font-size: 12px;
	color: #718096;
}

	.risk-indicator__label strong {
		color: #2D3748;
		font-weight: 600;
	}

/* Waarschuwingsbanner bovenaan een vergelijking (bijv. crypto-risico).
   Negatieve marge compenseert de 1rem padding van section.vergelijking,
   zodat de banner strak tegen de header en de schermranden ligt. */
.vergelijking .mw-warning {
	margin: -1rem -1rem 1rem;
	background: #FFF3CD;
	border-bottom: 1px solid #E0A800;
	color: #664D03;
	padding: 8px 16px;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;
}

/* Betaalmethode/munt-iconen in vergelijkingspunten (crypto) */
.vergelijking .point img.pay-icon {
	height: 20px;
	width: auto;
	vertical-align: middle;
	margin: 0 2px;
}

/* Oversluiten: wat de huidige lening nog kost tegenover de goedkoopste aanbieder eronder.
   Staat via het advertentieblok boven de resultaten van de lenen-vergelijking. */
div.resultBody .oversluitwinst {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	background: var(--very-light-blue);
	border: 1px solid var(--gray-dark);
	border-radius: var(--border-radius);
}

	div.resultBody .oversluitwinst h3 {
		margin: 0 0 .5rem;
		font-size: 1.15rem;
		color: var(--color-link);
	}

	div.resultBody .oversluitwinst p {
		margin: 0 0 .5rem;
		line-height: 1.6;
	}

	div.resultBody .oversluitwinst p.winst {
		margin-bottom: 0;
		font-size: 1.05rem;
		color: var(--color-dark-green);
	}

	div.resultBody .oversluitwinst.waarschuwing {
		background: var(--mw-orange-light);
	}

/* Duo-view (opbouwstraat): twee gelijkwaardige keuzekaarten naast elkaar,
   sparen versus beleggen. Eigen opmaak, los van de resultRow-kaarten. */
div.resultBody .duoKaarten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
	margin-top: .5rem;
}

	div.resultBody .duoKaarten .duoKaart {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: .9rem;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius);
		box-shadow: var(--shadow);
		padding: 2rem 1.5rem 1.5rem;
		min-width: 0;
	}

		div.resultBody .duoKaarten .duoKaart .duoBadge {
			position: absolute;
			top: -14px;
			left: 1.25rem;
			background: var(--primary-blue);
			color: var(--color-white);
			border-radius: 999px;
			padding: 4px 18px;
			font-weight: bold;
			font-size: .85rem;
			text-transform: uppercase;
			letter-spacing: .5px;
		}

		div.resultBody .duoKaarten .duoKaart.beleggen .duoBadge {
			background: var(--color-dark-green);
		}

		div.resultBody .duoKaarten .duoKaart header {
			display: flex;
			align-items: center;
			gap: .9rem;
			min-height: 48px;
		}

			div.resultBody .duoKaarten .duoKaart header img {
				max-height: 40px;
				max-width: 120px;
				object-fit: contain;
			}

			div.resultBody .duoKaarten .duoKaart header .naam {
				display: flex;
				flex-direction: column;
			}

				div.resultBody .duoKaarten .duoKaart header .naam strong {
					font-size: 1.05rem;
					color: var(--primary-blue);
				}

				div.resultBody .duoKaarten .duoKaart header .naam small {
					color: var(--mw-muted);
				}

		div.resultBody .duoKaarten .duoKaart .bedragen {
			display: flex;
			flex-direction: column;
			gap: .6rem;
		}

			div.resultBody .duoKaarten .duoKaart .bedrag {
				display: flex;
				flex-direction: column;
				align-items: center;
				background: var(--gray-light);
				border-radius: var(--border-radius);
				padding: .75rem .5rem;
				text-align: center;
			}

				div.resultBody .duoKaarten .duoKaart .bedrag.hard {
					background: var(--very-light-blue, var(--gray-light));
					border: 1px solid var(--primary-blue);
				}

				div.resultBody .duoKaarten .duoKaart .bedrag .titel {
					font-size: .8rem;
					text-transform: uppercase;
					letter-spacing: .4px;
					color: var(--mw-muted);
				}

				div.resultBody .duoKaarten .duoKaart .bedrag .waarde {
					font-size: 1.9rem;
					font-weight: bold;
					color: var(--primary-blue);
					line-height: 1.2;
				}

				div.resultBody .duoKaarten .duoKaart .bedrag .footer {
					font-size: .8rem;
					color: var(--mw-muted);
				}

		div.resultBody .duoKaarten .duoKaart .scenarios {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			border: 1px solid var(--color-border);
			border-radius: var(--border-radius);
			overflow: hidden;
		}

			div.resultBody .duoKaarten .duoKaart .scenario {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: .5rem .25rem;
				gap: .15rem;
			}

				div.resultBody .duoKaarten .duoKaart .scenario + .scenario {
					border-left: 1px solid var(--color-border);
				}

				div.resultBody .duoKaarten .duoKaart .scenario .label {
					font-size: .72rem;
					color: var(--mw-muted);
					text-align: center;
				}

				div.resultBody .duoKaarten .duoKaart .scenario .waarde {
					font-weight: bold;
					font-size: .95rem;
				}

		div.resultBody .duoKaarten .duoKaart .scenarioFooter {
			margin: -.4rem 0 0;
			font-size: .75rem;
			color: var(--mw-muted);
		}

		div.resultBody .duoKaarten .duoKaart ul.punten {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: .35rem;
		}

			div.resultBody .duoKaarten .duoKaart ul.punten li {
				padding-left: 1.5rem;
				position: relative;
				line-height: 1.4;
			}

				div.resultBody .duoKaarten .duoKaart ul.punten li::before {
					content: "✓";
					position: absolute;
					left: 0;
					color: var(--color-dark-green);
					font-weight: bold;
				}

		div.resultBody .duoKaarten .duoKaart p.aandachtspunt {
			margin: 0;
			background: var(--mw-orange-light);
			border-radius: var(--border-radius);
			padding: .5rem .75rem;
			font-size: .9rem;
		}

		div.resultBody .duoKaarten .duoKaart p.voetnoot {
			margin: 0;
			font-size: .8rem;
			color: var(--mw-muted);
		}

		div.resultBody .duoKaarten .duoKaart footer {
			margin-top: auto;
			display: flex;
			flex-direction: column;
			gap: .5rem;
		}

			div.resultBody .duoKaarten .duoKaart footer .duoKnop {
				display: block;
				color: var(--color-white);
				text-decoration: none;
				background-color: var(--color-green);
				text-align: center;
				border-radius: var(--border-radius);
				padding: 12px;
				font-size: 1.05rem;
				font-weight: bold;
				cursor: pointer;
			}

				div.resultBody .duoKaarten .duoKaart footer .duoKnop:hover {
					background-color: var(--color-dark-green);
				}

			div.resultBody .duoKaarten .duoKaart footer .duoLinks {
				display: flex;
				justify-content: center;
				gap: 1.5rem;
			}

				div.resultBody .duoKaarten .duoKaart footer .duoLinks .link {
					color: var(--color-link);
					text-decoration: underline;
					cursor: pointer;
					font-size: .9rem;
				}

/* de rentelijst en onderbouwing openen in de bestaande vergelijking-dialog;
   de dialog-body is standaard een 2:3-grid, dus deze inhoud moet de volle breedte pakken */
/* de dialog-body is standaard een 2:3-grid; met duo-inhoud gewoon de volle breedte */
dialog.dialogVergelijking .body:has(.duoDialog) {
	display: block;
}

dialog.dialogVergelijking .duoDialog {
	grid-column: 1 / -1;
	max-height: 70vh;
	overflow-y: auto;
	padding-right: .5rem;
}

	dialog.dialogVergelijking .duoDialog h3 {
		margin: 0 0 .5rem;
		color: var(--primary-blue);
	}

	dialog.dialogVergelijking .duoDialog p {
		margin: 0 0 1rem;
		line-height: 1.5;
	}

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

	dialog.dialogVergelijking .duoDialog table.mw-table {
		width: 100%;
		border-collapse: collapse;
	}

		dialog.dialogVergelijking .duoDialog table.mw-table caption {
			display: none;
		}

		dialog.dialogVergelijking .duoDialog table.mw-table th,
		dialog.dialogVergelijking .duoDialog table.mw-table td {
			padding: .5rem .6rem;
			border-bottom: 1px solid var(--color-border);
			text-align: left;
			font-size: .92rem;
		}

		dialog.dialogVergelijking .duoDialog table.mw-table th {
			background: var(--gray-light);
			font-weight: bold;
		}

		dialog.dialogVergelijking .duoDialog table.mw-table td em {
			color: var(--mw-muted);
		}

		dialog.dialogVergelijking .duoDialog table.mw-table .kiesBank {
			color: var(--color-link);
			text-decoration: underline;
			cursor: pointer;
			white-space: nowrap;
		}

@media (max-width: 850px) {
	div.resultBody .duoKaarten {
		grid-template-columns: 1fr;
	}
}

/* ====== Meerdere fiscale kaders: blok "Beste verdeling" boven de lijst (Lijf_Uitkeren.VerdelingBlok) ====== */
.vergelijking .verdeling {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 24px;
	align-items: center;
	background: #F4FAEC;
	border: 2px solid var(--groen, #7DB63C);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 18px;
}
	.vergelijking .verdeling h3 { margin: 0; font-size: 1.05rem; color: #5f9227; }
	.vergelijking .verdeling .regels { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; font-size: .95rem; margin-top: 6px; }
	.vergelijking .verdeling .regels .kader { font-weight: 600; }
	.vergelijking .verdeling .regels .som { text-align: right; font-variant-numeric: tabular-nums; }
	.vergelijking .verdeling .verschil { font-size: .9rem; color: #5b6772; margin-top: 6px; }
	.vergelijking .verdeling .rechts { text-align: right; display: grid; gap: 8px; justify-items: end; }
	.vergelijking .verdeling .totaal { font-size: 1.7rem; font-weight: 700; color: #5f9227; font-variant-numeric: tabular-nums; line-height: 1.1; }
	.vergelijking .verdeling .totaal small { display: block; font-size: .8rem; font-weight: 500; color: #5b6772; }
	.vergelijking .verdeling .nextButton { width: auto; display: inline-block; }
@media (max-width: 760px) {
	.vergelijking .verdeling { grid-template-columns: 1fr; }
	.vergelijking .verdeling .rechts { justify-items: start; text-align: left; }
}