/*
 * Page Editor FORM block (fleet-page-editor#29).
 *
 * Colours come ONLY from the tenant's --fleet-* variables, each with a fallback.
 * Tenant themes (hello-elementor on Parlay) paint bare button/input states and
 * load after us, and the theme armour is NOT present on ordinary tenant pages —
 * so every state (resting, hover, focus, active, disabled) is declared here,
 * scoped under .ff-form at a specificity that beats `button:hover` /
 * `[type=button]:hover` / `input[type=text]:focus` (0-2-0 or more).
 */

.ff-form-wrap {
	--ff-form-accent: var(--fleet-primary-color, #e0a241);
	--ff-form-on-accent: var(--fleet-button-text-color, #000000);
	--ff-form-bg: var(--fleet-card-background, #202020);
	--ff-form-field-bg: var(--fleet-background-dark, #0e0e0e);
	--ff-form-text: var(--fleet-card-text, #ffffff);
	--ff-form-muted: var(--fleet-text-light, #bcbcbc);
	--ff-form-border: var(--fleet-border-color, rgba(224, 162, 65, 0.35));
	/* --fleet-color-delete is a dark BACKGROUND tint on tenants (Parlay: #3b0000),
	   so text uses the -text variant and borders the -stroke variant. Using the
	   tint as a text colour made errors unreadable on a dark theme (#29 visual). */
	--ff-form-error: var(--fleet-color-delete-text, #ff6b6b);
	--ff-form-error-border: var(--fleet-color-delete-stroke, #d63638);
	--ff-form-error-bg: var(--fleet-color-delete, transparent);
	--ff-form-success: var(--fleet-success-color, #46b450);
	--ff-form-radius: var(--fleet-input-border-radius, 8px);
	box-sizing: border-box;
	max-width: 720px;
	color: var(--ff-form-text);
}

.ff-form-wrap *,
.ff-form-wrap *::before,
.ff-form-wrap *::after {
	box-sizing: border-box;
}

.ff-form-wrap .ff-form {
	display: grid;
	gap: 16px;
	margin: 0;
}

/* ── field widths (#40) ──────────────────────────────────────────────────
   Only a form with a field narrower than the row gets .ff-form--widths, so a
   form without widths keeps its grid untouched. It becomes a wrapping row: every
   child is a full row except a sized field, whose basis subtracts its share of
   the gaps, so any set of widths summing to 100 fills the row exactly.
   --ff-form-col-gap / --ff-form-row-gap set the gaps (default: the grid's 16px).
   Below 768px every field is full width, as Elementor's are. */
.ff-form-wrap .ff-form.ff-form--widths {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff-form-row-gap, 16px) var(--ff-form-col-gap, 16px);
}

.ff-form-wrap .ff-form.ff-form--widths > *,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > * {
	flex: 0 0 100%;
	min-width: 0;
}

.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w80,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w80 { flex-basis: calc(80% - var(--ff-form-col-gap, 16px) * 0.2); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w75,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w75 { flex-basis: calc(75% - var(--ff-form-col-gap, 16px) * 0.25); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w66,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w66 { flex-basis: calc(66.6667% - var(--ff-form-col-gap, 16px) * 0.3333); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w60,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w60 { flex-basis: calc(60% - var(--ff-form-col-gap, 16px) * 0.4); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w50,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w50 { flex-basis: calc(50% - var(--ff-form-col-gap, 16px) * 0.5); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w40,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w40 { flex-basis: calc(40% - var(--ff-form-col-gap, 16px) * 0.6); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w33,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w33 { flex-basis: calc(33.3333% - var(--ff-form-col-gap, 16px) * 0.6667); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w25,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w25 { flex-basis: calc(25% - var(--ff-form-col-gap, 16px) * 0.75); }
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-field--w20,
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > .ff-form-field--w20 { flex-basis: calc(20% - var(--ff-form-col-gap, 16px) * 0.8); }

@media (max-width: 767px) {
	.ff-form-wrap .ff-form.ff-form--widths > [class*="ff-form-field--w"],
.ff-form-wrap .ff-form.ff-form--widths > .ff-form-cond > [class*="ff-form-field--w"] {
		flex-basis: 100%;
	}
}

.ff-form-wrap .ff-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.ff-form-wrap .ff-form-field > label {
	line-height: 1.35;
	font-weight: 600;
	font-size: 0.95em;
	color: var(--ff-form-text);
	margin: 0;
}

.ff-form-wrap .ff-form-req {
	color: var(--ff-form-accent);
	margin-left: 2px;
}

/* ── text-like fields: every state declared ─────────────────────────────── */
.ff-form-wrap .ff-form input[type="text"],
.ff-form-wrap .ff-form input[type="email"],
.ff-form-wrap .ff-form input[type="tel"],
.ff-form-wrap .ff-form input[type="date"],
.ff-form-wrap .ff-form input[type="time"],
.ff-form-wrap .ff-form textarea,
.ff-form-wrap .ff-form select {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 10px 12px;
	font: inherit;
	line-height: 1.4;
	color: var(--ff-form-text);
	background: var(--ff-form-field-bg);
	border: 1px solid var(--ff-form-border);
	border-radius: var(--ff-form-radius);
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ff-form-wrap .ff-form input[type="text"]:hover,
.ff-form-wrap .ff-form input[type="email"]:hover,
.ff-form-wrap .ff-form input[type="tel"]:hover,
.ff-form-wrap .ff-form input[type="date"]:hover,
.ff-form-wrap .ff-form input[type="time"]:hover,
.ff-form-wrap .ff-form textarea:hover,
.ff-form-wrap .ff-form select:hover {
	color: var(--ff-form-text);
	background: var(--ff-form-field-bg);
	border-color: var(--ff-form-accent);
}

.ff-form-wrap .ff-form input[type="text"]:focus,
.ff-form-wrap .ff-form input[type="email"]:focus,
.ff-form-wrap .ff-form input[type="tel"]:focus,
.ff-form-wrap .ff-form input[type="date"]:focus,
.ff-form-wrap .ff-form input[type="time"]:focus,
.ff-form-wrap .ff-form textarea:focus,
.ff-form-wrap .ff-form select:focus {
	color: var(--ff-form-text);
	background: var(--ff-form-field-bg);
	border-color: var(--ff-form-accent);
	box-shadow: 0 0 0 2px var(--ff-form-accent);
	outline: none;
}

.ff-form-wrap .ff-form select option {
	color: var(--ff-form-text);
	background: var(--ff-form-field-bg);
}

.ff-form-wrap .ff-form input::placeholder,
.ff-form-wrap .ff-form textarea::placeholder {
	color: var(--ff-form-muted);
	opacity: 1;
}

.ff-form-wrap .ff-form textarea {
	min-height: 120px;
	resize: vertical;
}

/* ── a form whose handler addon is off: a calm note, not a broken form ──── */
.ff-form-wrap .ff-form-unavailable {
	padding: 16px 20px;
	border: 1px solid var(--ff-form-border);
	border-radius: var(--ff-form-radius);
	color: var(--ff-form-text);
}

.ff-form-wrap .ff-form-unavailable small {
	color: var(--ff-form-muted);
}

/* ── show_if wrapper: invisible to the layout, so the field inside keeps its
   width in the grid / width row. `hidden` must still win, hence :not(). ──── */
.ff-form-wrap .ff-form-cond:not([hidden]) {
	display: contents;
}

.ff-form-wrap .ff-form-cond[hidden] {
	display: none;
}

/* ── choice: radio options as buttons, every state declared ─────────────── */
.ff-form-wrap fieldset.ff-form-field--choice {
	min-width: 0;
	padding: 0;
	border: 0;
}

.ff-form-wrap fieldset.ff-form-field--choice > legend {
	margin: 0 0 6px;
	padding: 0;
	line-height: 1.35;
	font-weight: 600;
	font-size: 0.95em;
	color: var(--ff-form-text);
}

.ff-form-wrap .ff-form-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ff-form-wrap .ff-form-choice__opt,
.ff-form-wrap .ff-form-choice__opt:hover {
	display: flex;
	flex: 1 1 200px;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--ff-form-border);
	border-radius: var(--ff-form-radius);
	background: var(--ff-form-field-bg);
	color: var(--ff-form-text);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.ff-form-wrap .ff-form-choice__opt:hover {
	border-color: var(--ff-form-accent);
}

.ff-form-wrap .ff-form-choice__opt:has(input:checked) {
	border-color: var(--ff-form-accent);
	box-shadow: inset 0 0 0 1px var(--ff-form-accent);
}

.ff-form-wrap .ff-form-choice__opt input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ff-form-accent);
}

.ff-form-wrap .ff-form-choice__opt input[type="radio"]:focus-visible {
	outline: 2px solid var(--ff-form-accent);
	outline-offset: 2px;
}

.ff-form-wrap .ff-form-field--choice.has-error .ff-form-choice__opt {
	border-color: var(--ff-form-error-border);
}

/* ── acceptance checkbox ─────────────────────────────────────────────────── */
.ff-form-wrap .ff-form-field--acceptance {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.ff-form-wrap .ff-form-field--acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--ff-form-accent);
}

.ff-form-wrap .ff-form-field--acceptance input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ff-form-accent);
	outline-offset: 2px;
}

.ff-form-wrap .ff-form-field--acceptance > label {
	flex: 1 1 0;
	font-weight: 400;
	line-height: 1.45;
}

.ff-form-wrap .ff-form-field--acceptance .ff-form-error {
	flex-basis: 100%;
}

/* ── errors / status ─────────────────────────────────────────────────────── */
.ff-form-wrap .ff-form .ff-form-field.has-error input,
.ff-form-wrap .ff-form .ff-form-field.has-error textarea,
.ff-form-wrap .ff-form .ff-form-field.has-error select,
.ff-form-wrap .ff-form .ff-form-field.has-error input:hover,
.ff-form-wrap .ff-form .ff-form-field.has-error textarea:hover,
.ff-form-wrap .ff-form .ff-form-field.has-error select:hover {
	border-color: var(--ff-form-error-border);
}

/* An invalid field keeps its error colour while focused (JS focuses it). */
.ff-form-wrap .ff-form .ff-form-field.has-error input:focus,
.ff-form-wrap .ff-form .ff-form-field.has-error textarea:focus,
.ff-form-wrap .ff-form .ff-form-field.has-error select:focus {
	border-color: var(--ff-form-error-border);
	box-shadow: 0 0 0 2px var(--ff-form-error-border);
}

.ff-form-wrap .ff-form-field--acceptance.has-error input[type="checkbox"] {
	outline: 2px solid var(--ff-form-error-border);
	outline-offset: 2px;
}

.ff-form-wrap .ff-form-error {
	margin: 0;
	font-size: 0.875em;
	color: var(--ff-form-error);
}

.ff-form-wrap .ff-form-error[hidden] {
	display: none;
}

/* Sale-status note under a vehicle select (#42) — the look of fleet-form's
   [vehicle_sale_status]: italic, medium weight, the tenant accent. */
.ff-form-wrap .ff-form-sale-note {
	margin: 0;
	font-size: 0.9375em;
	font-style: italic;
	font-weight: 500;
	color: var(--ff-form-accent);
}

.ff-form-wrap .ff-form-sale-note[hidden] {
	display: none;
}

.ff-form-wrap .ff-form-status:empty {
	display: none;
}

.ff-form-wrap .ff-form-status {
	padding: 10px 14px;
	border-radius: var(--ff-form-radius);
	border: 1px solid var(--ff-form-border);
}

.ff-form-wrap .ff-form-status.is-error {
	border-color: var(--ff-form-error-border);
	background: var(--ff-form-error-bg);
	color: var(--ff-form-error);
	font-weight: 600;
}

.ff-form-wrap .ff-form-success {
	padding: 16px 18px;
	border-radius: var(--ff-form-radius);
	border: 1px solid var(--ff-form-success);
	color: var(--ff-form-text);
	background: var(--ff-form-bg);
}

.ff-form-wrap .ff-form-success p {
	margin: 0;
}

.ff-form-wrap .ff-form-notice {
	padding: 10px 14px;
	border: 1px dashed var(--ff-form-border);
	color: var(--ff-form-muted);
}

/* ── honeypot: off-screen, not display:none ──────────────────────────────── */
.ff-form-wrap .ff-form-hp {
	position: absolute !important; /* must never be shown, even by a theme reset */
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── submit button: every state declared ─────────────────────────────────── */
.ff-form-wrap .ff-form .ff-form-submit,
.ff-form-wrap .ff-form button.ff-form-submit[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 24px;
	margin: 0;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ff-form-on-accent);
	background: var(--ff-form-accent);
	border: 1px solid var(--ff-form-accent);
	border-radius: var(--ff-form-radius);
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.ff-form-wrap .ff-form .ff-form-submit:hover,
.ff-form-wrap .ff-form button.ff-form-submit[type="submit"]:hover {
	color: var(--ff-form-on-accent);
	background: var(--ff-form-accent);
	border-color: var(--ff-form-accent);
	filter: brightness(1.08);
}

.ff-form-wrap .ff-form .ff-form-submit:focus,
.ff-form-wrap .ff-form button.ff-form-submit[type="submit"]:focus,
.ff-form-wrap .ff-form .ff-form-submit:focus-visible,
.ff-form-wrap .ff-form button.ff-form-submit[type="submit"]:focus-visible {
	color: var(--ff-form-on-accent);
	background: var(--ff-form-accent);
	border-color: var(--ff-form-accent);
	outline: 2px solid var(--ff-form-text);
	outline-offset: 2px;
}

.ff-form-wrap .ff-form .ff-form-submit:active,
.ff-form-wrap .ff-form button.ff-form-submit[type="submit"]:active {
	color: var(--ff-form-on-accent);
	background: var(--ff-form-accent);
	filter: brightness(0.95);
}

.ff-form-wrap .ff-form .ff-form-submit[disabled],
.ff-form-wrap .ff-form button.ff-form-submit[type="submit"][disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ff-form-wrap .ff-form-html > :first-child {
	margin-top: 0;
}

.ff-form-wrap .ff-form-html > :last-child {
	margin-bottom: 0;
}