/**
 * Opmaak van het publieke aanmeldformulier. Bewust ingetogen en gescoped op
 * .vbn-aanmeldformulier, zodat het binnen de Elementor-kaart past zonder de rest
 * van de pagina te raken.
 */
.vbn-aanmeldformulier {
	max-width: 640px;
}

.vbn-aanmeldformulier .vbn-veld {
	margin-bottom: 1rem;
}

.vbn-aanmeldformulier label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.vbn-aanmeldformulier input[type="text"],
.vbn-aanmeldformulier input[type="email"],
.vbn-aanmeldformulier input[type="tel"],
.vbn-aanmeldformulier input[type="date"],
.vbn-aanmeldformulier select {
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 1.1rem;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.vbn-aanmeldformulier input:focus,
.vbn-aanmeldformulier select:focus {
	outline: none;
	border-color: #ee7402;
	box-shadow: 0 0 0 3px rgba(238, 116, 2, 0.15);
}

/* Systeemchrome weghalen bij de tekstvelden en de keuzelijst; het datumveld
   houdt zijn eigen kalendericoon. */
.vbn-aanmeldformulier input[type="text"],
.vbn-aanmeldformulier input[type="email"],
.vbn-aanmeldformulier input[type="tel"],
.vbn-aanmeldformulier select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Keuzelijst: eigen pijltje, want appearance:none haalt het systeempijltje weg. */
.vbn-aanmeldformulier select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 0.7rem 0.45rem;
}

/* Datumveld: het kalendericoon subtiel en aanklikbaar houden. */
.vbn-aanmeldformulier input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.55;
}

/* Postcode altijd in hoofdletters tonen; de server normaliseert al zo. */
.vbn-aanmeldformulier input[name="postcode"] {
	text-transform: uppercase;
}

.vbn-aanmeldformulier input[aria-invalid="true"] {
	border-color: #b91c1c;
}

.vbn-aanmeldformulier .vbn-knop {
	background: #ee7402;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.85rem 2.25rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.vbn-aanmeldformulier .vbn-knop:hover {
	background: #d46802;
}

.vbn-aanmeldformulier .vbn-fout {
	display: block;
	margin-top: 0.25rem;
	color: #b91c1c;
	font-size: 0.875rem;
}

.vbn-aanmeldformulier .vbn-melding {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: #fee2e2;
	color: #991b1b;
}

/* Twee smalle velden naast elkaar (postcode + huisnummer) op stap 1. */
.vbn-aanmeldformulier .vbn-rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.vbn-aanmeldformulier .vbn-rij .vbn-veld {
	flex: 1 1 8rem;
}