/* ==========================================================================
   Gemial Digital v2 — the lead form component
   --------------------------------------------------------------------------
   LEAD-PAGES-BRIEF.md §3. One form design applied to three plugins, loaded
   only on tpl-lead.php pages. When the custom Gemial forms plugin outputs
   this component's markup natively, THIS FILE IS DELETED, so everything the
   page needs around the form lives in pages/lead.css instead.

   Specified by role; the plugin sections below only map each plugin's
   markup onto the roles. Measured on Local at 2.22.0 against
   dist/lead-review/markup/ (Forminator 1.56.2, Formidable 6.33.1, Fluent
   Booking 2.2.0), not against the capture.

   SPECIFICITY, NOT ORDER. Every rule is scoped under .lead-panel, so it
   outranks the plugin rule it replaces wherever LiteSpeed's CSS Combine
   lands this file. CLAUDE.md §7.2: :where() carries no specificity, so the
   scope here is a real class, deliberately.

   !IMPORTANT. None, except against a plugin rule that itself uses
   !important, and each one says which. dist/lead-review/important.json lists
   every plugin !important that matches inside the panel. The Formidable and
   intlTelInput ones are worked round rather than fought (see the Formidable
   choice rows and section 11). ONE is beaten, commented where it is: Fluent
   Booking's country-picker background, in section 13.

   Role tokens only: --field-border and --error-ink are the two added for
   this component, in tokens.css with their measurements. Contrast pairs,
   both modes, are in dist/lead-review/contrast.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Panel
   -------------------------------------------------------------------------- */

.lead-panel {
	background: var(--raised);
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	padding: 32px;
	color: var(--text);
}

@media (max-width: 599px) {
	.lead-panel {
		padding: 20px;
	}
}

.lead-panel .lead-panel__h {
	margin: 0 0 1.5rem;
}

.lead-panel .lead-noform {
	color: var(--text);
}

/* --------------------------------------------------------------------------
   2. Steps: "Step 2 of 5: Scope", then a thin line that fills. Printed by
   lead-forms.js from the plugin's own step labels; not clickable.
   -------------------------------------------------------------------------- */

.lead-panel .lead-steps {
	margin: 0 0 1.75rem;
}

.lead-panel .lead-steps__t {
	margin: 0 0 .6rem;
	font-size: 14px;
	color: var(--text-mid);
}

.lead-panel .lead-steps__t strong {
	color: var(--text-hi);
	font-weight: 600;
}

.lead-panel .lead-steps__bar {
	height: 3px;
	background: var(--hairline-hi);
	border-radius: 3px;
	overflow: hidden;
}

/* A 3px rail: a stroke, so --accent-ink, never --lime (CLAUDE.md §5). */
.lead-panel .lead-steps__fill {
	display: block;
	height: 100%;
	background: var(--accent-ink);
	transform-origin: left center;
	transform: scaleX(var(--lead-step-p, 0));
	transition: transform var(--dur) var(--ease);
}

/* --------------------------------------------------------------------------
   3. Error summary. On a failed submit or Next: every error as a link to
   its field; focus moves here (lead-forms.js).
   -------------------------------------------------------------------------- */

.lead-panel .lead-errors {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--ground);
	border: 1px solid var(--error-ink);
	border-inline-start-width: 4px;
	border-radius: var(--r-sm);
}

.lead-panel .lead-errors__h {
	margin: 0 0 .5rem;
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--text-hi);
}

.lead-panel .lead-errors ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.lead-panel .lead-errors li + li {
	margin-block-start: .25rem;
}

