/**
 * PX Forms – Global Gravity Forms styles
 * Replaces GF's disabled default CSS with theme-consistent styling.
 */


/* ==========================================================================
   1. Wrapper & body reset
   ========================================================================== */



/* ==========================================================================
   2. Hidden elements
   ========================================================================== */

.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend,
.gform_wrapper .admin-hidden-markup,
.gform_wrapper .gfield_description:not(.gfield_validation_message),
.gform_validation_errors,
.gform_wrapper .gfield.hidden_label > .gfield_label,
.gform_wrapper .gfield.hidden_label > legend.gfield_label {
	display: none;
}

/* Required indicator (*) verbergen — verwijder !important om terug te zetten */
.gform_wrapper .gfield_required {
	display: none !important;
}

/* Honeypot, hidden fields & anti-spam: visually hidden but present in DOM */
.gfield--type-honeypot,
.gfield_visibility_hidden,
.gfield_visibility_administrative,
.gform_hidden,
.gform_validation_container,
.gfield_total,
.gform_wrapper .gfield.px-mandatory-hidden-field,
.gform_wrapper .gfield.px-hide-price-field {
	position: absolute !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	pointer-events: none;
}

/* Required indicator: replace "(Vereist)" text with SVG asterisk */
.gform_wrapper .gfield_required {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.gform_wrapper .gfield_required_text {
	font-size: 0;
	line-height: 0;
}

/* .gform_wrapper .gfield_required_text::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--action);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='4.97 1 10.06 10' fill='none'%3E%3Cpath d='M14.9072 8.7085C14.8632 8.77612 14.8051 8.8351 14.7362 8.88205C14.6674 8.92901 14.5892 8.96302 14.506 8.98215C14.4229 9.00128 14.3365 9.00515 14.2517 8.99355C14.167 8.98194 14.0855 8.95508 14.0121 8.9145L10.6522 7.0595V10.4C10.6522 10.5591 10.5834 10.7117 10.4611 10.8243C10.3388 10.9368 10.1729 11 9.99995 11C9.82698 11 9.66109 10.9368 9.53878 10.8243C9.41647 10.7117 9.34776 10.5591 9.34776 10.4V7.0595L5.98784 8.9145C5.9144 8.95505 5.833 8.98189 5.74828 8.99349C5.66356 9.00509 5.57719 9.00123 5.49409 8.98213C5.41099 8.96302 5.3328 8.92904 5.26398 8.88214C5.19515 8.83523 5.13705 8.77632 5.09297 8.70875C5.00396 8.5723 4.97752 8.4089 5.01946 8.25451C5.06141 8.10012 5.1683 7.96739 5.31662 7.8855L8.73251 6L5.31662 4.1145C5.24318 4.07395 5.17914 4.0205 5.12815 3.95718C5.07716 3.89387 5.04023 3.82193 5.01946 3.74549C4.9987 3.66904 4.9945 3.58958 5.00711 3.51164C5.01972 3.4337 5.0489 3.35881 5.09297 3.29125C5.13705 3.22368 5.19515 3.16477 5.26398 3.11786C5.3328 3.07096 5.41099 3.03698 5.49409 3.01787C5.57719 2.99877 5.66356 2.99491 5.74828 3.00651C5.833 3.01811 5.9144 3.04495 5.98784 3.0855L9.34776 4.9405V1.6C9.34776 1.44087 9.41647 1.28826 9.53878 1.17574C9.66109 1.06321 9.82698 1 9.99995 1C10.1729 1 10.3388 1.06321 10.4611 1.17574C10.5834 1.28826 10.6522 1.44087 10.6522 1.6V4.9405L14.0121 3.0855C14.0855 3.04495 14.1669 3.01811 14.2516 3.00651C14.3363 2.99491 14.4227 2.99877 14.5058 3.01787C14.5889 3.03698 14.6671 3.07096 14.7359 3.11786C14.8048 3.16477 14.8629 3.22368 14.9069 3.29125C14.951 3.35881 14.9802 3.4337 14.9928 3.51164C15.0054 3.58958 15.0012 3.66904 14.9804 3.74549C14.9597 3.82193 14.9227 3.89387 14.8718 3.95718C14.8208 4.0205 14.7567 4.07395 14.6833 4.1145L11.2674 6L14.6833 7.8855C14.8316 7.96734 14.9385 8.10001 14.9805 8.25435C15.0225 8.40868 14.9961 8.57204 14.9072 8.7085Z' fill='black'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='4.97 1 10.06 10' fill='none'%3E%3Cpath d='M14.9072 8.7085C14.8632 8.77612 14.8051 8.8351 14.7362 8.88205C14.6674 8.92901 14.5892 8.96302 14.506 8.98215C14.4229 9.00128 14.3365 9.00515 14.2517 8.99355C14.167 8.98194 14.0855 8.95508 14.0121 8.9145L10.6522 7.0595V10.4C10.6522 10.5591 10.5834 10.7117 10.4611 10.8243C10.3388 10.9368 10.1729 11 9.99995 11C9.82698 11 9.66109 10.9368 9.53878 10.8243C9.41647 10.7117 9.34776 10.5591 9.34776 10.4V7.0595L5.98784 8.9145C5.9144 8.95505 5.833 8.98189 5.74828 8.99349C5.66356 9.00509 5.57719 9.00123 5.49409 8.98213C5.41099 8.96302 5.3328 8.92904 5.26398 8.88214C5.19515 8.83523 5.13705 8.77632 5.09297 8.70875C5.00396 8.5723 4.97752 8.4089 5.01946 8.25451C5.06141 8.10012 5.1683 7.96739 5.31662 7.8855L8.73251 6L5.31662 4.1145C5.24318 4.07395 5.17914 4.0205 5.12815 3.95718C5.07716 3.89387 5.04023 3.82193 5.01946 3.74549C4.9987 3.66904 4.9945 3.58958 5.00711 3.51164C5.01972 3.4337 5.0489 3.35881 5.09297 3.29125C5.13705 3.22368 5.19515 3.16477 5.26398 3.11786C5.3328 3.07096 5.41099 3.03698 5.49409 3.01787C5.57719 2.99877 5.66356 2.99491 5.74828 3.00651C5.833 3.01811 5.9144 3.04495 5.98784 3.0855L9.34776 4.9405V1.6C9.34776 1.44087 9.41647 1.28826 9.53878 1.17574C9.66109 1.06321 9.82698 1 9.99995 1C10.1729 1 10.3388 1.06321 10.4611 1.17574C10.5834 1.28826 10.6522 1.44087 10.6522 1.6V4.9405L14.0121 3.0855C14.0855 3.04495 14.1669 3.01811 14.2516 3.00651C14.3363 2.99491 14.4227 2.99877 14.5058 3.01787C14.5889 3.03698 14.6671 3.07096 14.7359 3.11786C14.8048 3.16477 14.8629 3.22368 14.9069 3.29125C14.951 3.35881 14.9802 3.4337 14.9928 3.51164C15.0054 3.58958 15.0012 3.66904 14.9804 3.74549C14.9597 3.82193 14.9227 3.89387 14.8718 3.95718C14.8208 4.0205 14.7567 4.07395 14.6833 4.1145L11.2674 6L14.6833 7.8855C14.8316 7.96734 14.9385 8.10001 14.9805 8.25435C15.0225 8.40868 14.9961 8.57204 14.9072 8.7085Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	vertical-align: middle;
}


/* ==========================================================================
   3. Field layout
   ========================================================================== */

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-d1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gfield {
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
	grid-column: 1 / -1;
}

.gform_wrapper fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

/* Legend doesn't participate in flex gap, so use margin instead */
.gform_wrapper fieldset > legend.gfield_label {
	margin-bottom: var(--space-d075);
}

/* Lege legend (bv. extra checkbox veld zonder label) neemt geen ruimte in */
.gform_wrapper fieldset > legend.gfield_label:empty {
	display: none;
}


/* ==========================================================================
   3b. Field widths (desktop only, 12-column grid)
   ========================================================================== */

@media (min-width: 768px) {
	/* 50% — 6 of 12 kolommen */
	.gform_wrapper .gfield.gf_left_half,
	.gform_wrapper .gfield.gf_right_half,
	.gform_wrapper .gfield.gfield--width-half,
	.gform_wrapper .gfield.px-field-50 {
		grid-column: span 6;
	}

	/* 33% — 4 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-third {
		grid-column: span 4;
	}

	/* 25% — 3 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-quarter {
		grid-column: span 3;
	}

	/* 75% — 9 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-three-quarter {
		grid-column: span 9;
	}

	/* 66% — 8 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-two-thirds {
		grid-column: span 8;
	}

	/* --- Adresvelden (px-address) --- */

	/* Postcode: 7 van 12 kolommen (~58%) */
	.gform_wrapper .gfield.px-address-postal-code {
		grid-column: span 7;
	}

	/* Huisnummer: 3 van 12 kolommen (25%) */
	.gform_wrapper .gfield.px-address-house-number {
		grid-column: span 3;
	}

	/* Toevoeging: 2 van 12 kolommen (~17%) */
	.gform_wrapper .gfield.px-address-house-number-suffix {
		grid-column: span 2;
	}

	/* Straat: 6 van 12 kolommen (50%) */
	.gform_wrapper .gfield.px-address-street {
		grid-column: span 6;
	}

	/* Plaats: 6 van 12 kolommen (50%) */
	.gform_wrapper .gfield.px-address-city {
		grid-column: span 6;
	}
}

/* Uppercase op postcode, stad en IBAN (alleen getypte tekst, niet placeholder) */
.gform_wrapper .px-address-postal-code input,
.gform_wrapper .px-address-city input,
.gform_wrapper .px-direct-debit-iban input {
	text-transform: uppercase;
}

.gform_wrapper .px-address-postal-code input::placeholder,
.gform_wrapper .px-address-city input::placeholder,
.gform_wrapper .px-direct-debit-iban input::placeholder {
	text-transform: none;
}


/* ==========================================================================
   4. Labels
   ========================================================================== */

.gform_wrapper .gfield_label {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
	margin: 0;
	color: var(--text-base);

	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
}


/* ==========================================================================
   5. Text inputs
   ========================================================================== */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
	display: flex;
	align-items: center;
	align-self: stretch;
	width: 100%;

	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d05);
	border: var(--space-d001) solid var(--navy);
	background-color: var(--white);

	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
	transition: border-color var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: calc(var(--space-d1) + 1.5rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23105070' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-d1) center;
	background-size: 1.1rem;
}

