/*!
 * "Get a Free Quote" — the Gravity Form, in the site's clothes.
 *
 * Loaded only on the pages that carry a form (see PAGE_ASSETS in
 * customise.py). quote-form.js supplies the behaviour; this file only deals
 * with how it looks.
 *
 * The card underneath is white — it is the one light surface on the contact
 * page and was authored that way — so the blue here is #0072ce, the fill blue,
 * not --apex-blue. Same reason as everywhere else in apex-revamp.css: white
 * lettering on a blue fill has to clear AA, and #0072ce does not.
 */

.gform_wrapper {
	--apex-form-blue: #0072ce;
	--apex-form-line: #d4d4d4;
	--apex-form-ink: #14181d;
	--apex-form-muted: #6b7280;
}

/* --------------------------------------------------------------------------
   Gravity's own theme variables, repointed
   The Orbital theme is driven end to end by custom properties, and the page
   sets them in an inline <style> scoped to
   `#gform_wrapper_1[data-form-index="0"].gform-theme` — which sits later in
   the document than this file and outranks it on specificity, so
   property-level overrides here lost every time. Repointing the variables
   instead reaches everything at once: buttons, focus rings, the checkbox
   accent, the progress fill, control borders and radii.

   !important on a custom property is honoured, and is what lets these win from
   a stylesheet the inline block outranks.

   #204ce5 -> #0072ce is the same swap made everywhere else in this project:
   Gravity's default blue is not the Apex blue, and on a white card the fill
   blue is the one that carries white lettering at AA.
   -------------------------------------------------------------------------- */
body .gform_wrapper.gform-theme,
body .gform_wrapper.gform-theme [data-parent-form] {
	--gf-color-primary: #0072ce !important;
	--gf-color-primary-rgb: 24, 118, 210 !important;
	--gf-color-primary-darker: #135ca8 !important;
	--gf-color-primary-lighter: #4a9ae6 !important;
	--gf-color-in-ctrl-primary: #0072ce !important;
	--gf-color-in-ctrl-primary-rgb: 24, 118, 210 !important;
	--gf-color-in-ctrl-primary-darker: #135ca8 !important;
	--gf-color-in-ctrl-primary-lighter: #4a9ae6 !important;

	--gf-radius: 8px !important;                    /* the site's button radius */
	--gf-ctrl-border-color: #d4d4d4 !important;
	--gf-ctrl-label-color-primary: #14181d !important;
	--gf-ctrl-label-color-secondary: #14181d !important;
}

/* --------------------------------------------------------------------------
   Progress bar
   Gravity ships this as a grey track with a blue fill and the percentage
   written inside it. The percentage reads as a stray number at this size, so
   it is hidden and the "Step 2 of 3" line above carries the same information
   in words.
   -------------------------------------------------------------------------- */
.gform_wrapper .gf_progressbar_title {
	font-family: var(--apex-body), sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--apex-form-muted);
	margin: 0 0 8px;
}

.gform_wrapper .gf_progressbar {
	height: 8px !important;
	border-radius: 999px !important;
	background: #e9e9e9 !important;
	overflow: hidden;
}

.gform_wrapper .gf_progressbar_percentage {
	height: 100% !important;
	border-radius: 999px;
	background: var(--apex-form-blue) !important;

	/* The width is set inline by quote-form.js as the step changes; the
	   transition is what makes that read as progress rather than as a jump. */
	transition: width 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.gform_wrapper .gf_progressbar_percentage span {
	display: none;
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	font-family: var(--apex-body), sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--apex-form-ink);
	margin-bottom: 8px;
	display: block;
}

.gform_wrapper .gfield_required_text {
	color: #b3261e;
	font-weight: 500;
	margin-left: 4px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	font-family: var(--apex-body), sans-serif;
	font-size: 1rem;
	color: var(--apex-form-ink);
	background: #ffffff;
	border: 1px solid var(--apex-form-line);
	border-radius: 8px;              /* 8px is the button radius, section 4 */
	padding: 12px 14px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--apex-form-blue);
	box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.18);
}

.gform_wrapper .gfield {
	margin-bottom: 22px;
}

.gform_wrapper .gform-field-label--type-sub {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--apex-form-muted);
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   The eight service checkboxes
   Two columns on desktop, one on mobile, and a real hit target on each row —
   they were a bare list of native boxes.
   -------------------------------------------------------------------------- */
.gform_wrapper .gfield_checkbox {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px 20px !important;
}

@media (max-width: 767px) {
	.gform_wrapper .gfield_checkbox {
		grid-template-columns: 1fr !important;
	}
}

.gform_wrapper .gchoice {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	border: 1px solid var(--apex-form-line) !important;
	border-radius: 8px !important;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

/* The whole row is the hit target, not just the words.
   Gravity renders the box and its label as siblings, so the label was the only
   thing that toggled the input and it is only as wide as its own text — 189px
   of a 327px row. The client was clicking "Vinyl Wrap" and getting nothing 40px
   to the right of it.

   The label grows a pseudo-element covering the whole .gchoice. A click on any
   part of a label toggles the input it names, and this label names it by `for`,
   so the entire row becomes the control. Nothing in the layout moves: the
   overlay is out of flow, and it sits above the fill below but under nothing
   else, since it is the last thing painted in the box. */
.gform_wrapper .gchoice label::before {
	content: "";
	position: absolute;
	inset: 0;
	cursor: pointer;
}

/* The fill, borrowed from the gallery cards (section 57 of apex-revamp.css):
   Apex blue opening out of the centre as a circle. Same 0.42s curve.

   72% is the radius that reaches a corner at any size — a circle's percentage
   radius resolves against `sqrt(w² + h²) / sqrt(2)`, so `sqrt(2)/2` covers the
   box whatever it measures. See section 57 for the arithmetic.

   `isolation: isolate` on the row and `z-index: -1` here put the fill above the
   row's own background and below its text and its checkbox. `overflow: hidden`
   clips the circle to the 8px corners. */
.gform_wrapper .gchoice::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--apex-form-blue);
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 0.42s cubic-bezier(0.32, 0.72, 0, 1);
	pointer-events: none;
}

