/* =========================================================================
   pv-forms v1.0.1: Formidable Forms in Volvo's leads-form style
   Child theme: inc/forms/pv-forms.css, loaded by inc/forms/pv-forms.php on
   any page that carries a Formidable form.

   Built from Volvo's own form rules (volvocars.com/za styles, Sept 2026) and
   the /za/quote/ form measured at 1440 and 768:
     - inputs 48px, 56px with a floating label; 1px #787878 inset ring,
       2px #000 on focus, black on hover; square corners
     - invalid: #fce5e3 field, #e52715 ring, #cd2314 label and message
     - checkbox and radio: 24px hit area, 16px box, black when checked
     - submit: button-filled accent, #0b2ded, 48px pill
     - the form sits in container-sm: the full content width below 30rem,
       8 of 12 columns to 64rem, 6 of 12 from 64rem
     - sections space-xl apart, section headings heading-2 then space-sm

   SPECIFICITY
   Every rule is scoped :is(#pvf, .frm_forms). :is() takes the specificity
   of its strongest argument, so the scope counts as an ID (1,0,0) while it
   only ever matches .frm_forms (no element has the id pvf). That beats
   Astra's form rules, Elementor kit form styles and Formidable's own
   stylesheet without !important. Formidable's styling should still be
   switched off (Formidable > Global Settings), so two stylesheets are not
   fighting over the same fields.

   PROGRESSIVE ENHANCEMENT
   Without JavaScript the form is a plain top-label form in Volvo's field
   style, and the model picker is a wrapping grid of tiles. pv-forms.js adds
   the floating labels (.pv-float), the picker's model groups and its
   previous and next buttons (.pv-picker[data-pv-ready]).
   ====================================================================== */

:is(#pvf, .frm_forms) {

	/* Colour */
	--pvf-fg: #000;
	--pvf-fg-2: #5e5e5e;
	--pvf-fg-3: #787878;
	--pvf-bg: #fff;
	--pvf-gray: #f0f0f0;
	--pvf-ornament: #0000001f;
	--pvf-accent: #0b2ded;
	--pvf-red: #cd2314;
	--pvf-red-ring: #e52715;
	--pvf-red-bg: #fce5e3;
	--pvf-green-bg: #d7f9df;

	/* Type */
	--pvf-font: var(--pv-font-sans, "Volvo Novum", Arial, "Helvetica Neue", Helvetica, sans-serif);
	--pvf-h2: clamp(1.5rem, .714vw + 1.286rem, 2rem);

	/* Space */
	--pvf-gutter: clamp(1rem, 1.429vw + .571rem, 2rem);
	--pvf-space-sm: clamp(1rem, 1.429vw + .571rem, 2rem);
	--pvf-space-xl: clamp(3rem, 2.143vw + 2.357rem, 4.5rem);
	--pvf-inset: clamp(1.5rem, .8vw + 1.1rem, 1.75rem);
	--pvf-row: 1rem;

	/* container-xl and container-sm, as in the page blocks. 100% is the
	   width of the Elementor container the form sits in. */
	--pvf-xl: min(81rem, 100% - 2 * var(--pvf-inset));
	--pvf-col: calc((var(--pvf-xl) - 11 * var(--pvf-gutter)) / 12);
	--pvf-sm: var(--pvf-xl);

	/* Motion */
	--pvf-dur: .22s;

	box-sizing: border-box;
	width: var(--pvf-sm);
	max-width: 100%;
	margin: 0 auto 3rem;
	padding: 0;
	font-family: var(--pvf-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pvf-fg);
	font-synthesis-weight: none;
	font-kerning: normal;
}

@supports (width: round(down, 1px, 1px)) {

	:is(#pvf, .frm_forms) {
		--pvf-h2: round(down, clamp(1.5rem, .714vw + 1.286rem, 2rem), 2px);
		--pvf-gutter: round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);
		--pvf-space-sm: round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);
		--pvf-space-xl: round(clamp(3rem, 2.143vw + 2.357rem, 4.5rem), 2px);
	}
}

@media (width >= 30rem) {

	:is(#pvf, .frm_forms) {
		--pvf-sm: calc(8 * var(--pvf-col) + 7 * var(--pvf-gutter));
	}
}

@media (width >= 64rem) {

	:is(#pvf, .frm_forms) {
		--pvf-sm: calc(6 * var(--pvf-col) + 5 * var(--pvf-gutter));
		margin-block-end: 4rem;
	}
}

