/**
 * La Vida Homes - Gravity Forms theme
 *
 * The single source of form styling. The plugin disables Gravity Forms' own
 * frontend CSS (gform_disable_css plus a dequeue of the GF 3.x theme-framework
 * handles), so this file has to supply the functional layout as well as the
 * visual design. Values are taken from the JetFormBuilder forms on
 * lavidahomes.com.au so the switch to Gravity Forms is invisible to visitors.
 *
 * Structure:
 *   1. Tokens
 *   2. Base layout (grid, fieldset reset, utility hiding)
 *   3. Inputs and labels
 *   4. Floating labels
 *   5. Choices - standard forms
 *   6. Buttons
 *   7. Unlock variant  (.lv-unlock)
 *   8. Quiz variant    (.lv-quiz)
 *   9. Quiz progress controls
 *  10. Validation
 *  11. Busy state
 *
 * .lv-quiz and .lv-unlock are added to the form automatically by the plugin
 * from the per-form settings; they are not typed in by hand.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	--lv-blue: #0566de;
	--lv-orange: #f87c56;
	--lv-input-bg: #ededee;
	--lv-border: #dbdbdd;
	--lv-muted: #7c878e;
	--lv-error: #d63638;
	--lv-font: 'InterTight', sans-serif;

	/* Progress bar: these are the live site's values. The fill is deliberately
	   not --lv-blue; it matches the existing quiz rather than the brand blue. */
	--lv-progress-track: #e5e5e5;
	--lv-progress-fill: #007bff;
}

/* -------------------------------------------------------------------------
 * 2. Base layout
 *
 * Replaces what GF's reset and foundation stylesheets used to provide. Any
 * field type not covered here will render unstyled, so new field types need
 * a rule adding when they are first used.
 * ---------------------------------------------------------------------- */

.gform_wrapper {
	font-family: var(--lv-font);
}

.gform_wrapper *,
.gform_wrapper *::before,
.gform_wrapper *::after {
	box-sizing: border-box;
}

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 24px;
	grid-row-gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gfield {
	grid-column: 1 / -1;
	position: relative;
	padding: 5px 0;
}

/* GF's field-width classes. Only the widths in use are mapped; add more as needed. */
@media (min-width: 641px) {
	.gform_wrapper .gfield--width-half { grid-column: span 6; }
	.gform_wrapper .gfield--width-third { grid-column: span 4; }
	.gform_wrapper .gfield--width-quarter { grid-column: span 3; }
	.gform_wrapper .gfield--width-two-thirds { grid-column: span 8; }
	.gform_wrapper .gfield--width-three-quarter { grid-column: span 9; }
}

/* Choice fields render as <fieldset>. Without GF's reset the browser's default
   groove border and legend-in-the-border behaviour both show through. */
.gform_wrapper fieldset.gfield {
	border: 0;
	min-width: 0;
}

/* display:block takes the legend out of its special in-the-border rendering and
   makes it lay out as an ordinary block. Do not float it: a float would need a
   clear on the following box, and clearance silently swallows that box's
   margin-top, collapsing the gap between a question and its answers. */
.gform_wrapper fieldset.gfield > legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
}

/* Fields that must never be visible. GF relies on its own CSS for these, so
   without them the honeypot and hidden fields appear on the page. */
.gform_wrapper .gform_hidden,
.gform_wrapper input[type='hidden'],
.gform_wrapper .gfield.gform_hidden,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot {
	display: none !important;
}

/* Complex fields (Name, Address) lay their sub-inputs out in columns. GF's own
   grid CSS is disabled, so without this the columns do not size to their
   contents and the inputs overflow them. */
.gform_wrapper .ginput_complex {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.gform_wrapper .ginput_complex > span {
	display: block;
	flex: 1 1 180px;
	min-width: 0;
}

.gform_wrapper .gform_footer {
	margin-top: 22px;
}

.gform_wrapper .gfield_description {
	font-size: 12.5px;
	color: var(--lv-muted);
	margin-top: 4px;
}

.gform_wrapper .gform_ajax_spinner {
	margin-left: 10px;
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------------------
 * 3. Inputs and labels
 * ---------------------------------------------------------------------- */

.gform_wrapper .gfield input[type='text'],
.gform_wrapper .gfield input[type='email'],
.gform_wrapper .gfield input[type='tel'],
.gform_wrapper .gfield input[type='number'],
.gform_wrapper .gfield input[type='url'],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
	width: 100%;
	background-color: var(--lv-input-bg);
	border: 0;
	border-radius: 6px;
	padding: 14px 16px;
	font-family: var(--lv-font);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.15;
	color: #000;
	box-shadow: none;
	outline: none;
	transition: outline-color 0.3s;
}

.gform_wrapper .gfield textarea {
	height: 200px;
}

.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
	outline: 1px solid var(--lv-blue);
}