.gform_wrapper .gchoice:has(input:checked)::after {
	clip-path: circle(72% at 50% 50%);
}

.gform_wrapper .gchoice:hover {
	border-color: var(--apex-form-blue);
	background: rgba(0, 114, 206, 0.04);
}

.gform_wrapper .gchoice:has(input:checked) {
	border-color: var(--apex-form-blue);
}

.gform_wrapper .gchoice input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--apex-form-blue);
	margin: 0;
}

/* On the fill the tick box goes white with the type. A blue `accent-color` on a
   blue ground is invisible, which would leave a selected row with no tick in
   it; white gives a white box with the browser's own contrasting check. */
.gform_wrapper .gchoice:has(input:checked) input[type="checkbox"] {
	accent-color: #ffffff;
}

.gform_wrapper .gchoice label {
	font-family: var(--apex-body), sans-serif;
	font-size: 0.9375rem;
	color: var(--apex-form-ink);
	margin: 0;
	cursor: pointer;
	transition: color 0.28s ease;
}

/* White on the blue, and it wipes on from the left rather than cross-fading.
   This replaces the black asked for a round earlier, and it is the better of
   the two on the numbers as well: white on #0072ce is 4.6:1 and passes AA for
   body text, where the black was 2.7:1 and did not.

   The plain rule comes first and is the fallback. Colour cannot be animated
   directionally — a transition on `color` fades the whole word at once — so
   the sweep is a two-stop gradient painted through the glyphs: white on the
   left half, the resting ink on the right, on a background twice the label's
   width. At rest the window sits over the right half and the word is ink; on
   `:checked` the background slides to 0 and the boundary travels left to right
   across the text.

   `-webkit-text-fill-color: transparent` rather than `color: transparent`, so
   the `color` above stays meaningful for anything that does not paint the
   gradient, and the whole thing is behind an @supports test for the same
   reason: if background-clip: text is not honoured, the label must not end up
   invisible. Every current browser has it, prefixed. */
.gform_wrapper .gchoice:has(input:checked) label {
	color: #ffffff;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.gform_wrapper .gchoice label {
		background-image: linear-gradient(
			90deg,
			#ffffff 50%,
			var(--apex-form-ink) 50%
		);
		background-size: 200% 100%;
		background-position: 100% 0;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		transition: background-position 0.42s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.gform_wrapper .gchoice:has(input:checked) label {
		background-position: 0 0;
	}

	@media (prefers-reduced-motion: reduce) {
		.gform_wrapper .gchoice label {
			transition: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper .gchoice::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Buttons
   Next and Submit are the filled primary; Previous is the quiet one beside
   it. Deliberately not the rotating ring from section 10 — that treatment is
   for the dark page, and on a white card a moving conic gradient reads as an
   error rather than as a highlight.
   -------------------------------------------------------------------------- */
.gform_wrapper .gform_page_footer,
.gform_wrapper .gform_footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_button,
.gform_wrapper [id^="gform_submit_button"] {
	font-family: var(--apex-display), sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border-radius: 8px !important;
	padding: 13px 26px !important;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease,
	            border-color 0.16s ease, transform 0.16s ease;
}

.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button,
.gform_wrapper [id^="gform_submit_button"] {
	background: var(--apex-form-blue) !important;
	color: #ffffff !important;
	border: 1px solid var(--apex-form-blue) !important;
}

.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper [id^="gform_submit_button"]:hover {
	background: #135ca8;
	border-color: #135ca8;
}

.gform_wrapper .gform_previous_button {
	background: transparent !important;
	color: var(--apex-form-ink) !important;
	border: 1px solid var(--apex-form-line) !important;
}

.gform_wrapper .gform_previous_button:hover {
	border-color: var(--apex-form-ink);
}

.gform_wrapper .gform_button:disabled,
.gform_wrapper [id^="gform_submit_button"]:disabled {
	opacity: 0.55;
	cursor: default;
}

/* --------------------------------------------------------------------------
   The parts quote-form.js adds
   -------------------------------------------------------------------------- */
.apex-quote-counter {
	font-family: var(--apex-body), sans-serif;
	font-size: 0.75rem;
	color: var(--apex-form-muted);
	margin-top: 6px;
}

.apex-quote-error {
	font-family: var(--apex-body), sans-serif;
	font-size: 0.8125rem;
	color: #b3261e;
	margin-top: 6px;
}

.gform_wrapper .apex-quote-invalid input,
.gform_wrapper .apex-quote-invalid select,
.gform_wrapper .apex-quote-invalid textarea {
	border-color: #b3261e;
}

.apex-quote-failure {
	font-family: var(--apex-body), sans-serif;
	font-size: 0.9375rem;
	color: #b3261e;
	margin-top: 18px;
}

.apex-quote-confirm {
	font-family: var(--apex-heading), sans-serif;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--apex-form-ink);
	border-left: 4px solid var(--apex-form-blue);
	padding: 20px 0 20px 22px;
}