:is(#pvf, .frm_forms) *,
:is(#pvf, .frm_forms) *::before,
:is(#pvf, .frm_forms) *::after {
	box-sizing: border-box;
}

:is(#pvf, .frm_forms) :is(form, fieldset, p, h2, h3, ul, ol, li) {
	margin: 0;
	padding: 0;
}

:is(#pvf, .frm_forms) fieldset {
	min-width: 0;
	border: 0;
}

:is(#pvf, .frm_forms) a {
	color: var(--pvf-fg);
	text-decoration-line: underline;
	text-underline-offset: .125em;
}

:is(#pvf, .frm_forms) :focus-visible {
	outline: 2px solid var(--pvf-fg);
	outline-offset: 2px;
}

:is(#pvf, .frm_forms) :focus:not(:focus-visible) {
	outline: none;
}

/* Formidable's utility classes, needed with its stylesheet switched off */
:is(#pvf, .frm_forms) :is(.frm_screen_reader, .frm_hidden_container > .frm_primary_label) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:is(#pvf, .frm_forms) :is(.frm_hidden, .frm_none_container > .frm_primary_label, .frm_verify, .frm_form_title, .frm_required) {
	display: none;
}

/* -------------------------------------------------------------------------
   Layout. Formidable's 12-column field grid, one field per row until the
   form is 28rem wide.
   ---------------------------------------------------------------------- */

:is(#pvf, .frm_forms) .frm_fields_container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--pvf-row) var(--pvf-gutter);
}

:is(#pvf, .frm_forms) .frm_fields_container > * {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Side-by-side widths apply once the form itself is 28rem wide, so the
   8-column form on a 480px phone in landscape keeps one field per row */
:is(#pvf, .frm_forms) {
	container-type: inline-size;
}

@container (width >= 28rem) {

	:is(#pvf, .frm_forms) .frm_fields_container > .frm_half { grid-column: auto / span 6; }
	:is(#pvf, .frm_forms) .frm_fields_container > .frm_third { grid-column: auto / span 4; }
	:is(#pvf, .frm_forms) .frm_fields_container > .frm_two_thirds { grid-column: auto / span 8; }
	:is(#pvf, .frm_forms) .frm_fields_container > .frm_fourth { grid-column: auto / span 3; }
	:is(#pvf, .frm_forms) .frm_fields_container > .frm_three_fourths { grid-column: auto / span 9; }
	:is(#pvf, .frm_forms) .frm_fields_container > .frm_first { grid-column-start: 1; }
}

:is(#pvf, .frm_forms) .frm_form_field {
	position: relative;
	margin: 0;
}

/* Section headings: an HTML field holding <h2 class="pv-fh">. Sections are
   space-xl apart and the heading sits space-sm above its first field. */
/* Formidable prints its hidden inputs first, so "not the first field" is
   written as "follows another field" */
:is(#pvf, .frm_forms) .frm_form_field ~ .frm_form_field:has(.pv-fh:not(.pv-fh--sm)),
:is(#pvf, .frm_forms) .frm_form_field ~ .frm_form_field.pv-picker {
	margin-block-start: calc(var(--pvf-space-xl) - var(--pvf-row));
}

:is(#pvf, .frm_forms) .pv-fh {
	margin-block-end: max(0px, var(--pvf-space-sm) - var(--pvf-row));
	font-family: inherit;
	font-size: var(--pvf-h2);
	font-weight: 400;
	line-height: calc(1em + .5rem);
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
	color: var(--pvf-fg);
}

/* Smaller headings ("Privacy policy", "Marketing"): 16px, emphasis weight */
:is(#pvf, .frm_forms) .pv-fh--sm {
	margin-block: .5rem 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

/* Fine print in an HTML field */
:is(#pvf, .frm_forms) .pv-micro {
	font-size: .75rem;
	line-height: 1.667;
	letter-spacing: .02em;
	color: var(--pvf-fg-2);
}

:is(#pvf, .frm_forms) .pv-micro + .pv-micro {
	margin-block-start: .5rem;
}

/* -------------------------------------------------------------------------
   Labels, descriptions and messages
   ---------------------------------------------------------------------- */

:is(#pvf, .frm_forms) .frm_primary_label {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pvf-fg);
}

:is(#pvf, .frm_forms) .frm_description {
	margin-block-start: .25rem;
	font-size: .75rem;
	line-height: 1.667;
	letter-spacing: .02em;
	color: var(--pvf-fg-2);
}

:is(#pvf, .frm_forms) .frm_error {
	margin-block-start: .25rem;
	font-size: .75rem;
	line-height: 1.667;
	letter-spacing: .02em;
	color: var(--pvf-red);
}

/* Volvo's inline message: the form-level error and the thank-you message */
:is(#pvf, .frm_forms) :is(.frm_error_style, .frm_message) {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0 0 var(--pvf-row);
	padding: 1rem;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pvf-fg);
	background-color: var(--pvf-red-bg);
}

:is(#pvf, .frm_forms) .frm_message {
	background-color: var(--pvf-green-bg);
}

/* -------------------------------------------------------------------------
   Text fields, textarea and select
   ---------------------------------------------------------------------- */

:is(#pvf, .frm_forms) :is(input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="password"], [type="search"], [type="date"]), textarea, select) {
	--pvf-ring: var(--pvf-fg-3);
	--pvf-ring-w: 1px;
	--pvf-field: var(--pvf-bg);

	display: block;
	width: 100%;
	max-width: 100%;
	height: 3rem;
	margin: 0;
	padding: .75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--pvf-fg);
	background-color: var(--pvf-field);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 var(--pvf-ring-w) var(--pvf-ring);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition: box-shadow var(--pvf-dur) ease;
}

:is(#pvf, .frm_forms) textarea {
	height: auto;
	min-height: 8.5rem;
	line-height: 1.5;
	resize: vertical;
}

:is(#pvf, .frm_forms) select {
	padding-inline-end: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M1.1465 4.6465a.5.5 0 0 1 .707 0L8 10.7929l6.1464-6.1464a.5001.5001 0 0 1 .7072.707L8 12.2072 1.1465 5.3536a.5.5 0 0 1 0-.7072'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem 1rem;
	cursor: pointer;
}

:is(#pvf, .frm_forms) :is(input, textarea)::placeholder {
	color: var(--pvf-fg-2);
	opacity: 1;
}

:is(#pvf, .frm_forms) :is(input, textarea, select):focus {
	--pvf-ring: var(--pvf-fg);
	--pvf-ring-w: 2px;
}

/* Invalid stays red while focused, at the 2px focus width, as Volvo's */
:is(#pvf, .frm_forms) :is(input, textarea, select):is([aria-invalid="true"], .frm_blank_field *):not([type="checkbox"], [type="radio"]) {
	--pvf-ring: var(--pvf-red-ring);
	--pvf-field: var(--pvf-red-bg);
}

:is(#pvf, .frm_forms) :is(input, textarea, select):disabled {
	--pvf-ring: var(--pvf-ornament);
	--pvf-field: var(--pvf-gray);
	color: var(--pvf-fg-2);
}

@media (hover: hover) {

	:is(#pvf, .frm_forms) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):not([aria-invalid="true"], :disabled, :focus):hover {
		--pvf-ring: var(--pvf-fg);
	}
}

/* Floating label (Volvo's input-floating-label). pv-forms.js adds .pv-float
   to each text field, textarea and select that has a top label, and keeps
   data-blank on the control in step with its value. The label sits on the
   field's first line when the field is blank and not focused, and above the
   value at 75% otherwise. */
:is(#pvf, .frm_forms) .pv-float > .frm_primary_label {
	position: absolute;
	top: 0;
	inset-inline-start: 1rem;
	z-index: 1;
	width: calc(133% - 3rem);
	max-width: calc(133% - 3rem);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pvf-fg-2);
	pointer-events: none;
	transform-origin: 0 50%;
	transform: translateY(5px) scale(.75);
	transition: transform var(--pvf-dur) ease;
}

:is(#pvf, .frm_forms) .pv-float > :is(input, select) {
	height: 3.5rem;
	padding-block: 1.625rem .625rem;
}

:is(#pvf, .frm_forms) .pv-float > textarea {
	padding-block: 1.625rem .625rem;
}

:is(#pvf, .frm_forms) .pv-float:has(> :is(input, textarea, select)[data-blank]:not(:focus, :autofill)) > .frm_primary_label,
:is(#pvf, .frm_forms) .pv-float:has(> :is(input, textarea):placeholder-shown:not(:focus, :autofill)) > .frm_primary_label {
	width: calc(100% - 3rem);
	max-width: calc(100% - 3rem);
	transform: translateY(1rem) scale(1);
}

:is(#pvf, .frm_forms) .pv-float:has(> :is(input, textarea, select)[aria-invalid="true"]) > .frm_primary_label,
:is(#pvf, .frm_forms) .pv-float.frm_blank_field > .frm_primary_label {
	color: var(--pvf-red);
}

:is(#pvf, .frm_forms) .pv-float:has(> :is(input, textarea, select)[data-blank]:not(:focus, :autofill)) > .frm_primary_label {
	color: var(--pvf-fg-2);
}

:is(#pvf, .frm_forms) .pv-float > :is(input, textarea):not(:focus)::placeholder {
	color: transparent;
}

:is(#pvf, .frm_forms) .pv-float > select[data-blank]:not(:focus, :autofill) {
	color: transparent;
}

/* -------------------------------------------------------------------------
   Checkboxes and radios. 24px hit area pulled 4px out so the 16px box lines
   up with the field edge, as Volvo's.
   ---------------------------------------------------------------------- */

:is(#pvf, .frm_forms) .frm_opt_container {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) {
	margin: 0;
	padding: 0;
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) > label {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pvf-fg);
	cursor: pointer;
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input {
	--pvf-box: transparent;
	--pvf-box-ring: var(--pvf-fg-3);
	--pvf-mark: transparent;
	--pvf-halo: transparent;

	position: relative;
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 -.25rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: var(--pvf-halo);
	box-shadow: 0 0 0 0 var(--pvf-halo);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	overflow: hidden;
	transition: box-shadow var(--pvf-dur) ease, background-color var(--pvf-dur) ease;
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input::before,
:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input::after {
	content: "";
	grid-area: 1 / 1;
	place-self: center;
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input::before {
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--pvf-box-ring);
	border-radius: 0;
	background-color: var(--pvf-box);
	transition: border-color var(--pvf-dur) ease, background-color var(--pvf-dur) ease;
}

:is(#pvf, .frm_forms) .frm_checkbox input::after {
	width: .75rem;
	height: .75rem;
	background-color: var(--pvf-mark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M11.35 3.36 4.69 9.7.66 5.85l.69-.72L4.69 8.3l5.97-5.67.69.72Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M11.35 3.36 4.69 9.7.66 5.85l.69-.72L4.69 8.3l5.97-5.67.69.72Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(#pvf, .frm_forms) .frm_radio input::before {
	border-radius: 9999px;
}

:is(#pvf, .frm_forms) .frm_radio input::after {
	width: .5rem;
	height: .5rem;
	border-radius: 9999px;
	background-color: var(--pvf-mark);
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input:checked {
	--pvf-box: var(--pvf-fg);
	--pvf-box-ring: var(--pvf-fg);
	--pvf-mark: var(--pvf-bg);
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input:is([aria-invalid="true"], .frm_blank_field *):not(:checked) {
	--pvf-box-ring: var(--pvf-red-ring);
}

:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input:disabled {
	opacity: .32;
	cursor: default;
}

@media (hover: hover) {

	:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input:not(:checked, :disabled):hover {
		--pvf-box-ring: var(--pvf-fg);
		--pvf-halo: #0000000a;
		box-shadow: 0 0 0 .25rem var(--pvf-halo);
	}

	:is(#pvf, .frm_forms) :is(.frm_checkbox, .frm_radio) input:not(:checked, :disabled):hover:active {
		--pvf-halo: #0000001f;
	}
}

/* -------------------------------------------------------------------------
   Model picker. A radio field with the CSS layout class pv-picker and one
   option per model, saved values equal to the model page slugs. Each tile
   shows the side view keyed to its value. Volvo: 160px tiles on #f0f0f0,
   8px apart, name below in 16px, 2px black ring when chosen, 1px ring and
   a 4% overlay on hover.
   ---------------------------------------------------------------------- */

:is(#pvf, .frm_forms) .pv-picker .frm_opt_container {
	flex-flow: row wrap;
	gap: 1rem .5rem;
}

:is(#pvf, .frm_forms) .pv-picker .frm_radio {
	flex: none;
	width: 10rem;
}

:is(#pvf, .frm_forms) .pv-picker .frm_radio > label {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
}

:is(#pvf, .frm_forms) .pv-picker .frm_radio > label::before {
	--pvf-tile: var(--pvf-gray);
	--pvf-tile-ring: 0px;

	content: "";
	display: block;
	width: 10rem;
	height: 10rem;
	background-color: var(--pvf-tile);
	background-image: var(--pv-car, none);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 90%;
	box-shadow: inset 0 0 0 var(--pvf-tile-ring) var(--pvf-fg);
	transition: background-color var(--pvf-dur) ease, box-shadow var(--pvf-dur) ease;
}

/* The radio itself covers the tile, invisible, so it takes the click and
   the focus and still reads as a radio to assistive technology */
:is(#pvf, .frm_forms) .pv-picker .frm_radio input {
	position: absolute;
	inset: 0 auto auto 0;
	z-index: 1;
	width: 10rem;
	height: 10rem;
	margin: 0;
	border-radius: 0;
	opacity: 0;
	box-shadow: none;
}

:is(#pvf, .frm_forms) .pv-picker .frm_radio > label:has(input:checked)::before {
	--pvf-tile-ring: 2px;
}

:is(#pvf, .frm_forms) .pv-picker .frm_radio > label:has(input:focus-visible)::before {
	outline: 2px solid var(--pvf-fg);
	outline-offset: 2px;
}

:is(#pvf, .frm_forms) .pv-picker.frm_blank_field .frm_radio > label::before {
	--pvf-tile-ring: 1px;
	box-shadow: inset 0 0 0 1px var(--pvf-red-ring);
}

@media (hover: hover) {

	:is(#pvf, .frm_forms) .pv-picker .frm_radio > label:hover::before {
		--pvf-tile: color-mix(in lab, var(--pvf-gray), #000 4%);
	}

	:is(#pvf, .frm_forms) .pv-picker .frm_radio > label:hover:not(:has(input:checked))::before {
		--pvf-tile-ring: 1px;
	}
}

/* Side views, keyed to the option's saved value. Files in inc/forms/img/. */
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="ex30"]) { --pv-car: url("img/PV-model-picker-ex30.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="ex60"]) { --pv-car: url("img/PV-model-picker-ex60.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="ex90"]) { --pv-car: url("img/PV-model-picker-ex90.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="es90"]) { --pv-car: url("img/PV-model-picker-es90.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="ec40"]) { --pv-car: url("img/PV-model-picker-ec40.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="xc40-recharge"]) { --pv-car: url("img/PV-model-picker-xc40-recharge.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="xc60-plug-in-hybrid"]) { --pv-car: url("img/PV-model-picker-xc60-plug-in-hybrid.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="xc90-plug-in-hybrid"]) { --pv-car: url("img/PV-model-picker-xc90-plug-in-hybrid.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="xc40"]) { --pv-car: url("img/PV-model-picker-xc40.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="xc60"]) { --pv-car: url("img/PV-model-picker-xc60.webp"); }
:is(#pvf, .frm_forms) .pv-picker label:has(input[value="xc90"]) { --pv-car: url("img/PV-model-picker-xc90.webp"); }

/* With script: one sideways reel, models grouped by powertrain, groups split
   by a 1px rule with 24px either side, previous and next in the heading row
   (Volvo's icon-button-filled: 40px black circles, 8px apart). */
:is(#pvf, .frm_forms) .pv-picker[data-pv-ready] > .frm_primary_label {
	padding-inline-end: 6rem;
}

:is(#pvf, .frm_forms) .pv-picker[data-pv-ready] .frm_opt_container {
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

:is(#pvf, .frm_forms) .pv-picker[data-pv-ready] .frm_opt_container::-webkit-scrollbar {
	display: none;
}

/* Below 30rem the form is the full content width, so the reel runs out to
   the screen edges and its first tile still lines up with the fields */
@media (width < 30rem) {

	:is(#pvf, .frm_forms) .pv-picker[data-pv-ready] .frm_opt_container {
		margin-inline: calc(-1 * var(--pvf-inset));
		padding-inline: var(--pvf-inset);
		scroll-padding-inline: var(--pvf-inset);
	}
}

:is(#pvf, .frm_forms) .pv-pick-group {
	flex: none;
	padding-inline: 1.5rem;
	border-inline-start: 1px solid var(--pvf-ornament);
}

:is(#pvf, .frm_forms) .pv-pick-group:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

:is(#pvf, .frm_forms) .pv-pick-group:last-child {
	padding-inline-end: 0;
}

:is(#pvf, .frm_forms) .pv-pick-group__label {
	margin-block-end: .5rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pvf-fg-2);
	white-space: nowrap;
}

:is(#pvf, .frm_forms) .pv-pick-group__items {
	display: flex;
	gap: .5rem;
}

:is(#pvf, .frm_forms) .pv-pick-group__items .frm_radio {
	scroll-snap-align: start;
}

:is(#pvf, .frm_forms) .pv-pick-nav {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: flex;
	gap: .5rem;
}

:is(#pvf, .frm_forms) .pv-pick-nav[hidden] {
	display: none;
}

:is(#pvf, .frm_forms) .pv-pick-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	font: inherit;
	line-height: 1;
	color: var(--pvf-bg);
	background-color: var(--pvf-fg);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--pvf-dur) ease, opacity var(--pvf-dur) ease;
}

:is(#pvf, .frm_forms) .pv-pick-nav__btn svg {
	display: block;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

:is(#pvf, .frm_forms) .pv-pick-nav__btn:disabled {
	opacity: .32;
	cursor: default;
}

:is(#pvf, .frm_forms) .pv-pick-nav__btn:not(:disabled):active {
	background-color: color-mix(in hsl, var(--pvf-fg), var(--pvf-bg) 12%);
}

@media (hover: hover) {

	:is(#pvf, .frm_forms) .pv-pick-nav__btn:not(:disabled):hover {
		background-color: color-mix(in hsl, var(--pvf-fg), var(--pvf-bg) 12%);
	}

	:is(#pvf, .frm_forms) .pv-pick-nav__btn:not(:disabled):hover:active {
		background-color: color-mix(in hsl, var(--pvf-fg), var(--pvf-bg) 20%);
	}
}

/* The picker's label as the section heading (heading-2). Formidable prints
   it as a div or legend; Customize HTML can make it an h2, see the setup
   notes. */
:is(#pvf, .frm_forms) .pv-picker > .frm_primary_label {
	min-height: 2.5rem;
	margin-block-end: var(--pvf-space-sm);
	font-size: var(--pvf-h2);
	line-height: calc(1em + .5rem);
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Submit. Volvo's button-filled in accent blue, end-aligned.
   ---------------------------------------------------------------------- */

:is(#pvf, .frm_forms) .frm_submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1rem;
	margin-block-start: calc(2rem - var(--pvf-row));
}

:is(#pvf, .frm_forms) :is(.frm_button_submit, .frm_submit button, .frm_submit input[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: max-content;
	max-width: 100%;
	height: 3rem;
	margin: 0;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: #fff;
	background-color: var(--pvf-accent);
	box-shadow: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: background-color var(--pvf-dur) ease;
}

:is(#pvf, .frm_forms) :is(.frm_button_submit, .frm_submit button):active {
	background-color: color-mix(in hsl, var(--pvf-accent), #fff 12%);
	color: #fff;
}

:is(#pvf, .frm_forms) :is(.frm_button_submit, .frm_submit button):is(:disabled, .frm_loading_now),
:is(#pvf, .frm_forms) .frm_loading_form :is(.frm_button_submit, .frm_submit button) {
	opacity: .32;
	pointer-events: none;
}

@media (hover: hover) {

	:is(#pvf, .frm_forms) :is(.frm_button_submit, .frm_submit button):hover {
		background-color: color-mix(in hsl, var(--pvf-accent), #fff 12%);
		color: #fff;
	}

	:is(#pvf, .frm_forms) :is(.frm_button_submit, .frm_submit button):hover:active {
		background-color: color-mix(in hsl, var(--pvf-accent), #fff 20%);
	}
}

/* Below 30rem the button spans the column, as Volvo's button group does */
@media (width < 30rem) {

	:is(#pvf, .frm_forms) :is(.frm_button_submit, .frm_submit button) {
		flex: 1 0 40%;
	}
}

/* -------------------------------------------------------------------------
   Reduced motion and forced colours
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	:is(#pvf, .frm_forms),
	:is(#pvf, .frm_forms) *,
	:is(#pvf, .frm_forms) *::before,
	:is(#pvf, .frm_forms) *::after {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {

	:is(#pvf, .frm_forms) :is(input, textarea, select) {
		border: 1px solid CanvasText;
	}

	:is(#pvf, .frm_forms) .pv-picker .frm_radio > label:has(input:checked)::before {
		outline: 2px solid Highlight;
	}

	:is(#pvf, .frm_forms) :is(.frm_button_submit, .pv-pick-nav__btn) {
		border: 1px solid ButtonText;
	}
}