/*
 * Het reserveringsformulier. Kleuren, letters en maten komen uit het thema
 * (theme.json), zodat de plugin meekleurt als de huisstijl verandert.
 */

.dhr-formulier {
	max-inline-size: 34rem;
}

.dhr-velden {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.dhr-veld {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
}

.dhr-veld label {
	font-family: var(--wp--preset--font-family--kop, inherit);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein, .875rem);
}

.dhr-veld input,
.dhr-veld select,
.dhr-veld textarea {
	inline-size: 100%;
	padding: .65rem .8rem;
	font: inherit;
	color: var(--wp--preset--color--tekst, #212728);
	background: var(--wp--preset--color--wit, #fff);
	border: 1px solid var(--wp--preset--color--lijn, #e2ecee);
	border-radius: 6px;
	box-sizing: border-box;
}

.dhr-veld input:focus-visible,
.dhr-veld select:focus-visible,
.dhr-veld textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--accentgroen, #71bf45);
	outline-offset: 1px;
	border-color: transparent;
}

/* "Van" en "Tot" horen bij elkaar en staan dus naast elkaar. */
.dhr-tijdvak {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.dhr-knop {
	margin: .4rem 0 0;
}

/* Het lokkertje voor robots: uit beeld, maar niet display:none — dat slaan
   sommige invulrobots juist over. */
.dhr-honingpot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dhr-melding {
	padding: 1rem 1.15rem;
	margin-block-end: 1.5rem;
	border-radius: 8px;
	border-inline-start: 4px solid;
	font-size: var(--wp--preset--font-size--klein, .875rem);
}

.dhr-melding p { margin: 0 0 .4rem; }
.dhr-melding ul { margin: 0; padding-inline-start: 1.2rem; }
.dhr-melding :last-child { margin-block-end: 0; }

.dhr-melding--goed {
	background: var(--wp--preset--color--zacht, #f7fafb);
	border-inline-start-color: var(--wp--preset--color--accentgroen, #71bf45);
}

.dhr-melding--fout {
	background: #fdf3f3;
	border-inline-start-color: var(--wp--preset--color--accentrood, #d0322c);
}

@media (max-width: 480px) {
	.dhr-tijdvak { grid-template-columns: 1fr; }
}

/* De twee contactvelden horen bij elkaar: één vraag, twee manieren om
   hem te beantwoorden. */
.dhr-contact {
	margin: 0;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--lijn, #e2ecee);
	border-radius: 8px;
	background: var(--wp--preset--color--zacht, #f7fafb);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dhr-contact legend {
	padding: 0 .4rem;
	font-family: var(--wp--preset--font-family--kop, inherit);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein, .875rem);
}

.dhr-uitleg {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein, .875rem);
	color: var(--wp--preset--color--tekst-zacht, #5a6567);
}

.dhr-contact .dhr-uitleg { margin-block-end: -.35rem; }

/* De leesweergave na het versturen. */
.dhr-overzicht {
	display: grid;
	grid-template-columns: minmax(7rem, max-content) 1fr;
	gap: .55rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--wp--preset--color--lijn, #e2ecee);
	border-radius: 10px;
}

.dhr-overzicht dt {
	font-family: var(--wp--preset--font-family--kop, inherit);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein, .875rem);
	color: var(--wp--preset--color--tekst-zacht, #5a6567);
}

.dhr-overzicht dd {
	margin: 0;
	font-weight: 600;
}

@media (max-width: 480px) {
	.dhr-overzicht { grid-template-columns: 1fr; gap: .1rem 0; }
	.dhr-overzicht dd { margin-block-end: .6rem; }
}