/**
 * Real Estate Forms Pro — form layout only. Field-level styling (inputs,
 * buttons, alerts, badges) comes entirely from Real Estate Pro Core's
 * tokens.css/components.css, enqueued as a hard dependency (see
 * src/Plugin.php::register_assets()) — nothing here duplicates a shared
 * primitive, closing the duplication docs/DATA-PRO-AUDIT.md found across
 * Data Pro's own per-shortcode stylesheets.
 *
 * .rep-form is boxed the same way Core's own shared .rep-card is — a form
 * has no nested tiles/cards the way a Market Data report or the mortgage
 * calculator's results panel do, so there's no separate outer-shell-vs-
 * inner-card distinction to make here: the form itself reads --rep-card-
 * bg/--rep-card-fg directly (via the --rep-forms-* aliases below, kept
 * for the same reasons Data Pro/Tools Pro alias theirs — one obvious
 * place per plugin to see every token this component's box depends on).
 * Renders as one elevated card, identically to a Snapshot or Market Data
 * report under the same Design settings, instead of floating unstyled in
 * the surrounding page content.
 */

.rep-form {
	--rep-forms-text: var(--rep-card-fg, #1d2327);
	--rep-forms-surface: var(--rep-card-bg, #ffffff);
	--rep-forms-radius: var(--rep-radius-md, 10px);
	--rep-forms-border: var(--rep-border, rgba(0, 0, 0, 0.1));
	--rep-forms-shadow: var(--rep-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05));
	/* Template-driven card spacing (Customize → Card spacing / a preset
	   template's own density) — same clamp() Data Pro's --rep-data-
	   content-pad uses. */
	--rep-forms-content-pad: clamp(16px, 4vw, var(--rep-card-padding, 32px));

	font-family: var(--rep-font);
	color: var(--rep-forms-text);
	line-height: var(--rep-leading-normal);
	background: var(--rep-forms-surface);
	border: 1px solid var(--rep-forms-border);
	border-radius: var(--rep-forms-radius);
	box-shadow: var(--rep-forms-shadow);
	padding: var(--rep-forms-content-pad);
	position: relative;
	box-sizing: border-box;
}

.rep-form *,
.rep-form *::before,
.rep-form *::after {
	box-sizing: inherit;
}

/*
 * Reassert Core's shared control identity at higher specificity than the
 * base `.rep-input`/`.rep-select`/`.rep-textarea`/`.rep-btn`/`.rep-checkbox`/
 * `.rep-radio` rules in components.css (each a single class selector).
 * Every product plugin's own screens live inside wp-admin, insulated from
 * arbitrary site CSS, but a form embeds directly into a visitor-facing
 * page — the one place in the suite a theme's own generic `input`/
 * `textarea`/`select`/`button`/`input[type=…]` reset can carry equal or
 * greater specificity, and per standard WordPress enqueue order a theme's
 * stylesheet prints after a plugin's, so an equal-specificity collision
 * is won by the theme, not us. These selectors compound an element type
 * with the existing class (`input.rep-input`, not just `.rep-input`) to
 * outrank that class of theme rule outright rather than depend on load
 * order, without changing a single token value — same tokens, same
 * fallbacks, just guaranteed to actually reach the page under any theme,
 * per the "no hard dependency… sensible default styling under any
 * WordPress theme" contract (docs/ARCHITECTURE.md §9). The Boxed/
 * Underline-only field-style overrides below are bumped to match so they
 * still win over this block, exactly as before.
 */
.rep-form input.rep-input,
.rep-form select.rep-select,
.rep-form textarea.rep-textarea {
	background: var(--rep-surface);
	border: 1px solid var(--rep-border);
	border-radius: calc(var(--rep-radius-md) - 4px);
	color: var(--rep-text);
}

.rep-form input.rep-input:focus-visible,
.rep-form select.rep-select:focus-visible,
.rep-form textarea.rep-textarea:focus-visible {
	background: var(--rep-surface);
	border-color: var(--rep-primary);
	color: var(--rep-text);
	outline: 2px solid var(--rep-primary);
	outline-offset: 1px;
}

.rep-form input.rep-input.has-error,
.rep-form select.rep-select.has-error,
.rep-form textarea.rep-textarea.has-error {
	border-color: var(--rep-danger);
}

.rep-form input.rep-checkbox,
.rep-form input.rep-radio {
	accent-color: var(--rep-primary);
	width: 1.1em;
	height: 1.1em;
}

.rep-form button.rep-btn {
	background: var(--rep-surface);
	border: 1px solid var(--rep-border);
	color: var(--rep-text);
}

.rep-form button.rep-btn.rep-btn--primary {
	background: var(--rep-primary);
	border-color: var(--rep-primary);
	color: var(--rep-on-primary);
	box-shadow: var(--rep-shadow-sm);
}

.rep-form button.rep-btn.rep-btn--primary:hover {
	background: var(--rep-primary-dark);
	border-color: var(--rep-primary-dark);
	color: var(--rep-on-primary);
}

.rep-form button.rep-btn.rep-btn--outline {
	background: transparent;
	border-color: var(--rep-primary);
	color: var(--rep-primary);
}

.rep-form button.rep-btn.rep-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--rep-primary);
}

