/* Aanmeldformulier sintbezoek. Volgt de tokens van het thema sintspecialist,
   met eigen terugvalwaarden zodat het formulier ook los overeind blijft. */

.msb-wrap {
	--msb-diep: var(--kleur-diep, #191231);
	--msb-paneel: var(--kleur-paneel, #221A40);
	--msb-paneel-donker: var(--kleur-paneel-donker, #100B22);
	--msb-goud: var(--kleur-goud, #D9B36A);
	--msb-goud-licht: var(--kleur-goud-licht, #E8CD94);
	--msb-creme: var(--kleur-creme, #F3EBDA);
	--msb-tekst: var(--kleur-tekst, #B4A8CE);
	--msb-placeholder: var(--kleur-placeholder, #8C7FB0);
	--msb-rand: var(--kleur-rand, #3E3163);
	--msb-op-goud: var(--kleur-op-goud, #2A1B3E);
	--msb-bevestiging: var(--kleur-bevestiging, #8FD3A0);
	--msb-radius: var(--radius-kaart, 20px);

	max-width: 46rem;
	margin-inline: auto;
	color: var(--msb-tekst);
	font-family: var(--font-tekst, 'Karla', 'Helvetica Neue', Arial, sans-serif);
	font-size: 1rem;
	line-height: 1.6;
}

/* Blokken */

.msb-blok {
	background: var(--msb-paneel);
	border: 1px solid var(--msb-rand);
	border-radius: var(--msb-radius);
	padding: 1.75rem 1.5rem;
	margin: 0 0 1.25rem;
}

.msb-legend {
	font-family: var(--font-kop, Georgia, serif);
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--msb-creme);
	padding: 0;
	margin-bottom: .5rem;
}

.msb-uitleg {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	color: var(--msb-tekst);
}

/* Vensters */

.msb-vensters {
	display: grid;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.msb-venster input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.msb-venster label {
	display: block;
	position: relative;
	padding: 1rem 1.125rem 1rem 3rem;
	background: var(--msb-paneel-donker);
	border: 1.5px solid var(--msb-rand);
	border-radius: var(--radius-klein, 12px);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.msb-venster label::before {
	content: "";
	position: absolute;
	left: 1.125rem;
	top: 1.25rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	border: 1.5px solid var(--msb-rand);
	background: transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.msb-venster label:hover {
	border-color: var(--msb-goud);
}

.msb-venster input:focus-visible + label {
	outline: 2px solid var(--msb-goud);
	outline-offset: 3px;
}

.msb-venster input:checked + label {
	border-color: var(--msb-goud);
	background: rgba(217, 179, 106, .1);
}

.msb-venster input:checked + label::before {
	border-color: var(--msb-goud);
	box-shadow: inset 0 0 0 4px var(--msb-goud);
}

.msb-venster__naam {
	display: block;
	font-weight: 700;
	color: var(--msb-creme);
	font-size: 1.0625rem;
}

.msb-venster__tijd {
	display: block;
	color: var(--msb-goud);
	font-weight: 700;
	font-size: .9375rem;
	margin-top: .125rem;
}

.msb-venster__vrij {
	display: block;
	font-size: .875rem;
	color: var(--msb-tekst);
	margin-top: .25rem;
}

.msb-venster.is-vol label {
	cursor: not-allowed;
	opacity: .5;
}

.msb-venster.is-vol label:hover {
	border-color: var(--msb-rand);
}

/* Velden */

.msb-rooster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}

@media (max-width: 620px) {
	.msb-rooster {
		grid-template-columns: 1fr;
	}
}

.msb-veld {
	margin: 0 0 1.125rem;
}

.msb-veld label {
	display: block;
	font-weight: 700;
	font-size: .9375rem;
	color: var(--msb-creme);
	margin-bottom: .375rem;
}

.msb-req {
	color: var(--msb-goud);
}

.msb-hint {
	display: block;
	font-size: .8125rem;
	color: var(--msb-placeholder);
	margin-top: .3125rem;
}

.msb-veld input[type="text"],
.msb-veld input[type="email"],
.msb-veld input[type="tel"],
.msb-veld input[type="password"],
.msb-veld select,
.msb-veld textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .8125rem .9375rem;
	background: var(--msb-paneel-donker);
	border: 1.5px solid var(--msb-rand);
	border-radius: var(--radius-klein, 12px);
	color: var(--msb-creme);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.msb-veld textarea {
	resize: vertical;
	min-height: 3.5rem;
}

.msb-veld select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--msb-goud) 50%), linear-gradient(135deg, var(--msb-goud) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 1.375rem, calc(100% - 1rem) 1.375rem;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.msb-veld input::placeholder,
.msb-veld textarea::placeholder {
	color: var(--msb-placeholder);
}

.msb-veld input:focus,
.msb-veld select:focus,
.msb-veld textarea:focus {
	outline: none;
	border-color: var(--msb-goud);
	box-shadow: 0 0 0 3px rgba(217, 179, 106, .18);
}

.msb-veld--vink label {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	font-weight: 400;
	color: var(--msb-tekst);
	font-size: .9375rem;
	cursor: pointer;
}

.msb-veld--vink input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: .1875rem;
	accent-color: var(--msb-goud);
}

.msb-veld--vink .msb-hint {
	margin-left: 1.75rem;
}

/* Verzenden */

.msb-verzend {
	margin: 1.5rem 0 0;
}

.msb-knop {
	display: inline-block;
	text-decoration: none;
	background: var(--msb-goud);
	color: var(--msb-op-goud);
	border: 1.5px solid var(--msb-goud);
	border-radius: var(--radius-pil, 999px);
	padding: 1rem 2rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform .25s var(--soepel, ease), box-shadow .25s ease, background .2s ease;
}

.msb-knop:hover {
	background: var(--msb-goud-licht);
	border-color: var(--msb-goud-licht);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(6, 3, 16, .45);
}

.msb-knop:focus-visible {
	outline: 2px solid var(--msb-goud);
	outline-offset: 3px;
}

/* Meldingen */

.msb-melding {
	padding: 1.125rem 1.25rem;
	border-radius: var(--radius-klein, 12px);
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	border: 1.5px solid var(--msb-rand);
	background: var(--msb-paneel);
	color: var(--msb-creme);
}

.msb-melding--fout {
	border-color: #C87070;
	background: rgba(200, 112, 112, .12);
}

.msb-melding--let-op {
	border-color: var(--msb-goud);
	background: rgba(217, 179, 106, .12);
}

.msb-melding--gelukt {
	border-color: var(--msb-bevestiging);
	background: rgba(143, 211, 160, .1);
	padding: 1.75rem 1.5rem;
}

.msb-melding__kop {
	font-family: var(--font-kop, Georgia, serif);
	font-size: 1.625rem;
	line-height: 1.2;
	color: var(--msb-creme);
	margin: 0 0 .625rem;
	font-weight: 400;
}

.msb-melding p {
	margin: 0 0 .75rem;
	color: var(--msb-tekst);
}

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

.msb-melding strong {
	color: var(--msb-creme);
}

/* Honeypot */

.msb-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Foutmarkering vanuit de eigen controle in de browser */

.msb-veld.is-fout input,
.msb-veld.is-fout select,
.msb-veld.is-fout textarea {
	border-color: #C87070;
}

.msb-veldfout {
	display: block;
	font-size: .8125rem;
	color: #E9A0A0;
	margin-top: .3125rem;
}

@media (prefers-reduced-motion: reduce) {
	.msb-knop,
	.msb-venster label {
		transition: none;
	}

	.msb-knop:hover {
		transform: none;
	}
}

/* Personenlijst op het gegevensformulier */

.msb-personen {
	display: grid;
	gap: .625rem;
	margin-bottom: 1rem;
}

.msb-personen__kop {
	display: grid;
	grid-template-columns: 1fr 5.5rem 8.5rem 2.5rem;
	gap: .625rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--msb-placeholder);
}

.msb-persoon {
	display: grid;
	grid-template-columns: 1fr 5.5rem 8.5rem 2.5rem;
	gap: .625rem;
	align-items: center;
}

.msb-persoon__veld {
	display: block;
	margin: 0;
}

.msb-persoon__label {
	display: none;
}

.msb-persoon input[type="text"],
.msb-persoon input[type="tel"],
.msb-persoon select {
	width: 100%;
	box-sizing: border-box;
	padding: .75rem .875rem;
	background: var(--msb-paneel-donker);
	border: 1.5px solid var(--msb-rand);
	border-radius: var(--radius-klein, 12px);
	color: var(--msb-creme);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
}

.msb-persoon select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--msb-goud) 50%), linear-gradient(135deg, var(--msb-goud) 50%, transparent 50%);
	background-position: calc(100% - 1.125rem) 1.25rem, calc(100% - .875rem) 1.25rem;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

.msb-persoon input::placeholder {
	color: var(--msb-placeholder);
}

.msb-persoon input:focus,
.msb-persoon select:focus {
	outline: none;
	border-color: var(--msb-goud);
	box-shadow: 0 0 0 3px rgba(217, 179, 106, .18);
}

.msb-persoon.is-fout input,
.msb-persoon.is-fout select {
	border-color: #C87070;
}

.msb-persoon .msb-veldfout {
	grid-column: 1 / -1;
	margin-top: 0;
}

.msb-persoon__weg {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1.5px solid var(--msb-rand);
	background: transparent;
	color: var(--msb-tekst);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.msb-persoon__weg:hover:not(:disabled) {
	border-color: #C87070;
	color: #E9A0A0;
	background: rgba(200, 112, 112, .12);
}

.msb-persoon__weg:disabled {
	opacity: .3;
	cursor: default;
}

.msb-persoon__weg:focus-visible {
	outline: 2px solid var(--msb-goud);
	outline-offset: 2px;
}

.msb-personen__erbij {
	margin: 0;
}

.msb-knop--klein {
	padding: .6875rem 1.25rem;
	font-size: .9375rem;
	background: transparent;
	border-color: var(--msb-goud);
	color: var(--msb-goud);
}

.msb-knop--klein:hover:not(:disabled) {
	background: var(--msb-goud);
	color: var(--msb-op-goud);
}

.msb-knop--klein:disabled {
	opacity: .4;
	cursor: default;
	transform: none;
	box-shadow: none;
}

@media (max-width: 620px) {
	.msb-personen__kop {
		display: none;
	}

	.msb-persoon {
		grid-template-columns: 5rem 1fr 2.5rem;
		grid-template-areas:
			"naam naam weg"
			"leeftijd soort soort";
		row-gap: .5rem;
		padding: .875rem;
		background: var(--msb-paneel-donker);
		border: 1px solid var(--msb-rand);
		border-radius: var(--radius-klein, 12px);
	}

	.msb-persoon .msb-persoon__veld:nth-child(1) { grid-area: naam; }
	.msb-persoon .msb-persoon__veld:nth-child(2) { grid-area: leeftijd; }
	.msb-persoon .msb-persoon__veld:nth-child(3) { grid-area: soort; }
	.msb-persoon .msb-persoon__weg { grid-area: weg; }

	.msb-persoon__label {
		display: block;
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--msb-placeholder);
		margin-bottom: .25rem;
	}

	.msb-persoon input[type="text"],
	.msb-persoon select {
		background: var(--msb-paneel);
	}
}

/* Toegangspoort voor de formulieren */

.msb-poort {
	max-width: 32rem;
	margin-inline: auto;
}

.msb-poort .msb-melding__kop {
	margin-bottom: .5rem;
}

.msb-poort .msb-uitleg {
	margin-bottom: 1.5rem;
}

.msb-poort .msb-form {
	max-width: 22rem;
}