.gform_wrapper textarea {
	height: calc(2lh + 2 * var(--space-d075));
	max-height: 200px;
	resize: none;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--gray-mid);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
}


/* ==========================================================================
   6. Focus states
   ========================================================================== */

/* Hover */
.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="number"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper input[type="url"]:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
	border-color: var(--action);
}

/* Active / Focus */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--action);
	outline: none;
}

.gform_wrapper input[type="text"]:focus-visible,
.gform_wrapper input[type="email"]:focus-visible,
.gform_wrapper input[type="number"]:focus-visible,
.gform_wrapper input[type="tel"]:focus-visible,
.gform_wrapper input[type="url"]:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}

/* Filled — keep active border when input has a value */
.gform_wrapper input[type="text"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="email"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="number"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="tel"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="url"][placeholder]:not(:placeholder-shown),
.gform_wrapper textarea[placeholder]:not(:placeholder-shown) {
	border-color: var(--action);
}

/* Error — field with validation error */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="url"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--coral);
}

/* Error — name compound field: only required sub-inputs get coral border */
.gform_wrapper .gfield_error.gfield--type-name input[type="text"]:not([aria-required="true"]) {
	border-color: var(--input-border);
}

/* Disabled */
.gform_wrapper input:disabled,
.gform_wrapper textarea:disabled,
.gform_wrapper select:disabled {
	border-color: var(--gray-mid);
	cursor: not-allowed;
}