/*
 * Alignment (an --align shortcode attribute — see Shortcode\FormShortcode
 * — or the Elementor/WPBakery "Alignment" control). Unset by default: see
 * Tools Pro's own tools.css for the identical rationale (same convention,
 * same 720px default, same "align=full" being an explicit no-op).
 */
.rep-form--align-left,
.rep-form--align-right,
.rep-form--align-center {
	max-width: var(--rep-forms-max-width, 720px);
}

.rep-form--align-left {
	margin-right: auto;
}

.rep-form--align-right {
	margin-left: auto;
}

.rep-form--align-center {
	margin-left: auto;
	margin-right: auto;
}

.rep-form--align-full {
	max-width: none;
}

.rep-form__title {
	margin: 0 0 var(--rep-space-md);
}

.rep-form__grid {
	display: grid;
	gap: var(--rep-space-md);
	margin-bottom: var(--rep-space-lg);
}

.rep-form__field label {
	display: block;
	margin-bottom: var(--rep-space-xs);
	font-weight: var(--rep-weight-semibold);
	font-size: var(--rep-text-sm);
}

.rep-form__choice {
	display: flex;
	align-items: center;
	gap: var(--rep-space-xs);
	font-weight: var(--rep-weight-normal);
	margin-bottom: var(--rep-space-xs);
}

/*
 * A single "I agree…" consent checkbox (Forms\Form::field_types()' 'consent'
 * type) — fine-print sizing since it's usually a paragraph of compliance
 * language, not a short choice label; the checkbox stays aligned to the
 * first line of text rather than vertically centered against the whole
 * paragraph.
 */
.rep-form__consent {
	align-items: flex-start;
	font-size: var(--rep-text-xs);
	color: var(--rep-muted);
	line-height: 1.4;
}

.rep-form__consent .rep-checkbox {
	flex: none;
	margin-top: 0.2em;
}

.rep-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Prev/Next/Submit share one min-width so the nav bar doesn't visibly
 * resize as a visitor steps through a multi-step form (a short "Back"/
 * "Next" next to a longer custom Submit label previously read as three
 * differently-sized buttons since only .rep-form__submit set a floor).
 */
.rep-form__prev,
.rep-form__next,
.rep-form__submit {
	min-width: 160px;
}

/*
 * Entrance animation — duration comes from the selected Design Template's
 * own motion axis (--rep-transition-slow, resolved by Templates::
 * animation_durations()), so "None"/"Subtle"/"Smooth"/"Lively" all reach
 * this the same way they reach every other timed transition in the
 * suite; "None" resolves to a ~0ms duration, which is an instant, fully
 * legitimate way to render this rather than a special case to code
 * around. Respects prefers-reduced-motion regardless of the template.
 */