.lead-panel .lead-errors a {
	color: var(--error-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. Success: replaces the form in the same panel and stays.
   -------------------------------------------------------------------------- */

.lead-panel.is-received .lead-form,
.lead-panel.is-received .lead-panel__h,
.lead-panel.is-received .lead-steps,
.lead-panel.is-received .lead-errors {
	display: none;
}

.lead-panel .lead-received__h {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
}

.lead-panel .lead-received__h:focus {
	outline: none;
}

.lead-panel .lead-received p {
	margin: 0 0 .6rem;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
}

.lead-panel .lead-received__more {
	margin-block-start: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--hairline);
	color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   5. Shared field roles, both form plugins
   --------------------------------------------------------------------------
   Label above, always visible, 15px body colour. Help text between label and
   field, 14px --text-mid. Fields 48px, 16px text (iOS does not zoom), a
   --ground fill one step below the --raised panel, --field-border edge.
   -------------------------------------------------------------------------- */

.lead-panel .forminator-label,
.lead-panel .lead-form .with_frm_style .frm_primary_label,
.lead-panel .lead-form .with_frm_style .frm_combo_inputs_container .frm_description {
	display: block;
	margin: 0 0 .4rem;
	padding: 0;
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text);
}

/* "(required)" in words, replacing the plugins' red asterisk. */
.lead-panel .forminator-required,
.lead-panel .lead-form .with_frm_style .frm_required {
	font-weight: 400;
	color: var(--text-mid);
}

.lead-panel .forminator-description,
.lead-panel .lead-form .with_frm_style .frm_description {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-mid);
}

.lead-panel .forminator-input,
.lead-panel .forminator-textarea,
.lead-panel .lead-form .with_frm_style input[type="text"],
.lead-panel .lead-form .with_frm_style input[type="email"],
.lead-panel .lead-form .with_frm_style input[type="tel"],
.lead-panel .lead-form .with_frm_style input[type="url"],
.lead-panel .lead-form .with_frm_style input[type="number"],
.lead-panel .lead-form .with_frm_style select,
.lead-panel .lead-form .with_frm_style textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-hi);
	background: var(--ground);
	border: 1px solid var(--field-border);
	border-radius: var(--r-sm);
	box-shadow: none;
}

/* Four rows minimum: 4 x 24px line + 22px padding + 2px border. A page can
   ask for more through its data (`message_rows` in inc/lead-data.php, which
   tpl-lead.php prints as --lead-textarea-rows on the panel): Contact asks
   for 5, CONTACT-PAGE-BRIEF.md §3. Every other form keeps the default. */
.lead-panel .forminator-textarea,
.lead-panel .lead-form .with_frm_style textarea {
	min-height: calc(var(--lead-textarea-rows, 4) * 1.5em + 24px);
	resize: vertical;
}

.lead-panel .lead-form .with_frm_style select {
	appearance: none;
	padding-inline-end: 40px;
	/* A chevron from two gradients, so it takes a token colour (a data: SVG
	   cannot read a custom property). */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text-mid) 50%),
		linear-gradient(135deg, var(--text-mid) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) 50%,
		calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.lead-panel ::placeholder {
	color: var(--text-low);
	opacity: 1;
}

/*
 * Focus: 2px --accent-ink ring, 2px off the edge. Never removed.
 *
 * THE PLUGIN-SCOPED SELECTORS ARE NOT DECORATION. The keyboard run
 * (dist/lead-review/keyboard.md) found no ring on the Formidable fields, the
 * Formidable submit and the booking details inputs. Formidable's focus loss
 * came from the field rule above, which used to reset outline at four classes
 * and so outranked a two-class focus rule; Fluent Booking's from its own
 * .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item
 * .fcal_input_content input:focus { outline: none } (injected). Each plugin's
 * focus rule is outranked here by specificity, not !important.
 */
.lead-panel input:focus-visible,
.lead-panel select:focus-visible,
.lead-panel textarea:focus-visible,
.lead-panel button:focus-visible,
.lead-panel a:focus-visible,
.lead-panel [tabindex]:focus-visible,
.lead-panel .lead-form .with_frm_style input:focus-visible,
.lead-panel .lead-form .with_frm_style select:focus-visible,
.lead-panel .lead-form .with_frm_style textarea:focus-visible,
.lead-panel .lead-form .with_frm_style button:focus-visible,
.lead-panel .fcal_cal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item input:focus-visible,
.lead-panel .fcal_cal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item textarea:focus-visible,
.lead-panel .fcal_cal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content input:focus-visible,
.lead-panel .fcal_cal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Checkbox and radio rows: a 20px box drawn on the row, the whole row
   clickable, 44px minimum. The native input stays in place, transparent,
   so it keeps its own keyboard and screen-reader behaviour.
   -------------------------------------------------------------------------- */

