/* Aanvraagformulier: velden, layout. */

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

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

/* Datum + Tijdblok naast elkaar op desktop (zoals het voorbeeldformulier), onder elkaar op smal
   scherm — .ap-form-row wrapt precies die twee velden in templates/form.php. */
.ap-form-row {
	display: flex;
	align-items: flex-start; /* geen rek: een foutmelding onder één veld mag het icoon in het andere niet laten verschuiven */
	gap: 1rem;
}

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

/* Mobiel: Datum en Tijd onder elkaar. */
@media ( max-width: 480px ) {
	.ap-form-row {
		flex-direction: column;
		align-items: stretch;
	}

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


/* Optioneel logo + titel/introtekst boven de velden (Admin > Formulier). .ap-form's eigen gap
   (1.25rem, zie Admin > Ontwerp CSS) telt al mee als ruimte tussen logo/kop/eerste veld; de
   margin-bottom hieronder is de ruimte die daar bovenop komt, niet de totale ruimte. */
.ap-form-branding {
	margin-bottom: 0.9375rem;
	text-align: center;
}

.ap-form-branding img {
	display: block;
	margin-inline: auto; /* gecentreerd, ook als een thema img op display:block zet */
	max-width: min( 100%, 22.5rem );
	height: auto;
}

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

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

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

.ap-form-field--checkbox {
	flex-direction: row;
	align-items: flex-start;
}

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

/* "Verberg label" (Admin > Formulier > Tekst): visueel verborgen, niet display:none — blijft dus
   voorleesbaar voor schermlezers via de bestaande for/id-koppeling. Nooit op de checkbox-rij: die
   label is de zichtbare bevestigingstekst zelf, geen kop boven een veld. */
.ap-form--hide-labels .ap-form-field:not( .ap-form-field--checkbox ) > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ap-form-field--checkbox label {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Bevestigingscheckbox in dezelfde stijl als de andere velden: het vakje staat links op één lijn met de velden, is
   even groot als een veldicoon (--ap-icon-size) en heeft dezelfde tekstkleur en vakrand als de velden. De extra
   ruimte eronder scheidt de checkbox van de verzendknop. */
.ap-form-field--checkbox {
	padding-top: 3px;
	margin-bottom: 0.5rem;
}

@media ( max-width: 480px ) {
	.ap-form-field--checkbox {
		padding-top: 5px;
	}
}

.ap-form-field--checkbox label {
	align-items: flex-start;
	gap: 0.75rem;
	padding-left: 0;
	color: var( --ap-select-text-color, var( --ap-text-color ) );
	line-height: 1.4;
}

.ap-form-field--checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var( --ap-icon-size );
	height: var( --ap-icon-size );
	margin: calc( ( 1.4em - var( --ap-icon-size ) ) / 2 ) 0 0; /* eerste tekstregel verticaal in het midden van het vakje */
	border: 2px solid var( --ap-field-border-color );
	border-radius: 0.3125rem;
	background: #fff center / 75% no-repeat;
	cursor: pointer;
}

.ap-form-field--checkbox input[type="checkbox"]:checked {
	border-color: var( --ap-button-color );
	background-color: var( --ap-button-color );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E" );
}

.ap-form-field--checkbox input[type="checkbox"]:focus-visible {
	border-color: var( --ap-button-color );
	outline: none;
}

.ap-form select,
.ap-form input[type="text"] {
	border: 1px solid var(--ap-field-border-color);
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	/* Expliciet i.p.v. vertrouwen op overerving van .ap-form — sommige browsers geven <select> een
	   eigen standaardtekstkleur die overerving negeert. */
	color: var(--ap-text-color);
}

.ap-form select:disabled {
	opacity: 0.6;
}

/* Focusrand in de knopkleur i.p.v. de standaard blauwe browseroutline — die botst met elke andere
   merkkleur. Geen outline/glow eromheen, alleen de randkleur zelf verandert. .ap-field-error
   (validation.css, met !important) wint hier altijd van, dus een fout blijft rood zichtbaar ook
   met focus. */
.ap-form select:focus-visible,
.ap-form input[type="text"]:focus-visible {
	border-color: var(--ap-button-color);
	outline: none;
}

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

/* Select toont zijn placeholder-achtige eerste optie ("Kies een behandeling") als de select zelf
   nog required:invalid is (niets geldigs gekozen) — de select-tekst leent dan de placeholder-
   kleur; zodra er wel een geldige optie gekozen is (:valid) krijgt de select weer de gewone
   tekstkleur. De losse regel voor <option> is nodig omdat die anders de select-kleur zou erven,
   ook in het (open) keuzemenu zelf. */
.ap-form select:has( option[value=""]:checked ) {
	color: var(--ap-placeholder-color);
}

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

/* Dagdeel-labels (Ochtend/Middag/Avond) zijn niet selecteerbaar. */
.ap-form select optgroup {
	color: var(--ap-placeholder-color);
	font-weight: 600;
}

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

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

/* Iconen in de velden en op de knop (Admin > Formulier > Afbeeldingen). Welk icoon er staat komt
   uit AP_Form_Icons::css() (--ap-field-icon per veld, ::before op de knop); dit is alleen de
   opmaak, aan te passen met --ap-control-height / --ap-icon-size / --ap-icon-left /
   --ap-icon-padding op .ap-form. Het icoon staat verticaal in het midden van het invoerveld (--ap-control-height) — de
   foutmelding zit buiten de flow (validation.css) en verschuift het icoon dus niet. */
.ap-form {
	--ap-control-height: 2.75rem;
	--ap-icon-size: 1.25rem;
	--ap-icon-left: 0.875rem;
	--ap-icon-padding: 50px;
	--ap-select-arrow-space: 2.25rem;
}

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

/* Ruimte rechts voor het pijltje van de select, zodat lange tekst ("tussen 14:30 - 16:00") er niet tegenaan loopt. */
.ap-form select {
	padding-right: var( --ap-select-arrow-space );
	text-overflow: ellipsis;
}

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

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

/* Icoon dimt mee met een uitgeschakelde select (zelfde opacity als .ap-form select:disabled). */
.ap-form-field:has( select:disabled )::after {
	opacity: 0.6;
}

.ap-form-field--checkbox::after {
	display: none;
}

/* Verzendknop: icoon + tekst staan als één geheel gecentreerd in de knop (icoon links van de tekst). Maten in em, dus ze
   schalen mee met de tekstgrootte van de knop (32px icoon, 20px ruimte bij 22px tekst, zoals in de demo). Past het niet
   meer, dan loopt de tekst over twee regels in plaats van dat het icoon eroverheen komt. */
.ap-form button[type="submit"] {
	--ap-btn-icon-size: 1.4545em;
	--ap-btn-icon-gap: 0.909em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.ap-form button[type="submit"]::before {
	content: "";
	flex: 0 0 auto;
	width: var( --ap-btn-icon-size );
	height: var( --ap-btn-icon-size );
	margin: calc( ( 1.15em - var( --ap-btn-icon-size ) ) / 2 ) var( --ap-btn-icon-gap ) calc( ( 1.15em - var( --ap-btn-icon-size ) ) / 2 ) 0; /* het icoon maakt de knop niet hoger dan de tekst */
	background-color: currentColor;
}

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

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

/* Losse infotekst onder de verzendknop (Admin > Formulier > Infotekst). */
.ap-form-info {
	margin: 0;
	color: var( --ap-info-color );
	line-height: 1.5;
}

.ap-form-info--small { font-size: 0.875rem; }
.ap-form-info--normal { font-size: 1.0625rem; }
.ap-form-info--large { font-size: 1.25rem; }
.ap-form-info--left { text-align: left; }
.ap-form-info--center { text-align: center; }
.ap-form-info--right { text-align: right; }
.ap-form-info--bold { font-weight: 600; }
.ap-form-info--italic { font-style: italic; }