/**
 * Silvas Reparatieformulier - frontend
 *
 * Huisstijlkleuren staan als CSS-variabelen bovenaan en worden door de plugin
 * als inline style op .srf gezet, zodat ze via de instellingen aanpasbaar zijn.
 *
 * De donkere groentinten dragen witte tekst: de merkgroen zelf haalt met wit
 * maar 2,97:1 en dat is te weinig voor WCAG AA (4,5:1).
 */

.srf {
	--srf-blauw: #0053a1;
	--srf-blauw-donker: #004689;
	--srf-groen: #63a71d;
	--srf-groen-donker: #4a7d16;
	--srf-groen-donkerder: #3d6712;

	--srf-tekst: #2f3337;
	--srf-tekst-zacht: #5a6067;
	--srf-lijn: #d7dbe0;
	--srf-lijn-zacht: #e8ebee;
	--srf-vlak: #f5f6f8;
	--srf-wit: #ffffff;
	--srf-fout: #b3261e;
	--srf-fout-vlak: #fdecea;

	--srf-radius: 10px;
	--srf-radius-klein: 6px;

	box-sizing: border-box;
	max-width: 48rem;
	margin: 0 auto;
	color: var(--srf-tekst);
	font-size: 1rem;
	line-height: 1.55;
	text-align: left;
}

.srf *,
.srf *::before,
.srf *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
   Voortgang
   ------------------------------------------------------------------------- */

.srf__voortgang {
	margin-bottom: 0.75rem;
}

.srf__voortgang-label {
	margin: 0 0 0.4rem;
	color: var(--srf-tekst-zacht);
	font-size: 0.875rem;
	font-weight: 600;
}

.srf__balk {
	height: 8px;
	overflow: hidden;
	background-color: var(--srf-lijn-zacht);
	border-radius: 99px;
}

.srf__balk-vulling {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--srf-groen);
	border-radius: 99px;
	transition: width 0.25s ease;
}

/* -------------------------------------------------------------------------
   Kruimelpad met de gemaakte keuzes
   ------------------------------------------------------------------------- */

.srf__kruimels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.15rem;
	margin-bottom: 0.9rem;
}