/* ==========================================================================
   7. Radio buttons
   ========================================================================== */

/* -- List layout -- */

.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gf_list_inline .gfield_radio {
	flex-direction: row;
	flex-wrap: wrap;
}

/* -- Single item wrapper -- */

.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
}

/* -- Label -- */

.gform_wrapper .gfield_radio label {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);
	cursor: pointer;
}

.gform_wrapper .gfield_radio label a,
.gform_wrapper .gfield_checkbox label a {
	color: var(--action);
	text-decoration: underline;
}

/* -- Circle -- */

.gform_wrapper input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--gray-dark);
	background-color: var(--white);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover — 3px action border + inner ring */
.gform_wrapper input[type="radio"]:hover {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
}

/* Focus — reset default outline */
.gform_wrapper input[type="radio"]:focus {
	outline: none;
}

/* Focus-visible — 3px gray ring + 3px action border + inner ring */
.gform_wrapper input[type="radio"]:focus-visible {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Checked — solid action dot, no inner ring */
.gform_wrapper input[type="radio"]:checked {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action);
}

/* Checked + focus-visible — focus ring around checked dot */
.gform_wrapper input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action),
	            0 0 0 3px var(--gray-dark);
}

/* Error — 3px coral border + inner ring */
.gform_wrapper .gfield_error input[type="radio"] {
	border-color: var(--coral);
	box-shadow: inset 0 0 0 1px var(--coral),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
}

/* Error + Checked — show action dot even in error state */
.gform_wrapper .gfield_error input[type="radio"]:checked {
	border-color: var(--gray-dark);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action);
}

/* Error + Checked + focus-visible */
.gform_wrapper .gfield_error input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action),
	            0 0 0 3px var(--gray-dark);
}

/* Disabled — gray-mid border + gray-mid inner ring */
.gform_wrapper input[type="radio"]:disabled {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 0 var(--gray-mid),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-mid);
	cursor: not-allowed;
}


/* ==========================================================================
   8. Checkboxes
   ========================================================================== */

/* -- List layout -- */

.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -- Single item wrapper -- */

.gform_wrapper .gfield_checkbox .gchoice {
	display: flex;
	gap: var(--space-d025);
}

/* -- Label -- */

.gform_wrapper .gfield_checkbox label {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);
	cursor: pointer;
	margin-top: 3px;
}

/* -- Tick box -- */

