/*
 * The site's embedded forms: Gravity Forms and the two bundled ActiveCampaign
 * forms.
 *
 * One control vocabulary, two vendors. The values below are the ones the
 * checkout and account work already settled on in woocommerce.css — the same
 * base-raised fill, line border, chip radius, archivo label and success focus
 * ring — so a Gravity field and a checkout field are the same object. That
 * file keeps its own copy of the selectors because WooCommerce's markup is
 * nothing like these two, but if a value changes it changes in both.
 *
 * Gravity keeps its own stylesheet. This theme runs GF 2.6 in legacy markup
 * mode (ul.gform_fields > li.gfield), and GF's CSS carries the column grid,
 * conditional-logic visibility and validation plumbing — a 61-field form with
 * conditional sections depends on it. Only presentation is overridden here.
 * That is also why formreset.min.css leaves the fields looking like raw
 * browser defaults: it strips them, and nothing puts them back.
 *
 * The ActiveCampaign forms are the opposite case. Their markup is bundled on
 * disk at pickleball-core/assets/forms/, so their vendor <style> blocks were
 * removed outright rather than fought with !important the way subscribe.css
 * has to (that form is fetched from ActiveCampaign at runtime, so its CSS
 * cannot be removed). Every field name, id and the sms_consent compliance
 * checkbox are byte-identical to what the vendor shipped; only presentation
 * moved here. The state rules the vendor script depends on are ported below
 * under "ActiveCampaign: states".
 */

/* --- Measure ------------------------------------------------------------ */

/* A form is not prose and it is not a layout band. Left uncapped the fields
 * inherit whatever column they are dropped into — 1216px on the private tours
 * page — and an email field a metre wide is harder to fill in, not easier.
 * Narrower than the page measure, wide enough for the liability form's
 * four-across flight rows. */
.pickleball-form {
	max-width: 44rem;
}

/* --- The control -------------------------------------------------------- */

.pickleball-form :is(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="password"], input[type="date"], input[type="search"],
	select, textarea
) {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--karla);
	/* 16px floor: anything smaller and iOS zooms the page on focus. */
	font-size: max(16px, var(--wp--preset--font-size--base));
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	/* Not base-raised, which is the warm off-white the cards use. A field is a
	 * hole in the page, and on these warm grounds only true white reads as one.
	 * The one literal colour in this file; the palette has no pure white. */
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
}

.pickleball-form textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Native selects keep the OS arrow, which is the one control that never
 * matches anything. Drawn as a chevron so the row reads as one family. */
.pickleball-form select {
	appearance: none;
	padding-inline-end: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23324b4b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--20) center;
	background-size: 12px 8px;
}

/* Focus is not set here. motion.css already carries it site-wide — the same
 * success border and 18% ring — under a comment naming Gravity Forms and the
 * checkout, and it also keeps a :focus-visible outline for keyboard users.
 * Restating it here would have duplicated the ring and, because this file's
 * selector is weaker, quietly done nothing while looking like it worked. */

.pickleball-form ::placeholder {
	color: color-mix(in oklab, var(--wp--preset--color--contrast-muted) 70%, transparent);
	opacity: 1;
}

.pickleball-form :is(input, select, textarea):disabled {
	background-color: var(--wp--preset--color--base-sunken);
	color: var(--wp--preset--color--contrast-muted);
	cursor: not-allowed;
}

/* --- Choice controls ---------------------------------------------------- */

.pickleball-form :is(input[type="checkbox"], input[type="radio"]) {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
	flex: none;
}

/* --- The submit --------------------------------------------------------- */

/* theme.json's elements.button only reaches .wp-element-button, which neither
 * vendor emits, so the pill is restated rather than inherited.
 *
 * .gform_next_button is listed separately because Gravity Forms renders the
 * multi-page Continue control as input[type="button"] — it drives the page
 * change from its onclick rather than submitting — so the input[type="submit"]
 * selectors above look right and match nothing. Back and the final Submit ARE
 * type="submit" and are already covered. */
