/**
 * Motoplan Scratch & Dent — Wizard Styles
 *
 * Flat-panel layout: the wizard inherits the Elementor white panel.
 *
 * The wizard renders as a transparent flex column inside the Elementor
 * Contact Us panel — no background, shadow, or border-radius of its own:
 *   • A pinned header containing the step title, count, and progress bar.
 *   • A scrollable content area that grows to fill the available height.
 *   • A pinned footer containing the Previous / Next navigation.
 *
 * JavaScript controls section visibility via msd-wizard-section--hidden.
 * Typography, fonts, and colours are inherited from the Motoplan theme.
 * No font-family declarations are made here.
 */

/* -------------------------------------------------------
 * CSS custom properties — Motoplan brand palette.
 * ------------------------------------------------------- */

:root {
	--msd-primary:         #e8500a;
	--msd-primary-dark:    #c94200;
	--msd-border:          #e2e2e2;
	--msd-progress-track:  #e5e5e5;
	--msd-progress-fill:   var(--msd-primary);
	--msd-meta-colour:     #888;
	--msd-success:         #2f6f3e;
	--msd-success-dark:    #255a31;
	--msd-error:           #b42318;
	--msd-error-dark:      #8a1c14;
	--msd-info:            #0d4f8b;
	--msd-info-dark:       #0a3f6f;
	--msd-header-padding:  0.75rem 0 0.625rem;
	--msd-content-padding: 1.25rem 0 0;
	--msd-footer-padding:  0.625rem 0;

	/*
	 * Wizard panel height — the single source of truth.
	 *
	 * clamp() gives a responsive fixed height:
	 *   min  520 px — prevents the panel collapsing too small on short viewports
	 *   pref calc(100vh − 200px) — respects the Elementor frame + page chrome
	 *   max  800 px — prevents an excessively tall panel on large monitors
	 *
	 * Override --msd-wizard-height in a child theme or Elementor custom CSS
	 * if a specific pixel value is preferred for a given deployment.
	 */
	--msd-wizard-height: clamp( 520px, calc( 100vh - 200px ), 800px );
}

/* -------------------------------------------------------
 * Wizard shell — transparent flex column.
 *
 * The Elementor panel provides background, shadow, and radius.
 * The wizard only provides layout structure.
 * max-height constrains the panel so the content area scrolls
 * independently of the page.
 * ------------------------------------------------------- */

.msd-wizard {
	display: flex;
	flex-direction: column;
	width: 100%;
	/*
	 * Fixed height — the wizard occupies a constant amount of vertical space
	 * regardless of which step is active. Short steps do not collapse the
	 * panel; long steps scroll inside .msd-wizard__form-wrap instead of
	 * pushing the page down.
	 */
	height: var( --msd-wizard-height );
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* Clip any child that overflows the fixed bounds. */
	overflow: hidden;
}

/* -------------------------------------------------------
 * Header — pinned; contains progress bar + step metadata.
 * ------------------------------------------------------- */

/* Header — flex column enables CSS order to reorder children. */
.msd-wizard__header {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	padding: var(--msd-header-padding);
	border-bottom: 1px solid var(--msd-border);
}

/*
 * Visual order inside the header:
 *   1. Step title   (section name, e.g. "Contact Details")
 *   2. Step count   ("STEP X OF Y")
 *   3. Progress bar
 *
 * DOM order from PHP: progress → step-count; JS appends step-title.
 * CSS flex order overrides the visual stacking without touching markup.
 */

/* Step title — order 1 (top). Injected by JavaScript. */
.msd-wizard__step-title {
	order: 1;
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	margin: 0 0 0.125rem;
}

/* "STEP N OF Y" label — order 2. */
.msd-wizard__step-count {
	order: 2;
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--msd-meta-colour);
	margin-bottom: 0.5rem;
}

/* Progress track — order 3 (bottom of header). */
.msd-wizard__progress {
	order: 3;
	background: var(--msd-progress-track);
	border-radius: 3px;
	height: 4px;
	margin: 0;
	overflow: hidden;
}

/* Progress fill — width driven by JavaScript. */
.msd-wizard__progress-bar {
	background: var(--msd-progress-fill);
	height: 100%;
	transition: width 0.3s ease;
	width: 0%;
}

/* -------------------------------------------------------
 * Content area — scrollable; grows to fill available height.
 * ------------------------------------------------------- */