.srf__kruimel {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	margin: 0;
	padding: 0.3rem 0.65rem;
	overflow: hidden;
	color: var(--srf-blauw);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	background-color: #eaf1f8;
	border: 1px solid #cfe0ef;
	border-radius: 99px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.srf__kruimel:hover,
.srf__kruimel:focus-visible {
	color: var(--srf-wit);
	background-color: var(--srf-blauw);
	border-color: var(--srf-blauw);
}

.srf__kruimel-pen {
	font-size: 0.75rem;
	opacity: 0.75;
}

.srf__kruimel-scheider {
	color: var(--srf-tekst-zacht);
	font-size: 0.875rem;
	line-height: 1;
	-webkit-user-select: none;
	user-select: none;
}

/* -------------------------------------------------------------------------
   Kaart en koppen
   ------------------------------------------------------------------------- */

.srf__kaart {
	padding: 1.5rem;
	background-color: var(--srf-wit);
	border: 1px solid var(--srf-lijn);
	border-radius: var(--srf-radius);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.srf__titel {
	margin: 0 0 0.4rem;
	color: var(--srf-blauw);
	font-size: 1.375rem;
	line-height: 1.3;
	font-weight: 700;
}

.srf__titel:focus {
	outline: none;
}

.srf__uitleg {
	margin: 0 0 1.1rem;
	color: var(--srf-tekst-zacht);
	font-size: 0.9375rem;
}

.srf__uitleg:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Keuzeknoppen
   ------------------------------------------------------------------------- */

.srf__keuzes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.srf__keuzes--kolommen {
		grid-template-columns: 1fr 1fr;
	}
}

.srf__keuze {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.85rem 1rem;
	color: var(--srf-tekst);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	background-color: var(--srf-wit);
	border: 2px solid var(--srf-lijn);
	border-radius: var(--srf-radius-klein);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.srf__keuze:hover {
	background-color: #f2f7fc;
	border-color: var(--srf-blauw);
}

.srf__keuze[aria-pressed="true"] {
	color: var(--srf-wit);
	background-color: var(--srf-blauw);
	border-color: var(--srf-blauw);
}

.srf__keuze[aria-pressed="true"] .srf__keuze-tip {
	color: #e7f0f8;
	border-top-color: rgba(255, 255, 255, 0.35);
}

.srf__keuze-tip {
	display: block;
	padding-top: 0.4rem;
	color: var(--srf-tekst-zacht);
	font-size: 0.8125rem;
	font-weight: 400;
	border-top: 1px solid var(--srf-lijn-zacht);
}

/* Ja/Nee-vraag: de gevaar-optie krijgt nadruk. */
.srf__keuze--gevaar:hover {
	background-color: var(--srf-fout-vlak);
	border-color: var(--srf-fout);
}

/* -------------------------------------------------------------------------
   Tips en meldingen
   ------------------------------------------------------------------------- */

.srf__tip {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	background-color: #f4f9ec;
	border: 1px solid #d4e6b6;
	border-left: 4px solid var(--srf-groen);
	border-radius: var(--srf-radius-klein);
}

.srf__tip-kop {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--srf-groen-donkerder);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.srf__tip-tekst {
	margin: 0;
	font-size: 0.9375rem;
}

.srf__melding {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--srf-lijn);
	border-radius: var(--srf-radius-klein);
	font-size: 0.9375rem;
}

.srf__melding p {
	margin: 0 0 0.5rem;
}

.srf__melding p:last-child {
	margin-bottom: 0;
}

.srf__melding--fout {
	color: #7f1d18;
	background-color: var(--srf-fout-vlak);
	border-color: #f3c4c0;
	border-left: 4px solid var(--srf-fout);
}

.srf__melding--waarschuwing {
	background-color: #fff8e6;
	border-color: #f0dfae;
	border-left: 4px solid #b8860b;
}

.srf__melding--info {
	background-color: #eef4fa;
	border-color: #cfe0ef;
	border-left: 4px solid var(--srf-blauw);
}

.srf__melding-kop {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 700;
}

/* Verwijst naar wat er in een volgende stap komt. Rustiger dan een melding:
   het is geen waarschuwing maar een hulpzin. */
.srf__vooruitblik {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	/* Onderaan geen marge: de actiebalk brengt zijn eigen ruimte mee. */
	margin: 0.75rem 0 0;
	padding: 0.7rem 0.9rem;
	color: var(--srf-tekst);
	font-size: 0.9375rem;
	background-color: #eef4fa;
	border: 1px solid #cfe0ef;
	border-radius: var(--srf-radius-klein);
}

.srf__vooruitblik::before {
	content: "→";
	flex: 0 0 auto;
	color: var(--srf-blauw);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Formuliervelden
   ------------------------------------------------------------------------- */

.srf__velden {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

@media (min-width: 34em) {
	.srf__velden--twee {
		grid-template-columns: 1fr 1fr;
	}
}

.srf__veld {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.srf__label {
	color: var(--srf-tekst);
	font-size: 0.9375rem;
	font-weight: 700;
}

.srf__label-extra {
	color: var(--srf-tekst-zacht);
	font-weight: 400;
}

.srf .srf__input,
.srf .srf__textarea {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.65rem 0.75rem;
	color: var(--srf-tekst);
	font: inherit;
	font-size: 1rem;
	background-color: var(--srf-wit);
	border: 2px solid var(--srf-lijn);
	border-radius: var(--srf-radius-klein);
	box-shadow: none;
}

.srf .srf__textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.srf .srf__input:focus,
.srf .srf__textarea:focus {
	border-color: var(--srf-blauw);
	outline: none;
}

.srf .srf__input[aria-invalid="true"],
.srf .srf__textarea[aria-invalid="true"] {
	border-color: var(--srf-fout);
	background-color: #fffafa;
}

.srf__hint {
	color: var(--srf-tekst-zacht);
	font-size: 0.8125rem;
}

.srf__veldfout {
	color: var(--srf-fout);
	font-size: 0.8125rem;
	font-weight: 600;
}

.srf__teller {
	color: var(--srf-tekst-zacht);
	font-size: 0.8125rem;
	text-align: right;
}

.srf__teller--over {
	color: var(--srf-fout);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Beschikbaarheid
   ------------------------------------------------------------------------- */

.srf__dagen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.srf__dagen legend {
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.srf__dag {
	padding: 0.75rem 0.9rem;
	background-color: var(--srf-vlak);
	border: 1px solid var(--srf-lijn-zacht);
	border-radius: var(--srf-radius-klein);
}

/* Geen text-transform: de dagnaam komt al met een hoofdletter uit PHP, en
   capitalize zou van een eventuele datum erachter "3 Augustus" maken. */
.srf__dag-naam {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--srf-blauw);
	font-size: 0.9375rem;
	font-weight: 700;
}

.srf__dagdelen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.srf__dagdeel {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.7rem;
	font-size: 0.9375rem;
	font-weight: 600;
	background-color: var(--srf-wit);
	border: 2px solid var(--srf-lijn);
	border-radius: var(--srf-radius-klein);
	cursor: pointer;
}

.srf__dagdeel:hover {
	border-color: var(--srf-blauw);
}

.srf__dagdeel--aan {
	color: var(--srf-groen-donkerder);
	background-color: #f4f9ec;
	border-color: var(--srf-groen-donker);
}

.srf .srf__dagdeel input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--srf-groen-donker);
}

.srf__dagdeel-tijd {
	display: block;
	color: var(--srf-tekst-zacht);
	font-size: 0.75rem;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   Bestanden
   ------------------------------------------------------------------------- */

.srf__bestand-invoer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.srf__bestanden {
	margin: 1rem 0 1.25rem;
	padding: 0;
	list-style: none;
}

.srf__bestand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--srf-lijn-zacht);
	border-radius: var(--srf-radius-klein);
}

.srf__bestand + .srf__bestand {
	margin-top: 0.5rem;
}

.srf__bestand-naam {
	flex: 1 1 auto;
	overflow: hidden;
	font-size: 0.9375rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.srf__bestand-grootte {
	flex: 0 0 auto;
	color: var(--srf-tekst-zacht);
	font-size: 0.8125rem;
}

.srf__bestand-weg {
	flex: 0 0 auto;
	padding: 0.3rem 0.55rem;
	color: var(--srf-fout);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--srf-radius-klein);
	cursor: pointer;
}

.srf__bestand-weg:hover {
	background-color: var(--srf-fout-vlak);
	border-color: #f3c4c0;
}

.srf__leeg {
	margin: 1rem 0 1.25rem;
	color: var(--srf-tekst-zacht);
	font-size: 0.9375rem;
	font-style: italic;
}

/* -------------------------------------------------------------------------
   Samenvatting (controlestap)
   ------------------------------------------------------------------------- */

.srf__samenvatting {
	margin: 0 0 1.25rem;
	border-top: 1px solid var(--srf-lijn-zacht);
}

.srf__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--srf-lijn-zacht);
}

