/*
 * Gedeelde formulier-styling voor sollicitatie- en alert-forms.
 */

.sh-form {
	max-width: 100%;
	margin: 2rem auto;
	padding: 1.75rem 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sh-form h2 {
	margin: 0 0 0.25rem;
	font-size: 1.4rem;
}

.sh-form__intro {
	margin: 0 0 1.5rem;
	color: rgba(0, 0, 0, 0.65);
}

.sh-form__row {
	margin-bottom: 1rem;
}

.sh-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 600px) {
	.sh-form__row--2col { grid-template-columns: 1fr; }
}

.sh-form__field {
	display: block;
}

.sh-form__field > span {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
	font-size: 0.95rem;
}

.sh-form__hint {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: rgba(43, 18, 31, 0.6);
	font-weight: normal;
}

.sh-form__field input[type="text"],
.sh-form__field input[type="email"],
.sh-form__field input[type="tel"],
.sh-form__field input[type="url"],
.sh-form__field input[type="search"],
.sh-form__field input[type="file"],
.sh-form__field select,
.sh-form__field textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
}

.sh-form__field input:focus,
.sh-form__field select:focus,
.sh-form__field textarea:focus {
	outline: 2px solid var(--awb-color4, #1b78bb);
	outline-offset: 1px;
	border-color: var(--awb-color4, #1b78bb);
}

.sh-form__field--checkbox {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.95rem;
}

.sh-form__field--checkbox input {
	margin-top: 0.25rem;
}

.sh-form__field--checkbox > span {
	margin: 0;
	font-weight: normal;
}

.sh-form__actions {
	margin-top: 1.5rem;
	display: flex;
	gap: 0.5rem;
}

.sh-form__status {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	display: none;
}

.sh-form__status:not(:empty) {
	display: block;
}

.sh-form__status--success {
	background: color-mix( in srgb, var(--awb-color6, #358d72) 12%, transparent );
	color: var(--awb-color6, #358d72);
	border: 1px solid color-mix( in srgb, var(--awb-color6, #358d72) 25%, transparent );
}

.sh-form__status--error {
	background: color-mix( in srgb, #d63638 10%, transparent );
	color: #b30000;
	border: 1px solid rgba(214, 54, 56, 0.3);
}

.sh-form__filter-group {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

.sh-form__filter-group legend {
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.sh-form__filter-option {
	display: inline-flex;
	gap: 0.5rem;
	padding: 0.2rem 0.5rem 0.2rem 0;
	margin-right: 0.5rem;
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Formulier in stappen

   De opdeling wordt door lidmaatschap-stappen.js gezet. Zonder JavaScript
   blijft alles zichtbaar en werkt het formulier als één geheel; daarom staat
   hier geen enkele regel die uit zichzelf iets verbergt.
   --------------------------------------------------------------------------- */

.sh-stappen .sh-stap {
	margin: 0;
	padding: 0;
	border: 0;
}

.sh-stap__legend {
	padding: 0;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #a20067;
}

/* Zonder JS staan de stappen onder elkaar en hoort er een scheiding tussen. */
.sh-stappen .sh-stap + .sh-stap {
	margin-top: 34px;
}

.sh-voortgang {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sh-voortgang__stap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 22px;
	border: 2px solid #e9e2e6;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #5a4250;
	background: #fff;
}

.sh-voortgang__stap:first-child {
	margin-left: 0;
}

/* De verbindingslijn hangt aan het bolletje zelf, zodat er geen extra elementen
   nodig zijn en de rij bij één stap niet raar afloopt. */
.sh-voortgang__stap + .sh-voortgang__stap::before {
	content: "";
	position: absolute;
	left: -24px;
	width: 22px;
	height: 2px;
	background: #e9e2e6;
}

.sh-voortgang__stap.is-actief {
	border-color: #d10074;
	background: #d10074;
	color: #fff;
}

/* Een afgeronde stap toont een vinkje in plaats van het nummer. Het cijfer komt
   uit de tekstinhoud, dus dat wordt met een doorzichtige kleur weggehaald in
   plaats van met font-size:0 — dat laatste breekt de uitlijning van het vinkje. */
.sh-voortgang__stap.is-klaar {
	border-color: #d10074;
	color: transparent;
}

.sh-voortgang__stap.is-klaar::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: #d10074;
}

.sh-samenvatting__lijst {
	display: grid;
	grid-template-columns: minmax(140px, 34%) 1fr;
	gap: 8px 18px;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid #e9e2e6;
	border-radius: 10px;
	background: #faf7f8;
	font-size: 14px;
}

.sh-samenvatting__lijst dt {
	margin: 0;
	color: #5a4250;
}

.sh-samenvatting__lijst dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* `.btn` zet een eigen display, en die wint van het hidden-attribuut uit de
   UA-stylesheet. Zonder deze regel staan "Vorige", "Volgende" en "Versturen"
   alle drie tegelijk in beeld, ook als het script ze verbergt. */
.sh-stappen [hidden] {
	display: none !important;
}

.sh-stappen .sh-form__actions {
	flex-wrap: wrap;
	gap: 10px;
}

/* Eén duidelijke actie per stap: de doorgaan-knop is primair en staat rechts,
   "Vorige" is een tekstlink links. Op mobiel gaat de primaire knop over de volle
   breedte bovenaan en komt de terugweg eronder; daar telt de duimzone zwaarder
   dan de leesrichting. */
.sh-stappen .sh-form__actions {
	align-items: center;
}

.sh-stappen .sh-stap-verder {
	margin-left: auto;
	justify-content: center;
	text-align: center;
}

.sh-stap-terug {
	order: -1;
	padding: 10px 2px;
	border: 0;
	background: none;
	color: #5a4250;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sh-stap-terug:hover,
.sh-stap-terug:focus-visible {
	color: #a20067;
}

@media (max-width: 560px) {

	.sh-stappen .sh-form__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sh-stappen .sh-stap-verder {
		margin-left: 0;
		width: 100%;
		order: 1;
	}

	.sh-stap-terug {
		order: 2;
		text-align: center;
	}
}

@media (max-width: 480px) {

	.sh-stappen .sh-form__actions .btn {
		flex: 1 1 100%;
	}

	.sh-samenvatting__lijst {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.sh-samenvatting__lijst dd {
		margin-bottom: 10px;
	}
}

/* ---------------------------------------------------------------------------
   Pakketkeuze in het aanmeldformulier
   --------------------------------------------------------------------------- */

/* De labelregel is de ankerlijn: "Jouw pakket" links, de wijzigknop rechts op
   dezelfde hoogte. Absoluut gepositioneerd omdat het label de volle breedte
   pakt; met een flex-volgorde zou de knop onder de prijs belanden. */
.sh-lidkeuze__nu {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	padding-right: 108px;
}

.sh-lidkeuze__wijzig {
	position: absolute;
	top: -4px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid #e9e2e6;
	border-radius: 999px;
	background: #fff;
	color: #a20067;
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
}

.sh-lidkeuze__wijzig:hover,
.sh-lidkeuze__wijzig:focus-visible {
	border-color: #a20067;
	background: #faf7f8;
}

.sh-lidkeuze__wijzig svg {
	width: 14px;
	height: 14px;
}

.sh-lidkeuze__opties {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

.sh-lidkeuze__opties-kop {
	padding: 0;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5a4250;
}

.sh-lidoptie {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 4px 12px;
	padding: 12px 14px;
	border: 1px solid #e9e2e6;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.sh-lidoptie:hover {
	border-color: #a20067;
}

.sh-lidoptie:has(input:checked) {
	border-color: #a20067;
	box-shadow: 0 0 0 3px rgba(162, 0, 103, .12);
}

.sh-lidoptie input {
	accent-color: #d10074;
}

.sh-lidoptie__naam {
	font-weight: 700;
}

.sh-lidoptie__prijs {
	font-weight: 700;
	color: #a20067;
}

.sh-lidoptie__grens {
	grid-column: 2 / -1;
	font-size: .84rem;
	color: #5a4250;
}

/* Informatief, geen fout: het formulier blijft gewoon verzendbaar. Vandaar geen
   rood maar de zachte merkkleur die de site ook voor tips gebruikt. Staat onder
   het fte-veld, want daar reageert hij op. */
.sh-lidkeuze__melding {
	margin: -4px 0 16px;
	padding: 12px 14px;
	border-left: 3px solid #d10074;
	border-radius: 0 8px 8px 0;
	background: #fdf3f8;
	font-size: .88rem;
	line-height: 1.5;
	color: #5a4250;
}

/* ------------------------------------------------------------------
   Lidmaatschapsvoorwaarden onder de akkoordvinkjes (31-7)

   SmartHub bewaart de aanmelding als overeenkomst, dus de afspraken staan
   zichtbaar in het formulier en niet achter een link. Kleiner en rustiger
   dan de vinkjeslabel zelf, zodat de vraag leidend blijft en de tekst
   naslag is.
   ------------------------------------------------------------------ */
.sh-akkoord-tekst {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--steen, #5a4250);
}

.sh-akkoord-punten {
	margin: 8px 0 0;
	padding-left: 1.15rem;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--steen, #5a4250);
}

.sh-akkoord-punten li {
	margin-bottom: 4px;
}

.sh-akkoord-punten li::marker {
	color: var(--roze, #D10074);
	font-weight: 700;
}