.gform_wrapper input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 3px;
	border: 2px solid var(--gray-dark);
	background: var(--white) no-repeat center;
	background-size: 100% 100%;
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover — 3px action border + inner frame */
.gform_wrapper input[type="checkbox"]:hover {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

/* Focus — reset default outline */
.gform_wrapper input[type="checkbox"]:focus {
	outline: none;
}

/* Focus-visible — 3px gray ring + 3px action border + inner frame */
.gform_wrapper input[type="checkbox"]:focus-visible {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Checked — 2px gray border, blue fill with checkmark */
.gform_wrapper input[type="checkbox"]:checked {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 4.5 21 21'%3E%3Cpath d='M21.25 7.5H8.75C8.41848 7.5 8.10054 7.6317 7.86612 7.86612C7.6317 8.10054 7.5 8.41848 7.5 8.75V21.25C7.5 21.5815 7.6317 21.8995 7.86612 22.1339C8.10054 22.3683 8.41848 22.5 8.75 22.5H21.25C21.5815 22.5 21.8995 22.3683 22.1339 22.1339C22.3683 21.8995 22.5 21.5815 22.5 21.25V8.75C22.5 8.41848 22.3683 8.10054 22.1339 7.86612C21.8995 7.6317 21.5815 7.5 21.25 7.5ZM18.5672 13.5672L14.1922 17.9422C14.1341 18.0003 14.0652 18.0464 13.9893 18.0779C13.9135 18.1093 13.8321 18.1255 13.75 18.1255C13.6679 18.1255 13.5865 18.1093 13.5107 18.0779C13.4348 18.0464 13.3659 18.0003 13.3078 17.9422L11.4328 16.0672C11.3155 15.9499 11.2497 15.7909 11.2497 15.625C11.2497 15.4591 11.3155 15.3001 11.4328 15.1828C11.5501 15.0655 11.7091 14.9997 11.875 14.9997C12.0409 14.9997 12.1999 15.0655 12.3172 15.1828L13.75 16.6164L17.6828 12.6828C17.7409 12.6247 17.8098 12.5787 17.8857 12.5473C17.9616 12.5158 18.0429 12.4997 18.125 12.4997C18.2071 12.4997 18.2884 12.5158 18.3643 12.5473C18.4402 12.5787 18.5091 12.6247 18.5672 12.6828C18.6253 12.7409 18.6713 12.8098 18.7027 12.8857C18.7342 12.9616 18.7503 13.0429 18.7503 13.125C18.7503 13.2071 18.7342 13.2884 18.7027 13.3643C18.6713 13.4402 18.6253 13.5091 18.5672 13.5672Z' fill='%230093F5'/%3E%3C/svg%3E");
}

/* Checked + focus-visible — focus ring around checked box */
.gform_wrapper input[type="checkbox"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Error — 3px coral border + inner frame */
.gform_wrapper .gfield_error input[type="checkbox"] {
	border-color: var(--coral);
	box-shadow: inset 0 0 0 1px var(--coral),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

/* Error + Checked — show checkmark even in error state */
.gform_wrapper .gfield_error input[type="checkbox"]:checked {
	border-color: var(--gray-dark);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 4.5 21 21'%3E%3Cpath d='M21.25 7.5H8.75C8.41848 7.5 8.10054 7.6317 7.86612 7.86612C7.6317 8.10054 7.5 8.41848 7.5 8.75V21.25C7.5 21.5815 7.6317 21.8995 7.86612 22.1339C8.10054 22.3683 8.41848 22.5 8.75 22.5H21.25C21.5815 22.5 21.8995 22.3683 22.1339 22.1339C22.3683 21.8995 22.5 21.5815 22.5 21.25V8.75C22.5 8.41848 22.3683 8.10054 22.1339 7.86612C21.8995 7.6317 21.5815 7.5 21.25 7.5ZM18.5672 13.5672L14.1922 17.9422C14.1341 18.0003 14.0652 18.0464 13.9893 18.0779C13.9135 18.1093 13.8321 18.1255 13.75 18.1255C13.6679 18.1255 13.5865 18.1093 13.5107 18.0779C13.4348 18.0464 13.3659 18.0003 13.3078 17.9422L11.4328 16.0672C11.3155 15.9499 11.2497 15.7909 11.2497 15.625C11.2497 15.4591 11.3155 15.3001 11.4328 15.1828C11.5501 15.0655 11.7091 14.9997 11.875 14.9997C12.0409 14.9997 12.1999 15.0655 12.3172 15.1828L13.75 16.6164L17.6828 12.6828C17.7409 12.6247 17.8098 12.5787 17.8857 12.5473C17.9616 12.5158 18.0429 12.4997 18.125 12.4997C18.2071 12.4997 18.2884 12.5158 18.3643 12.5473C18.4402 12.5787 18.5091 12.6247 18.5672 12.6828C18.6253 12.7409 18.6713 12.8098 18.7027 12.8857C18.7342 12.9616 18.7503 13.0429 18.7503 13.125C18.7503 13.2071 18.7342 13.2884 18.7027 13.3643C18.6713 13.4402 18.6253 13.5091 18.5672 13.5672Z' fill='%230093F5'/%3E%3C/svg%3E");
}

/* Error + Checked + focus-visible */
.gform_wrapper .gfield_error input[type="checkbox"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Disabled — gray-mid border, dark inner frame */
.gform_wrapper input[type="checkbox"]:disabled {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
	cursor: not-allowed;
}


/* ==========================================================================
   9. Complex fields (name, address, email-confirm)
   ========================================================================== */

/* -- Name field -- */
.gform_wrapper .gfield--type-name > legend.gfield_label {
	margin-bottom: var(--space-d05);
}

.gform_wrapper .gfield--type-name .ginput_complex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-d1);
}

.gform_wrapper .gfield--type-name .name_first {
	flex: 2 1 0;
	min-width: 0;
}

.gform_wrapper .gfield--type-name .name_middle {
	flex: 1 1 0;
	min-width: 0;
}

.gform_wrapper .gfield--type-name .name_last {
	flex: 0 0 100%;
}

/* Hide sub-labels (First, Middle, Last) — except hidden_label name fields */
.gform_wrapper .gfield--type-name:not(.hidden_label) .gform-field-label--type-sub {
	display: none;
}

/* -- Name field floating sub-labels (hidden_label) -- */
.gform_wrapper .gfield.hidden_label.gfield--type-name .ginput_container_name > span {
	position: relative;
}

.gform_wrapper .gfield.hidden_label.gfield--type-name input {
	font-size: var(--text-d1);
	line-height: var(--lh-normal);
	padding: calc(var(--space-d05) + 0.325rem) var(--space-d1);
	transition: padding var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper .gfield.hidden_label.gfield--type-name input:focus::placeholder {
	color: transparent;
}

.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:focus) input,
.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:not(:placeholder-shown)) input {
	padding-top: calc(var(--space-d05) + 0.75rem);
	padding-bottom: calc(var(--space-d05) - 0.1rem);
}

.gform_wrapper .gfield.hidden_label.gfield--type-name .gform-field-label--type-sub {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 50%;
	left: var(--space-d1);
	transform: translateY(-50%);
	opacity: 0;

	font-family: var(--font-body);
	font-size: var(--text-d1);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-none);
	color: var(--gray-mid);

	padding: 0;
	margin: 0;
	background: transparent;

	transition: top var(--duration-normal) var(--ease-smooth),
	            transform var(--duration-normal) var(--ease-smooth),
	            font-size var(--duration-normal) var(--ease-smooth),
	            font-weight var(--duration-normal) var(--ease-smooth),
	            line-height var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth),
	            letter-spacing var(--duration-normal) var(--ease-smooth),
	            opacity var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:focus) .gform-field-label--type-sub,