.gform_wrapper .gfield_label {
	font-family: var(--lv-font);
	font-size: 18px;
	font-weight: 600;
	color: #000;
}

/* The required asterisk picks up the site's Elementor global accent, with the
   brand orange as a fallback if the form is rendered outside Elementor. The
   markup nests two .gfield_required spans, so this covers both. */
.gform_wrapper .gfield_required {
	color: var(--e-global-color-baed2f5, var(--lv-orange));
}

/* -------------------------------------------------------------------------
 * 4. Floating labels
 *
 * The label rests inside the input as its placeholder and rises above it on
 * focus or once the field has a value, matching the live JetFormBuilder
 * forms. lavida-gf-forms.js adds .lv-floating to fields that qualify and
 * adds .lv-floating and ensures a placeholder exists; the raised/resting state
 * itself is pure CSS. Quiz forms are handled in section 8.
 * ---------------------------------------------------------------------- */

/* .lv-floating is set on the element the label is positioned against: the field
   itself for a simple input, or one sub-input column (First, Last) inside a
   complex field such as Name. Reserve the space the label rises into so it
   never collides with whatever sits above. */
.gform_wrapper .lv-floating {
	position: relative;
	padding-top: 28px;
}

/* At rest the label is centred on the input. It is anchored to the bottom
   rather than the top because the input is the last in-flow box in the host,
   so the host's bottom edge is the input's bottom edge whatever padding sits
   above it. Offset = (input height - label height) / 2, which is 14px for the
   42px inputs on standard forms. */
.gform_wrapper .lv-floating > .gfield_label,
.gform_wrapper .lv-floating > label {
	position: absolute;
	top: auto;
	bottom: 14px;
	left: 20px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #000;
	text-align: left;
	opacity: 0.7;
	pointer-events: none;
	transition: all 0.3s;
	z-index: 1;
}

/* A textarea is far taller than its first line, so centring would strand the
   label in the middle of the box. Anchor it to the first line instead. */
.gform_wrapper .lv-floating:has( textarea ) > .gfield_label {
	top: 42px;
	bottom: auto;
}

/* Raised state, entirely CSS: :focus-within while the field has focus, and
   :placeholder-shown once it holds a value. The script only adds .lv-floating
   and guarantees a placeholder exists; it never tracks the state, so the label
   cannot get stuck raised over an empty field. */
.gform_wrapper .lv-floating:focus-within > .gfield_label,
.gform_wrapper .lv-floating:focus-within > label,
.gform_wrapper .lv-floating:has( input:not( :placeholder-shown ) ) > .gfield_label,
.gform_wrapper .lv-floating:has( input:not( :placeholder-shown ) ) > label,
.gform_wrapper .lv-floating:has( textarea:not( :placeholder-shown ) ) > .gfield_label,
.gform_wrapper .lv-floating:has( textarea:not( :placeholder-shown ) ) > label {
	top: 0;
	bottom: auto;
	left: 6px;
	font-size: 18px;
	opacity: 1;
}

/* The label is acting as the visible placeholder, so the real one stays
   invisible at all times. */
.gform_wrapper .lv-floating input::placeholder,
.gform_wrapper .lv-floating textarea::placeholder {
	color: transparent;
}

/* -------------------------------------------------------------------------
 * 5. Choices - standard forms
 *
 * Plain inline options with the native control. Quiz forms override this
 * completely in section 8.
 * ---------------------------------------------------------------------- */

.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 11px;
}

.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
	font-family: var(--lv-font);
	font-size: 12.5px;
	font-weight: 400;
	color: #000;
	margin: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 6. Buttons
 *
 * Orange pill everywhere by default. button.gform-theme-button is included
 * because GF applies that class to page navigation buttons.
 * ---------------------------------------------------------------------- */