.pickleball-form :is(
	.gform_footer input[type="submit"], .gform_page_footer input[type="submit"],
	.gform_button, button._submit, input._submit,
	.gform_next_button
) {
	display: inline-block;
	width: auto;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease);
}

.pickleball-form :is(
	.gform_footer input[type="submit"], .gform_page_footer input[type="submit"],
	.gform_button, button._submit, input._submit,
	.gform_next_button
):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
}

/* =========================================================================
 * Gravity Forms
 *
 * This site runs two forms in two different markup modes, which is not a
 * mistake to be fixed here — switching a live 61-field form's markup mode is
 * a data-entry risk, not a styling decision.
 *
 *   GF#5, the private tour request, is LEGACY: .gform_legacy_markup_wrapper,
 *   ul.gform_fields > li.gfield, columns from gf_left_half ready classes laid
 *   out with inline-block percentages.
 *
 *   GF#7, the registration and liability form, is MODERN: .gravity-theme,
 *   div.gform_fields > div.gfield on a twelve-column grid, columns from
 *   gfield--width-third and friends.
 *
 * So: presentation is shared, layout is scoped. The modern grid is left alone
 * — it already does the right thing, and overriding it collapsed columns to
 * 0px — while the legacy float layout is replaced with a grid that honours the
 * same ready classes the form author set.
 * ====================================================================== */

/* --- Shared ------------------------------------------------------------- */

.pickleball-form .gform_wrapper {
	margin-block: 0;
}

.pickleball-form .gform_wrapper .gfield_label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form .gform_wrapper :is(.gfield_required, .gfield_required_asterisk) {
	color: var(--wp--preset--color--alert);
	text-decoration: none;
}

