/**
 * WooBricks Form Builder — multi-step styles (Etap F).
 * Ported from the Checkout Builder progress/nav styles, self-contained (no
 * checkout CSS variables — uses neutral defaults so it works on any form).
 */

/* Critical: Form Step extends Element_Container, so a user-picked native
   "Display" (flex/grid) is AUTHORED CSS that beats the UA default for [hidden];
   without this, JS setting step.hidden = true would have no visual effect.
   (Same gotcha as .wbxe-checkout-step[hidden].) The submit wrapper hidden on
   non-last steps needs the same — NOTE it is a SIBLING of .wbxe-form-steps
   (render_custom_layout() appends it after the children, directly inside the
   form root), so it must be scoped to the form, not to .wbxe-form-steps.
   The Back/Next nav buttons need it too: a linkless native Bricks button
   renders with authored display (inline-flex), which beats the UA [hidden]
   default exactly the same way. */
.wbxe-form-step[hidden],
.brxe-wbxe-form-builder .submit-button-wrapper[hidden],
.wbxe-form-nav__back[hidden],
.wbxe-form-nav__next[hidden] {
	display: none !important;
}

/* v2 contract: non-initial steps ship `--inactive` server-side (no FOUC — v1
   showed every step until JS ran). Scoped OUT of the builder canvas so every
   step stays visible/editable side by side (same body-class scoping pattern as
   the cart empty/filled helpers). */
body:not(.wbxe-in-builder) .wbxe-form-step--inactive {
	display: none !important;
}