.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:not(:placeholder-shown)) .gform-field-label--type-sub {
	top: var(--space-d05);
	transform: translateY(0);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--action);
	opacity: 1;
}


/* -- Email confirm (two inputs side by side) -- */
.gform_wrapper .gfield--type-email .gform-grid-row {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-d05);
	width: 100%;
}

.gform_wrapper .gfield--type-email .gform-grid-row span {
	width: 50%;
}

.gform_wrapper .gfield--type-email .gform-grid-row .gf_clear,
.gform_wrapper .gfield--type-email .gform-grid-row .gform-field-label--type-sub {
	display: none;
}


/* ==========================================================================
   10. Description / help text
   ========================================================================== */



/* ==========================================================================
   10b. HTML fields — links
   ========================================================================== */

.gform_wrapper .gfield_html a {
	color: var(--action);
	text-decoration: underline;
}

.gform_wrapper .gfield_html a:hover {
	color: var(--navy);
}


/* ==========================================================================
   11. Submit button
   ========================================================================== */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin-top: var(--space-d2);
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-d05);

	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--white);

	padding: var(--btn-cta-pad);
	background-color: var(--navy);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-subtle);

	cursor: pointer;
	transition: var(--transition-btn);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	color: var(--gray-dark);
	background-color: var(--white);
	border-color: var(--navy);
	box-shadow: var(--shadow-hover);
}

.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	background-color: var(--white);
	border-color: var(--navy);
	box-shadow: none;
}

.gform_wrapper .gform_button:active,
.gform_wrapper input[type="submit"]:active {
	color: var(--gray-dark);
	background-color: var(--yellow);
	border-color: var(--transparent);
	box-shadow: var(--shadow-pressed);
}


/* -- Next button (primary, action blue + dark arrow right) -- */
.gform_wrapper .gform_next_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-d05);

	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--white);

	margin-left: auto;
	padding: var(--btn-pad);
	background-color: var(--action);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-subtle);

	cursor: pointer;
	transition: var(--transition-btn);
}

.gform_wrapper .gform_next_button .px-next-arrow {
	width: var(--space-d1);
	height: var(--space-d1);
	color: var(--gray-dark);
	flex-shrink: 0;
	transition: color var(--duration-fast) var(--ease-smooth);
}

.gform_wrapper .gform_next_button:hover {
	color: var(--gray-dark);
	background-color: var(--white);
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.gform_wrapper .gform_next_button:hover .px-next-arrow {
	color: var(--gray-dark);
}

.gform_wrapper .gform_next_button:focus-visible {
	color: var(--gray-dark);
	background-color: var(--white);
	outline: solid 5px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}

.gform_wrapper .gform_next_button:focus-visible .px-next-arrow {
	color: var(--gray-dark);
}

.gform_wrapper .gform_next_button:active {
	color: var(--white);
	background-color: var(--navy);
	border-color: var(--transparent);
	box-shadow: var(--shadow-pressed);
}

.gform_wrapper .gform_next_button:active .px-next-arrow {
	color: var(--white);
}


/* ==========================================================================
   12. Multi-page forms
   ========================================================================== */

/* -- Step indicators -- */

.px-form--hide-steps .form_steps {
	display: none;
}

.form_steps {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
	margin-bottom: var(--space-d2);
}

.form_steps__title {
	margin: 0 auto 0 0;
	padding-right: var(--space-d2);
}

.form_steps__step {
	display: flex;
	align-items: center;
}

.form_steps__connector {
	display: block;
	width: var(--space-d1);
	height: 5px;
	background-color: var(--sand);
	flex-shrink: 0;
}

.form_steps__step--active .form_steps__connector,
.form_steps__step--completed .form_steps__connector {
	background-color: var(--action);
}

.form_steps__number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--space-d2);
	height: var(--space-d2);

	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	text-align: center;

	border-radius: var(--space-d2);
	border: 1px solid var(--sand);
	color: var(--text-base);
	background-color: var(--sand-light);

	transition: background-color var(--duration-normal) var(--ease-smooth),
	            border-color var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth);
}

/* Active step */
.form_steps__step--active .form_steps__number {
	background-color: var(--action);
	border-color: var(--action);
	color: var(--white);
}

/* Completed step */
.form_steps__step--completed .form_steps__number {
	background-color: var(--action);
	border-color: var(--action);
	color: var(--white);
}

/* Pending step — uses defaults (sand-light bg, sand border) */

/* -- Page footer (next / prev buttons) -- */