.msd-wizard__form-wrap {
	/*
	 * flex: 1 1 0  (not 1 1 auto) — starts from a zero basis so the
	 * item grows only to fill the space left by the pinned header and
	 * footer. With basis:auto the item would try to size to its content
	 * first, which can push it past the parent's fixed height.
	 */
	flex: 1 1 0;
	min-height: 0; /* required: flex items default to min-height:auto which
	                  prevents shrinking below content size in some browsers */
	overflow-y: auto;
	padding: var(--msd-content-padding);
	/* Thin, subtle scrollbar on WebKit browsers. */
	scrollbar-width: thin;
	scrollbar-color: var(--msd-border) transparent;
}

/*
 * Visually hide field-group labels for simple text-entry controls.
 *
 * display:none would sever the <label for="…"> / id association that
 * screen readers use to announce the field name. The clip / position
 * technique below removes the label from the visual layout while keeping
 * it in the accessibility tree, so every input still has a programmatic
 * label for assistive technology.
 */
.msd-wizard .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/*
 * Restore fully visible labels for grouped controls where the label
 * provides essential context for the user:
 *   - radio groups (select-one options)
 *   - checkbox groups (multi-select options)
 *   - single accept / consent checkboxes (Terms & Conditions, POPI, etc.)
 *
 * :has() is universally supported in modern browsers (2023+).
 */
.msd-wizard .ff-el-group:has( [type="radio"] ) .ff-el-input--label,
.msd-wizard .ff-el-group:has( [type="checkbox"] ) .ff-el-input--label {
	position: static;
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0 0 0.375rem;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border: 0;
	font-weight: 600;
}

/*
 * Individual option labels inside radio / checkbox lists must always be
 * visible — they are the option text, not group titles. Override any
 * visually-hidden styles inherited from the rule above.
 */
.msd-wizard .ff-radio-list label,
.msd-wizard .ff-checkbox-list label,
.msd-wizard .ff-el-form-check label {
	position: static !important;
	display: inline-flex !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}

/* Remove the extra top margin Fluent Forms adds when a label is present. */
.msd-wizard .ff-el-group .ff-el-input--content {
	margin-top: 0;
}

.msd-wizard__form-wrap::-webkit-scrollbar {
	width: 4px;
}

.msd-wizard__form-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.msd-wizard__form-wrap::-webkit-scrollbar-thumb {
	background: var(--msd-border);
	border-radius: 4px;
}

/* Fluent Form fills the full content width; no top margin. */
.msd-wizard .frm-fluent-form {
	width: 100%;
	margin-top: 0;
}

/* Fieldset reset — browsers add default padding/border. */
.msd-wizard fieldset {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

/* Suppress all horizontal rules inside the wizard. */
.msd-wizard hr {
	display: none;
}

/*
 * Fluent Forms section-break elements are hidden from view, but remain in
 * the DOM so JavaScript can still detect section boundaries and read each
 * step title for the pinned wizard header.
 */
.msd-wizard .ff-el-section-break {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	display: none !important;
}

.msd-wizard .ff-section-break-title,
.msd-wizard .ff-section-break-description {
	display: none;
}

/* Reduce vertical spacing between Fluent Forms field groups. */
.msd-wizard .ff-el-group {
	margin-bottom: 0.5rem;
}

.msd-wizard .ff-el-group:last-of-type {
	margin-bottom: 0;
}

/* Remove top margin Fluent Forms adds to column containers. */
.msd-wizard .ff-column {
	margin-top: 0;
}

/* -------------------------------------------------------
 * Footer — pinned navigation bar.
 * ------------------------------------------------------- */

.msd-wizard__navigation {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: var(--msd-footer-padding);
	border-top: 1px solid var(--msd-border);
}

.msd-wizard__status {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #2f6f3e;
	min-height: 1.25rem;
}

.msd-wizard__input--error {
	border-color: var(--msd-error) !important;
}

.msd-wizard__field-error-message {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--msd-error);
}

.msd-wizard__field--error .ff-el-input--label {
	color: var(--msd-error);
}

.msd-wizard__sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Base button — inherits font-family from theme. */
.msd-wizard__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.625rem 1.5rem;
	min-width: 10rem; /* wide enough for "Submit Application" — prevents layout shift */
	cursor: pointer;
	border: 2px solid var(--msd-primary);
	border-radius: 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	background: transparent;
	color: var(--msd-primary);
	white-space: nowrap;
}

.msd-wizard__btn:disabled,
.msd-wizard__btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.72;
	pointer-events: none;
}

.msd-wizard__btn--loading {
	gap: 0.5rem;
}

.msd-wizard__btn-spinner {
	width: 0.95rem;
	height: 0.95rem;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: msd-spin 0.75s linear infinite;
	flex: 0 0 auto;
}

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

