/* ===== Spaarvergelijking (/sparen/vergelijken/) =====
   Eigen stylesheet voor webcontrols/vergelijking/sparen/SparenVergelijking.cshtml; kleuren uit basics.css. */

.sv {
	--sv-ink: #14212E;
	--sv-muted: #5B6B7A;
	--sv-line: #DCE4EC;
	--sv-line-2: #EDF1F5;
	--sv-ground: #F3F6F9;
	--sv-blue-ink: #0B5A94;
	--sv-green-ink: #3F7A12;
	--sv-green-bg: #EEF7E4;
	--sv-orange: #E8650A;
	--sv-orange-bg: #FFF1E4;
	--sv-orange-line: #F7C9A0;
	--sv-warn: #8A5A00;
	--sv-r: 10px;
	background: var(--sv-ground);
	color: var(--sv-ink);
	padding: 1.25rem 0 2.5rem;
}

.sv-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ---------- Kop ---------- */

.sv-kop {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.sv-kruimel {
	font-size: .85rem;
	color: var(--sv-muted);
}

	.sv-kruimel a {
		color: var(--color-link);
		text-decoration: none;
	}

.sv-kop h1 {
	margin: 0;
	font-size: var(--font-size-h1);
	text-wrap: balance;
}

.sv-sub {
	margin: 0;
	color: var(--sv-muted);
}

.sv-gecontroleerd {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .88rem;
	font-weight: bold;
	color: var(--sv-green-ink);
}

/* ---------- Tegels ---------- */

.sv-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .75rem;
}

.sv-tegel {
	background: var(--color-white);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	padding: .75rem .9rem;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

	.sv-tegel span {
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--sv-muted);
		font-weight: bold;
	}

	.sv-tegel strong {
		font-size: 1.35rem;
		font-variant-numeric: tabular-nums;
	}

	.sv-tegel small {
		color: var(--sv-muted);
		font-size: .82rem;
	}

/* ---------- Indeling ---------- */

