/**
 * Gravity Forms binnen de huisstijl.
 *
 * Overgenomen uit `files/css/px-form-styles.php` van het oude PX Theme: 2.067
 * regels PHP die CSS uitspuugden, met de kleuren van dat moment erin gebakken.
 * Hier is het een gewoon stylesheet. Statisch, te cachen, geen PHP.
 *
 * Vier dingen bepalen de opzet.
 *
 * 1. **De kleuren komen uit de negen gedeelde variabelen.** Elke waarde vraagt
 *    eerst de huisstijl (`--pp-*`), dan het designsysteem van Beaver Builder
 *    (`--ds-*`), en pas dan een eigen kleur. Alle drie de stappen staan in
 *    dezelfde regel, dus er valt niets om als de eerste twee er niet zijn.
 *    Wat de bouwer al heeft ingesteld wint altijd.
 *
 * 2. **De terugval kantelt niet mee met het apparaat.** Anders dan bij de
 *    werkbalk en de zwevende knop staat hier geen blok voor donker. Een
 *    formulier staat in de pagina en niet erover: gaat de site in het donker,
 *    dan zet het designsysteem zijn eigen tokens en volgt het formulier
 *    vanzelf. Een terugval die met de systeemvoorkeur meedraait zou een lichte
 *    site op een donkere telefoon een zwart formulier geven.
 *
 * 3. **Elke regel weegt minstens zo zwaar als de bron.** Gravity Forms schrijft
 *    zelf `.gform_wrapper.gravity-theme ...`. Alles hier begint daarom met die
 *    twee klassen plus minstens één eigen klasse, en overschrijft met een
 *    verkorting (`padding`, `margin`) in plaats van één kant. Er staat geen
 *    enkele `!important` in dit bestand; wint de bron toch ergens, dan is de
 *    oplossing een zwaardere selector en niet een uitroepteken.
 *
 * 4. **Mobiel eerst.** De basis is de telefoon, daarna komen 768px en 1024px.
 *    Het oude bestand had drie losse blokken voor desktop, tablet en mobiel met
 *    precies dezelfde regels erin, die elkaar de hele dag overschreven.
 *
 * Toegankelijkheid. Er staat nergens `outline: none`, de focusring is overal
 * zichtbaar, de ster bij een verplicht veld blijft staan, de foutmelding heeft
 * een pictogram naast de kleur en de foutsamenvatting bovenaan blijft in beeld.
 * In het oude bestand waren die vier stuk voor stuk weggezet met `display:
 * none`. Een keuzeveld dat eruitziet als een kaart verbergt zijn radioknop met
 * doorzichtigheid en niet met `display: none`, zodat de knop bereikbaar blijft
 * met het toetsenbord en voor een schermlezer.
 *
 * Wat er bewust niet in zit: FacetWP (draait hier niet), de eigen grid van
 * twaalf kolommen (Gravity Forms 2.5 doet dat zelf met `gfield--width-*`), de
 * verborgen formuliertitel en de verborgen voortgangsbalk (dat hoort een keuze
 * per formulier te zijn, niet een regel over de hele site), het verbergen van
 * de reCAPTCHA-badge (dat mag niet van de voorwaarden van Google) en het
 * gespreksformulier (dat leunde op opmaak die het oude thema in PHP meestuurde).
 */

