:root {
	--ff-gap: 1.1rem;
	--ff-label: #d4d4d4;
	--ff-fout: #ff6b5b;
	--ff-goed: #7bd88f;
	--ff-rand: rgba(255, 255, 255, 0.12);
	--ff-rand-focus: var(--kleur-accent);
}

.feb-formulier {
	display: grid;
	gap: var(--ff-gap);
}

.ff-intro {
	margin: 0;
	color: #a3a3a3;
}

.ff-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ff-gap);
}

.ff-veld {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ff-veld--half {
	grid-column: span 1;
}

.ff-veld > label,
.ff-veld legend {
	padding: 0;
	color: var(--ff-label);
	font-size: var(--fs-klein);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.ff-veld abbr {
	color: var(--kleur-accent);
	text-decoration: none;
}

.feb-formulier input:not([type="checkbox"]):not([type="radio"]),
.feb-formulier select,
.feb-formulier textarea {
	border-color: var(--ff-rand);
}

.feb-formulier input:focus,
.feb-formulier select:focus,
.feb-formulier textarea:focus {
	border-color: var(--ff-rand-focus);
	box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.18);
}

.ff-opties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.ff-optie {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.55rem;
	color: #e5e5e5;
	font-size: 0.95rem;
	cursor: pointer;
}

.ff-optie input {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.2rem;
	accent-color: var(--kleur-accent);
}

.ff-optie a {
	color: var(--kleur-accent);
}

.ff-uitleg {
	color: #8a8a8a;
	font-size: 0.8rem;
}

.ff-fout {
	min-height: 0;
	color: var(--ff-fout);
	font-size: 0.8rem;
}

.ff-fout:empty {
	display: none;
}

.ff-veld.is-fout input,
.ff-veld.is-fout select,
.ff-veld.is-fout textarea {
	border-color: var(--ff-fout);
}

.ff-voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.ff-verplicht {
	margin: 0;
	color: #8a8a8a;
	font-size: 0.8rem;
}

.feb-formulier button[type="submit"][disabled] {
	opacity: 0.6;
	pointer-events: none;
}

.ff-melding {
	padding: 0;
	border-radius: var(--radius-klein);
	font-weight: 700;
}

.ff-melding:empty {
	display: none;
}

.ff-melding.is-goed,
.ff-melding.is-fout {
	padding: 1rem 1.1rem;
}

.ff-melding.is-goed {
	background: rgba(123, 216, 143, 0.1);
	border: 1px solid rgba(123, 216, 143, 0.35);
	color: var(--ff-goed);
}

.ff-melding.is-fout {
	background: rgba(255, 107, 91, 0.08);
	border: 1px solid rgba(255, 107, 91, 0.35);
	color: var(--ff-fout);
}

.feb-formulier.is-verzonden .ff-raster,
.feb-formulier.is-verzonden .ff-voet,
.feb-formulier.is-verzonden .ff-intro {
	display: none;
}

.formulier-leeg {
	color: #a3a3a3;
}

@media (max-width: 600px) {
	.ff-veld--half {
		grid-column: 1 / -1;
	}
}