/**
 * Huisstijl van de wizard.
 *
 * Kleuren en typografie komen uit het thema (phrona-theme): dezelfde variabelen
 * als de rest van de site, zodat de wizard geen eigen eiland wordt. Waar het
 * thema geen variabele heeft, staat de waarde hier expliciet met een naam.
 *
 * Alles is gescoped op .pho zodat er niets aan de rest van de site verandert.
 */

.pho {
	--pho-ink: var(--ink, #22201c);
	--pho-body: var(--body, #4a463f);
	--pho-muted: var(--muted, #6d675d);
	--pho-green: var(--green, #1f5f4a);
	--pho-terra: var(--terra, #c97857);
	--pho-beige: var(--beige, #f6f1e8);
	--pho-lijn: var(--lijn, #ddd6c8);
	--pho-wit: #fffdf9;
	--pho-rood: #a02c2c;
	--pho-radius: 14px;

	max-width: 760px;
	margin: 0 auto;
	padding: 8px 0 32px;
	color: var(--pho-body);
	font-size: 1rem;
	line-height: 1.6;
}

.pho *,
.pho *::before,
.pho *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ kop */

.pho__kop {
	margin-bottom: 28px;
}

.pho__titel {
	margin: 0 0 6px;
	color: var(--pho-ink);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}

.pho__onder {
	margin: 0 0 20px;
	color: var(--pho-muted);
	font-size: 0.95rem;
}

.pho__voortgang {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: geen;
}

.pho__voortgang li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 6px;
	border: 1px solid var(--pho-lijn);
	border-radius: 999px;
	background: var(--pho-wit);
	color: var(--pho-muted);
	font-size: 0.82rem;
	white-space: nowrap;
}

.pho__voortgang li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pho-beige);
	color: var(--pho-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.pho__voortgang li.is-actief {
	border-color: var(--pho-green);
	background: var(--pho-green);
	color: #fff;
	font-weight: 600;
}

.pho__voortgang li.is-actief span {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.pho__voortgang li.is-klaar {
	border-color: var(--pho-green);
	color: var(--pho-green);
}

.pho__voortgang li.is-klaar span {
	background: var(--pho-green);
	color: #fff;
}

/* ------------------------------------------------------------- schermen */

.pho__stap {
	padding: 26px 24px;
	border: 1px solid var(--pho-lijn);
	border-radius: var(--pho-radius);
	background: var(--pho-wit);
}

.pho__stap h3 {
	margin: 0 0 8px;
	color: var(--pho-ink);
	font-size: 1.25rem;
	line-height: 1.3;
}

.pho__stap h4 {
	margin: 0 0 6px;
	color: var(--pho-ink);
	font-size: 1rem;
}

.pho__uitleg {
	margin: 0 0 20px;
	color: var(--pho-body);
	font-size: 0.95rem;
}

.pho__klein {
	margin: 0 0 10px;
	color: var(--pho-muted);
	font-size: 0.875rem;
}

.pho__klein--na {
	margin-top: 14px;
	margin-bottom: 0;
}

/* --------------------------------------------------------------- velden */

.pho__veld {
	margin-bottom: 18px;
}

.pho__veld label {
	display: block;
	margin-bottom: 6px;
	color: var(--pho-ink);
	font-size: 0.9rem;
	font-weight: 600;
}

.pho__optioneel {
	color: var(--pho-muted);
	font-weight: 400;
}

.pho__veld input[type="text"],
.pho__veld input[type="email"],
.pho__veld input[type="password"],
.pho__veld input[type="number"],
.pho__veld select {
	width: 100%;
	max-width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--pho-lijn);
	border-radius: 9px;
	background: #fff;
	color: var(--pho-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pho__veld input:focus,
.pho__veld select:focus {
	border-color: var(--pho-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(31, 95, 74, 0.14);
}

.pho__veld input:disabled {
	background: var(--pho-beige);
	color: var(--pho-muted);
}

.pho__hint {
	margin: 6px 0 0;
	color: var(--pho-muted);
	font-size: 0.83rem;
}

.pho__prefix {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--pho-lijn);
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
}

.pho__prefix span {
	display: flex;
	align-items: center;
	padding: 0 10px;
	background: var(--pho-beige);
	border-right: 1px solid var(--pho-lijn);
	color: var(--pho-muted);
	font-size: 0.9rem;
	white-space: nowrap;
}

.pho__prefix input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pho__prefix input:focus {
	box-shadow: none;
}

.pho__rij {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 14px;
}

/* _HINTADRES_20261028 — postcode, huisnummer en letter naast elkaar.
   Postcode is het breedst (zes tekens met een spatie), het huisnummer het
   smalst, de letter is één teken. Zo passen ze op één regel zonder dat de
   klant hoeft te raden waar iets hoort. */
.pho__rij--adres {
	grid-template-columns: 1.2fr 0.8fr 0.6fr;
}

/* De statusregel onder het adres. Drie toestanden, drie kleuren — en nooit
   alleen kleur: er staat altijd tekst bij. */
.pho__hint--adres {
	min-height: 1.1em;
}

.pho__hint--goed {
	color: var(--pho-green);
}

.pho__hint--fout {
	color: var(--pho-rood);
}

.pho__hint--letop {
	color: var(--pho-terra);
}

/* --------------------------------------------------------------- knoppen */

.pho__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid var(--pho-green);
	border-radius: 10px;
	background: var(--pho-green);
	color: #fff;
	font-family: inherit;
	font-size: 0.97rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.06s ease;
}

.pho__knop:hover:not(:disabled) {
	background: #17493a;
	border-color: #17493a;
	color: #fff;
}

.pho__knop:active:not(:disabled) {
	transform: translateY(1px);
}

.pho__knop:disabled {
	opacity: 0.62;
	cursor: progress;
}

.pho__knop--stil {
	margin-left: 10px;
	border-color: var(--pho-lijn);
	background: transparent;
	color: var(--pho-green);
}

.pho__knop--stil:hover:not(:disabled) {
	background: var(--pho-beige);
	border-color: var(--pho-green);
	color: var(--pho-green);
}

.pho__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pho-muted);
	font-family: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.pho__reset {
	margin: 22px 0 0;
	text-align: center;
}

/* -------------------------------------------------------------- melding */

.pho__mld {
	margin-bottom: 18px;
	padding: 13px 15px;
	border-left: 4px solid var(--pho-rood);
	border-radius: 8px;
	background: #fdf3f2;
	color: #7d2222;
	font-size: 0.92rem;
}

.pho__mld--goed {
	border-left-color: var(--pho-green);
	background: #f1f7f4;
	color: #1a4d3c;
}

.pho__mld--let-op {
	border-left-color: var(--pho-terra);
	background: #fdf5ef;
	color: #7a4526;
}

/* ------------------------------------------------------------------ MFA */

.pho__mfa {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 22px;
	padding: 16px;
	border: 1px solid var(--pho-lijn);
	border-radius: 10px;
	background: var(--pho-beige);
}

.pho__qr {
	flex: 0 0 auto;
	padding: 8px;
	border-radius: 8px;
	background: #fff;
	line-height: 0;
}

.pho__qr img {
	display: block;
	width: 148px;
	height: 148px;
	image-rendering: pixelated;
}

.pho__mfa-tekst {
	min-width: 0;
}

.pho__sleutel {
	display: block;
	margin: 4px 0 10px;
	padding: 9px 11px;
	border: 1px dashed var(--pho-lijn);
	border-radius: 7px;
	background: #fff;
	color: var(--pho-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	word-break: break-all;
}

.pho__herstel {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--pho-terra);
	border-radius: 10px;
	background: #fdf5ef;
}

.pho__codes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
	margin: 12px 0 16px;
	padding: 0;
	list-style: none;
}

.pho__codes li {
	padding: 8px 10px;
	border-radius: 6px;
	background: #fff;
	color: var(--pho-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	text-align: center;
}

/* ---------------------------------------------------------------- plan */

.pho__plannen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.pho__plan {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px;
	border: 1px solid var(--pho-lijn);
	border-radius: 10px;
	background: var(--pho-beige);
}

.pho__plan strong {
	color: var(--pho-ink);
	font-size: 0.95rem;
}

.pho__plan-bedrag {
	color: var(--pho-green);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.pho__plan-eenheid {
	color: var(--pho-muted);
	font-size: 0.82rem;
}

.pho__plan .pho__klein {
	margin: 8px 0 0;
}

.pho__totaal {
	margin: 4px 0 18px;
	padding: 13px 15px;
	border-radius: 9px;
	background: var(--pho-beige);
	color: var(--pho-ink);
	font-size: 1rem;
	font-weight: 600;
}

.pho__totaal:empty {
	display: none;
}

/* ----------------------------------------------------------- voorwaarden */

.pho__voorwaarden {
	max-height: 320px;
	margin-bottom: 18px;
	padding: 16px;
	border: 1px solid var(--pho-lijn);
	border-radius: 9px;
	background: #fff;
	color: var(--pho-body);
	font-size: 0.875rem;
	line-height: 1.65;
	overflow-y: auto;
	white-space: pre-wrap;
}

.pho__akkoord {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 18px;
	color: var(--pho-ink);
	font-size: 0.93rem;
	cursor: pointer;
}

.pho__akkoord input {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	accent-color: var(--pho-green);
}

/* ---------------------------------------------------------------- wacht */

.pho__wacht {
	margin: 14px 0 0;
	color: var(--pho-muted);
	font-size: 0.9rem;
	font-style: italic;
}

.pho--melding,
.pho--bevestigen,
.pho--klaar {
	max-width: 640px;
	padding: 26px 24px;
	border: 1px solid var(--pho-lijn);
	border-radius: var(--pho-radius);
	background: var(--pho-wit);
}

/* ---------------------------------------------------------------- mobiel */

@media (max-width: 640px) {
	.pho__stap {
		padding: 20px 16px;
	}

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

	/* Op een telefoon past postcode + huisnummer + letter niet naast elkaar.
	   Postcode en huisnummer naast elkaar wel: dat zijn de twee die de klant
	   samen intypt. De letter zakt naar de volgende regel. */
	.pho__rij--adres {
		grid-template-columns: 1.4fr 1fr;
	}

	/* De letter zakt naar een eigen regel, maar niet over de volle breedte:
	   een veld van 350px voor één teken ziet uit als een fout. */
	.pho__rij--adres .pho__veld--letter {
		grid-column: 1 / -1;
		max-width: 140px;
	}

	.pho__mfa {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.pho__voortgang li {
		font-size: 0.78rem;
	}

	.pho__knop {
		width: 100%;
	}

	.pho__knop--stil {
		margin: 10px 0 0;
	}
}

/* Respecteer een bezoeker die beweging liever niet ziet. */
@media (prefers-reduced-motion: reduce) {
	.pho *,
	.pho *::before,
	.pho *::after {
		transition: none !important;
	}
}

/* ------------------------------------------------------- wachtwoordsterkte
 * _WACHTWOORDSTERKTE_20261028
 *
 * Twee dingen naast elkaar: een meter (advies) en een lijst met eisen (poort).
 * De eisen staan er altijd, ook als het veld nog leeg is, zodat de klant weet
 * waar hij aan begint. Ze zijn neutraal gekleurd zolang er niets is ingevuld:
 * vier rode kruisjes voordat je iets typt voelt als een verwijt.
 */

.pho__meter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 10px;
}

.pho__meter[data-leeg='true'] {
	opacity: 0.55;
}

.pho__meter-balk {
	flex: 1 1 auto;
	height: 6px;
	border-radius: 999px;
	background: var(--pho-lijn, #ddd6c8);
	overflow: hidden;
}

.pho__meter-vulling {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--pho-rood, #a02c2c);
	transition: width 0.18s ease, background-color 0.18s ease;
}

/* Kleur volgt de score. Bewust niet alleen kleur: het label ernaast zegt het
 * ook in woorden, want kleur alleen is ontoegankelijk. */
.pho__meter[data-score='0'] .pho__meter-vulling,
.pho__meter[data-score='1'] .pho__meter-vulling {
	background: var(--pho-rood, #a02c2c);
}

.pho__meter[data-score='2'] .pho__meter-vulling {
	background: #b8791f;
}

.pho__meter[data-score='3'] .pho__meter-vulling {
	background: #6b8f3a;
}

.pho__meter[data-score='4'] .pho__meter-vulling {
	background: var(--pho-green, #1f5f4a);
}

.pho__meter-label {
	flex: 0 0 auto;
	color: var(--pho-muted, #6d675d);
	font-size: 0.8rem;
	white-space: nowrap;
}

.pho__eisen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 4px 14px;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	color: var(--pho-muted, #6d675d);
}

.pho__eisen li {
	position: relative;
	padding-left: 20px;
}

/* Het vinkje is een pseudo-element zodat er geen extra markup nodig is. */
.pho__eisen li::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	text-align: center;
	content: '·';
	color: var(--pho-lijn, #ddd6c8);
}

.pho__eisen li[data-haalt='ja'] {
	color: var(--pho-green, #1f5f4a);
}

.pho__eisen li[data-haalt='ja']::before {
	content: '✓';
	color: var(--pho-green, #1f5f4a);
	font-weight: 700;
}

.pho__eisen li[data-haalt='nee'] {
	color: var(--pho-rood, #a02c2c);
}

.pho__eisen li[data-haalt='nee']::before {
	content: '×';
	color: var(--pho-rood, #a02c2c);
	font-weight: 700;
}

/* ------------------------------------------------------------ subdomeinveld
 * _SUBDOMEIN_20261028
 *
 * Het adres staat als één geheel: [naam].phrona.dev. De punt en het domein
 * horen visueel bij het veld, anders typt iemand "mijnbedrijf.phrona.dev" in
 * een veld waar dat niet hoort.
 */

.pho__prefix--sub {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.pho__prefix--sub input {
	flex: 1 1 auto;
	min-width: 0;
	/* Rechts geen afronding: het suffix sluit er direct op aan. */
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.pho__suffix {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 12px;
	border: 1px solid var(--pho-lijn, #ddd6c8);
	border-left: 0;
	border-top-right-radius: var(--pho-radius, 8px);
	border-bottom-right-radius: var(--pho-radius, 8px);
	background: var(--pho-soft, #f4f1ea);
	color: var(--pho-muted, #6d675d);
	font-size: 0.92em;
	white-space: nowrap;
}

/* Statusmelding onder het veld. Kleur alleen is niet genoeg: de tekst zelf
 * zegt ook wat er aan de hand is. */
.pho__hint[data-soort='goed'] {
	color: var(--pho-green, #1f5f4a);
}

.pho__hint[data-soort='fout'] {
	color: var(--pho-rood, #a02c2c);
}

/* _HERVATBESTAAND_20261028
 *
 * De knop "Ga verder met je aanmelding" is een link, geen knop: hij is een
 * uitweg, niet de hoofdactie. Een tweede grote knop naast "Volgende" zou de
 * klant laten twijfelen welke de bedoeling is.
 *
 * De underline staat er permanent en niet alleen bij hover: op een telefoon is
 * er geen hover, en dan zou dit op gewone tekst lijken. */
.pho__linkknop {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--pho-accent, #1f5f4a);
	text-decoration: underline;
	cursor: pointer;
}

.pho__linkknop:hover,
.pho__linkknop:focus-visible {
	text-decoration-thickness: 2px;
}

.pho__al-account {
	margin-top: 14px;
	text-align: center;
}

/* Het uitweg-blok op de MFA-stap: staat de tweede factor al aan, dan komt dit
 * in de plaats van de QR en het codeveld. Eigen kader, want het is een andere
 * situatie dan "stel je app in" en dat mag je zien. */
.pho__al-mfa {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid var(--pho-lijn, #ddd6c8);
	border-radius: var(--pho-radius, 8px);
	background: var(--pho-soft, #f4f1ea);
}

.pho__al-mfa .pho__uitleg {
	margin-top: 0;
}