.lead-panel .forminator-radio,
.lead-panel .forminator-checkbox,
.lead-panel .lead-form .with_frm_style .frm_radio label,
.lead-panel .lead-form .with_frm_style .frm_checkbox label {
	/* BLOCK, not flex: a flex row turns every text node and link into its own
	   column, which split the consent sentence round its Privacy Policy link.
	   22px lines + 11px padding = the 44px minimum on one line. */
	position: relative;
	display: block;
	min-height: 44px;
	margin: 0;
	padding: 11px 0 11px 32px;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 22px;
	color: var(--text);
	cursor: pointer;
}

.lead-panel .forminator-radio input,
.lead-panel .forminator-checkbox input,
.lead-panel .lead-form .with_frm_style .frm_radio input,
.lead-panel .lead-form .with_frm_style .frm_checkbox input {
	position: absolute;
	inset-inline-start: 0;
	top: 12px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/*
 * The box. Forminator prints a span for it; Formidable prints only the input
 * and a text node, so there the box is the label's ::before.
 *
 * FORMIDABLE'S WIDTH/HEIGHT: 16px !important on the input
 * (.with_frm_style .frm_radio input[type="radio"], formidableforms.css) is
 * NOT fought: the input is transparent and the 20px box is drawn beside it,
 * so no !important is needed here.
 */
.lead-panel .forminator-radio-bullet,
.lead-panel .forminator-checkbox-box,
.lead-panel .lead-form .with_frm_style .frm_radio label::before,
.lead-panel .lead-form .with_frm_style .frm_checkbox label::before {
	content: "";
	position: absolute;
	/* On the first line, so a wrapped label keeps its box by its first words. */
	inset-inline-start: 0;
	top: 12px;
	width: 20px;
	height: 20px;
	margin: 0;
	box-sizing: border-box;
	background: var(--ground);
	border: 1px solid var(--field-border);
	border-radius: var(--r-sm);
	pointer-events: none;
}

.lead-panel .forminator-radio-bullet,
.lead-panel .lead-form .with_frm_style .frm_radio label::before {
	border-radius: 50%;
}

/* Checked: the mark is --accent-ink on the --ground fill, and the box edge
   takes it too. Lime is never a small mark (CLAUDE.md §5). */
.lead-panel .forminator-radio input:checked + .forminator-radio-bullet,
.lead-panel .forminator-checkbox input:checked + .forminator-checkbox-box,
.lead-panel .lead-form .with_frm_style .frm_radio label:has(input:checked)::before,
.lead-panel .lead-form .with_frm_style .frm_checkbox label:has(input:checked)::before {
	border-color: var(--accent-ink);
}

.lead-panel .forminator-radio input:checked + .forminator-radio-bullet {
	background: radial-gradient(circle, var(--accent-ink) 0 4.5px, var(--ground) 5px);
}

.lead-panel .lead-form .with_frm_style .frm_radio label:has(input:checked)::before {
	background: radial-gradient(circle, var(--accent-ink) 0 4.5px, var(--ground) 5px);
}

/* The tick: two borders of a rotated box. */
.lead-panel .forminator-checkbox input:checked + .forminator-checkbox-box::after,
.lead-panel .lead-form .with_frm_style .frm_checkbox label:has(input:checked)::after {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	top: 15px;
	width: 6px;
	height: 11px;
	margin-top: 0;
	border: solid var(--accent-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	pointer-events: none;
}

.lead-panel .forminator-checkbox input:checked + .forminator-checkbox-box::after {
	inset-inline-start: 6px;
	top: 1px;
	margin-top: 0;
}

/* Keyboard focus lands on the transparent input; the ring goes on the box. */
.lead-panel .forminator-radio input:focus-visible + .forminator-radio-bullet,
.lead-panel .forminator-checkbox input:focus-visible + .forminator-checkbox-box,
.lead-panel .lead-form .with_frm_style .frm_radio label:has(input:focus-visible)::before,
.lead-panel .lead-form .with_frm_style .frm_checkbox label:has(input:focus-visible)::before {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}

.lead-panel .forminator-radio-label,
.lead-panel .forminator-checkbox-label,
.lead-panel .forminator-checkbox__label {
	color: var(--text);
}

.lead-panel .forminator-consent__label a,
.lead-panel .lead-form .with_frm_style .frm_checkbox a {
	color: var(--accent-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* --------------------------------------------------------------------------
   7. Choice cards: sub-services and add-ons. Checkboxes as cards, two
   columns, one below 600. Title plus one line (the line is added by
   lead-forms.js from services-data.php). Checked: --accent-ink border.
   -------------------------------------------------------------------------- */

.lead-panel .forminator-field-checkbox .forminator-field {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.lead-panel .forminator-field-checkbox .forminator-field > :not(label) {
	grid-column: 1 / -1;
}

@media (max-width: 599px) {
	.lead-panel .forminator-field-checkbox .forminator-field {
		grid-template-columns: 1fr;
	}
}

.lead-panel .forminator-field-checkbox .forminator-checkbox {
	height: 100%;
	line-height: 1.4;
	padding: 14px 16px 14px 48px;
	background: var(--ground);
	border: 1px solid var(--field-border);
	border-radius: var(--r-md);
}

.lead-panel .forminator-field-checkbox .forminator-checkbox .forminator-checkbox-box,
.lead-panel .forminator-field-checkbox .forminator-checkbox input {
	inset-inline-start: 16px;
	top: 16px;
	margin: 0;
}

.lead-panel .forminator-field-checkbox .forminator-checkbox:has(input:checked) {
	border-color: var(--accent-ink);
	box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.lead-panel .forminator-field-checkbox .forminator-checkbox-label {
	font-weight: 600;
	color: var(--text-hi);
}

.lead-panel .lead-choice__line {
	display: block;
	margin-top: .3rem;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   8. Errors. Message under the field in --error-ink, starting "Error:" for
   screen readers (lead-forms.js adds it); the field edge takes the error
   colour at 2px. The second pixel is an inset shadow so nothing shifts.
   -------------------------------------------------------------------------- */

.lead-panel .forminator-error-message,
.lead-panel .lead-form .with_frm_style .frm_error {
	display: block;
	margin: .4rem 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--error-ink);
	background: none;
	border: 0;
}

.lead-panel .forminator-error-message::before {
	content: none;
}

.lead-panel .forminator-has_error .forminator-input,
.lead-panel .forminator-has_error .forminator-textarea,
.lead-panel .lead-form .with_frm_style .frm_blank_field input,
.lead-panel .lead-form .with_frm_style .frm_blank_field select,
.lead-panel .lead-form .with_frm_style .frm_blank_field textarea {
	border-color: var(--error-ink);
	box-shadow: inset 0 0 0 1px var(--error-ink);
}

.lead-panel .forminator-has_error .forminator-radio-bullet,
.lead-panel .forminator-has_error .forminator-checkbox-box,
.lead-panel .lead-form .with_frm_style .frm_blank_field .frm_radio label::before,
.lead-panel .lead-form .with_frm_style .frm_blank_field .frm_checkbox label::before {
	border-color: var(--error-ink);
	border-width: 2px;
}

/* The plugins' own form-level messages, when they print one. */
.lead-panel .forminator-response-message:not(:empty),
.lead-panel .lead-form .with_frm_style .frm_error_style {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	font-size: 15px;
	color: var(--text);
	background: var(--ground);
	border: 1px solid var(--error-ink);
	border-inline-start-width: 4px;
	border-radius: var(--r-sm);
}

.lead-panel .forminator-response-message.forminator-success:not(:empty),
.lead-panel .lead-form .with_frm_style .frm_message {
	border-color: var(--accent-ink);
	color: var(--text);
	background: var(--ground);
	padding: 1rem 1.25rem;
	border-radius: var(--r-sm);
}

.lead-panel .forminator-response-message p,
.lead-panel .lead-form .with_frm_style .frm_message p {
	margin: 0;
	color: inherit;
}

/*
 * FORMINATOR'S SCREEN-READER LIST STAYS FOR SCREEN READERS. On a failed submit
 * its validator writes every error into the response box and marks it
 * .forminator-accessible, which its own forminator-base sheet hides visually.
 * That sheet does not load with the form design "none", so the list showed,
 * under the panel's summary (lead-forms.js) listing the same errors. Measured
 * 2.23.0: Contact, the first single-step form, printed both; the paginated
 * quote forms leave the list empty. This restores the plugin's own rule.
 * Server replies are unaffected: front.submit.js removes the class before
 * every request, so an "Invalid nonce" or spam message still shows. After the
 * :not(:empty) rule above, which it overrides at equal specificity.
 */
.lead-panel .forminator-response-message.forminator-accessible {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   9. Buttons. v2 primary for Next and Submit, ghost for Back. Back left,
   primary right, and the primary keeps its place when Forminator removes
   Next from the DOM on the last step (margin-inline-start: auto, not
   space-between, so it does not depend on how many siblings it has).
   Full width below 600, primary first.
   -------------------------------------------------------------------------- */

.lead-panel .forminator-pagination-footer,
.lead-panel .lead-form .with_frm_style .frm_submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 2rem 0 0;
	padding: 0;
}

.lead-panel .forminator-button,
.lead-panel .lead-form .with_frm_style .frm_submit button,
.lead-panel .lead-form .with_frm_style .frm_button_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 0 1.75rem;
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--r-sm);
	cursor: pointer;
	box-shadow: none;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* Primary: a lime FILL, button-sized, with --on-accent ink (CLAUDE.md §5). */
.lead-panel .forminator-button-next,
.lead-panel .forminator-button-submit,
.lead-panel .forminator-pagination-submit,
.lead-panel .lead-form .with_frm_style .frm_button_submit {
	margin-inline-start: auto;
	color: var(--on-accent);
	background: var(--lime);
	border: 1px solid var(--lime);
}

.lead-panel .forminator-button-next:hover,
.lead-panel .forminator-button-submit:hover,
.lead-panel .forminator-pagination-submit:hover,
.lead-panel .lead-form .with_frm_style .frm_button_submit:hover {
	background: var(--lime-bright);
	border-color: var(--lime-bright);
	color: var(--on-accent);
}

.lead-panel .lead-form .with_frm_style .frm_button_submit {
	margin-inline-start: 0;
}

/* --field-border, not --border-int: the ghost edge sits on the --raised panel,
   where dark --border-int measures 2.88:1 (contrast.md). */
.lead-panel .forminator-button-back {
	color: var(--text-hi);
	background: transparent;
	border: 1px solid var(--field-border);
}

.lead-panel .forminator-button-back:hover {
	color: var(--accent-ink);
	border-color: var(--accent-ink);
}

.lead-panel .forminator-button:disabled,
.lead-panel .lead-form .with_frm_style .frm_button_submit:disabled {
	opacity: .6;
	cursor: progress;
}

@media (max-width: 599px) {
	.lead-panel .forminator-pagination-footer,
	.lead-panel .lead-form .with_frm_style .frm_submit {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.lead-panel .forminator-button,
	.lead-panel .lead-form .with_frm_style .frm_button_submit {
		width: 100%;
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   10. Forminator: layout
   -------------------------------------------------------------------------- */

.lead-panel .forminator-ui.forminator-custom-form {
	margin: 0;
	font-family: var(--f-body);
}

.lead-panel .forminator-row {
	display: flex;
	flex-wrap: wrap;
	/* The row gap separates two fields of a pair once they stack below 600px;
	   without it an error line ran straight into the next field's label. */
	gap: 1.25rem 20px;
	margin: 0 0 1.25rem;
}

.lead-panel .forminator-row.forminator-hidden {
	margin: 0;
}

.lead-panel .forminator-col {
	flex: 1 1 100%;
	min-width: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.lead-panel .forminator-col-6,
	.lead-panel .forminator-col-md-6 {
		flex: 1 1 calc(50% - 10px);
	}
}

.lead-panel .forminator-row.forminator-no-margin {
	margin: 0;
	gap: 1.25rem 20px;
}

/* A column, so the error message can be ordered under the field: Forminator
   inserts it wherever it likes (measured: above the help text on the phone
   field), and the brief puts it under the field. */
.lead-panel .forminator-field {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 0;
}

.lead-panel .forminator-field .forminator-error-message {
	order: 10;
}

/*
 * On a field WITH help text, Forminator puts the error message inside the help
 * text's wrapper div (measured on the phone and website fields at 2.22.0), so
 * ordering the field's children cannot reach it. display: contents lifts the
 * wrapper's children into the field's column, where the order above applies.
 */
.lead-panel .forminator-field > div:has(> .forminator-description) {
	display: contents;
}

/* The radio group label is a span; it gets the label's spacing. */
.lead-panel .forminator-field[role="radiogroup"] > .forminator-label,
.lead-panel .forminator-field[role="group"] > .forminator-label {
	margin-block-end: .25rem;
}

/* --------------------------------------------------------------------------
   11. Forminator: the phone field (intlTelInput). Its stylesheet stays on:
   without it the country list renders 7,200px tall (brief §3). Only colour
   and height are set here. Its !important rules (margin: 0 on the input,
   display: flex on each country) are compatible and are not fought.
   -------------------------------------------------------------------------- */

.lead-panel .iti {
	display: block;
	width: 100%;
}

.lead-panel .iti .iti__tel-input {
	padding-inline-start: 96px;
}

.lead-panel .iti__selected-country {
	color: var(--text-hi);
	background: transparent;
	border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.lead-panel .iti__selected-country:hover,
.lead-panel .iti__selected-country[aria-expanded="true"] {
	background: var(--raised-2);
}

.lead-panel .iti__selected-dial-code {
	color: var(--text-hi);
}

.lead-panel .iti__arrow {
	border-top-color: var(--text-mid);
}

.lead-panel .iti__dropdown-content {
	color: var(--text);
	background: var(--raised-2);
	border: 1px solid var(--field-border);
	border-radius: var(--r-sm);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .5);
}

.lead-panel .iti__search-input {
	min-height: 44px;
	padding: 8px 12px;
	font-size: 16px;
	color: var(--text-hi);
	background: var(--ground);
	border: 0;
	border-block-end: 1px solid var(--field-border);
}

.lead-panel .iti__country {
	color: var(--text);
}

.lead-panel .iti__country.iti__highlight {
	color: var(--text-hi);
	background: var(--raised);
}

.lead-panel .iti__dial-code {
	color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   12. Formidable. Its CSS variables first (brief §3), set from inside the
   panel so they outrank .frm_style_formidable-style.with_frm_style.
   -------------------------------------------------------------------------- */

.lead-panel .lead-form .frm_forms.with_frm_style {
	--form-width: 100%;
	--font-size: 15px;
	--base-font-size: 16px;
	--label-color: var(--text);
	--text-color: var(--text-hi);
	--description-color: var(--text-mid);
	--required-color: var(--text-mid);
	--bg-color: var(--ground);
	--bg-color-active: var(--ground);
	--border-color: var(--field-border);
	--border-color-active: var(--accent-ink);
	--border-color-error: var(--error-ink);
	--text-color-error: var(--error-ink);
	--bg-color-error: var(--ground);
	--border-radius: var(--r-sm);
	--field-font-size: 16px;
	--field-height: 48px;
	--field-margin: 1.25rem;
	--check-label-color: var(--text);
	--check-font-size: 16px;
	--submit-bg-color: var(--lime);
	--submit-border-color: var(--lime);
	--submit-text-color: var(--on-accent);
	--submit-hover-bg-color: var(--lime-bright);
	--submit-hover-border-color: var(--lime-bright);
	--submit-hover-color: var(--on-accent);
	--submit-active-bg-color: var(--lime-bright);
	--submit-active-color: var(--on-accent);
	--error-text: var(--error-ink);
	--success-bg-color: var(--ground);
	--success-border-color: var(--accent-ink);
	--success-text-color: var(--text);
	--box-shadow: none;
	margin: 0;
	font-family: var(--f-body);
	color: var(--text);
}

.lead-panel .lead-form .with_frm_style fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.lead-panel .lead-form .with_frm_style .frm_form_field {
	margin-block-end: 1.25rem;
}

/* The name field's visible sub-labels are Formidable "descriptions" printed
   AFTER each input; its real labels are screen-reader only. Brought above
   the input by order, so the label sits above the field (brief §3).
   Formidable's own 12-column grid places the two halves (frm6 each); a
   template or gap set here breaks that, which the first version did. */
@media (max-width: 599px) {
	.lead-panel .lead-form .with_frm_style .frm_combo_inputs_container > .frm_form_field {
		grid-column: span 12;
	}
}

.lead-panel .lead-form .with_frm_style .frm_combo_inputs_container > .frm_form_field {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.lead-panel .lead-form .with_frm_style .frm_combo_inputs_container .frm_description {
	order: -1;
}

.lead-panel .lead-form .with_frm_style .frm_opt_container {
	display: block;
}

/* --------------------------------------------------------------------------
   13. Fluent Booking (call). Through its variables, set from inside the
   panel so they outrank :root and .fcal-dark-mode (both 0,1,0). Mapped to
   role tokens, so the widget follows the PAGE'S mode, not its own setting.
   -------------------------------------------------------------------------- */

.lead-panel .fcal_cal_wrap {
	--fcal_dark: var(--text-hi);
	--fcal_primaryColor: var(--text-hi);
	--fcal_gray: var(--text-mid);
	--fcal_cal_bg: var(--raised);
	--fcal_body_bg: var(--raised);
	--fcal_slot_border: var(--field-border);
	--fcal_primary_color: var(--accent-ink);
	--fcal_whiteColor: var(--ground);
	--fcal_date_disabled_bg: transparent;
	--fcal_date_disabled_color: var(--text-low);
	--fcal_enable_day_bg: var(--raised-2);
	--fcal_thBG: var(--raised-2);
	--fcal_input_bg: var(--ground);
	--fcal_input_disable_bg: var(--raised-2);
	--fcal_scroll_bar_bg: var(--field-border);
	--fcal_skeleton_bg: linear-gradient(90deg, var(--raised) 25%, var(--raised-2) 37%, var(--raised) 63%);
	--date-picker-selected-background: var(--lime);
	--date-picker-selected-color: var(--on-accent);
	--date-picker-highlight-border: var(--accent-ink);

	/*
	 * The phone field's country picker is svelte-select. Its background rule
	 * is !important (.svelte-select, injected) but reads these variables, so
	 * setting them here needs no !important. Measured before: after a failed
	 * submit it painted #5E6A64 behind a grey "Country" placeholder.
	 */
	--background: var(--ground);
	--disabled-background: var(--raised-2);
	--error-background: var(--ground);
	--border: 1px solid var(--field-border);
	--border-hover: 1px solid var(--accent-ink);
	--border-focused: 1px solid var(--accent-ink);
	--error-border: 2px solid var(--error-ink);
	--list-background: var(--raised-2);
	--item-color: var(--text);
	--item-hover-bg: var(--raised);
	--item-hover-color: var(--text-hi);
	--item-is-active-bg: var(--raised);
	--item-is-active-color: var(--text-hi);
	--placeholder-color: var(--text-mid);
	--input-color: var(--text-hi);
	--selected-item-color: var(--text-hi);
	color: var(--text);
	font-family: var(--f-body);
}

/*
 * !IMPORTANT, AND THE ONLY ONE IN THIS FILE. It beats Fluent Booking's
 *     .fcal_phone_wrapper .fcal_country_select { background: var(--fcal_slot_border) !important }
 * (injected), which fills the country picker with the BORDER colour. Mapped to
 * --field-border that put the "Country" placeholder at about 2:1 in both modes
 * (measured, dist/lead-review/dbg-country.mjs). One step up from the field fill
 * instead: --text-mid on --raised-2 is 5.87:1 light and above 6:1 dark.
 */
.lead-panel .fcal_cal_wrap .fcal_phone_wrapper .fcal_country_select {
	background: var(--raised-2) !important;
}

/* The confirmation's detail values inherit a fixed #666 from the widget:
   3.29:1 on the dark panel (dist/lead-review/dbg-confirm.mjs). */
.lead-panel .fcal_cal_wrap .fcal_confirm_section_content {
	color: var(--text-mid);
}

/*
 * "Add to calendar" (2.22.1, Fluent Booking 2.5.0). Four icon-only links, each
 * an <img> of an SVG drawn in fill="currentColor". Inside an <img> that colour
 * cannot inherit, so every icon renders BLACK: 1.11:1 on the dark panel, which
 * is why they read as invisible on production. Fluent inverts them only under
 * its own .fcal-dark-mode, which this panel does not use (it follows the page
 * mode through the variables above).
 *
 * So the link takes the v2 primary button's fill (.gd-btn--lime) and the icon
 * stays black on it, with no filter: icon on --lime 15.94:1, on --lime-bright
 * (hover) 17.80:1. The fill on the panel: 14.34:1 dark; 1.14:1 light, as for
 * every lime button in light mode (VISUAL-SYSTEM.md's lime rule), where the
 * icon identifies the control. Focus ring --accent-ink: 14.34:1 dark, 5.29:1
 * light. 44px square, the brief's minimum row height. Measured on Local with
 * 2.5.0 (dist/lead-review/atc-probe.mjs).
 *
 * Beats .fcal_to_calendars .fcal_cal_items a (0,2,1, injected) by scope, not
 * !important. filter: none undoes Fluent's invert(1) should its dark-mode
 * class ever appear, which would put a white icon on lime.
 */
/* Fluent's row and its icon group are unwrapping flex rows (.fcal_to_calendars,
   .fcal_to_calendars .fcal_cal_items). At 34px icons they fit at 390; at 44px
   the label and four buttons are wider than the confirmation box, which then
   widened and clipped its own content (measured, 390 dark). Both wrap, so the
   buttons drop under the label when the row is short of room. */
.lead-panel .fcal_cal_wrap .fcal_to_calendars,
.lead-panel .fcal_cal_wrap .fcal_to_calendars .fcal_cal_items {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 12px;
}

.lead-panel .fcal_cal_wrap .fcal_to_calendars .fcal_cal_items a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 12px;
	background: var(--lime);
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	transition: background-color .15s ease;
}

.lead-panel .fcal_cal_wrap .fcal_to_calendars .fcal_cal_items a:hover {
	background: var(--lime-bright);
}

.lead-panel .fcal_cal_wrap .fcal_to_calendars .fcal_cal_items a:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}

.lead-panel .fcal_cal_wrap .fcal_to_calendars .fcal_cal_items a img {
	filter: none;
}

/* Fluent's form-level notice ("Please fill up the required data") is a fixed
   light-blue block (#DBEAFE, text #1E3A8A) in both modes, which broke the
   page's dark mode. It takes the error summary's look instead. */
.lead-panel .fcal_cal_wrap .fcal_errors {
	color: var(--text);
	background: var(--ground);
	border: 1px solid var(--error-ink);
	border-inline-start-width: 4px;
	border-radius: var(--r-sm);
}

.lead-panel .fcal_cal_wrap .fcal_errors * {
	color: inherit;
}

/* Fluent's validation text is a fixed #B91C1C: 2.7:1 on the dark panel. */
.lead-panel .fcal_cal_wrap .fcal_validation_error,
.lead-panel .fcal_cal_wrap .fcal_validation_error p {
	color: var(--error-ink);
}

/* Loading: the line shows in the frame until a day is clickable. */
.lead-panel .lead-loading {
	margin: 0 0 1rem;
	font-size: 14px;
	color: var(--text-mid);
}

.lead-panel:has(.fcal_cal_wrap .day-enabled) .lead-loading,
.lead-panel:has(.fcal_cal_wrap .fcal_booking_form) .lead-loading,
.lead-panel.is-booked .lead-loading {
	display: none;
}

.lead-panel--fluent-booking .lead-form {
	min-height: 420px;
}

/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lead-panel .lead-steps__fill,
	.lead-panel .forminator-button,
	.lead-panel .lead-form .with_frm_style .frm_button_submit {
		transition: none;
	}
}

/* The booking phone field's country picker (svelte-select): its inner input
   has no room for a ring, so the ring goes on the picker itself. Measured by
   keyboard.mjs as the one booking stop without a visible indicator. */
.lead-panel .fcal_cal_wrap .svelte-select:focus-within {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}