.gform_wrapper .gform_page_footer {
	display: flex;
	align-items: center;
	gap: var(--space-d1);
}

/* -- Previous button (text-only with arrow) -- */
.gform_wrapper .gform_previous_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-d05);

	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--gray-dark);

	padding: var(--btn-pad);
	background-color: var(--transparent);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: none;

	cursor: pointer;
	transition: var(--transition-btn);
}

.gform_wrapper .gform_previous_button .px-prev-arrow {
	width: var(--space-d1);
	height: var(--space-d1);
	color: var(--gray-dark);
	flex-shrink: 0;
	transform: scaleX(-1);
	transition: color var(--duration-fast) var(--ease-smooth);
}

.gform_wrapper .gform_previous_button:hover {
	color: var(--gray-dark);
	background-color: var(--transparent);
	border-color: var(--transparent);
}

.gform_wrapper .gform_previous_button:focus-visible {
	color: var(--gray-dark);
	background-color: var(--transparent);
	outline: solid 5px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}

.gform_wrapper .gform_previous_button:active {
	color: var(--gray-dark);
	background-color: var(--sky-blue);
	border-color: var(--transparent);
}

/* -- Last step: column layout, submit first -- */

.gform_wrapper .gform_page_footer:has(input[type="submit"]) {
	flex-direction: column;
	align-items: flex-start;
}

.gform_wrapper .gform_page_footer:has(input[type="submit"]) input[type="submit"] {
	order: -1;
	margin-right: auto;
}



/* ==========================================================================
   13. Validation & error states
   ========================================================================== */

.gform_wrapper .gfield_validation_message {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-d025);

	color: var(--text-base);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: 400;
	line-height: var(--lh-snug);
}

.gform_wrapper .gfield_validation_message::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: var(--coral);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 17.006l-6.832-11.865a2.25 2.25 0 0 0-3.336 0L1.5 17.006a2.25 2.25 0 0 0 1.668 2.806h13.664a2.25 2.25 0 0 0 1.668-2.806zM9.376 10.437a.625.625 0 0 1 1.25 0v3.125a.625.625 0 0 1-1.25 0v-3.125zm.625 6.875a.937.937 0 1 1 0-1.875.937.937 0 0 1 0 1.875z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 17.006l-6.832-11.865a2.25 2.25 0 0 0-3.336 0L1.5 17.006a2.25 2.25 0 0 0 1.668 2.806h13.664a2.25 2.25 0 0 0 1.668-2.806zM9.376 10.437a.625.625 0 0 1 1.25 0v3.125a.625.625 0 0 1-1.25 0v-3.125zm.625 6.875a.937.937 0 1 1 0-1.875.937.937 0 0 1 0 1.875z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}


/* ==========================================================================
   14. Confirmation
   ========================================================================== */



/* ==========================================================================
   14b. Ajax spinner (pure CSS)
   ========================================================================== */

.gform_ajax_spinner {
	position: fixed;
	bottom: var(--space-d1);
	left: 50%;
	margin-left: -36px;
	z-index: 999999;

	width: 72px;
	height: 72px;
	padding: 14px;
	background: var(--white);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-elevated);
	border: none;
}


/* ==========================================================================
   15. Donation form — choose amount radio pills
   ========================================================================== */

.px-donation-form-choose-amount .gfield_radio {
	flex-direction: row;
	flex-wrap: wrap;
}

/* Hide native radio, style label as pill button */
.px-donation-form-choose-amount .gfield_radio .gchoice {
	gap: 0;
}

.px-donation-form-choose-amount .gfield_radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.px-donation-form-choose-amount .gfield_radio label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3em;
	min-height: 3em;
	gap: var(--space-d05);
	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d075);
	background: var(--white);
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
	border: 3px solid var(--transparent);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-smooth),
	            border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover */
.px-donation-form-choose-amount .gfield_radio label:hover {
	border-color: var(--sky-blue);
	background: var(--sky-blue);
	box-shadow: 1px 2px 3px 0 rgba(51, 51, 51, 0.20);
}

/* Selected (checked) */
.px-donation-form-choose-amount .gfield_radio input[type="radio"]:checked + label {
	border-color: var(--sky-blue);
	background: var(--sky-blue);
	box-shadow: 1px 2px 3px 0 rgba(51, 51, 51, 0.20);
}

/* Focus-visible on label via hidden radio */
.px-donation-form-choose-amount .gfield_radio input[type="radio"]:focus-visible + label {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}


/* ==========================================================================
   15b. Donation purpose — chip badge, visible when pre-filled via URL
   ========================================================================== */

/* Hidden until JS removes .hide when the input has a value */
.gform_wrapper .gfield.px-donation-purpose.hide,
.gform_wrapper .gfield.px-donation-purpose[data-field-class~="hide"] {
	display: none;
}

