:root {

	/* INPUT BASE — scheme-aware: fields take the active scheme's surface/text/border
	   so they recolor per scheme + adapt in dark mode (inert in the default scheme).
	   NOTE: --input-border-radius intentionally matches the Select2 widget border-radius. */
	--input-bg: var(--ftm-scheme-bg, var(--color-white));
	--input-text-color: var(--ftm-scheme-text, var(--color-text));
	--input-placeholder-color: var(--ftm-scheme-muted, var(--color-neutral-500));
	--input-padding: var(--space-xxsmall) var(--space-xsmall);
	--input-border-width: 1px;

	/* Pinned to neutral-500 (not the scheme border): a form control's boundary needs
	   >=3:1 (WCAG 1.4.11), and neutral-500 clears it on both light (3.85:1) and dark
	   (4.48:1 vs the dark field) surfaces — unlike the scheme border, which is fine
	   for decorative dividers but too low on a dark field. (§15) */
	--input-border-color: var(--color-neutral-500, #808285);
	--input-border-radius: var(--border-radius);
	--input-font: var(--body-small);

	/* VALIDATION STATE INDICATORS
	   Left-edge inset box-shadow used for inline error/success feedback. */
	--input-shadow-invalid: inset 2px 0 0 var(--color-form-error);
	--input-shadow-valid: inset 2px 0 0 var(--color-form-success);

	/* GRAVITY FORMS */
	--gf-field-gap: var(--space-normal);
	--gf-field-label-font: var(--label-large);
	--gf-field-description-font: var(--label-medium);
	--gf-message-padding: var(--space-small) var(--space-medium);

	/* DATEPICKER */
	--datepicker-padding: var(--space-xsmall);
	--datepicker-border-color: var(--gray-light);

	/* PASSWORD-PROTECTED FORM */
	--password-form-max-width: 650px;
	--password-form-heading-font: var(--heading-small);
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

/* ===== INPUT BASE STYLES ===== */

input,
textarea,
select {
	border: var(--input-border-width) solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	font: var(--input-font);
	padding: var(--input-padding);
	width: 100%;
}

/* Field surface + text from the scheme (text-like controls only; checkbox/radio/
   buttons keep native rendering). Inert in the default scheme; adapts in dark. */
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"]),
textarea,
select {
	background-color: var(--input-bg);
	color: var(--input-text-color);
}

::placeholder {
	color: var(--input-placeholder-color);
	opacity: 1;
}

/* ===== SPECIAL FIELD TYPES ===== */

input[type="submit"],
input[type="number"],
input[type="radio"],
input[type="checkbox"] {
	width: auto;
}

/* ===== VALIDATION STATE INDICATORS ===== */

/* Field with a value that fails validation */
.invalid > input,
input[aria-invalid="true"],
.gfield_error input {
	box-shadow: var(--input-shadow-invalid);
}

/* Field with a value that passes validation */
.valid > input {
	box-shadow: var(--input-shadow-valid);
}

/* ===== GRAVITY FORMS: LEGACY MARKUP ===== */

/*
 * Styles targeting the older pre-gravity-theme Gravity Forms markup.
 * The .gravity-theme block below covers the current markup output.
 */

.gform_wrapper {
	clear: both;

	:where(.gform_fields, .gfield_radio, .gfield_checkbox) {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gform_fields > li {
		margin: var(--gf-field-gap) 0;

		&.gform_hidden {
			margin: 0;
		}
	}

	.gfield > label {
		display: block;
		font: var(--gf-field-label-font);
	}

	.gfield_radio input {
		margin-right: var(--space-xxsmall);
	}

	.gfield_description {
		font: var(--gf-field-description-font);
	}

	.validation_message {
		color: var(--color-form-error);
	}

	.gform_footer {
		margin-top: var(--gf-field-gap);
	}

	/* Transparent border maintains layout dimensions regardless of button variant */
	.gform_button.button {
		border: 1px solid transparent;
	}
}

/* ===== GRAVITY FORMS: THEME MARKUP ===== */

/*
 * Styles targeting the current gravity-theme markup output.
 * Uses :where() throughout to keep specificity at zero,
 * allowing easy per-form overrides.
 */

.gform_wrapper.gravity-theme {
	clear: both;

	:where(.gform_fields, .gfield_radio, .gfield_checkbox) {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gfield {
		margin: var(--gf-field-gap) 0;
	}

	:where(.gfield_label, .gform-field-label, .gform_required_legend) {
		display: block;
		font: var(--gf-field-label-font);
	}

	:where(.gfield_description, .gform_description, .gfield_consent_description) {
		font: var(--gf-field-description-font);
	}

	:where(.gfield_required, .gfield_validation_message, .validation_message) {
		color: var(--color-form-error);
	}

	:where(.gform_validation_errors, .gform_confirmation_message) {
		background-color: var(--color-form-surface);
		border: var(--input-border-width) solid var(--input-border-color);
		border-radius: var(--input-border-radius);
		padding: var(--gf-message-padding);
	}

	.gform_validation_errors {
		border-color: var(--color-form-error);
		color: var(--color-form-error);
	}

	.gform_confirmation_message {
		border-color: var(--color-form-success);
	}

	:where(.gform_footer, .gform_page_footer) {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-small);
		margin-top: var(--gf-field-gap);
	}

	:where(.gform_button, .gform_next_button, .gform_previous_button) {
		width: auto;
	}
}

/* ===== GRAVITY FORMS: HONEYPOT ===== */

/*
 * Honeypot fields are moved off-screen to remain invisible to users
 * while still being present in the DOM for spam-bot detection.
 */
.gform_validation_container {
	left: var(--offscreen);
	position: absolute;
	top: var(--offscreen);
}

/* ===== DATEPICKER ===== */

.ui-datepicker {
	background-color: var(--color-form-surface);
	border: var(--input-border-width) solid var(--datepicker-border-color);
	border-radius: var(--input-border-radius);
	box-shadow: var(--box-shadow);
	padding: var(--datepicker-padding);
}

.ui-datepicker-header {
	align-items: center;
	display: flex;
}

.ui-datepicker-prev {
	order: 1;
}

.ui-datepicker-next {
	order: 3;
}

.ui-datepicker-title {
	order: 2;
	padding: 0 var(--datepicker-padding);
}

.ui-datepicker-title select {
	max-width: 50%;
}

.ui-datepicker-calendar {
	border-collapse: collapse;
	margin-bottom: 0;
}

.ui-datepicker-calendar td {
	border: var(--input-border-width) solid var(--datepicker-border-color);
	text-align: center;
}

.ui-datepicker-calendar .ui-datepicker-today {
	background-color: var(--gray-xlight);
}

.ui-datepicker-calendar td a {
	display: block;
	line-height: 2;
	text-decoration: none;
	width: 2em;
}

/* ===== UTILITY: VISUALLY HIDDEN LABELS ===== */

/*
 * Apply .hide-labels to a form to visually hide all labels
 * while keeping them accessible to screen readers.
 */
.hide-labels label {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ===== SELECT2 OVERRIDES ===== */

/*
 * Select2 drops its own styles with high specificity.
 * These overrides align it with the site's input base styles.
 */

.select2.select2-container {
	display: block;
	font: var(--input-font);
}

.select2.select2-container .select2-selection--single {
	border-color: var(--input-border-color);
	border-radius: var(--input-border-radius);
	height: auto;
	margin: 0;
}

.select2.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: inherit;
	line-height: inherit;
	padding-bottom: var(--space-xxsmall);
	padding-top: var(--space-xxsmall);
}

.select2.select2-container--default .select2-selection--single .select2-selection__placeholder {
	display: block;
	min-height: 1.5em;
}

.select2.select2-container--default .select2-selection--single .select2-selection__arrow {
	bottom: 1px;
	height: auto;
}

.select2-container .select2-results {
	font: var(--input-font);
}

/* ===== PASSWORD-PROTECTED FORM ===== */

form.post-password-form {
	margin: 5em auto;
	max-width: var(--password-form-max-width);

	& > p:first-of-type::before {
		content: "Please Enter Password";
		display: block;
		font: var(--password-form-heading-font);
		text-transform: uppercase;
	}

	& > p:last-of-type {
		align-items: flex-end;
		display: flex;
		justify-content: space-between;

		label {
			margin-right: var(--space-large);
			width: 100%;
		}

		/* Submit button styled to match the primary button pattern */
		> input {
			background-color: var(--color-primary);
			border: none;
			border-radius: var(--button-border-radius);
			color: var(--color-white);
			font: var(--input-font);
			height: fit-content;
			padding: var(--space-xxsmall) var(--space-normal);
		}
	}
}

/*
 * WooCommerce injects "Show password" toggle buttons on login/register forms.
 * Hidden here as the design does not accommodate them.
 */
button.display-password,
button.show-password-input {
	display: none;
}