.wbxe-form-nav__buttons {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.wbxe-form-nav__next {
	margin-left: auto;
}

/* Per-step navigation row (native Checkout v2 multistep parity — each step
   carries its own row with exactly the buttons it needs; the native preset
   aligns Back with margin-inline-end:auto per button, we do it on the row). */
.wbxe-form-step-nav {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1em;
	width: 100%;
}

.wbxe-form-step-nav .wbxe-form-nav__back {
	margin-inline-end: auto;
}

/* Next / relocated submit stick to the end even when Back is absent. */
.wbxe-form-step-nav .wbxe-form-nav__next,
.wbxe-form-step-nav .submit-button-wrapper {
	margin-inline-start: auto;
}

/* The submit wrapper is relocated into a navigation row by the engine
   (last step's own row, or the shared Step Buttons row as fallback) —
   align it right the same way Next is. */
.wbxe-form-nav__buttons .submit-button-wrapper {
	margin-left: auto;
}

/* "Stick to bottom of viewport" control. */
.wbxe-form-nav--sticky {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: #fff;
	padding-block: 0.75rem;
}

/* =====================================================================
   Form Steps Nav (v2, Etap I) — designable breadcrumb; port of the native
   Checkout v2 `.brx-checkout-steps-nav` rules with our class names. State
   classes (is-active / is-completed / is-disabled) come from form-builder.js.
   ===================================================================== */

.wbxe-form-steps-nav-list {
	counter-reset: wbxe-form-step-counter;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wbxe-form-step-nav-item {
	counter-increment: wbxe-form-step-counter;
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	min-width: 0;
	line-height: 1.2;
	text-align: left;
	padding: 0.75em 1.75em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999em;
	background-color: transparent;
	color: inherit;
}

/* Optional automatic 1/2/3… number (nav's "Show step number" control). */
.wbxe-form-steps-nav-list[data-wbxe-show-steps] .wbxe-form-step-nav-item::before {
	content: counter(wbxe-form-step-counter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	order: -1;
}

/* Baseline icon size inside a nav item: the theme ships `.brxe-icon
   { font-size: 60px }` as its base rule, and the builder canvas may not have
   compiled a freshly generated child's own iconSize CSS yet — this keeps the
   check icon text-sized in every situation. Low specificity on purpose: the
   per-instance iconSize control (#brxe-{id}) always wins. (Theme CSS is
   cascade-layered in 2.4; our unlayered rule wins regardless.) */
.wbxe-form-step-nav-item .brxe-icon,
.wbxe-form-step-nav-item i {
	font-size: 1em;
}

.wbxe-form-step-nav-item:not([aria-disabled="true"]) {
	cursor: pointer;
}

.wbxe-form-step-nav-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wbxe-form-step-nav-item.is-disabled {
	opacity: 0.6;
}

.wbxe-form-step-nav-item.is-active {
	border-color: currentColor;
	font-weight: 600;
}

/* Builder-canvas hint shown inside an EMPTY Form (v2) (fresh inserts start
   with no children by design — structure comes from "Insert a structure"). */
.wbxe-form-empty-hint {
	padding: 1.25em;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 0.25em;
	font-size: 0.875em;
	opacity: 0.75;
}

/* Hide the hint the moment the form gains ANY real content — the canvas
   doesn't necessarily re-render the parent after Generate inserts children,
   so the server-side "no children" branch can leave a stale hint behind.
   :has() is safe here: the hint only ever renders on the builder canvas
   (modern Chromium). */
form:has(.brxe-wbxe-form-field, .brxe-wbxe-form-layout-multistep, .brxe-wbxe-form-steps, .brxe-container, .brxe-block, .brxe-div) .wbxe-form-empty-hint {
	display: none;
}

/* "Visually hidden but screen-reader-announced" utility for the aria-live
   region (Bricks doesn't define .screen-reader-text globally). */
.wbxe-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Step gets tabindex="-1" for programmatic focus on activation — suppress the
   focus ring so it doesn't look clickable. */
.wbxe-form-step:focus {
	outline: none;
}

/* Conditional field (Etap G): hidden until its condition is met. Defensive
   !important in case a parent grid/flex container authors a display on its
   children that would beat the UA [hidden] default (same gotcha as steps). */
.wbxe-form-cond[hidden] {
	display: none !important;
}

/* ==========================================================================
   Rating (star widget) — radios rendered high→low, laid out row-reverse so
   they read left-to-right; classic pure-CSS fill on hover / checked.
   ========================================================================== */
.wbxe-rating {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.15em;
	font-size: 1.6rem;
	line-height: 1;
}

.wbxe-rating__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wbxe-rating__star {
	cursor: pointer;
	color: #d0d0d0;
	transition: color 0.12s ease;
}

.wbxe-rating__star:hover,
.wbxe-rating__star:hover ~ .wbxe-rating__star,
.wbxe-rating__input:checked ~ .wbxe-rating__star {
	color: #f5a623;
}

/* Keyboard focus ring on the star of a focused (visually-hidden) radio. */
.wbxe-rating__input:focus-visible + .wbxe-rating__star {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Builder-canvas preview (non-interactive spans). */
.wbxe-rating--preview .wbxe-rating__star {
	color: #f5a623;
	cursor: default;
}

/* ==========================================================================
   Slider (range input) + live value output.
   ========================================================================== */
.wbxe-slider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.wbxe-slider__input {
	flex: 1 1 auto;
}

.wbxe-slider__output {
	min-width: 2.5em;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Builder-canvas layout parity: the canvas can wrap each element in its own
   node, making the flex child of .brxe-form the WRAPPER (width: auto)
   instead of our .form-group (native width: 100%) — fields drifted
   side-by-side in the canvas only. Target our always-present element class
   with the same value as the native rule, so the front end is unaffected. */
.brxe-form .brxe-wbxe-form-field {
	width: 100%;
}


/* ==========================================================================
   Image choice — visual radio group (grid of clickable image tiles). Flat,
   class-based selectors throughout (CSS-optimizer-safe, see the LiteSpeed
   note in the project memory). The radio stays in the a11y tree (visually
   hidden, focusable); the selected state is a border on the image.
   ========================================================================== */
.wbxe-image-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wbxe-image-choice li {
	margin: 0;
}

.wbxe-image-choice__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wbxe-image-choice label {
	display: block;
	cursor: pointer;
	line-height: 0;
	margin: 0;
}

.wbxe-image-choice__img {
	display: block;
	width: 5em;
	height: 5em;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: 0.5em;
	transition: border-color 0.12s ease, transform 0.12s ease;
}

.wbxe-image-choice label:hover .wbxe-image-choice__img {
	transform: scale(1.04);
}

.wbxe-image-choice__input:checked + label .wbxe-image-choice__img {
	border-color: currentColor;
}

.wbxe-image-choice__input:focus-visible + label .wbxe-image-choice__img {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}