@media (prefers-reduced-motion: no-preference) {
	.rep-form {
		animation: rep-form-in var(--rep-transition-slow, 400ms) ease-out;
	}

	.rep-alert {
		animation: rep-form-in var(--rep-transition-normal, 200ms) ease-out;
	}
}

@keyframes rep-form-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Field style — "Boxed" and "Underline only" (Design → Form Fields).
 *
 * Core's shared .rep-input/.rep-textarea/.rep-select already draws a
 * border and applies corner rounding on its own, but its background is
 * --rep-surface — the exact same token .rep-form's own card background
 * resolves to (both ultimately --rep-card-bg/--rep-surface, typically
 * white-on-white) — and --rep-border is a deliberately faint divider
 * color (10% black), fine for a subtle line between sections but too
 * faint to read as a field's own boundary once its fill matches the
 * card behind it. The result: a "Boxed" field and an "Underline only"
 * one look almost identical, differing only by that faint border's
 * shape, which is what this fixes. --rep-surface-alt is a genuine
 * second Core surface token (not a hardcoded color) meant for exactly
 * this — a tile or field that needs to read as distinct from the card
 * it sits on — so this still follows whichever Design Template or
 * Design Override is active, the same way every other axis here does.
 */
.rep-form--fields-box input.rep-input,
.rep-form--fields-box select.rep-select,
.rep-form--fields-box textarea.rep-textarea {
	background: var(--rep-surface-alt, #f4f5f7);
	border-color: var(--rep-forms-border);
	border-radius: var(--rep-forms-radius);
}

.rep-form--fields-box input.rep-input:focus-visible,
.rep-form--fields-box select.rep-select:focus-visible,
.rep-form--fields-box textarea.rep-textarea:focus-visible {
	background: var(--rep-forms-surface);
	border-color: var(--rep-primary-solid, var(--rep-primary));
}

.rep-form--fields-line input.rep-input,
.rep-form--fields-line textarea.rep-textarea,
.rep-form--fields-line select.rep-select {
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--rep-border);
	border-radius: 0;
	padding-left: 2px;
	padding-right: 2px;
}

.rep-form--fields-line input.rep-input:focus-visible,
.rep-form--fields-line textarea.rep-textarea:focus-visible,
.rep-form--fields-line select.rep-select:focus-visible {
	outline: none;
	border-bottom-color: var(--rep-primary-solid, var(--rep-primary));
	box-shadow: none;
}

.rep-form--fields-line input.rep-input.has-error,
.rep-form--fields-line textarea.rep-textarea.has-error,
.rep-form--fields-line select.rep-select.has-error {
	border-bottom-color: var(--rep-danger);
}

/*
 * Multi-step forms — progress indicator, one panel per step, and Next/
 * Back/Submit nav. Rendered fully expanded with no `hidden` steps (see
 * public/views/form.php) so a no-JS visitor gets one long scroll through
 * every step with a working Submit button; public/js/forms.js's
 * initStepForm() is what hides all but the current step and turns this
 * into an actual paginated wizard, so everything step-panel-specific below
 * only ever matters once that JS has run.
 */
.rep-form__progress {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rep-space-sm) var(--rep-space-md);
	list-style: none;
	margin: 0 0 var(--rep-space-lg);
	padding: 0;
}

.rep-form__progress-step {
	display: flex;
	align-items: center;
	gap: var(--rep-space-xs);
	color: var(--rep-muted);
	font-size: var(--rep-text-sm);
	transition: color var(--rep-transition-fast);
}

.rep-form__progress-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: var(--rep-surface-alt, rgba(0, 0, 0, 0.05));
	color: inherit;
	font-weight: var(--rep-weight-semibold);
	transition: background-color var(--rep-transition-fast), color var(--rep-transition-fast);
}