/*
 * Exhaustive interactive-state rules for both buttons.
 *
 * Why: after a mouse click the browser moves focus to the clicked button,
 * applying both :focus and :active. Without explicit rules for these states,
 * theme or Fluent Forms CSS (which targets generic `button`, `a`, `input`)
 * can bleed its own colour (e.g. pink) through, overriding our brand orange.
 * Listing every state here ensures our specificity wins in all browsers.
 *
 * :focus            — keyboard and mouse focus (always present after click)
 * :focus-visible    — keyboard-only focus (receives the visible ring)
 * :active           — during the click/tap press
 * :focus:not(:focus-visible) — mouse focus: suppress ring, keep brand colour
 */

/* Previous — outlined ghost button. */
.msd-wizard__btn--prev:hover,
.msd-wizard__btn--prev:focus,
.msd-wizard__btn--prev:focus-visible,
.msd-wizard__btn--prev:active {
	background: var(--msd-primary);
	color: #fff;
	border-color: var(--msd-primary);
	outline: none;
}

/* Keyboard focus ring — visible only for keyboard navigation. */
.msd-wizard__btn--prev:focus-visible {
	outline: 2px solid var(--msd-primary-dark);
	outline-offset: 3px;
}

/* Next / Submit Application — filled solid button. */
.msd-wizard__btn--next {
	background: var(--msd-primary);
	color: #fff;
}

.msd-wizard__btn--next:hover,
.msd-wizard__btn--next:focus,
.msd-wizard__btn--next:focus-visible,
.msd-wizard__btn--next:active {
	background: var(--msd-primary-dark);
	border-color: var(--msd-primary-dark);
	color: #fff;
	outline: none;
}

.msd-wizard__btn--next:focus-visible {
	outline: 2px solid var(--msd-primary-dark);
	outline-offset: 3px;
}

/* -------------------------------------------------------
 * Section visibility — controlled by JavaScript.
 * ------------------------------------------------------- */

/* -------------------------------------------------------
 * Section transitions — fade-in when a step becomes visible.
 * ------------------------------------------------------- */

/*
 * Fade-in animation for incoming wizard steps.
 *
 * The outgoing section is removed instantly (display:none via the hidden
 * class below). The incoming section fades in over 180 ms with a subtle
 * upward drift, giving a polished "content settling" feel without heavy
 * motion.
 *
 * animation-fill-mode: both — the element holds opacity:0 / translateY(6px)
 * before the animation starts, preventing a single-frame flash of full
 * opacity content.
 */
@keyframes msd-step-in {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.msd-wizard-section-item:not( .msd-wizard-section--hidden ) {
	animation: msd-step-in 0.18s ease-out both;
}

/* Hidden section items are removed from layout entirely. */
.msd-wizard-section--hidden {
	display: none !important;
}

/* Hidden navigation buttons retain their space to keep the
 * footer layout stable (Previous placeholder on step 1). */
.msd-wizard-btn--hidden {
	visibility: hidden;
	pointer-events: none;
}

/* -------------------------------------------------------
	* Reusable notification modal dialog.
 * ------------------------------------------------------- */

.msd-modal {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 40;
}

.msd-modal--hidden {
	display: none;
}

.msd-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.45 );
}

.msd-modal__dialog {
	position: relative;
	width: min( 32rem, 100% );
	max-height: calc( 100% - 2rem );
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--msd-border);
	border-radius: 8px;
	padding: 1.125rem 1.125rem 1rem;
	box-shadow: 0 18px 45px rgba( 0, 0, 0, 0.2 );
}

.msd-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 700;
	color: #1f1f1f;
}

.msd-modal__title::before {
	content: '\26a0\00a0';
	color: var(--msd-primary);
}

.msd-modal--success .msd-modal__title::before {
	content: '\2714\00a0';
	color: var(--msd-success);
}

.msd-modal--warning .msd-modal__title::before {
	content: '\26a0\00a0';
	color: var(--msd-primary);
}

.msd-modal--error .msd-modal__title::before {
	content: '\26a0\00a0';
	color: var(--msd-error);
}

.msd-modal--info .msd-modal__title::before {
	content: '\2139\00a0';
	color: var(--msd-info);
}

.msd-modal__message {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #333;
}

.msd-modal__actions {
	margin-top: 1rem;
	display: flex;
	justify-content: flex-end;
}

.msd-modal__btn-ok {
	border: 2px solid var(--msd-primary);
	background: var(--msd-primary);
	color: #fff;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	padding: 0.5rem 1.25rem;
	cursor: pointer;
}

.msd-modal__btn-ok:hover,
.msd-modal__btn-ok:focus,
.msd-modal__btn-ok:focus-visible,
.msd-modal__btn-ok:active {
	background: var(--msd-primary-dark);
	border-color: var(--msd-primary-dark);
	color: #fff;
	outline: none;
}

