/* Request form: fields, layout. */

.ec-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 28rem;
}

.ec-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

/* Date + Time block side by side on desktop (like the example form), stacked on a narrow screen — .ec-
   form-row wraps exactly those two fields in templates/form.php. */
.ec-form-row {
	display: flex;
	align-items: flex-start; /* no stretching: an error message under one field must not make the icon in the other field shift */
	gap: 1rem;
}

.ec-form-row .ec-form-field {
	flex: 1 1 0;
	min-width: 0;
}

/* Mobile: Date and Time stacked. */
@media ( max-width: 480px ) {
	.ec-form-row {
		flex-direction: column;
		align-items: stretch;
	}

	.ec-form-row .ec-form-field {
		flex: 0 0 auto;
	}
}


/* Optional logo + title/intro text above the fields (Admin > Formulier). .ec-form's own gap (1.25rem,
   see style-default.css) already counts as space between logo/heading/first field; the margin-bottom
   below is the space added on top of that, not the total space. */
.ec-form-branding {
	margin-bottom: 0.9375rem;
	text-align: center;
}

.ec-form-branding img {
	display: block;
	margin-inline: auto; /* centered, even if a theme sets img to display:block */
	max-width: min( 100%, 22.5rem );
	height: auto;
}

.ec-form-header {
	margin-bottom: 0.25rem;
	text-align: center;
}

.ec-form-header h1 {
	margin: 0 0 0.5rem;
	color: var(--ec-title-color);
	font-size: 2rem;
	font-weight: 600;
}

@media ( max-width: 600px ) {
	.ec-form-header .ec-title-sub {
		display: block;
		font-size: 0.75em;
	}
}

@media ( max-width: 400px ) {
	.ec-form-header h1 {
		font-size: 2rem;
	}

	.ec-form-header .ec-title-sub {
		font-size: 0.65em;
	}
}

.ec-form-header p {
	margin: 0;
	color: var(--ec-intro-color);
	font-size: 1.125rem;
	line-height: 1.6;
}

.ec-form label {
	color: var(--ec-label-color);
	font-weight: 600;
}

.ec-form select,
.ec-form input[type="text"] {
	border: 1px solid var(--ec-field-border-color);
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	/* Explicit instead of relying on inheritance from .ec-form — some browsers give <select> their own
	   default text color that ignores inheritance. */
	color: var(--ec-text-color);
	/* Explicit white: iOS Safari gives <select> (also when disabled) a grey background of its own. */
	background-color: #fff;
}

/* iOS Safari zooms the page in when a field with a font size under 16px gets focus. Keeping fields at 16px on
   touch devices prevents that, while pinch-to-zoom stays available (the viewport is not locked). */
@media (hover: none) and (pointer: coarse) {
	.ec-form select,
	.ec-form input,
	.ec-form textarea {
		font-size: max(16px, 1em);
	}
}

.ec-form select:disabled {
	opacity: 0.6;
	background-color: #fff;
}

/* Focus border in the button color instead of the default blue browser outline — that clashes with
   every other brand color. No outline/glow around it, only the border color itself changes. .ec-field-
   error (validation.css, with !important) always wins here, so an error stays visibly red even with
   focus. */
.ec-form select:focus-visible,
.ec-form input[type="text"]:focus-visible {
	border-color: var(--ec-button-color);
	outline: none;
}

.ec-form input[type="text"]::placeholder {
	color: var(--ec-placeholder-color);
}

/* Select shows its placeholder-like first option ("Kies een behandeling") while the select itself is
   still on that empty option (nothing chosen yet) — the select text then borrows the placeholder color;
   as soon as another option is chosen the select gets the normal text color again. The
   separate rule for <option> is needed because it would otherwise inherit the select color, also in
   the (open) dropdown itself. */
.ec-form select:has( option[value=""]:checked ) {
	color: var(--ec-placeholder-color);
}

.ec-form select,
.ec-form select option {
	color: var(--ec-select-text-color, var(--ec-text-color));
}

/* Part-of-day labels (Morning/Afternoon/Evening) are not selectable. */
.ec-form select optgroup {
	color: var(--ec-placeholder-color);
	font-weight: 600;
}

.ec-form button[type="submit"] {
	background: var(--ec-button-color);
	color: #fff;
	border: none;
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
}

.ec-form {
	background-color: var(--ec-background-color);
}