/* Chip wrapper */
.gform_wrapper .gfield.px-donation-purpose {
	flex-direction: row;
	align-items: center;
	gap: var(--space-d05);
	width: 100%;
	justify-self: start;
	overflow: hidden;

	background: var(--white);
	padding: var(--space-d05) var(--space-d1) var(--space-d05) var(--space-d05);
	border-radius: 100px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Location pin icon — blue circle with white pin */
.gform_wrapper .gfield.px-donation-purpose::before {
	content: '';
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--action);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Label */
.gform_wrapper .gfield.px-donation-purpose .gfield_label {
	font-weight: var(--weight-medium);
	color: var(--gray-dark);
	margin: 0;
}

/* Input container */
.gform_wrapper .gfield.px-donation-purpose .ginput_container {
	display: inline-block;
	vertical-align: middle;
}

/* Value (read-only input styled as text) */
.gform_wrapper .gfield.px-donation-purpose input {
	padding: 0 !important;
	border: none;
	background: transparent;
	font-weight: var(--weight-semibold);
	color: var(--gray-dark);
	pointer-events: none;
	width: auto;
}


/* ==========================================================================
   16. Tooltip (info "i" button inside inputs)
   ========================================================================== */

/* Container: the ginput_container becomes the positioning anchor */
.ginput_container.px-tooltip-active {
	position: relative;
}

/* Push input text away from the button */
.ginput_container.px-tooltip-active > input {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

/* "i" button — inside the input, right side, vertically centered */
.px-tooltip__btn {
	position: absolute;
	right: var(--space-d075);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-d15);
	height: var(--space-d15);
	padding: 0;
	border: var(--space-d001) solid var(--sky-blue);
	border-radius: var(--radius-full);
	background: var(--blue-light);
	cursor: pointer;

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	font-style: italic;
	line-height: 1;
	color: var(--action);

	transition: background-color var(--duration-fast) var(--ease-smooth),
	            border-color var(--duration-fast) var(--ease-smooth),
	            color var(--duration-fast) var(--ease-smooth);
}

.px-tooltip__btn[hidden] {
	display: none;
}

.px-tooltip__btn:hover {
	background: var(--blue-light);
	border-color: var(--action);
	color: var(--navy);
}

.px-tooltip__btn:focus-visible {
	outline: 3px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Popup — positioned above the button */
.px-tooltip__popup {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--space-d05));
	z-index: 10;

	min-width: 200px;
	max-width: 320px;
	padding: var(--space-d05) var(--space-d075);
	border-radius: var(--radius-xs);
	background: var(--action);
	border: none;
	box-shadow: var(--shadow-elevated);

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	color: var(--white);

	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s var(--duration-fast);
	pointer-events: none;
}

/* Arrow pointing down toward the button */
.px-tooltip__popup::before {
	content: '';
	position: absolute;
	bottom: -5px;
	right: var(--space-d075);
	width: 10px;
	height: 10px;
	background: var(--action);
	transform: rotate(45deg);
}

/* Visible state */
.px-tooltip__popup--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s 0s;
}

/* Suggestion highlight */
.px-tooltip__popup strong {
	font-weight: var(--weight-semibold);
	color: var(--white);
}


/* ==========================================================================
   18. Floating label (hidden_label velden)
   Inline float: label fungeert als placeholder, krimpt en schuift naar
   bovenin het invoerveld bij focus/typen. Alleen text-input + textarea.
   Gebruikt :has() — Chrome 105+, Safari 15.4+, Firefox 121+
   ========================================================================== */

/* Scope: alleen deze input-types */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) {
	position: relative;
	align-self: start;
}

/* Input: gelijke hoogte in rust en actief, padding herverdeeld bij focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
) input,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea textarea {
	font-size: var(--text-d1);
	line-height: var(--lh-normal);
	padding: calc(var(--space-d05) + 0.325rem) var(--space-d1);
	transition: padding var(--duration-normal) var(--ease-smooth);
}

/* Placeholder verbergen bij focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
) input:focus::placeholder,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea textarea:focus::placeholder {
	color: transparent;
}

/* Extra padding-top bij focus/invullen (ruimte voor floating label) */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) input,
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) input,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) textarea,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) textarea {
	padding-top: calc(var(--space-d05) + 0.75rem);
	padding-bottom: calc(var(--space-d05) - 0.1rem);
}

/* Label: verborgen op placeholder-positie in rust, animeert naar boven bij focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) > .gfield_label {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 50%;
	left: var(--space-d1);
	transform: translateY(-50%);
	opacity: 0;

	font-family: var(--font-body);
	font-size: var(--text-d1);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-none);
	color: var(--gray-mid);

	padding: 0;
	margin: 0;
	background: transparent;

	transition: top var(--duration-normal) var(--ease-smooth),
	            transform var(--duration-normal) var(--ease-smooth),
	            font-size var(--duration-normal) var(--ease-smooth),
	            font-weight var(--duration-normal) var(--ease-smooth),
	            line-height var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth),
	            letter-spacing var(--duration-normal) var(--ease-smooth),
	            opacity var(--duration-normal) var(--ease-smooth);
}

/* Textarea: label bovenaan (niet gecentreerd) */
.gform_wrapper .gfield.hidden_label.gfield--type-textarea > .gfield_label {
	top: calc(var(--space-d05) + 0.75rem);
	transform: translateY(0);
	align-items: flex-start;
}

/* Required asterisk: placeholder-grootte in rust */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) > .gfield_label .gfield_required {
	width: 14px;
	height: 14px;
	align-self: center;
	transition: width var(--duration-normal) var(--ease-smooth),
	            height var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) > .gfield_label .gfield_required_text::before {
	width: 8px;
	height: 8px;
	background-color: var(--gray-mid);
	transition: background-color var(--duration-normal) var(--ease-smooth),
	            width var(--duration-normal) var(--ease-smooth),
	            height var(--duration-normal) var(--ease-smooth);
}