.msd-modal__btn-ok:focus-visible {
	outline: 2px solid var(--msd-primary-dark);
	outline-offset: 3px;
}

.msd-modal--success .msd-modal__btn-ok {
	border-color: var(--msd-success);
	background: var(--msd-success);
}

.msd-modal--success .msd-modal__btn-ok:hover,
.msd-modal--success .msd-modal__btn-ok:focus,
.msd-modal--success .msd-modal__btn-ok:focus-visible,
.msd-modal--success .msd-modal__btn-ok:active {
	border-color: var(--msd-success-dark);
	background: var(--msd-success-dark);
}

.msd-modal--success .msd-modal__btn-ok:focus-visible {
	outline-color: var(--msd-success-dark);
}

.msd-modal--error .msd-modal__btn-ok {
	border-color: var(--msd-error);
	background: var(--msd-error);
}

.msd-modal--error .msd-modal__btn-ok:hover,
.msd-modal--error .msd-modal__btn-ok:focus,
.msd-modal--error .msd-modal__btn-ok:focus-visible,
.msd-modal--error .msd-modal__btn-ok:active {
	border-color: var(--msd-error-dark);
	background: var(--msd-error-dark);
}

.msd-modal--error .msd-modal__btn-ok:focus-visible {
	outline-color: var(--msd-error-dark);
}

.msd-modal--info .msd-modal__btn-ok {
	border-color: var(--msd-info);
	background: var(--msd-info);
}

.msd-modal--info .msd-modal__btn-ok:hover,
.msd-modal--info .msd-modal__btn-ok:focus,
.msd-modal--info .msd-modal__btn-ok:focus-visible,
.msd-modal--info .msd-modal__btn-ok:active {
	border-color: var(--msd-info-dark);
	background: var(--msd-info-dark);
}

.msd-modal--info .msd-modal__btn-ok:focus-visible {
	outline-color: var(--msd-info-dark);
}

.msd-wizard--modal-open .msd-wizard__form-wrap,
.msd-wizard--modal-open .msd-wizard__header,
.msd-wizard--modal-open .msd-wizard__navigation,
.msd-wizard--modal-open .msd-wizard__status {
	pointer-events: none;
}

/* -------------------------------------------------------
 * Fluent Forms submit button.
 *
 * The button remains in the DOM so JavaScript can trigger it
 * programmatically when the footer "Submit Application" button
 * is clicked. It is never visible to the user.
 * ------------------------------------------------------- */

.msd-wizard .ff_submit_btn_wrapper {
	display: none !important;
}

/* -------------------------------------------------------
 * Fluent Forms: notice when plugin is not active.
 * ------------------------------------------------------- */

.msd-wizard__ff-missing {
	padding: 1rem;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	font-size: 0.875rem;
}

/* -------------------------------------------------------
 * Responsive — mobile breakpoint.
 *
 * On smaller viewports (Elementor stacks columns to single-column)
 * the wizard should use most of the available screen height so that
 * navigation buttons remain visible without the user needing to scroll
 * the browser page.
 * ------------------------------------------------------- */

@media ( max-width: 767px ) {
	:root {
		/*
		 * Reduce the top/bottom allowance on mobile: no Elementor section
		 * padding, smaller WordPress header. 120 px leaves room for the
		 * theme header bar and minimal breathing space.
		 *
		 * min: 500 px — practical minimum for a form on a phone
		 * pref: 100vh − 120px — fills most of the visible viewport
		 * max: 100vh — never taller than the viewport
		 */
		--msd-wizard-height: clamp( 500px, calc( 100vh - 120px ), 100vh );
	}

	/* Ensure full-width buttons on very narrow screens. */
	.msd-wizard__navigation {
		gap: 0.375rem;
	}

	.msd-wizard__btn {
		min-width: 0;
		flex: 1 1 0;
	}

	.msd-modal {
		align-items: flex-end;
	}

	.msd-modal__dialog {
		width: 100%;
		padding: 1rem;
	}
}

/* -------------------------------------------------------
 * Submission loading overlay — shown during form submission.
 * ------------------------------------------------------- */

.msd-wizard__submission-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.msd-wizard__submission-overlay--visible {
	display: flex;
}

.msd-wizard__submission-overlay-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: white;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	max-width: 420px;
	text-align: center;
}

.msd-wizard__submission-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid rgba(232, 80, 10, 0.2);
	border-top-color: var(--msd-primary);
	border-radius: 50%;
	animation: msd-spin 0.75s linear infinite;
	flex: 0 0 auto;
}

.msd-wizard__submission-message {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
}

.msd-wizard__submission-subtext {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #666;
}