/* ------------------------------------------------------------------------ */
/* De variabelen.                                                            */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme {
	--pp-f-tekst: var( --pp-tekst, var( --ds-color-text, #17181c ) );
	--pp-f-gedempt: var( --pp-gedempt, var( --ds-color-text-muted, #5c6070 ) );
	--pp-f-rand: var( --pp-rand, var( --ds-color-border, #d5d7dd ) );
	--pp-f-vlak: var( --pp-vlak, var( --ds-color-surface, #ffffff ) );
	--pp-f-grond: var( --pp-achtergrond, var( --ds-color-background, #f3f4f6 ) );
	--pp-f-accent: var( --pp-accent, var( --ds-color-primary, #1f6f5c ) );
	--pp-f-op-accent: var( --pp-accent-tekst, var( --ds-color-on-primary, #ffffff ) );
	--pp-f-accent-op-vlak: var( --pp-accent-op-vlak, var( --pp-f-accent ) );
	--pp-f-rond: var( --pp-rond, var( --ds-radius-md, 10px ) );

	--pp-f-fout: var( --ds-color-danger, #b3261e );
	--pp-f-fout-vlak: color-mix( in srgb, var( --pp-f-fout ) 8%, transparent );
	--pp-f-accent-zacht: color-mix( in srgb, var( --pp-f-accent ) 8%, transparent );
	--pp-f-accent-rand: color-mix( in srgb, var( --pp-f-accent ) 40%, transparent );

	--pp-f-hoogte: 3rem;
	--pp-f-randbreedte: 1px;
	--pp-f-ruimte: 1.25rem;
	--pp-f-binnenruimte: 0.7rem 0.9rem;
	--pp-f-klein: 0.875rem;
	--pp-f-overgang: 140ms ease;

	/*
	 * Gravity Forms tekent zijn eigen thema met deze tokens. Ze hier zetten
	 * scheelt een stapel overschrijvingen verderop, want alles wat wij niet
	 * aanraken komt dan alsnog in de huisstijl terecht.
	 */
	--gf-color-primary: var( --pp-f-accent );
	--gf-color-primary-contrast: var( --pp-f-op-accent );
	--gf-ctrl-border-color: var( --pp-f-rand );
	--gf-ctrl-radius: var( --pp-f-rond );
	--gf-local-radius: var( --pp-f-rond );

	color: var( --pp-f-tekst );
	font-family: inherit;
	font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper.gravity-theme {
		--pp-f-overgang: 0s;
	}
}

/* ------------------------------------------------------------------------ */
/* De opbouw van het formulier.                                              */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_fields {
	row-gap: var( --pp-f-ruimte );
}

.gform_wrapper.gravity-theme .gform_fields .gfield {
	padding: 0;
}

.gform_wrapper.gravity-theme .gform_heading .gform_title {
	margin: 0 0 0.35rem;
	color: var( --pp-f-tekst );
	font-family: var( --ds-font-heading, inherit );
}

.gform_wrapper.gravity-theme .gform_heading .gform_description {
	display: block;
	margin: 0 0 var( --pp-f-ruimte );
	color: var( --pp-f-gedempt );
}

/* ------------------------------------------------------------------------ */
/* Labels, uitleg en de ster bij een verplicht veld.                         */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_fields .gfield_label {
	display: block;
	margin: 0 0 0.35rem;
	color: var( --pp-f-tekst );
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.gform_wrapper.gravity-theme .gform_fields .gfield_required {
	margin: 0 0 0 0.2rem;
	color: var( --pp-f-fout );
	font-weight: 700;
	text-decoration: none;
}

.gform_wrapper.gravity-theme .gform_fields .gfield_description {
	padding: 0.35rem 0 0;
	color: var( --pp-f-gedempt );
	font-size: var( --pp-f-klein );
	line-height: 1.45;
}

.gform_wrapper.gravity-theme .gform_fields .gform-field-label--type-sub {
	color: var( --pp-f-gedempt );
	font-size: var( --pp-f-klein );
	font-weight: 400;
}

/* ------------------------------------------------------------------------ */
/* Invoervelden.                                                             */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.gform_wrapper.gravity-theme .gform_fields select,
.gform_wrapper.gravity-theme .gform_fields textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var( --pp-f-hoogte );
	padding: var( --pp-f-binnenruimte );
	border: var( --pp-f-randbreedte ) solid var( --pp-f-rand );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-vlak );
	color: var( --pp-f-tekst );
	font: inherit;
	line-height: 1.4;
	transition: border-color var( --pp-f-overgang ), box-shadow var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gform_fields textarea {
	min-height: 8rem;
	resize: vertical;
}

.gform_wrapper.gravity-theme .gform_fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover,
.gform_wrapper.gravity-theme .gform_fields select:hover,
.gform_wrapper.gravity-theme .gform_fields textarea:hover {
	border-color: var( --pp-f-accent-op-vlak );
}

/*
 * De focusring. Deze staat los van de hoverkleur en verdwijnt nooit: in het
 * oude bestand stond op zeven plekken `outline: none`, waarmee een bezoeker
 * die met het toetsenbord invult niet meer kan zien waar hij is.
 */
.gform_wrapper.gravity-theme .gform_fields :is(input, select, textarea):focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gform_fields :is(input, select, textarea):focus {
	border-color: var( --pp-f-accent-op-vlak );
}

.gform_wrapper.gravity-theme .gform_fields :is(input, select, textarea)::placeholder {
	color: var( --pp-f-gedempt );
	opacity: 1;
	text-transform: none;
}

.gform_wrapper.gravity-theme .gform_fields :is(input, select, textarea):disabled {
	background: var( --pp-f-grond );
	color: var( --pp-f-gedempt );
	cursor: not-allowed;
}

/*
 * Het pijltje bij een keuzelijst. Een masker in plaats van een achtergrond,
 * zodat de kleur uit `currentColor` komt en het pijltje in het donker vanzelf
 * meekleurt. Het oude bestand tekende het met twee kleurverlopen die alleen op
 * een lichte ondergrond te zien waren.
 *
 * Het eigen pijltje en het uitzetten van het pijltje van de browser staan onder
 * dezelfde `:has()`, en dat is met opzet. Kent een browser `:has()` niet, dan
 * vallen beide regels weg en houdt elke keuzelijst het pijltje van de browser.
 * Eén van de twee wegvallen zou een keuzelijst opleveren zonder enig teken dat
 * er iets te kiezen valt. Een lijst waarin je meer dan één ding kunt aanwijzen
 * krijgt niets, want dat is geen uitklaplijst.
 */
.gform_wrapper.gravity-theme .gform_fields .ginput_container:has( > select:not([multiple]) ),
.gform_wrapper.gravity-theme .gform_fields .ginput_complex span:has( > select:not([multiple]) ) {
	position: relative;
}

.gform_wrapper.gravity-theme .gform_fields .ginput_container:has( > select:not([multiple]) ) > select,
.gform_wrapper.gravity-theme .gform_fields .ginput_complex span:has( > select:not([multiple]) ) > select {
	padding: var( --pp-f-binnenruimte );
	padding-inline-end: 2.5rem;
	background-image: none;
	appearance: none;
}

.gform_wrapper.gravity-theme .gform_fields .ginput_container:has( > select:not([multiple]) )::after,
.gform_wrapper.gravity-theme .gform_fields .ginput_complex span:has( > select:not([multiple]) )::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 1rem;
	width: 1rem;
	height: 1rem;
	background-color: currentcolor;
	transform: translateY( -50% );
	pointer-events: none;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Bestanden slepen en kiezen. */
.gform_wrapper.gravity-theme .gform_fields .gform_drop_area {
	padding: var( --pp-f-ruimte );
	border: 2px dashed var( --pp-f-rand );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-grond );
	color: var( --pp-f-gedempt );
	text-align: center;
}

/* ------------------------------------------------------------------------ */
/* Keuzevelden: aankruisen en aanstippen.                                    */
/* ------------------------------------------------------------------------ */

/*
 * `accent-color` in plaats van de radioknop verbergen en er met `::before` een
 * eigen rondje voor tekenen. Eén regel, hij volgt de huisstijl, en de knop
 * blijft precies wat de browser en de schermlezer ervan verwachten. Het oude
 * bestand zette `display: none` op elke radioknop en elk vinkje, waardoor ze
 * niet meer met het toetsenbord te bereiken waren.
 */
.gform_wrapper.gravity-theme .gform_fields .gchoice input[type="checkbox"],
.gform_wrapper.gravity-theme .gform_fields .gchoice input[type="radio"] {
	accent-color: var( --pp-f-accent );
	width: 1.15rem;
	height: 1.15rem;
	margin: 0 0.6rem 0 0;
	flex: 0 0 auto;
}

.gform_wrapper.gravity-theme .gform_fields .gchoice {
	display: flex;
	gap: 0;
	align-items: flex-start;
	margin: 0 0 0.5rem;
	line-height: 1.4;
}

.gform_wrapper.gravity-theme .gform_fields .gchoice label {
	margin: 0;
	color: var( --pp-f-tekst );
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gform_fields .gchoice input:focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------ */
/* Knoppen.                                                                  */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"],
.gform_wrapper.gravity-theme .gform_body input#gf_coupon_button {
	box-sizing: border-box;
	width: 100%;
	min-height: var( --pp-f-hoogte );
	padding: 0.75rem 1.5rem;
	border: var( --pp-f-randbreedte ) solid var( --pp-f-accent );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	appearance: none;
	transition: background var( --pp-f-overgang ), border-color var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button:hover,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"]:hover,
.gform_wrapper.gravity-theme .gform_body input#gf_coupon_button:hover {
	background: color-mix( in srgb, var( --pp-f-accent ) 85%, black );
	border-color: color-mix( in srgb, var( --pp-f-accent ) 85%, black );
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gravity-theme .gform_footer button:focus-visible,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:focus-visible,
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"]:focus-visible,
.gform_wrapper.gravity-theme .gform_body input#gf_coupon_button:focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

/* De knop terug is de stille van de twee. */
.gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button {
	border-color: var( --pp-f-rand );
	background: var( --pp-f-vlak );
	color: var( --pp-f-tekst );
}

.gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button:hover {
	border-color: var( --pp-f-accent-op-vlak );
	background: var( --pp-f-grond );
}

/*
 * Volgende boven vorige op de telefoon, naast elkaar zodra er ruimte is. Het
 * oude bestand deed dit met `column-reverse` en liet het daarna staan op elk
 * scherm.
 */
.gform_wrapper.gravity-theme .gform_page_footer {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.75rem;
	margin: var( --pp-f-ruimte ) 0 0;
	padding: 0;
}

.gform_wrapper.gravity-theme .gform_footer {
	margin: var( --pp-f-ruimte ) 0 0;
	padding: 0;
}

/* De molen die draait terwijl het formulier verstuurt. */
.gform_wrapper.gravity-theme .gform_footer .gform_ajax_spinner,
.gform_wrapper.gravity-theme .gform_page_footer .gform_ajax_spinner {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.75rem auto 0;
	display: block;
}

@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
	.gform_wrapper.gravity-theme .gform_footer button,
	.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
	.gform_wrapper.gravity-theme .gform_page_footer input[type="button"] {
		width: auto;
		min-width: 12rem;
	}

	.gform_wrapper.gravity-theme .gform_page_footer {
		flex-direction: row;
		justify-content: space-between;
	}

	.gform_wrapper.gravity-theme .gform_footer .gform_ajax_spinner,
	.gform_wrapper.gravity-theme .gform_page_footer .gform_ajax_spinner {
		margin: 0 0 0 0.75rem;
		display: inline-block;
		vertical-align: middle;
	}
}

/* ------------------------------------------------------------------------ */
/* Foutmeldingen.                                                            */
/* ------------------------------------------------------------------------ */

/*
 * Kleur alleen is niet genoeg: er staat altijd een pictogram en een tekst bij.
 * Gravity Forms koppelt de melding zelf aan het veld met `aria-describedby`;
 * doet het dat niet, dan legt `gravity-forms.js` die koppeling alsnog.
 */
.gform_wrapper.gravity-theme .gform_body .gfield_error :is(input, select, textarea) {
	border-color: var( --pp-f-fout );
	border-width: 2px;
}

.gform_wrapper.gravity-theme .gform_body .gfield_validation_message,
.gform_wrapper.gravity-theme .gform_body .validation_message {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.8rem;
	border: var( --pp-f-randbreedte ) solid var( --pp-f-fout );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-fout-vlak );
	color: var( --pp-f-fout );
	font-size: var( --pp-f-klein );
	font-style: normal;
	line-height: 1.45;
}

.gform_wrapper.gravity-theme .gform_body .gfield_validation_message::before,
.gform_wrapper.gravity-theme .gform_body .validation_message::before,
.gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentcolor;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5'/><path d='M12 16.5h.01'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5'/><path d='M12 16.5h.01'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * De samenvatting bovenaan blijft staan. Gravity Forms zet de aandacht erop na
 * een mislukte verzending en zet er links naar de velden in; die weghalen laat
 * een bezoeker met een schermlezer zoeken naar wat er mis is.
 */
.gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0 0 var( --pp-f-ruimte );
	padding: var( --pp-f-ruimte );
	border: var( --pp-f-randbreedte ) solid var( --pp-f-fout );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-fout-vlak );
	box-shadow: none;
}

.gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var( --pp-f-fout );
	font-size: 1rem;
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gform_validation_errors ol,
.gform_wrapper.gravity-theme .gform_validation_errors ul {
	margin: 0.6rem 0 0;
	padding: 0 0 0 1.2rem;
	font-size: var( --pp-f-klein );
}

.gform_wrapper.gravity-theme .gform_validation_errors a {
	color: inherit;
}

/* De bevestiging na een geslaagde verzending. */
.gform_confirmation_wrapper .gform_confirmation_message {
	padding: var( --pp-f-ruimte, 1.25rem );
	border: 1px solid var( --pp-rand, var( --ds-color-border, #d5d7dd ) );
	border-radius: var( --pp-rond, var( --ds-radius-md, 10px ) );
	background: var( --pp-vlak, var( --ds-color-surface, #ffffff ) );
	color: var( --pp-tekst, var( --ds-color-text, #17181c ) );
}

/* ------------------------------------------------------------------------ */
/* Samengestelde velden: naam, adres, datum, totaal, coupon.                 */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_fields .ginput_complex {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gform_fields .ginput_container_name {
		grid-template-columns: 2fr 1fr;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_name .name_first {
		grid-column: 1 / 2;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_name .name_middle {
		grid-column: 2 / 3;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_name .name_last,
	.gform_wrapper.gravity-theme .gform_fields .ginput_container_name .name_prefix,
	.gform_wrapper.gravity-theme .gform_fields .ginput_container_name .name_suffix {
		grid-column: 1 / -1;
	}

	/*
	 * Een Nederlands adres: straat breed, huisnummer smal, postcode en plaats
	 * naast elkaar. Het oude bestand deed dit met acht flexregels en losse
	 * marges per onderdeel.
	 */
	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address {
		grid-template-columns: repeat( 4, 1fr );
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_line_1 {
		grid-column: span 3;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_line_2 {
		grid-column: span 1;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_zip {
		grid-column: span 1;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_city {
		grid-column: span 3;
	}

	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_state,
	.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_country {
		grid-column: span 2;
	}
}

/* Een postcode en een IBAN lezen in blokken en zijn altijd hoofdletters. */
.gform_wrapper.gravity-theme .gform_fields .pp-postcode input,
.gform_wrapper.gravity-theme .gform_fields .pp-iban input,
.gform_wrapper.gravity-theme .gform_fields .ginput_container_address .address_zip input {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* De datumkiezer van jQuery UI hangt aan de body en valt dus buiten de wrapper. */
#ui-datepicker-div.ui-datepicker {
	padding: 0.75rem;
	border: 1px solid var( --pp-rand, var( --ds-color-border, #d5d7dd ) );
	border-radius: var( --pp-rond, var( --ds-radius-md, 10px ) );
	background: var( --pp-vlak, var( --ds-color-surface, #ffffff ) );
	box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
	color: var( --pp-tekst, var( --ds-color-text, #17181c ) );
	font: inherit;
}

#ui-datepicker-div.ui-datepicker a {
	color: inherit;
	text-decoration: none;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-title select {
	margin: 0 0.25rem;
	padding: 0.25rem;
	border: 1px solid var( --pp-rand, var( --ds-color-border, #d5d7dd ) );
	border-radius: 6px;
	background: var( --pp-vlak, var( --ds-color-surface, #ffffff ) );
	color: inherit;
	font: inherit;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td a,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td span {
	display: block;
	padding: 0.4rem;
	border-radius: 6px;
	text-align: center;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td a:hover,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-state-active {
	background: var( --pp-accent, var( --ds-color-primary, #1f6f5c ) );
	color: var( --pp-accent-tekst, var( --ds-color-on-primary, #ffffff ) );
}

/* Het totaalbedrag hoort niet in een invoervak. */
.gform_wrapper.gravity-theme .gform_fields .ginput_container_total .ginput_total,
.gform_wrapper.gravity-theme .gform_fields .gfield_total .ginput_total {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	font-weight: 700;
}

/* De couponcode en zijn knop staan naast elkaar zodra er ruimte is. */
.gform_wrapper.gravity-theme .gform_fields .ginput_container_coupon {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gform_fields .ginput_container_coupon {
		grid-template-columns: 2fr 1fr;
	}

	.gform_wrapper.gravity-theme .gform_body input#gf_coupon_button {
		width: 100%;
		min-width: 0;
	}
}

/* De kaartgegevens van Stripe krijgen dezelfde omlijsting als een invoerveld. */
.gform_wrapper.gravity-theme .gform_fields .ginput_stripe_creditcard .StripeElement {
	box-sizing: border-box;
	min-height: var( --pp-f-hoogte );
	padding: 0.95rem 0.9rem;
	border: var( --pp-f-randbreedte ) solid var( --pp-f-rand );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-vlak );
}

/* ------------------------------------------------------------------------ */
/* De voortgang bij een formulier met stappen.                               */
/* ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gf_progressbar_wrapper {
	margin: 0 0 var( --pp-f-ruimte );
	padding: 0;
}

.gform_wrapper.gravity-theme .gf_progressbar_wrapper .gf_progressbar {
	border-radius: 999px;
	background: var( --pp-f-grond );
}

.gform_wrapper.gravity-theme .gf_progressbar_wrapper .gf_progressbar_percentage {
	border-radius: 999px;
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
}

.gform_wrapper.gravity-theme .gf_page_steps {
	margin: 0 0 var( --pp-f-ruimte );
	padding: 0;
	border: 0;
	color: var( --pp-f-gedempt );
}

.gform_wrapper.gravity-theme .gf_page_steps .gf_step_active {
	color: var( --pp-f-tekst );
	font-weight: 600;
}

/* ------------------------------------------------------------------------ */
/* Klaarstaande klassen: wat de bouwer per veld kan aanzetten.               */
/* ------------------------------------------------------------------------ */

/*
 * Een veld dat wel meegestuurd wordt maar niet in beeld staat. `visibility`
 * haalt het ook uit de voorleesvolgorde, wat de bedoeling is: het gaat om
 * velden die een script invult, niet om velden die iemand moet lezen.
 */
.gform_wrapper.gravity-theme .gform_fields .pp-verborgen-veld {
	position: absolute;
	width: 1px;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
}

/* Keuzes naast elkaar in plaats van onder elkaar. */
.gform_wrapper.gravity-theme .gform_fields .pp-naast-elkaar .gfield_radio,
.gform_wrapper.gravity-theme .gform_fields .pp-naast-elkaar .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
}

.gform_wrapper.gravity-theme .gform_fields .pp-naast-elkaar .gchoice {
	margin: 0;
}

/* Label en veld op één regel, voor een bedrag of een korte code. */
@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gform_fields .pp-label-inline {
		display: flex;
		gap: 0.75rem;
		align-items: center;
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-label-inline .gfield_label {
		margin: 0;
		flex: 0 0 auto;
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-label-inline .ginput_container {
		flex: 1 1 auto;
	}

	/*
	 * Dertig en zeventig procent. De andere breedtes zitten al in Gravity Forms
	 * zelf, als `gfield--width-half` en zo; daar hoort geen tweede stelsel naast.
	 */
	.gform_wrapper.gravity-theme .gform_fields .pp-breedte-30 {
		grid-column: span 4;
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-breedte-70 {
		grid-column: span 8;
	}
}

/*
 * Een inschrijfveld met de knop ertegenaan. Op de telefoon onder elkaar, want
 * een invoerveld van 40% breed is daar onbruikbaar. Deze klasse zet je bij de
 * instellingen van het formulier zelf, niet bij een veld: Gravity Forms zet hem
 * dan op het `<form>` element.
 */
@media (min-width: 768px) {
	.gform_wrapper.gravity-theme form.pp-nieuwsbrief {
		display: flex;
		gap: 0;
		align-items: flex-start;
	}

	.gform_wrapper.gravity-theme form.pp-nieuwsbrief .gform_body {
		flex: 1 1 auto;
	}

	.gform_wrapper.gravity-theme form.pp-nieuwsbrief .gform_fields input[type="email"],
	.gform_wrapper.gravity-theme form.pp-nieuwsbrief .gform_fields input[type="text"] {
		border-radius: var( --pp-f-rond ) 0 0 var( --pp-f-rond );
	}

	.gform_wrapper.gravity-theme form.pp-nieuwsbrief .gform_footer {
		flex: 0 0 auto;
		margin: 0;
	}

	.gform_wrapper.gravity-theme form.pp-nieuwsbrief .gform_footer input[type="submit"] {
		min-width: 0;
		border-radius: 0 var( --pp-f-rond ) var( --pp-f-rond ) 0;
	}
}

/* ------------------------------------------------------------------------ */
/* Keuzes als knoppen.                                                       */
/* ------------------------------------------------------------------------ */

/*
 * De kaart is het label, niet het omhulsel. Zo is `input:checked + label`
 * genoeg om de gekozen kaart te tekenen en hoeft er geen `:has()` aan te pas te
 * komen. De radioknop zelf blijft staan, doorzichtig en één pixel groot, zodat
 * hij bereikbaar blijft met het toetsenbord en de focusring op de kaart komt.
 */
.gform_wrapper.gravity-theme .gform_fields :is(.pp-keuze-knoppen, .pp-keuze-afbeelding, .pp-keuze-rond) .gchoice input[type="radio"],
.gform_wrapper.gravity-theme .gform_fields :is(.pp-keuze-knoppen, .pp-keuze-afbeelding, .pp-keuze-rond) .gchoice input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	clip-path: inset( 50% );
	overflow: hidden;
	white-space: nowrap;
}

.gform_wrapper.gravity-theme .gform_fields :is(.pp-keuze-knoppen, .pp-keuze-afbeelding, .pp-keuze-rond) .gchoice {
	position: relative;
	display: block;
	margin: 0;
}

.gform_wrapper.gravity-theme .gform_fields :is(.pp-keuze-knoppen, .pp-keuze-afbeelding, .pp-keuze-rond) .gchoice input:focus-visible + label {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gfield_radio,
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gfield_checkbox {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr;
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gchoice label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var( --pp-f-hoogte );
	padding: 0.7rem 1rem;
	border: var( --pp-f-randbreedte ) solid var( --pp-f-rand );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-vlak );
	text-align: center;
	transition: border-color var( --pp-f-overgang ), background var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gchoice label:hover {
	border-color: var( --pp-f-accent-op-vlak );
	background: var( --pp-f-accent-zacht );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gchoice input:checked + label {
	border-color: var( --pp-f-accent );
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	font-weight: 600;
}

@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gfield_radio,
	.gform_wrapper.gravity-theme .gform_fields .pp-keuze-knoppen .gfield_checkbox {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-kolommen-1 .gfield_radio,
	.gform_wrapper.gravity-theme .gform_fields .pp-kolommen-1 .gfield_checkbox {
		grid-template-columns: minmax( 0, 1fr );
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-kolommen-2 .gfield_radio,
	.gform_wrapper.gravity-theme .gform_fields .pp-kolommen-2 .gfield_checkbox {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-kolommen-4 .gfield_radio,
	.gform_wrapper.gravity-theme .gform_fields .pp-kolommen-4 .gfield_checkbox {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* ------------------------------------------------------------------------ */
/* Keuzes met een afbeelding.                                                */
/* ------------------------------------------------------------------------ */

/*
 * De afbeelding staat in de waarde van de keuze, voor het streepje:
 * `https://site.nl/wp-content/uploads/stoel.jpg|75`. `gravity-forms.js` haalt
 * hem daar vandaan en zet er een `<img>` van in het label. Draait dat script
 * niet, dan blijft er een gewone keuzelijst staan die het gewoon doet; daarom
 * hangt alles hieronder aan `pp-keuze-klaar`, dat het script zelf neerzet.
 */
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gfield_radio,
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gfield_checkbox {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gchoice label {
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 100%;
	padding: 0;
	border: var( --pp-f-randbreedte ) solid var( --pp-f-rand );
	border-radius: var( --pp-f-rond );
	background: var( --pp-f-vlak );
	overflow: hidden;
	transition: border-color var( --pp-f-overgang ), box-shadow var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gchoice label:hover {
	border-color: var( --pp-f-accent-op-vlak );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gchoice input:checked + label {
	border-color: var( --pp-f-accent );
	box-shadow: inset 0 0 0 2px var( --pp-f-accent );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding .pp-keuze__beeld {
	display: block;
	width: 100%;
	height: 7rem;
	margin: 0;
	object-fit: cover;
	background: var( --pp-f-grond );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-passend .pp-keuze__beeld {
	object-fit: contain;
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding .pp-keuze__tekst {
	display: block;
	padding: 0.6rem 0.75rem;
	font-size: var( --pp-f-klein );
	line-height: 1.35;
}

/* Het vinkje op de gekozen kaart, zodat de keuze niet alleen aan kleur hangt. */
.gform_wrapper.gravity-theme .gform_fields :is(.pp-keuze-afbeelding, .pp-keuze-rond).pp-keuze-klaar .gchoice input:checked + label::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.3rem;
	border-radius: 999px;
	background-color: var( --pp-f-accent );
	box-sizing: border-box;
	-webkit-mask-image: none;
	mask-image: none;
}

.gform_wrapper.gravity-theme .gform_fields :is(.pp-keuze-afbeelding, .pp-keuze-rond).pp-keuze-klaar .gchoice input:checked + label::before {
	content: "";
	position: absolute;
	top: 0.85rem;
	inset-inline-end: 0.85rem;
	z-index: 1;
	width: 0.8rem;
	height: 0.8rem;
	background-color: var( --pp-f-op-accent );
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4 10-10'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4 10-10'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Schuiven in plaats van een carrousel. Het oude systeem laadde hiervoor Owl
 * Carousel, veertig kilobyte met eigen pijlen en een eigen sleepafhandeling.
 * Een rij die horizontaal schuift met vastklikpunten doet hetzelfde, kost geen
 * byte JavaScript en werkt met een vinger, een muis en een toetsenbord.
 */
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-schuivend.pp-keuze-klaar .gfield_radio,
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-schuivend.pp-keuze-klaar .gfield_checkbox {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 9rem, 45% );
	grid-template-columns: none;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-schuivend .gchoice {
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gfield_radio,
	.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-keuze-klaar .gfield_checkbox {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-schuivend.pp-keuze-klaar .gfield_radio,
	.gform_wrapper.gravity-theme .gform_fields .pp-keuze-afbeelding.pp-schuivend.pp-keuze-klaar .gfield_checkbox {
		grid-auto-columns: minmax( 0, 22% );
		grid-template-columns: none;
	}
}

/* ------------------------------------------------------------------------ */
/* Keuzes als ronde afbeelding.                                              */
/* ------------------------------------------------------------------------ */

/*
 * Het oude systeem zette de tekst hier in een zwevende ballon van Tippy en
 * verborg hem verder. Zonder die bibliotheek staat het bijschrift gewoon onder
 * het rondje: leesbaar, voor te lezen, en niemand hoeft ergens overheen te
 * zweven om te weten waar hij op klikt.
 */
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond.pp-keuze-klaar .gfield_radio,
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond.pp-keuze-klaar .gfield_checkbox {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fit, minmax( 5rem, 1fr ) );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond.pp-keuze-klaar .gchoice label {
	display: flex;
	gap: 0.4rem;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding: 0;
	text-align: center;
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond .pp-keuze__beeld {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0;
	border: 2px solid var( --pp-f-rand );
	border-radius: 999px;
	background: var( --pp-f-grond );
	object-fit: cover;
	transition: border-color var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond .gchoice input:checked + label .pp-keuze__beeld {
	border-color: var( --pp-f-accent );
	border-width: 3px;
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond .pp-keuze__tekst {
	display: block;
	padding: 0;
	font-size: var( --pp-f-klein );
	line-height: 1.3;
}

/* Bij een rond beeld hoort het vinkje rechtsonder tegen de cirkel aan. */
.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond.pp-keuze-klaar .gchoice input:checked + label::after {
	top: 2.85rem;
	inset-inline-end: auto;
	inset-inline-start: calc( 50% + 0.85rem );
}

.gform_wrapper.gravity-theme .gform_fields .pp-keuze-rond.pp-keuze-klaar .gchoice input:checked + label::before {
	top: 3.2rem;
	inset-inline-end: auto;
	inset-inline-start: calc( 50% + 1.2rem );
}

/* De prijs in het label van een keuze, als de bouwer die wil verbergen. */
.gform_wrapper.gravity-theme .gform_fields .pp-prijs-verbergen .ginput_price {
	display: none;
}

/* ------------------------------------------------------------------------ */
/* GP Bookings: de kalender en de tijdstippen.                               */
/* ------------------------------------------------------------------------ */

/*
 * Overgenomen uit het oude bestand, met alle 88 uitroeptekens eruit. Die stonden
 * er omdat de opmaak toen los van de wrapper werd geschreven en dus lichter
 * woog dan die van de plugin; met `.gform_wrapper.gravity-theme` ervoor is dat
 * niet meer nodig.
 */
.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker {
	background: transparent;
	color: var( --pp-f-tekst );
	font-family: inherit;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__calendar .rdp-root {
	--rdp-accent-color: var( --pp-f-accent );
	--rdp-accent-background-color: var( --pp-f-accent );

	max-width: 26rem;
	font-family: inherit;
}

.gform_wrapper.gravity-theme .gfield .rdp-months {
	display: block;
}

.gform_wrapper.gravity-theme .gfield .rdp-month_caption {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem;
	padding: 0;
}

.gform_wrapper.gravity-theme .gfield .rdp-dropdowns {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.gform_wrapper.gravity-theme .gfield .rdp-dropdown_root {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.gform_wrapper.gravity-theme .gfield .rdp-dropdown_root .rdp-caption_label {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	padding: 0.35rem 0.6rem;
	border: 1px solid var( --pp-f-accent );
	border-radius: 6px;
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: capitalize;
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gfield .rdp-dropdown_root .rdp-caption_label .rdp-chevron {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentcolor;
}

.gform_wrapper.gravity-theme .gfield .rdp-dropdown {
	position: absolute;
	inset: 0;
	border: 0;
	background: transparent;
	font: inherit;
	opacity: 0;
	cursor: pointer;
	appearance: none;
}

.gform_wrapper.gravity-theme .gfield .rdp-nav {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
}

.gform_wrapper.gravity-theme .gfield .rdp-button_previous,
.gform_wrapper.gravity-theme .gfield .rdp-button_next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var( --pp-f-accent );
	border-radius: 6px;
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	opacity: 1;
	cursor: pointer;
	transition: opacity var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gfield .rdp-button_previous:hover,
.gform_wrapper.gravity-theme .gfield .rdp-button_next:hover {
	opacity: 0.85;
}

.gform_wrapper.gravity-theme .gfield .rdp-button_previous:focus-visible,
.gform_wrapper.gravity-theme .gfield .rdp-button_next:focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gfield .rdp-button_previous .rdp-chevron,
.gform_wrapper.gravity-theme .gfield .rdp-button_next .rdp-chevron {
	width: 1rem;
	height: 1rem;
	fill: currentcolor;
}

.gform_wrapper.gravity-theme .gfield .rdp-month_grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px;
	table-layout: fixed;
}

.gform_wrapper.gravity-theme .gfield .rdp-weekdays .rdp-weekday {
	padding: 0 0 0.35rem;
	color: var( --pp-f-gedempt );
	font-size: var( --pp-f-klein );
	font-weight: 600;
	text-align: center;
}

/* Een vierkant vakje zonder vaste maat: de opvulling doet het werk. */
.gform_wrapper.gravity-theme .gfield .rdp-day {
	position: relative;
	padding: 0;
	vertical-align: top;
}

.gform_wrapper.gravity-theme .gfield .rdp-day::before {
	content: "";
	display: block;
	padding: 0 0 100%;
}

.gform_wrapper.gravity-theme .gfield .rdp-day_button {
	display: flex;
	position: absolute;
	inset: 2px;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var( --pp-f-grond );
	color: var( --pp-f-gedempt );
	font: inherit;
	cursor: default;
	transition: background var( --pp-f-overgang ), color var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gfield .rdp-day.gpb-day--available .rdp-day_button {
	border-color: var( --pp-f-accent-rand );
	background: var( --pp-f-accent-zacht );
	color: var( --pp-f-tekst );
	font-weight: 500;
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gfield .rdp-day.gpb-day--available .rdp-day_button:hover {
	border-color: var( --pp-f-accent );
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
}

.gform_wrapper.gravity-theme .gfield .rdp-day .rdp-day_button:focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 1px;
}

.gform_wrapper.gravity-theme .gfield .rdp-day.rdp-today .rdp-day_button {
	border-color: var( --pp-f-accent );
	border-width: 2px;
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gfield .rdp-day.rdp-selected .rdp-day_button,
.gform_wrapper.gravity-theme .gfield .rdp-day[aria-selected="true"] .rdp-day_button {
	border-color: var( --pp-f-accent );
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gfield .rdp-day.rdp-disabled .rdp-day_button,
.gform_wrapper.gravity-theme .gfield .rdp-day.gpb-day--outside-availability .rdp-day_button {
	border-color: transparent;
	background: var( --pp-f-grond );
	color: var( --pp-f-gedempt );
	opacity: 0.45;
	cursor: not-allowed;
}

.gform_wrapper.gravity-theme .gfield .rdp-day.rdp-hidden .rdp-day_button,
.gform_wrapper.gravity-theme .gfield .rdp-day.rdp-outside .rdp-day_button {
	visibility: hidden;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__header {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__header h4 {
	margin: 0;
	color: var( --pp-f-tekst );
	font-family: var( --ds-font-heading, inherit );
	font-size: 1.125rem;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__back {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	padding: 0.4rem 0.75rem;
	border: 1px solid var( --pp-f-accent );
	border-radius: 6px;
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	font-size: var( --pp-f-klein );
	text-decoration: none;
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__back:hover {
	opacity: 0.85;
	color: var( --pp-f-op-accent );
	text-decoration: none;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__back:focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slots {
	padding: 0;
	border: 0;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slots h4 {
	display: flex;
	gap: 0.35rem;
	align-items: baseline;
	margin: 0 0 0.75rem;
	color: var( --pp-f-gedempt );
	font-size: 0.9375rem;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__duration {
	color: var( --pp-f-gedempt );
	font-size: var( --pp-f-klein );
	font-weight: 400;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1rem;
	border: 1px solid var( --pp-f-accent-rand );
	border-radius: 6px;
	background: var( --pp-f-accent-zacht );
	box-shadow: none;
	color: var( --pp-f-tekst );
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background var( --pp-f-overgang ), color var( --pp-f-overgang );
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot:hover {
	border-color: var( --pp-f-accent );
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot:focus-visible {
	outline: 2px solid var( --pp-f-accent-op-vlak );
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot--selected,
.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot[aria-selected="true"] {
	border-color: var( --pp-f-accent );
	background: var( --pp-f-accent );
	color: var( --pp-f-op-accent );
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot[disabled],
.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__slot--unavailable {
	border-color: transparent;
	background: var( --pp-f-grond );
	color: var( --pp-f-gedempt );
	opacity: 0.5;
	cursor: not-allowed;
}

@media (min-width: 768px) {
	.gform_wrapper.gravity-theme .gfield .gpb-booking-time-picker__grid {
		grid-template-columns: repeat( auto-fill, minmax( 9rem, 1fr ) );
	}

	.gform_wrapper.gravity-theme .gfield .rdp-month_grid {
		border-spacing: 6px;
	}
}