/* Korenaar Bestellen: formulier in de huisstijl van het thema (met terugvalkleuren). */

.kb {
	margin: 2rem 0 0;
	scroll-margin-top: 1.5rem;
}

.kb-formulier {
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background: #fff;
	border: 2px solid var(--koren, #e3b866);
	border-radius: 1rem;
	box-shadow: 0 0.4rem 0 var(--koren, #e3b866);
}

.kb-veld { margin: 0 0 1.3rem; }

.kb-veld label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--rogge, #2e1d14);
}

.kb-optioneel { font-weight: 400; font-style: italic; color: var(--korst, #8a4a22); }

.kb-veld input,
.kb-veld select,
.kb-veld textarea {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 2px solid #cdb996;
	border-radius: 0.5rem;
	background: var(--kruim, #fbf3e2);
	color: var(--rogge, #2e1d14);
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.4;
}
.kb-veld textarea { resize: vertical; min-height: 5.5rem; }

.kb-veld input:focus,
.kb-veld select:focus,
.kb-veld textarea:focus {
	border-color: var(--korenbloem, #3a57a6);
	background: #fff;
	outline: 3px solid var(--korenbloem-licht, #aebff0);
	outline-offset: 0;
}

.kb-veld [aria-invalid="true"] { border-color: #b3261e; background: #fff6f5; }

.kb-rij { display: flex; gap: 0 1rem; }
.kb-veld--breed { flex: 1 1 auto; min-width: 0; }
.kb-veld--smal { flex: 0 0 7rem; }

.kb-hulp {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--korst, #8a4a22);
}
.kb-formulier > .kb-hulp { margin: 0.8rem 0 0; }

.kb-fout {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #b3261e;
}

.kb-verstuur { margin: 1.8rem 0 0; }
.kb-verstuur .knop { cursor: pointer; font-family: inherit; }

/* Onzichtbaar lokveld voor spamrobots */
.kb-honing {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kb-melding {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.4rem;
	border-radius: 0.8rem;
	background: #fff;
	border-left: 6px solid var(--koren, #e3b866);
}
.kb-melding p:last-child { margin-bottom: 0; }
.kb-melding--fout { border-left-color: #b3261e; background: #fff6f5; }
.kb-melding--gelukt { border-left-color: var(--korenbloem, #3a57a6); }
.kb-melding__kop { font-size: var(--t-2, 2rem); margin-top: 0 !important; color: var(--korst, #8a4a22); }

@media (max-width: 30rem) {
	.kb-rij { display: block; }
}