.srf__rij-label {
	flex: 0 0 100%;
	color: var(--srf-blauw);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.srf__rij-waarde {
	flex: 1 1 60%;
	margin: 0;
	white-space: pre-line;
}

.srf__rij-waarde ul {
	margin: 0;
	padding-left: 1.1rem;
}

.srf__rij-wijzig {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 0.2rem 0.5rem;
	color: var(--srf-blauw);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: underline;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--srf-radius-klein);
	cursor: pointer;
}

.srf__rij-wijzig:hover {
	background-color: #eaf1f8;
}

/* -------------------------------------------------------------------------
   Knoppen en navigatie
   ------------------------------------------------------------------------- */

.srf__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--srf-lijn-zacht);
}

.srf__acties--eind {
	border-top: 0;
}

.srf .srf__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 3rem;
	margin: 0;
	padding: 0.7rem 1.4rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--srf-radius-klein);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.srf .srf__knop--primair {
	color: var(--srf-wit);
	background-color: var(--srf-groen-donker);
	border-color: var(--srf-groen-donker);
}

.srf .srf__knop--primair:hover {
	background-color: var(--srf-groen-donkerder);
	border-color: var(--srf-groen-donkerder);
}

.srf .srf__knop--secundair {
	color: var(--srf-blauw);
	background-color: var(--srf-wit);
	border-color: var(--srf-lijn);
}