/* Icons in the fields and on the button (Admin > Formulier > Afbeeldingen). Which icon is shown comes
   from EC_Form_Icons::css() (--ec-field-icon per field, ::before on the button); this is only the
   styling, adjustable with --ec-control-height / --ec-icon-size / --ec-icon-left / --ec-icon-padding
   on .ec-form. The icon sits vertically in the middle of the input field (--ec-control-height) — the
   error message is outside the flow (validation.css) and therefore does not shift the icon. */
.ec-form {
	--ec-control-height: 2.75rem;
	--ec-icon-size: 1.25rem;
	--ec-icon-left: 0.875rem;
	--ec-icon-padding: 50px;
	--ec-select-arrow-space: 2.25rem;
}

.ec-form select,
.ec-form input[type="text"] {
	height: var( --ec-control-height );
	padding-left: var( --ec-icon-padding );
}

/* Room on the right for the select's arrow, so long text ("tussen 14:30 - 16:00") does not run into it. */
.ec-form select {
	padding-right: var( --ec-select-arrow-space );
	text-overflow: ellipsis;
}

.ec-form-field {
	position: relative;
}

.ec-form-field::after {
	content: "";
	position: absolute;
	left: var( --ec-icon-left );
	bottom: calc( ( var( --ec-control-height ) - var( --ec-icon-size ) ) / 2 );
	width: var( --ec-icon-size );
	height: var( --ec-icon-size );
	background-color: var( --ec-icon-color );
	-webkit-mask: var( --ec-field-icon, none ) center / contain no-repeat;
	mask: var( --ec-field-icon, none ) center / contain no-repeat;
	pointer-events: none;
}

/* Icon dims along with a disabled select (same opacity as .ec-form select:disabled). */
.ec-form-field:has( select:disabled )::after {
	opacity: 0.6;
}

/* Submit button: icon + text are centered as one whole in the button (icon to the left of the text).
   Sizes in em, so they scale with the text size of the button (32px icon, 20px gap at 22px text, as in
   the demo). If it no longer fits, the text wraps over two lines instead of the icon ending up over
   it. */
.ec-form button[type="submit"] {
	--ec-btn-icon-size: 1.4545em;
	--ec-btn-icon-gap: 0.909em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.ec-form button[type="submit"]::before {
	content: "";
	flex: 0 0 auto;
	width: var( --ec-btn-icon-size );
	height: var( --ec-btn-icon-size );
	margin: calc( ( 1.15em - var( --ec-btn-icon-size ) ) / 2 ) var( --ec-btn-icon-gap ) calc( ( 1.15em - var( --ec-btn-icon-size ) ) / 2 ) 0; /* the icon does not make the button taller than the text */
	background-color: currentColor;
}

.ec-form button[type="submit"] > .ec-btn-label {
	flex: 0 1 auto;
	max-width: calc( 100% - var( --ec-btn-icon-size ) - var( --ec-btn-icon-gap ) );
}

@media ( max-width: 500px ) {
	.ec-form button[type="submit"] {
		--ec-btn-icon-size: 1.2778em; /* 23px at 18px text */
		--ec-btn-icon-gap: 0.6667em;
	}
}

/* Loose info text below the submit button (Admin > Formulier > Tekst). */
.ec-form-info {
	margin: 0;
	color: var( --ec-info-color );
	font-size: 1.0625rem;
	line-height: 1.5;
	text-align: center;
}

/* Desktop popup: QR code to continue on the phone (no sending on desktop). Shown by form.js; not closable. */
.ec-desktop-gate {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, .65);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ec-desktop-gate[hidden] {
	display: none;
}

.ec-desktop-gate__card {
	width: 100%;
	max-width: 26rem;
	padding: 32px 32px 28px;
	border-radius: 1.125rem;
	background: var(--ec-background-color, #fff);
	color: var(--ec-text-color, #1a1a1a);
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.ec-desktop-gate__card h2 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.3;
	color: var(--ec-title-color, #1a1a1a);
}

.ec-desktop-gate__card p {
	margin: 0;
	color: var(--ec-intro-color, #6e6e6e);
}

.ec-desktop-gate__qr {
	width: 220px;
	height: 220px;
	margin: 24px auto;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

.ec-desktop-gate__qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ec-desktop-gate__card .ec-desktop-gate__phone {
	font-size: 14px;
}