/* "*" indicates required fields — a legend, not a field. */
.pickleball-form .gform_wrapper :is(.gform_required_legend, .gfield_required_text) {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-form .gform_wrapper .gfield_description {
	padding-top: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

/* Sub-labels under a complex field: First / Last, MM / DD / YYYY. */
.pickleball-form .gform_wrapper :is(.ginput_complex, .ginput_container_date, .ginput_container_time) label {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

/* The control itself. Both modes wrap inputs in .ginput_container, and the
 * :not() keeps this off the choice controls — without it a checkbox inherits
 * width:100% and becomes a full-width box with its label on the next line. */
.pickleball-form .gform_wrapper .ginput_container :is(
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea
),
.pickleball-form .gform_wrapper .ginput_container :is( input.small, input.medium, input.large ),
.pickleball-form .gform_wrapper .ginput_container :is( select.small, select.medium, select.large ) {
	width: 100%;
}

.pickleball-form .gform_wrapper .gfield :is(.gfield_checkbox, .gfield_radio) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pickleball-form .gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 0.55rem;
	width: auto;
}

.pickleball-form .gform_wrapper .gchoice label {
	margin: 0;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form .gform_wrapper .gchoice :is(input[type="checkbox"], input[type="radio"]) {
	width: 1.15rem;
	min-width: 1.15rem;
	margin: 0.12rem 0 0;
}

/* --- Sections ----------------------------------------------------------- */

/* The liability form is 61 fields in six sections. Without a rule between them
 * it reads as one unbroken column of inputs. */
.pickleball-form .gform_wrapper .gsection {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.pickleball-form .gform_wrapper .gsection_title {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form .gform_wrapper .gsection .gsection_description {
	margin-top: 0.35rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-form .gform_wrapper :is(.gfield_html, .gfield--type-html) {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-form .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

/* --- Validation --------------------------------------------------------- */

.pickleball-form .gform_wrapper :is(.validation_error, .gform_validation_errors) {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--alert);
	background: var(--wp--preset--color--alert-bg);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--alert) 35%, transparent);
	border-radius: var(--wp--custom--radius--chip);
}

.pickleball-form .gform_wrapper .gfield_error :is(input, select, textarea) {
	border-color: var(--wp--preset--color--alert);
}

.pickleball-form .gform_wrapper .validation_message {
	margin-top: 0.4rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--alert);
	background: none;
	border: 0;
}

.pickleball-form .gform_wrapper .gform_footer {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.pickleball-form .gform_confirmation_message {
	padding: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--calm-bg);
	border-radius: var(--wp--custom--radius--card);
}

/* --- Legacy layout (GF#5) ----------------------------------------------- */

/* readyclass.min.css sets the ready classes at
 * `.gform_wrapper .top_label li.gfield.gf_left_half` — (0,4,1) — and the
 * option columns at `.gform_wrapper li.gfield[class*=col][class*=gf_list_]
 * ul.gfield_checkbox` — (0,5,2). The selectors below clear both. */

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	float: none;
	clear: none;
	margin: 0;
	padding-right: 0;
	min-width: 0;
	vertical-align: baseline;
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield.gf_left_half {
	grid-column: 1;
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield.gf_right_half {
	grid-column: 2;
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield :is( input.small, input.medium, input.large ),
.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield :is( select.small, select.medium, select.large ),
.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield textarea {
	width: 100%;
}

/* Gravity builds its option columns the float era's way: inline-block items at
 * width:50% inside a ul set to font-size:0 to kill the whitespace between
 * them. A grid does it without either trick. */
.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield ul:is(.gfield_checkbox, .gfield_radio) {
	display: grid;
	gap: 0.55rem;
	font-size: var(--wp--preset--font-size--base);
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield li.gchoice {
	display: flex;
	width: auto;
	margin-bottom: 0;
	padding-right: 0;
}

@media (min-width: 600px) {
	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield.gf_list_2col ul:is(.gfield_checkbox, .gfield_radio) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--20);
	}

	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield.gf_list_3col ul:is(.gfield_checkbox, .gfield_radio) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--20);
	}
}

/* Legacy widens these containers past their field — 720px inside 704px — to
 * make room for the per-item padding-right its columns rely on. The grid below
 * uses a gap instead, so the extra 16px is just overflow. */
.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield :is( .ginput_complex, ul.gfield_checkbox, ul.gfield_radio ) {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* The legacy name field: two halves Gravity spaces with padding-right and
 * pulls back with margin-right:-4px. Both are float-era hacks that push a grid
 * item past its own track, which overflowed the field by 3px. */
.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield .ginput_complex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--wp--preset--spacing--10);
	align-items: start;
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield .ginput_complex > span {
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
}

/* Legacy dates are three dropdowns in one container. */
.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield .ginput_container_date {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
}

.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield .ginput_container_date select {
	/* Three across a half-width column, so the chevron gets a narrower gutter
	 * than a full-width select — enough to clear "Month" without pushing the
	 * trio past their track. */
	width: auto;
	min-width: 6rem;
	padding-inline-end: 1.9rem;
	background-position: right 0.55rem center;
	flex: 0 1 auto;
}

@media (max-width: 640px) {
	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .gform_fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield:is(.gf_left_half, .gf_right_half) {
		grid-column: 1 / -1;
	}

	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield ul:is(.gfield_checkbox, .gfield_radio) {
		grid-template-columns: minmax(0, 1fr);
	}

	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield .ginput_complex {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Modern layout (GF#7) ----------------------------------------------- */

/* gravity-theme already lays fields on a twelve-column grid and reads
 * gfield--width-third and friends off each field. Only the gutters are set
 * here, in this theme's spacing rather than Gravity's own. */
.pickleball-form .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: var(--wp--preset--spacing--30);
	grid-column-gap: var(--wp--preset--spacing--20);
}

.pickleball-form .gform_wrapper.gravity-theme .gfield {
	min-width: 0;
}

/* Modern dates put each part in its own .ginput_container_date div, as
 * siblings inside .ginput_complex — so MM, DD and YYYY stack down the page
 * unless they are put back in a row. A date is one row, whatever the cell. */
.pickleball-form .gform_wrapper.gravity-theme .ginput_complex:has( .gfield_date_month ) {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	align-items: start;
}

.pickleball-form .gform_wrapper.gravity-theme :is( .gfield_date_month, .gfield_date_day, .gfield_date_year ) {
	display: block;
	width: auto;
	min-width: 0;
	flex: 1 1 0;
}

.pickleball-form .gform_wrapper.gravity-theme :is( .gfield_date_month, .gfield_date_day, .gfield_date_year ) input {
	width: 100%;
	min-width: 0;
	text-align: center;
}

/* The modern name field is two spans that should share the row. */
.pickleball-form .gform_wrapper.gravity-theme .ginput_complex:not(:has( .gfield_date_month )) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: var(--wp--preset--spacing--10);
	align-items: start;
}

.pickleball-form .gform_wrapper.gravity-theme .ginput_complex > span {
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 640px) {
	.pickleball-form .gform_wrapper.gravity-theme .gform_fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.pickleball-form .gform_wrapper.gravity-theme .gfield {
		grid-column: 1 / -1 !important;
	}
}

/* =========================================================================
 * ActiveCampaign (bundled markup, vendor CSS removed)
 * ====================================================================== */

.pickleball-form ._form {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--karla);
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

.pickleball-form ._form * {
	box-sizing: border-box;
}

/* The embed opens with its own H2; the page already carries one. */
.pickleball-form ._form-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form ._form-content {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

/* The vendor script measures and positions its error tooltips against these,
 * so the positioning context has to survive. */
.pickleball-form :is(._form_element, ._field-wrapper, .sms_consent_checkbox, ._button-wrapper, ._form-thank-you) {
	position: relative;
}

.pickleball-form ._form_element {
	margin: 0;
	width: 100%;
	clear: both;
}

.pickleball-form ._form-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form ._form .field-required {
	color: var(--wp--preset--color--alert);
}

/* ._row is the vendor's checkbox row: a label wrapping the box and its text. */
.pickleball-form ._form ._row._checkbox-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
	font-weight: 400;
}

.pickleball-form ._form ._row._checkbox-radio label {
	margin: 0;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.4;
}

.pickleball-form ._form ._row._checkbox-radio input[type="checkbox"] {
	width: 1.15rem;
	margin-top: 0.12rem;
}

/* The checkbox group is a real <fieldset>, so it arrives with the UA's inset
 * border. Its <legend> does the job of a field label. */
.pickleball-form ._form ._form-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pickleball-form ._form ._form-fieldset legend {
	display: block;
	float: none;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--10);
	padding: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form ._form ._html-code {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-form ._form ._button-wrapper {
	margin-top: var(--wp--preset--spacing--10);
}

.pickleball-form ._form ._clear-element {
	clear: both;
}

/* --- ActiveCampaign: states --------------------------------------------- */

/* Ported from the vendor stylesheet that was removed. The script creates and
 * measures these nodes itself, so their box model and positioning have to
 * behave the way it expects; only the colours and shapes are the theme's. */

.pickleball-form ._form ._error {
	display: block;
	position: absolute;
	z-index: 10;
	font-size: var(--wp--preset--font-size--sm);
}

.pickleball-form ._form ._error._above {
	padding-bottom: 4px;
	bottom: 39px;
	right: 0;
}

.pickleball-form ._form ._error._below {
	padding-top: 8px;
	top: 100%;
	right: 0;
}

.pickleball-form ._form ._error-inner {
	padding: 0.6rem 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--alert);
	background: var(--wp--preset--color--alert-bg);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--alert) 35%, transparent);
	border-radius: var(--wp--custom--radius--chip);
}

.pickleball-form ._form ._error-inner._form_error {
	position: static;
	margin-bottom: var(--wp--preset--spacing--20);
	text-align: left;
}

.pickleball-form ._form ._error-inner._no_arrow {
	margin-bottom: 10px;
}

.pickleball-form ._form ._error-arrow {
	position: absolute;
	width: 0;
	height: 0;
}

.pickleball-form ._form ._error._above ._error-arrow {
	bottom: -4px;
	right: 15px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--wp--preset--color--alert-bg);
}