.rep-form__progress-step--active {
	color: var(--rep-forms-text);
	font-weight: var(--rep-weight-semibold);
}

.rep-form__progress-step--active .rep-form__progress-number {
	background: var(--rep-primary);
	color: var(--rep-primary-contrast, #fff);
}

.rep-form__progress-step--done .rep-form__progress-number {
	background: var(--rep-primary-wash);
	color: var(--rep-primary);
}

.rep-form--multistep .rep-form__step {
	transition: opacity var(--rep-form-step-duration, 400ms) var(--rep-form-step-easing, ease),
		transform var(--rep-form-step-duration, 400ms) var(--rep-form-step-easing, ease);
	opacity: 1;
	transform: none;
}

/* The step being animated OUT is taken out of document flow for the
   duration of the transition (public/js/forms.js's animateTo() keeps both
   the outgoing and incoming panels un-hidden simultaneously for that
   window) so the page's height tracks only the incoming step, not both
   stacked at once — without this, every step change visibly jumped/
   bounced by the difference between the two steps' heights, worst on the
   Guided layout where a hero-image step and a plain step differ a lot. */
.rep-form--multistep .rep-form__form {
	position: relative;
}

.rep-form--multistep .rep-form__step--exit-forward,
.rep-form--multistep .rep-form__step--exit-backward {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* The closing "Thank You" panel (public/views/form.php / forms.js's
   showThankYouPanel()) reuses the Guided layout's own
   .rep-form__step-title/-description/-content classes so a Guided form
   gets that layout's own styling automatically (see
   forms-steps-guided.css) — these are the plain-layout fallback so it
   still reads correctly on a Classic multi-step form, which has no other
   rules for those class names. */
.rep-form__step--done .rep-form__step-title {
	margin: 0 0 var(--rep-space-sm);
	color: var(--rep-forms-text);
}

.rep-form__step--done .rep-form__step-description {
	color: var(--rep-muted);
}

.rep-form__step-info {
	margin-bottom: var(--rep-space-lg);
}

.rep-form__step-heading {
	margin: 0 0 var(--rep-space-sm);
}

.rep-form__step-body {
	color: var(--rep-forms-text);
}

.rep-form__step-media {
	margin: var(--rep-space-md) 0;
	border-radius: var(--rep-forms-radius);
	overflow: hidden;
}

.rep-form__step-media img,
.rep-form__step-media video {
	display: block;
	width: 100%;
	height: auto;
}

.rep-form__step-media--video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.rep-form__step-media--video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rep-form__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--rep-space-sm);
}

.rep-form__nav .rep-form__next,
.rep-form__nav .rep-form__submit {
	margin-left: auto;
}

/* Transition start/end states — direction-aware for "slide", direction-
   agnostic for "fade"/"zoom". "none" intentionally has no rules here:
   public/js/forms.js skips the animated path for it and swaps `hidden`
   instantly. */
.rep-form--transition-slide .rep-form__step--enter-forward,
.rep-form--transition-slide .rep-form__step--exit-backward {
	opacity: 0;
	transform: translateX(24px);
}

.rep-form--transition-slide .rep-form__step--enter-backward,
.rep-form--transition-slide .rep-form__step--exit-forward {
	opacity: 0;
	transform: translateX(-24px);
}

.rep-form--transition-fade .rep-form__step--enter-forward,
.rep-form--transition-fade .rep-form__step--enter-backward,
.rep-form--transition-fade .rep-form__step--exit-forward,
.rep-form--transition-fade .rep-form__step--exit-backward {
	opacity: 0;
}

.rep-form--transition-zoom .rep-form__step--enter-forward,
.rep-form--transition-zoom .rep-form__step--enter-backward {
	opacity: 0;
	transform: scale(0.94);
}

.rep-form--transition-zoom .rep-form__step--exit-forward,
.rep-form--transition-zoom .rep-form__step--exit-backward {
	opacity: 0;
	transform: scale(1.04);
}