.sv-indeling {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.sv-zij {
	position: sticky;
	top: 12px;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.sv-box {
	background: var(--color-white);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.sv-boxkop {
	font-weight: bold;
	font-size: 1rem;
	color: var(--sv-ink);
}

details.sv-box > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	details.sv-box > summary::-webkit-details-marker {
		display: none;
	}

	details.sv-box > summary::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--sv-muted);
		border-bottom: 2px solid var(--sv-muted);
		transform: rotate(45deg);
		margin-top: -4px;
		transition: transform .2s;
	}

details.sv-box[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: 4px;
}

.sv-bedrag {
	display: flex;
	align-items: center;
	border: 2px solid var(--primary-blue);
	border-radius: 8px;
	background: var(--color-white);
	overflow: hidden;
}

	.sv-bedrag span {
		padding: 0 .6rem;
		font-weight: bold;
		color: var(--primary-blue);
		font-size: 1.2rem;
	}

	.sv-bedrag input {
		border: 0;
		font: inherit;
		font-weight: bold;
		font-size: 1.25rem;
		color: var(--sv-ink);
		width: 100%;
		padding: .45rem .5rem .45rem 0;
		font-variant-numeric: tabular-nums;
		outline: none;
		background: transparent;
	}

	.sv-bedrag:focus-within {
		box-shadow: 0 0 0 3px var(--light-blue);
	}

.sv-snel {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}

	.sv-snel button {
		font: inherit;
		font-size: .8rem;
		font-weight: bold;
		border: 1px solid var(--sv-line);
		background: var(--sv-ground);
		border-radius: 999px;
		padding: .2rem .65rem;
		cursor: pointer;
		color: var(--sv-ink);
	}

		.sv-snel button:hover {
			border-color: var(--primary-blue);
			color: var(--primary-blue);
		}

.sv-hint {
	margin: 0;
	font-size: .8rem;
	color: var(--sv-muted);
	line-height: 1.4;
}

.sv-radios {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

	.sv-radios label {
		display: flex;
		gap: .6rem;
		align-items: center;
		padding: .45rem .5rem;
		border-radius: 6px;
		cursor: pointer;
		font-size: .92rem;
	}

		.sv-radios label:hover {
			background: var(--sv-ground);
		}

		.sv-radios label:has(input:checked) {
			background: var(--very-light-blue);
			color: var(--sv-blue-ink);
			font-weight: bold;
		}

	.sv-radios input {
		accent-color: var(--primary-blue);
		width: 16px;
		height: 16px;
		margin: 0;
	}

.sv-lab {
	font-size: .82rem;
	color: var(--sv-muted);
	font-weight: bold;
}

.sv-select {
	font: inherit;
	font-size: .92rem;
	padding: .45rem .5rem;
	border: 1px solid var(--sv-line);
	border-radius: 6px;
	background: var(--color-white);
	color: var(--sv-ink);
	width: 100%;
}

#pnlLooptijd {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

	#pnlLooptijd[hidden] {
		display: none;
	}

.sv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.sv-chip {
	font: inherit;
	font-size: .85rem;
	font-weight: bold;
	border: 1px solid var(--sv-line);
	background: var(--color-white);
	border-radius: 999px;
	padding: .3rem .75rem;
	cursor: pointer;
	color: var(--sv-ink);
}

	.sv-chip[aria-pressed="true"] {
		background: var(--primary-blue);
		border-color: var(--primary-blue);
		color: var(--color-white);
	}

/* ---------- Lijst ---------- */

.sv-lijst {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-width: 0;
}

.sv-seg {
	display: inline-flex;
	flex-wrap: wrap;
	background: var(--color-white);
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

	.sv-seg button {
		font: inherit;
		font-size: .88rem;
		font-weight: bold;
		border: 0;
		background: transparent;
		padding: .35rem .9rem;
		border-radius: 999px;
		cursor: pointer;
		color: var(--sv-muted);
		display: flex;
		gap: .4rem;
		align-items: center;
	}

		.sv-seg button em {
			font-style: normal;
			font-size: .75rem;
			background: var(--sv-ground);
			border-radius: 999px;
			padding: 0 .45rem;
		}

		.sv-seg button[aria-pressed="true"] {
			background: var(--primary-blue);
			color: var(--color-white);
		}

			.sv-seg button[aria-pressed="true"] em {
				background: rgba(255, 255, 255, .22);
			}

.sv-kaarten {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* ---------- Kaart ---------- */

.sv-kaart {
	background: var(--color-white);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	transition: box-shadow .15s, border-color .15s;
}

	.sv-kaart:hover {
		border-color: #B9CADB;
		box-shadow: 0 6px 20px rgba(20, 33, 46, .07);
	}

	.sv-kaart.sv-top {
		border-color: var(--primary-blue);
		box-shadow: 0 0 0 1px var(--primary-blue);
	}

	.sv-kaart[hidden] {
		display: none;
	}

.sv-main {
	display: grid;
	grid-template-columns: 30px 120px minmax(0, 1fr) 130px 190px;
	gap: 1rem;
	padding: 1rem 1.25rem;
	align-items: center;
}

.sv-rang {
	font-weight: bold;
	color: var(--sv-muted);
	font-size: 1.05rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sv-top .sv-rang {
	color: var(--primary-blue);
}

.sv-logo {
	height: 56px;
	display: grid;
	place-items: center;
}

	.sv-logo img {
		max-width: 100%;
		max-height: 56px;
		object-fit: contain;
	}

.sv-logonaam {
	font-weight: bold;
	font-size: .9rem;
	color: var(--sv-blue-ink);
	text-align: center;
	line-height: 1.15;
}

.sv-info {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 0;
}

.sv-label {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--primary-blue);
	background: var(--very-light-blue);
	border-radius: 4px;
	padding: .05rem .45rem;
}

	.sv-label[hidden] {
		display: none;
	}

.sv-info h2 {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.25;
	color: var(--sv-ink);
}

	.sv-info h2 small {
		display: block;
		font-size: .88rem;
		font-weight: normal;
		color: var(--sv-muted);
	}

.sv-kenmerken {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

	.sv-kenmerken li {
		display: inline-flex;
		align-items: center;
		gap: .3rem;
		font-size: .8rem;
		font-weight: bold;
		color: #344454;
		background: var(--sv-ground);
		border-radius: 999px;
		padding: .15rem .65rem .15rem .45rem;
	}

		.sv-kenmerken li svg {
			flex: none;
		}

		.sv-kenmerken li.sv-ok svg {
			color: var(--sv-green-ink);
		}

		.sv-kenmerken li.sv-nl {
			background: var(--sv-green-bg);
			color: var(--sv-green-ink);
		}

		.sv-kenmerken li.sv-let {
			background: #FFF6DB;
			color: var(--sv-warn);
		}

.sv-rente {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.sv-pct {
	font-size: 2rem;
	font-weight: bold;
	color: var(--primary-blue);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

	.sv-pct sup {
		font-size: .55em;
		vertical-align: .55em;
		margin-left: 1px;
	}

.sv-per {
	font-size: .78rem;
	color: var(--sv-muted);
	margin-top: .25rem;
}

.sv-go {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.sv-opbrengst {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: .8rem;
	color: var(--sv-muted);
	line-height: 1.3;
	text-align: center;
}

	.sv-opbrengst strong {
		color: var(--sv-ink);
		font-size: 1.15rem;
		font-variant-numeric: tabular-nums;
	}

.sv-over[hidden] {
	display: none;
}

.sv-cta {
	font-weight: bold;
	font-size: .92rem;
	background: var(--color-green);
	color: var(--color-white);
	border-radius: 8px;
	padding: .65rem .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	text-decoration: none;
	text-align: center;
}

	.sv-cta:hover {
		background: #63A02A;
		color: var(--color-white);
	}

	.sv-cta.sv-uit {
		background: var(--sv-ground);
		color: var(--sv-muted);
		cursor: help;
	}

.sv-cta:focus-visible,
.sv-chip:focus-visible,
.sv-seg button:focus-visible,
.sv-meer:focus-visible,
.sv-snel button:focus-visible {
	outline: 3px solid var(--light-blue);
	outline-offset: 2px;
}

/* ---------- Actie ---------- */

.sv-actie {
	margin: 0 1.25rem;
	border: 1px solid var(--sv-orange-line);
	background: var(--sv-orange-bg);
	border-radius: 8px;
	padding: .6rem .9rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 200px auto;
	grid-template-areas: "badge tekst balk gem";
	gap: .4rem 1rem;
	align-items: center;
}

	.sv-actie.sv-actie-los {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "badge tekst";
	}

.sv-badge {
	grid-area: badge;
	justify-self: start;
	font-size: .7rem;
	font-weight: bold;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: var(--sv-orange);
	color: var(--color-white);
	border-radius: 4px;
	padding: .1rem .45rem;
}

.sv-actie p {
	grid-area: tekst;
	margin: 0;
	font-size: .9rem;
}

.sv-tijdlijn {
	grid-area: balk;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sv-balk {
	display: flex;
	height: 22px;
	border-radius: 5px;
	overflow: hidden;
	font-size: .7rem;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

	.sv-balk span {
		display: grid;
		place-items: center;
		color: var(--color-white);
		white-space: nowrap;
		overflow: hidden;
		min-width: 0;
	}

	.sv-balk .sv-a {
		background: var(--sv-orange);
	}

	.sv-balk .sv-n {
		background: #7FA9CC;
	}

.sv-balktekst {
	display: flex;
	justify-content: space-between;
	font-size: .7rem;
	color: var(--sv-muted);
}

.sv-gem {
	grid-area: gem;
	font-size: .78rem;
	color: var(--sv-muted);
	text-align: right;
	line-height: 1.2;
}

	.sv-gem strong {
		display: block;
		font-size: 1.05rem;
		color: var(--sv-ink);
	}

.sv-opmerking {
	margin: 0 1.25rem;
	font-size: .85rem;
	color: var(--sv-warn);
	background: #FFF6DB;
	border-radius: 8px;
	padding: .45rem .8rem;
}

/* ---------- Voet en details ---------- */

.sv-voet {
	display: flex;
	align-items: center;
	padding: .5rem 1.25rem;
	border-top: 1px solid var(--sv-line-2);
	margin-top: .9rem;
}

.sv-meer {
	font: inherit;
	font-size: .88rem;
	font-weight: bold;
	border: 0;
	background: none;
	color: var(--color-link);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem 0;
}

	.sv-meer svg {
		transition: transform .2s;
	}

	.sv-meer[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

.sv-details {
	border-top: 1px solid var(--sv-line-2);
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

	.sv-details[hidden] {
		display: none;
	}

	.sv-details h3 {
		margin: 0 0 .4rem;
		font-size: .8rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--sv-muted);
	}

.sv-blokken {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.sv-details dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem .75rem;
	font-size: .88rem;
}

.sv-details dt {
	color: var(--sv-muted);
}

.sv-details dd {
	margin: 0;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

.sv-staffel {
	margin-top: .6rem;
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}

	.sv-staffel caption {
		text-align: left;
		font-size: .8rem;
		color: var(--sv-muted);
		padding-bottom: .2rem;
	}

	.sv-staffel th,
	.sv-staffel td {
		text-align: left;
		padding: .3rem .4rem;
		border-bottom: 1px solid var(--sv-line-2);
	}

	.sv-staffel th {
		background: var(--sv-ground);
	}

.sv-klein {
	margin: .5rem 0 0;
	font-size: .82rem;
	color: var(--sv-muted);
	line-height: 1.45;
}

.sv-tekst {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	max-width: 75ch;
}

	.sv-tekst p {
		margin: 0 0 .5rem;
	}

.sv-leeg {
	background: var(--color-white);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	padding: 1rem;
	margin: 0;
}

.sv-disclaimer {
	margin: .5rem 0 0;
	font-size: .8rem;
	color: var(--sv-muted);
	line-height: 1.45;
}

/* ---------- Smaller ---------- */

@media (max-width: 1100px) {
	.sv-main {
		grid-template-columns: 26px 96px minmax(0, 1fr) 120px;
	}

	.sv-go {
		grid-column: 3 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.sv-opbrengst {
		align-items: flex-start;
		text-align: left;
	}

	.sv-actie {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "badge tekst tekst" ". balk gem";
	}
}

@media (max-width: 860px) {
	.sv-indeling {
		grid-template-columns: 1fr;
	}

	.sv-zij {
		position: static;
	}

	.sv-blokken {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.sv-tegels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

		/* op de telefoon alleen de twee rentes; de lijst moet snel in beeld zijn */
		.sv-tegels .sv-tegel:nth-child(n+3) {
			display: none;
		}

	.sv-main {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas: "logo info rente" "go go go";
		gap: .6rem .75rem;
		padding: .85rem;
	}

	.sv-rang {
		display: none;
	}

	.sv-logo {
		grid-area: logo;
		height: 44px;
	}

		.sv-logo img {
			max-height: 44px;
		}

	.sv-info {
		grid-area: info;
	}

	.sv-rente {
		grid-area: rente;
		align-self: start;
	}

	.sv-pct {
		font-size: 1.5rem;
	}

	.sv-go {
		grid-area: go;
		gap: .75rem;
	}

		.sv-go .sv-cta {
			flex: 1;
			max-width: 60%;
		}

	.sv-actie,
	.sv-opmerking {
		margin: 0 .85rem;
	}

	.sv-actie {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "badge badge" "tekst tekst" "balk gem";
	}

	.sv-voet,
	.sv-details {
		padding-left: .85rem;
		padding-right: .85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-kaart,
	.sv-meer svg,
	details.sv-box > summary::after {
		transition: none;
	}
}

/* "Geen samenwerking"-popup: dezelfde opmaak als .dialogVergelijking in vergelijking.css (die laadt deze pagina niet) */
.sv-cta.sv-uit { border: 0; font: inherit; cursor: pointer; }

.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;
}
	.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 .body { display: grid; grid-template-columns: 2fr 3fr; gap: 1rem; }
	.dialogVergelijking div.employee { display: flex; flex-direction: column; }
		.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;
	}

@media (max-width: 600px) {
	.dialogVergelijking .body { grid-template-columns: 1fr; }
	.dialogVergelijking div.employee img { width: 40%; margin: 0 auto; }
	.dialogVergelijking div.body .button { width: 100%; }
}