.pickleball-form ._form ._error._below ._error-arrow {
	top: 0;
	right: 15px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid var(--wp--preset--color--alert-bg);
}

.pickleball-form ._form ._error-html {
	margin-bottom: 10px;
}

/* The SMS consent checkbox anchors its tooltip to the left, not the right —
 * the vendor special-cased it and the script still relies on it. */
.pickleball-form ._form .sms_consent_checkbox ._error._above {
	right: auto;
	bottom: 0;
}

.pickleball-form ._form .sms_consent_checkbox ._error._above ._error-arrow {
	right: auto;
	left: 5px;
}

.pickleball-form ._form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea)._has_error {
	border-color: var(--wp--preset--color--alert);
}

.pickleball-form ._form input[type="checkbox"]._has_error {
	outline: 1px solid var(--wp--preset--color--alert);
}

.pickleball-form ._form ._form-inner {
	display: block;
	min-width: 100%;
}

.pickleball-form ._form ._show_be_error {
	float: left;
}

.pickleball-form ._form ._form-thank-you {
	padding: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
	text-align: center;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--calm-bg);
	border-radius: var(--wp--custom--radius--card);
}

/* The button's in-flight state. The vendor drew a spinner with a conic
 * gradient over an opaque ::after; this is the same idea with the theme's
 * colours and no second layer. */