.gform_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer input[type='submit'],
.gform_wrapper .gform_page_footer .gform_button,
.gform_wrapper button.gform-theme-button {
	background-color: var(--lv-orange);
	color: #fff;
	border: 2px solid transparent;
	border-radius: 30px;
	padding: 16px 40px;
	font-family: var(--lv-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	height: auto;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.gform_wrapper .gform_footer input[type='submit']:hover,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_page_footer input[type='submit']:hover,
.gform_wrapper .gform_page_footer .gform_button:hover,
.gform_wrapper button.gform-theme-button:hover {
	background-color: #fff;
	color: var(--lv-orange);
	border-color: var(--lv-orange);
}

/* -------------------------------------------------------------------------
 * 7. Unlock variant (.lv-unlock) - brochure gate: pill inputs, blue button
 * ---------------------------------------------------------------------- */

.lv-unlock .gfield input[type='text'],
.lv-unlock .gfield input[type='email'],
.lv-unlock .gfield input[type='tel'] {
	border-radius: 25px;
	padding: 12px 16px;
}

.lv-unlock .gform_footer input[type='submit'],
.lv-unlock .gform_footer .gform_button {
	background-color: var(--lv-blue);
	border-color: var(--lv-blue);
}

.lv-unlock .gform_footer input[type='submit']:hover,
.lv-unlock .gform_footer .gform_button:hover {
	background-color: #fff;
	color: var(--lv-blue);
}

/* -------------------------------------------------------------------------
 * 8. Quiz variant (.lv-quiz)
 *
 * One question per page, centred in an 800px column. Every question reads the
 * same whether it is answered with answer cards or a text input.
 * ---------------------------------------------------------------------- */

/* Eyebrow above the question ("Question 01."). Comes from a Section field's
   title, or any element given the lv-quiz-eyebrow class. */
.lv-quiz .gsection_title,
.lv-quiz .lv-quiz-eyebrow {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.33;
	color: var(--lv-muted);
	text-align: center;
	margin: 0;
	padding: 0 0 15px;
}

/* The question itself. A Section field's description, an element with the
   lv-quiz-question class, or - the usual case - a field's own label.
   :not(.lv-floating) matters: this block sits later in the file than the
   floating-label rules and carries the same specificity, so without it a
   floating field's label would be dragged back to a static centred heading. */
.lv-quiz .gsection_description,
.lv-quiz .lv-quiz-question,
.lv-quiz .gfield:not( .lv-floating ) > .gfield_label {
	display: block;
	position: static;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.14;
	color: #000;
	text-align: center;
	margin: 0;
	max-width: none;
}

.lv-quiz .gsection {
	border: 0;
	padding: 0;
	margin-bottom: 0;
}

/* Fields fill the form, and the form fills whatever container it is placed in.
   Width is therefore controlled by the Elementor container, not here, so a
   wider container simply lets inline items wrap onto fewer rows. */
.lv-quiz .gfield {
	width: 100%;
	/* No padding: the quiz sets its own rhythm below. It also has to be zero on
	   choice fields, because a fieldset renders its padding-top *below* the
	   legend, which would add to the question-to-answers gap. */
	padding: 0;
}

/* Gap between a question and its answers. On the label so it applies whether
   the question is a <legend> (choice fields) or a <label> (inputs). A floating
   label is positioned out of flow, so it must not carry this margin. */
.lv-quiz .gfield:not( .lv-floating ) > .gfield_label {
	margin-bottom: 35px;
}

/* Fields opted into floating labels with lv-float-label - typically the contact
   page at the end of a quiz. Quiz inputs are card-styled and 57px tall rather
   than 42px, so the resting offset is (57 - 14) / 2. */
.lv-quiz .lv-floating > .gfield_label,
.lv-quiz .lv-floating > label {
	bottom: 22px;
}

/* A complex field floats a label into each of its boxes (First, Last), so its
   own label would just repeat them as a heading above. Take it out of the
   layout but leave it readable by assistive technology, which still needs it
   as the fieldset's name. */
.lv-quiz .gfield--type-name > .gfield_label,
.lv-quiz .gfield--type-address > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lv-quiz .lv-float-label .ginput_complex {
	margin-top: 0;
}

/* Gap above the Next button. */
.lv-quiz .gfield > .ginput_container {
	margin: 0 0 32px;
}

/* The resting label is anchored to the host's bottom edge, which only equals
   the input's bottom edge if nothing sits below it. Move the gap onto the
   field itself so the container hugs the input. */
.lv-quiz .gfield.lv-floating > .ginput_container {
	margin-bottom: 0;
}

/* padding-top is restated here on purpose. Section 4 reserves the space the
   label rises into, but `.lv-quiz .gfield { padding: 0 }` above carries equal
   specificity and comes later, so it would win and drop the label onto the
   input. Anything in section 4 that the quiz rules reset has to be re-asserted
   at this higher specificity. */
.lv-quiz .gfield.lv-floating {
	padding-top: 28px;
	margin-bottom: 32px;
}

/* Text inputs are styled as answer cards so a typed answer matches a chosen one. */
.lv-quiz .gfield input[type='text'],
.lv-quiz .gfield input[type='email'],
.lv-quiz .gfield input[type='tel'],
.lv-quiz .gfield input[type='number'],
.lv-quiz .gfield input[type='url'],
.lv-quiz .gfield select,
.lv-quiz .gfield textarea {
	background-color: #fff;
	border: 2px solid var(--lv-border);
	border-radius: 6px;
	padding: 16px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.14;
	transition: border-color 0.2s ease-out;
}

/* Same affordance as the cards, in place of the base focus outline. */
.lv-quiz .gfield input:hover,
.lv-quiz .gfield select:hover,
.lv-quiz .gfield textarea:hover,
.lv-quiz .gfield input:focus,
.lv-quiz .gfield select:focus,
.lv-quiz .gfield textarea:focus {
	outline: none;
	border-color: var(--lv-blue);
}

/* Answer cards, stacked 20px apart. */
.lv-quiz .gfield_radio,
.lv-quiz .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* The field editor's Choice Layout setting emits these classes, but the CSS
   that implemented them was part of GF's theme framework, which the plugin
   dequeues. Without these rules the setting appears to do nothing. */
.lv-quiz .gfield--choice-align-horizontal .gfield_radio,
.lv-quiz .gfield--choice-align-horizontal .gfield_checkbox,
.lv-quiz .gfield--choice-align-columns .gfield_radio,
.lv-quiz .gfield--choice-align-columns .gfield_checkbox {
	flex-direction: row;
	flex-wrap: wrap;
}

/* The card itself carries no padding: the label does, so that every pixel
   inside the border is a click target. With the padding on this element,
   clicks in the padding band land on the div and select nothing. */
.lv-quiz .gfield_radio .gchoice,
.lv-quiz .gfield_checkbox .gchoice {
	display: block;
	position: relative;
	padding: 0;
	border: 2px solid var(--lv-border);
	border-radius: 6px;
	background-color: transparent;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease-out;
}

/* .lv-checked is kept in sync by the JS as a fallback for browsers without
   :has() support. Both selectors describe the same state. */
.lv-quiz .gfield_radio .gchoice:hover,
.lv-quiz .gfield_checkbox .gchoice:hover,
.lv-quiz .gchoice.lv-checked,
.lv-quiz .gchoice:has(input:checked) {
	border-color: var(--lv-blue);
}

/* Selected answers look bold without reflowing, because text-shadow thickens
   the glyphs where a heavier font-weight would change their width. Taken from
   the live quiz. */
.lv-quiz .gchoice.lv-checked label,
.lv-quiz .gchoice:has(input:checked) label {
	text-shadow:
		#000 -0.2px -0.2px 0,
		#000 0.2px -0.2px 0,
		#000 -0.2px 0.2px 0,
		#000 0.2px 0.2px 0;
}

/* The native control is hidden; the card is the control. */
.lv-quiz .gchoice input[type='radio'],
.lv-quiz .gchoice input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* The label is the card's inner surface. Its right padding reserves room for
   the indicator. */
.lv-quiz .gchoice label {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 16px 48px 16px 16px;
	font-size: 18px;
	font-weight: 400;
	/* 1.33 gives the 60px card height of the JetFormBuilder quiz */
	line-height: 1.33;
	color: #000;
	cursor: pointer;
}

/* Indicator on the right: a chevron that becomes a tick when selected.
   pointer-events:none so it never intercepts a click meant for the label. */
.lv-quiz .gchoice::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 24px;
	height: 20px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%230566DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lv-quiz .gchoice.lv-checked::after,
.lv-quiz .gchoice:has(input:checked)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230566DE'/%3E%3Cpath d='M7 12.5l3.2 3L17 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Image choices
 *
 * Covers both routes: GF's native Image Choice field (.gfield--type-image_choice)
 * and a plain choice field using the Gravity Forms Image Choices add-on
 * (.image-choices-field). Both keep their own inner markup; the quiz only
 * supplies the row layout and the selected state.
 *
 * Items are sized as a share of the row rather than a fixed pixel width, so
 * they fit whatever column the form is embedded in. How many land per row is
 * therefore driven by the column width, not by the layout dropdown.
 * ---------------------------------------------------------------------- */

.lv-quiz .gfield--type-image_choice .gfield_radio,
.lv-quiz .gfield.image-choices-field .gfield_radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

/* GF's native Image Choice field has no column system of its own once the theme
   framework is dequeued, so items are sized as a share of the row: a fixed
   flex-basis that wraps and grows to fill the last row. A wider container fits
   more per row with no CSS change. */
.lv-quiz .gfield--type-image_choice .gchoice {
	flex: 1 1 180px;
	width: auto;
	min-width: 140px;
	max-width: none;
}

/* The Image Choices add-on ships its own column CSS (loaded independently of the
   dequeued framework): the field's Columns setting emits .ic-cols--N, which sets
   each choice's width to calc(100%/N - gap). Setting a flex-basis here overrode
   that width and pinned every layout to one flow, so the setting appeared dead.
   Yield the main size to the add-on; grow:0 keeps a short last row from
   stretching. Change the count in the field's Image Choices > Columns setting. */
.lv-quiz .gfield.image-choices-field .gchoice {
	flex: 0 0 auto;
	max-width: 100%;
}

/* Only GF's native field uses a real <img>. The add-on paints its artwork as a
   background on .image-choices-choice-image-wrap and sizes that wrap itself,
   so leave its height alone - setting height:auto collapses it to zero and the
   images vanish. */
.lv-quiz .gfield--type-image_choice .gfield-choice-image {
	width: 100%;
	height: auto;
}

/* The text answer-card treatment would overlay a chevron on the artwork and
   force the label into a padded flex row, so image choices opt out of it. */
.lv-quiz .gfield--type-image_choice .gchoice::after,
.lv-quiz .gfield.image-choices-field .gchoice::after {
	content: none;
}

.lv-quiz .gfield--type-image_choice .gchoice label,
.lv-quiz .gfield.image-choices-field .gchoice label {
	display: block;
	width: auto;
	padding: 8px;
	text-align: center;
}

/* The add-on renders its own inner element, which takes the card border. */
.lv-quiz .image-choices-field .image-choices-choice {
	border: 2px solid var(--lv-border);
	border-radius: 6px;
	transition: border-color 0.2s ease-out;
}

.lv-quiz .image-choices-field .image-choices-choice:hover,
.lv-quiz .image-choices-field .image-choices-choice-selected {
	border-color: var(--lv-blue);
}

/* Page navigation: a single centred Next button. */
.lv-quiz .gform_page_footer {
	display: flex;
	justify-content: center;
	gap: 12px;
	border: 0;
	margin: 8px 0 0;
	padding: 0;
}

.lv-quiz .gform_page_footer .gform_next_button,
.lv-quiz .gform_page_footer .gform_button {
	padding: 20px 50px;
	font-size: 17px;
	line-height: 1.25;
}

/* Going back is done with the progress bar's chevron, so GF's Previous button
   is hidden but left in the DOM for that chevron to click. */
.lv-quiz .gform_page_footer .gform_previous_button {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* GF's own pagination UI, replaced by the controls in section 9. */
.lv-quiz .gf_progressbar_wrapper,
.lv-quiz .gf_page_steps {
	display: none;
}

/* -------------------------------------------------------------------------
 * 9. Quiz progress controls
 *
 * Injected by lavida-gf-forms.js beneath multi-page quiz forms: a back and
 * forward chevron either side of a progress bar and a "1 / 9" counter.
 * ---------------------------------------------------------------------- */

/* padding-bottom reserves space for the step counter, which is taken out of
   flow below so the chevrons line up with the bar itself (see __count). */
.lv-quiz-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 20px 0 0;
	padding-bottom: 26px;
	font-family: var(--lv-font);
}

/* The .lv-quiz prefix is deliberate: Elementor's kit styles every button inside
   the form (.elementor-kit-NNNN button:focus, specificity 0,2,1) with a solid
   border and fill, which outranks a lone .lv-quiz-controls__nav and is what drew
   the button-like box around the bare chevron on click. Scoping under .lv-quiz
   lifts these above it and strips the border, fill and default ring in every
   state. */
.lv-quiz .lv-quiz-controls__nav {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	line-height: 0;
	cursor: pointer;
}

.lv-quiz .lv-quiz-controls__nav:hover,
.lv-quiz .lv-quiz-controls__nav:focus {
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
}

/* A visible ring is restored for keyboard users only, so pointer clicks stay
   clean while tab navigation keeps an indicator. */
.lv-quiz .lv-quiz-controls__nav:focus-visible {
	outline: 2px solid var(--lv-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.lv-quiz .lv-quiz-controls__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.lv-quiz-controls__nav svg {
	width: 24px;
	height: 24px;
	fill: var(--lv-blue);
}

.lv-quiz-controls__progress {
	position: relative;
	flex-grow: 1;
}

.lv-quiz-controls__track {
	position: relative;
	height: 4px;
	border-radius: 3px;
	background-color: var(--lv-progress-track);
	overflow: hidden;
}

.lv-quiz-controls__fill {
	width: 0;
	height: 100%;
	background-color: var(--lv-progress-fill);
	transition: width 0.3s;
}

/* Out of flow so it does not add height to the flex row: with it in flow the
   chevrons centred on bar-plus-counter and sat below the bar. Now the row is
   only as tall as the bar, so align-items:center lines the chevrons up with it,
   and the counter hangs just beneath at the bar's left edge as before. */
.lv-quiz-controls__count {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.33;
}

/* -------------------------------------------------------------------------
 * 10. Validation
 * ---------------------------------------------------------------------- */

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	outline: 1px solid var(--lv-error);
}

.lv-quiz .gfield_error input,
.lv-quiz .gfield_error select,
.lv-quiz .gfield_error textarea {
	outline: none;
	border-color: var(--lv-error);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-family: var(--lv-font);
	font-size: 12.5px;
	background: none;
	border: 0;
	padding: 4px 0 0;
	color: var(--lv-error);
}

/* -------------------------------------------------------------------------
 * 11. Busy state
 *
 * Page changes are AJAX and can take a few seconds, during which the current
 * page just sits there and the press reads as having done nothing.
 *
 * No JavaScript is involved: Gravity Forms already puts .gform-has-spinner and
 * aria-busy="true" on the button it is waiting on, and removes them by
 * rendering the next page. This styles that state as a disabled button whose
 * label reads Loading.
 *
 * The label is a text node, so it cannot be swapped in CSS. Instead the button
 * text is made transparent and the replacement is centred over it, which also
 * keeps the button at its original width rather than resizing mid-press.
 * ---------------------------------------------------------------------- */

/* Matches the specificity of the button rules in section 6, which set the
   orange background this has to override. */
.gform_wrapper .gform_page_footer .gform-has-spinner,
.gform_wrapper .gform_footer .gform-has-spinner,
.gform_wrapper button.gform-theme-button.gform-has-spinner {
	position: relative;
	background-color: var(--lv-input-bg);
	border-color: transparent;
	color: transparent;
	cursor: default;
	pointer-events: none;
}

.gform_wrapper .gform-has-spinner::after {
	content: 'Loading\2026';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lv-muted);
	white-space: nowrap;
}

/* GF's own loader element, which the dequeued theme framework used to style. */
.gform_wrapper .gform-loader {
	display: none;
}

/* The chevrons drive the same buttons, so they read as unavailable too, and
   answers must not look changeable while their page is on its way out. */
.lv-quiz:has( .gform-has-spinner ) .lv-quiz-controls__nav {
	opacity: 0.4;
	pointer-events: none;
}

.lv-quiz:has( .gform-has-spinner ) .gfield {
	pointer-events: none;
}