.srf .srf__knop--secundair:hover {
	background-color: #f2f7fc;
	border-color: var(--srf-blauw);
}

.srf .srf__knop--tekst {
	min-height: 2.5rem;
	padding: 0.4rem 0.75rem;
	color: var(--srf-blauw);
	font-weight: 700;
	text-decoration: underline;
	background: none;
	border-color: transparent;
}

.srf .srf__knop--tekst:hover {
	background-color: #eaf1f8;
	text-decoration: none;
}

.srf .srf__knop[disabled],
.srf .srf__knop[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.srf__acties-rechts {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   Eindschermen
   ------------------------------------------------------------------------- */

.srf__eind-titel {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
}

.srf__eind--spoed .srf__eind-titel {
	color: #7f1d18;
}

.srf__eind--succes .srf__eind-titel {
	color: var(--srf-groen-donkerder);
}

.srf__eind--extern .srf__eind-titel,
.srf__eind--zelf .srf__eind-titel {
	color: var(--srf-blauw);
}

.srf__eind-tekst {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
}

.srf__partij {
	margin: 0 0 1.25rem;
	padding: 1.1rem 1.2rem;
	background-color: var(--srf-vlak);
	border: 1px solid var(--srf-lijn);
	border-left: 4px solid var(--srf-blauw);
	border-radius: var(--srf-radius-klein);
}

.srf__partij-naam {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--srf-blauw);
	font-size: 1.25rem;
	font-weight: 700;
}

.srf__partij-regel {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
}

.srf__partij-regel:last-child {
	margin-bottom: 0;
}

.srf .srf__telefoon {
	display: inline-block;
	color: var(--srf-blauw);
	font-size: 1.375rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
}

.srf .srf__telefoon:hover {
	color: var(--srf-blauw-donker);
}

/* Leest als één zin: "Bel: 112". Het nummer is groot, het woord ervoor
   blijft op bodygrootte en staat verticaal gecentreerd. */
.srf__spoed-nummers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.7rem;
	align-items: center;
	margin: 0 0 1.25rem;
	padding: 1.1rem 1.2rem;
	background-color: var(--srf-fout-vlak);
	border: 1px solid #f3c4c0;
	border-left: 4px solid var(--srf-fout);
	border-radius: var(--srf-radius-klein);
}

.srf__spoed-nummers .srf__telefoon {
	color: #7f1d18;
}

.srf__spoed-label,
.srf__spoed-of {
	color: #7f1d18;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.srf__spoed-label {
	font-weight: 700;
}

/* De eigen lijn voor andere zaken, direct onder de tekst die ernaar verwijst. */
.srf__spoed-lijn {
	margin: -0.5rem 0 1.25rem;
}

/* -------------------------------------------------------------------------
   Focus en toegankelijkheid
   ------------------------------------------------------------------------- */

.srf :focus-visible {
	outline: 3px solid var(--srf-blauw);
	outline-offset: 2px;
}

.srf__dagdeel:focus-within {
	outline: 3px solid var(--srf-blauw);
	outline-offset: 2px;
}

.srf__verborgen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.srf__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.srf__balk-vulling {
		transition: none;
	}
}

/* Bericht voor beheerders wanneer de beslisboom nog leeg is. */
.srf--leeg {
	padding: 1rem 1.25rem;
	background-color: #fff8e6;
	border: 1px solid #f0dfae;
	border-radius: var(--srf-radius-klein);
}