.pickleball-form ._form ._submit.processing {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.pickleball-form ._form ._submit.processing::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid color-mix(in oklab, var(--wp--preset--color--base) 45%, transparent);
	border-top-color: var(--wp--preset--color--base);
	border-radius: 50%;
	animation: pickleball-form-spin 700ms linear infinite;
}

@keyframes pickleball-form-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.pickleball-form ._form ._submit.processing::after {
		animation-duration: 2.4s;
	}
}

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 600px) {
	.pickleball-form .gform_wrapper .ginput_complex {
		grid-template-columns: minmax(0, 1fr);
	}

	.pickleball-form .gform_wrapper.gform_legacy_markup_wrapper .top_label li.gfield ul:is(.gfield_checkbox, .gfield_radio) {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* --- Multi-page: the step indicator -------------------------------------
 *
 * The registration form (GF#7) is seven steps. inc/forms.php drops the steps a
 * given traveller will not visit before this ever sees them, so what is styled
 * here is always a list someone is actually going to walk through.
 *
 * Built for readers of 50 and over: the label is not a tooltip or an
 * abbreviation, the current step is stated in words and in colour rather than
 * colour alone, and the whole bar stays legible at 200% zoom.
 * ------------------------------------------------------------------------- */

.pickleball-form .gf_page_steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pickleball-form .gf_step {
	display: flex;
	gap: 10px;
	align-items: center;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast-muted);
}

/* The number carries the state. A ring rather than a fill for the steps still
 * to come, so the one in hand is the only solid mark on the row. */
/* FIVE CLASSES, AND THE REASON IS NOT FUSSINESS. Gravity Forms' theme.css
 * ships `.gform_wrapper.gravity-theme .gf_step_number { display: table-cell }`
 * — three classes against the two this rule used to carry, so GF won the
 * `display` and the grid centring below never applied.
 *
 * The failure was invisible in the stylesheet: `place-items: center` sat right
 * there looking correct. What actually reached the browser was
 * `display: block`, because .gf_step is a flex container and a flex item's
 * display is blockified — table-cell becomes block — so the declaration that
 * lost was not even the one named in GF's rule. Measured before this fix: the
 * glyph sat 8px left and 2px above the centre of its circle.
 *
 * line-height is pinned to 1 for the same reason: GF's inherited 22.66px on a
 * 28px box pushes the digit off the vertical centre, and grid centring of a
 * single line box measures the LINE, not the glyph. */
.pickleball-form .gform_wrapper .gf_step .gf_step_number {
	display: grid;
	place-items: center;
	flex: none;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
}

.pickleball-form .gf_step_active {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* The state rules have to outrank the base rule above, which is itself five
 * classes deep to beat Gravity Forms. Raising the base and forgetting these
 * two is a silent regression: the circles stay perfectly centred and every
 * step looks pending, which is how it was caught here. */
.pickleball-form .gform_wrapper .gf_step.gf_step_active .gf_step_number {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Completed steps are marked by colour AND by weight, never colour alone. */
.pickleball-form .gf_step_completed {
	color: var(--wp--preset--color--success);
}

.pickleball-form .gform_wrapper .gf_step.gf_step_completed .gf_step_number {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--success);
	border-color: var(--wp--preset--color--success);
}

/* --- Multi-page: the page footer ----------------------------------------- */

.pickleball-form .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Three controls, three weights. Continue is the primary act and takes the
 * solid pill from "The submit" above. Back and Save are both ways out of the
 * step, so they share the outlined pill — the same secondary button the Google
 * sign-in control uses — and Save is muted further because it leaves the form
 * altogether.
 *
 * These two carry .gform_wrapper and .button in the selector for a reason.
 * Gravity Forms' theme.min.css ships
 * `.gform_wrapper.gravity-theme .gform_previous_button.button,
 *  .gform_wrapper.gravity-theme .gform_save_link.button` — four classes, which
 * beat a three-class selector here and left both buttons on GF's white ground
 * with its #6B7280 grey text while the radius and font came from this file.
 * Five classes settles it without reaching for !important. */

.pickleball-form .gform_wrapper .gform_page_footer :is( .gform_previous_button, .gform_save_link ).button {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease),
		border-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease);
}

/* Back sits before Continue however Gravity Forms ordered the markup. */
.pickleball-form .gform_wrapper .gform_page_footer .gform_previous_button.button {
	order: -1;
	color: var(--wp--preset--color--contrast);
}

.pickleball-form .gform_wrapper .gform_page_footer .gform_save_link.button {
	margin-inline-start: auto;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-form .gform_wrapper .gform_page_footer :is( .gform_previous_button, .gform_save_link ).button:is( :hover, :focus-visible ) {
	background-color: var(--wp--preset--color--base-sunken);
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 24%, transparent);
}

.pickleball-form .gform_wrapper .gform_page_footer .gform_save_link.button:is( :hover, :focus-visible ) {
	color: var(--wp--preset--color--contrast);
}

/* The save icon ships with fill="#6B7280" as a presentation attribute, which is
 * a grey belonging to no palette here. A CSS fill beats a presentation
 * attribute, so the icon simply follows the button's own colour. */
.pickleball-form .gform_wrapper .gform_page_footer .gform_save_link.button svg,
.pickleball-form .gform_wrapper .gform_page_footer .gform_save_link.button svg path {
	fill: currentColor;
}

@media (max-width: 599px) {
	/* Seven steps will not sit on one line on a phone, and a horizontally
	 * scrolling indicator hides the steps it scrolls away. Only the step in
	 * hand and its immediate neighbours are shown; the rest stay in the
	 * accessibility tree so the position is still announced in full. */
	.pickleball-form .gf_step {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pickleball-form .gf_step_active,
	.pickleball-form .gf_step_previous,
	.pickleball-form .gf_step_next {
		position: static;
		display: flex;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.pickleball-form .gform_page_footer {
		flex-direction: column;
		align-items: stretch;
	}

	.pickleball-form .gform_save_link {
		margin-inline-start: 0;
		text-align: center;
	}
}