/* --- Actief: focus of eerste letter getypt --- */

/* Text inputs — focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label,
/* Text inputs — gevuld */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label,
/* Textarea — focus */
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) > .gfield_label,
/* Textarea — gevuld */
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label {
	top: var(--space-d05);
	transform: translateY(0);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--action);
	opacity: 1;
}

/* Asterisk: kleiner en action kleur bij actief */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label .gfield_required,
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label .gfield_required,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) > .gfield_label .gfield_required,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label .gfield_required {
	width: 12px;
	height: 12px;
}

.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before {
	width: 7px;
	height: 7px;
	background-color: var(--action);
}

/* --- Error state --- */

.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label,
.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:focus) > .gfield_label,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label {
	color: var(--coral);
}

.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before {
	background-color: var(--coral);
}


/* ==========================================================================
   19. Error tooltip (waarschuwingsdriehoek met coral popup)
   Vervangt de standaard tekst-validatie onder het veld met een driehoek-icoon
   + hover/focus coral popup. JS (px-error-tooltip.js) injecteert de markup.
   ========================================================================== */

/* Verberg originele validatietekst wanneer error tooltip actief is */
.gform_wrapper .gfield_error.px-error-tooltip-active > .gfield_validation_message {
	display: none;
}

/* Verberg info tooltip wanneer error tooltip in hetzelfde veld zit */
.ginput_container.px-error-tooltip-active .px-tooltip__btn {
	display: none;
}

/* --- Button base --- */

.px-error-tooltip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
}

.px-error-tooltip__btn:focus-visible {
	outline: 3px solid var(--btn-focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Driehoek icon --- */

.px-error-tooltip__icon {
	width: var(--space-d15);
	height: var(--space-d15);
	flex-shrink: 0;
	transform: translateY(-0.25em);
	transition: filter var(--duration-fast) var(--ease-smooth);
}

.px-error-tooltip__btn:hover .px-error-tooltip__icon {
	filter: brightness(0.75);
}

/* --- Coral popup --- */

.px-error-tooltip__popup {
	position: absolute;
	z-index: 10;
	min-width: 200px;
	max-width: 320px;
	padding: var(--space-d05) var(--space-d075);
	border-radius: var(--radius-xs);
	background: var(--coral);
	box-shadow: var(--shadow-elevated);

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	color: var(--white);

	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s var(--duration-fast);
	pointer-events: none;
}

.px-error-tooltip__popup::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--coral);
	transform: rotate(45deg);
}

/* Visible state */
.px-error-tooltip__popup--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s 0s;
}

/* --- Positie: in text input (rechts in het veld) --- */

.ginput_container.px-error-tooltip-active {
	position: relative;
}

.ginput_container.px-error-tooltip-active > input {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

.ginput_container > .px-error-tooltip__btn {
	position: absolute;
	right: var(--space-d075);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.ginput_container > .px-error-tooltip__btn .px-error-tooltip__popup {
	right: 0;
	bottom: calc(100% + var(--space-d05));
}

.ginput_container > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	right: var(--space-d075);
}

/* --- Positie: in name sub-field (compound name veld) --- */

.gfield--type-name .ginput_complex > span.px-error-tooltip-active {
	position: relative;
}

.gfield--type-name .ginput_complex > span.px-error-tooltip-active > input {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

.gfield--type-name .ginput_complex > span > .px-error-tooltip__btn {
	position: absolute;
	right: var(--space-d075);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.gfield--type-name .ginput_complex > span > .px-error-tooltip__btn .px-error-tooltip__popup {
	right: 0;
	bottom: calc(100% + var(--space-d05));
}

.gfield--type-name .ginput_complex > span > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	right: var(--space-d075);
}

/* --- Positie: naast label/legend (radio/checkbox met zichtbaar label) --- */

.gfield_label > .px-error-tooltip__btn,
legend.gfield_label > .px-error-tooltip__btn {
	align-self: center;
}

.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup,
legend.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup {
	left: 50%;
	right: auto;
	bottom: calc(100% + var(--space-d05));
	transform: translateX(-50%);
	white-space: nowrap;
}

.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup::before,
legend.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	left: 50%;
	right: auto;
	margin-left: -5px;
}

/* --- Positie: inline met opties (hidden_label radio/checkbox) --- */

.gfield_radio > .px-error-tooltip__btn,
.gfield_checkbox > .px-error-tooltip__btn {
	align-self: center;
}

.gfield_radio > .px-error-tooltip__btn .px-error-tooltip__popup,
.gfield_checkbox > .px-error-tooltip__btn .px-error-tooltip__popup {
	right: 0;
	bottom: calc(100% + var(--space-d05));
	white-space: nowrap;
}

.gfield_radio > .px-error-tooltip__btn .px-error-tooltip__popup::before,
.gfield_checkbox > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	right: var(--space-d05);
}


/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.form_steps {
		flex-wrap: wrap;
		row-gap: var(--space-d15);
	}

	.form_steps__title {
		order: 1;
		width: 100%;
		margin: 0;
	}

	/* Adresvelden: huisnr + toev 50/50 op mobile */
	.gform_wrapper .gfield.px-address-house-number,
	.gform_wrapper .gfield.px-address-house-number-suffix {
		grid-column: span 6;
	}

}