/* -----------------------------------------------------------------
   abonnement.css — de abonnementsstap met schuifjes en toggles.
   _TARIEVEN_20261028

   Waarom een eigen bestand: onboard.css is 700 regels en gaat over alle
   stappen. Dit gaat over één stap. Zelfde variabelen (--pho-*), dus het
   valt visueel niet op dat het ergens anders staat.
   ----------------------------------------------------------------- */

.pho__staffel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 20px;
}

/* Eén rij: label links, waarde rechts, schuifje eronder over de volle breedte. */
.pho__schuif {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 6px 12px;
}

.pho__schuif > label {
	color: var(--pho-ink);
	font-weight: 600;
	font-size: 0.95rem;
}

.pho__schuif-waarde {
	color: var(--pho-green);
	font-weight: 700;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	/* Tabulaire cijfers: zonder dit danst de waarde heen en weer terwijl
	   je schuift, en dat leest als een fout in plaats van als een getal. */
}

.pho__schuif input[type="range"] {
	grid-column: 1 / -1;
	width: 100%;
	margin: 2px 0 0;
	accent-color: var(--pho-green);
	height: 26px;
	cursor: pointer;
}

.pho__schuif-hint {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--pho-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

/* Een hint die waarschuwt dat de volgende stand geld kost. Bewust niet rood:
   het is geen fout, het is informatie vóór een keuze. */
.pho__schuif-hint[data-soort="grens"] {
	color: var(--pho-terra);
}

/* ------------------------------------------------------------- toggles */
.pho__toggles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 1px solid var(--pho-lijn);
	padding-top: 16px;
}

.pho__toggle {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 12px;
	padding: 11px 0;
	cursor: pointer;
}

.pho__toggle + .pho__toggle {
	border-top: 1px solid var(--pho-lijn);
}

/* De echte checkbox blijft in de tabvolgorde en bereikbaar voor een
   schermlezer; alleen het beeldje is vervangen. display:none zou hem uit
   de tabvolgorde halen en dat is precies de fout die je niet wil. */
.pho__toggle input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 42px;
	height: 24px;
	margin: 2px 0 0;
	border-radius: 999px;
	background: var(--pho-lijn);
	position: relative;
	cursor: pointer;
	flex: none;
	transition: background 0.15s ease;
}

.pho__toggle input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pho-wit);
	transition: transform 0.15s ease;
}

.pho__toggle input[type="checkbox"]:checked {
	background: var(--pho-green);
}

.pho__toggle input[type="checkbox"]:checked::after {
	transform: translateX(18px);
}

.pho__toggle input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--pho-green);
	outline-offset: 2px;
}

.pho__toggle input[type="checkbox"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pho__toggle-tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pho__toggle-tekst strong {
	color: var(--pho-ink);
	font-size: 0.95rem;
	font-weight: 600;
}

.pho__toggle-tekst span {
	color: var(--pho-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

/* --------------------------------------------------------------- kaart */
.pho__tarief {
	margin: 4px 0 18px;
	padding: 15px 17px;
	border-radius: 10px;
	background: var(--pho-beige);
	border: 1px solid var(--pho-lijn);
}

.pho__tarief-rij {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.pho__tarief-naam {
	color: var(--pho-ink);
	font-weight: 600;
	font-size: 0.95rem;
}

.pho__tarief-bedrag {
	color: var(--pho-green);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.pho__tarief-per {
	color: var(--pho-muted);
	font-size: 0.82rem;
	font-weight: 400;
}

.pho__tarief-kenmerken {
	margin: 9px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pho__tarief-kenmerken li {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pho-wit);
	border: 1px solid var(--pho-lijn);
	color: var(--pho-muted);
	font-size: 0.78rem;
}

/* Op een telefoon past een lange pakketnaam plus een groot bedrag niet naast
   elkaar. Onder elkaar is dan beter leesbaar dan een afgekapte naam. */
@media (max-width: 480px) {
	.pho__tarief-rij {
		flex-direction: column;
		gap: 2px;
	}
}

/* Op een smal scherm staat het tarief onder de schuifjes en dus buiten beeld:
   je schuift dan zonder de prijs te zien, en dat is precies het moment waarop
   de prijs ertoe doet.

   Eerst had ik hem onderaan laten plakken, maar dan dekt hij de EU-toggle af —
   een kaart die informatie geeft mag geen informatie wegnemen. Daarom staat hij
   op een telefoon BOVENAAN de stap: direct zichtbaar, en hij plakt aan de
   bovenkant terwijl je schuift. Niets wordt bedekt. */
@media (max-width: 720px) {
	.pho__stap[data-scherm="plan"] {
		display: flex;
		flex-direction: column;
	}

	.pho__stap[data-scherm="plan"] > h3 {
		order: 0;
	}

	.pho__stap[data-scherm="plan"] > .pho__uitleg {
		order: 1;
	}

	.pho__tarief {
		order: 2;
		position: sticky;
		top: 6px;
		z-index: 3;
		margin: 0 0 18px;
		/* Niet transparant, anders schijnt de tekst van de schuifjes erdoor. */
		background: var(--pho-beige);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
	}

	.pho__staffel {
		order: 3;
	}

	.pho__stap[data-scherm="plan"] > .pho__knop {
		order: 4;
	}
}

/* Wie liever geen beweging ziet, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
	.pho__toggle input[type="checkbox"],
	.pho__toggle input[type="checkbox"]::after {
		transition: none;
	}
}