/* Demon Conversions Configurator (values from Figma 1920 frames) */

:root {
	--config-dark: #232323;
	--config-gold: #c4a75d;
	--config-gold-tint: rgba(196, 167, 93, 0.2);
	--config-border: #e1e1e1;
	--config-muted-on-light: rgba(35, 35, 35, 0.5);
	--config-muted-on-dark: rgba(255, 255, 255, 0.5);
	--config-divider-on-dark: rgba(255, 255, 255, 0.2);
	--config-back-btn: #3a3a3a;
	--config-none-bg: #eaeaea;
	--config-input-border: rgba(85, 85, 85, 0.3);
	--config-selected-ring: 4px;
	--config-font-heading: 'Oxanium', sans-serif;
	--config-font-body: 'Sarabun', sans-serif;
	--config-header-height: 4.75rem;
	--config-sidebar-width: 27.9375rem; /* Figma sidebar 447px */
	--config-control-height: 4rem; /* Site buttons are 64px tall */
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body.configurator-page {
	margin: 0;
	font-family: var(--config-font-body);
	font-size: 1rem;
	font-weight: 500;
	background: #ffffff;
	color: var(--config-dark);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--config-dark);
	color: #ffffff;
	clip: auto;
	z-index: 20;
}

/* Header */
.config-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	height: var(--config-header-height);
	padding: 0 1rem;
	background: #ffffff;
	border-bottom: 1px solid var(--config-border);
	z-index: 5;
}

@media (min-width: 960px) {
	.config-header {
		padding: 0 2rem;
	}
}

.config-header-logo img {
	display: block;
	width: auto;
	height: 1.5rem;
}

.config-header-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--config-dark);
	cursor: pointer;
}

/* Layout */
.config-layout {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--config-header-height));
	padding: 1.5rem 1rem 15rem;
}

@media (min-width: 960px) {
	.config-layout {
		flex-direction: row;
		align-items: stretch;
		gap: 2rem;
		padding: 2rem;
	}
}

.config-main {
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 960px) {
	.config-main {
		padding-top: 1.75rem;
	}
}

/* Sidebar: fixed bar on mobile, sticky column on desktop */
.config-sidebar {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	background: var(--config-dark);
	z-index: 10;
}

@media (min-width: 960px) {
	.config-sidebar {
		position: sticky;
		top: calc(var(--config-header-height) + 2rem);
		bottom: auto;
		left: auto;
		right: auto;
		flex: 0 0 var(--config-sidebar-width);
		align-self: flex-start;
		width: var(--config-sidebar-width);
		height: calc(100vh - var(--config-header-height) - 4rem);
		min-height: 40rem;
		padding: 2rem 1.5rem;
	}
}

.config-layout.is-quote .config-sidebar {
	display: none;
}

/* Mobile specs overlay: grows upward from the bar like an accordion,
   the progress header riding the top edge */
.config-sidebar.is-expanded {
	height: 100dvh;
	animation: config-specs-in 0.3s ease-out;
}

@keyframes config-specs-in {
	from {
		height: var(--collapsed-height, 16rem);
	}

	to {
		height: 100dvh;
	}
}

.config-sidebar.is-expanded .config-summary-model,
.config-sidebar.is-expanded .config-summary-name,
.config-sidebar.is-expanded .config-summary-meta,
.config-sidebar.is-expanded .config-choices {
	display: block;
}

.config-sidebar.is-expanded .config-progress-divider {
	display: block;
}

body.config-specs-open {
	overflow: hidden;
}

/* Progress stays fixed at the top; choices scroll behind it */
.config-sidebar-top {
	flex: none;
}

/* Scrollable content clips at the divider lines above and below it */
.config-sidebar-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.config-sidebar.is-expanded .config-sidebar-content {
	padding: 1.5rem 0;
}

@media (min-width: 960px) {
	.config-sidebar-content {
		padding: 1.5rem 0;
	}
}

/* Steps */
[data-step] {
	display: none;
}

[data-step].is-active {
	display: block;
}

[data-journey][hidden] {
	display: none;
}

.config-step-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Anchor for the compare button; a fieldset positions absolute children below its legend */
[data-step='trim'] {
	position: relative;
}

.config-step-title {
	display: block;
	width: 100%;
	margin: 0 0 2rem;
	padding: 0;
	font-family: var(--config-font-heading);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--config-dark);
	text-transform: uppercase;
}

@media (min-width: 960px) {
	.config-step-title {
		font-size: 3rem;
	}
}

/* Compare features button, right of the trim step title on desktop */
.config-compare-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--config-control-height);
	margin: -1rem 0 2rem;
	padding: 0 1.5rem;
	font-family: var(--config-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--config-gold);
	border: 0;
	color: #ffffff;
	cursor: pointer;
}

@media (min-width: 960px) {
	.config-compare-button {
		position: absolute;
		top: -0.125rem; /* Centres the 4rem button on the 3.75rem title line */
		right: 0;
		margin: 0;
	}

	/* Keeps the title clear of the absolute button on narrow desktops */
	[data-step='trim'] .config-step-title {
		padding-right: 17rem;
	}
}

/* Black, not --config-dark, or the mobile cards blend into it */
.config-compare-dialog {
	width: min(92.5rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 1rem 1rem 1.5rem;
	background: #000000;
	border: 0;
	overflow: auto;
}

@media (min-width: 960px) {
	.config-compare-dialog {
		padding: 1.5rem 2.5rem 2.5rem;
	}
}

.config-compare-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.config-compare-close {
	position: sticky;
	top: 0;
	display: block;
	margin-left: auto;
	padding: 0.5rem;
	background: none;
	border: 0;
	color: #ffffff;
	cursor: pointer;
}

/* The mobile card view's Configure/Enquire links make no sense mid-journey */
.config-compare-dialog .comparison-table-card-buttons {
	display: none;
}

/* Option grids */
.config-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* The sidebar arrives at 960 and squeezes the content, so columns
   step back down there before growing again */
@media (min-width: 768px) {
	.config-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.config-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1200px) {
	.config-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1680px) {
	.config-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.config-grid--swatches {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (min-width: 600px) {
	.config-grid--swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.config-grid--swatches {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.config-grid--swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.config-grid--swatches {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1680px) {
	.config-grid--swatches {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Option cards */
.config-card {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0.75rem;
	background: #ffffff;
	border: 1px solid var(--config-border);
	box-shadow: inset 0 0 0 0 var(--config-gold);
	transition: border-color 0.3s, box-shadow 0.3s;
	cursor: pointer;
}

.config-card input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.config-card:hover {
	border-color: var(--config-gold);
	box-shadow: inset 0 0 0 calc(var(--config-selected-ring) - 1px) var(--config-gold);
}

.config-card:has(input:focus-visible) {
	outline: 2px solid var(--config-gold);
	outline-offset: 2px;
}

/* Ring drawn inward over the padding zone, so content never shifts */
.config-card:has(input:checked) {
	background: var(--config-gold-tint);
	border-color: var(--config-gold);
	box-shadow: inset 0 0 0 calc(var(--config-selected-ring) - 1px) var(--config-gold);
}

.config-card[hidden] {
	display: none;
}

.config-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 428 / 306;
	margin-bottom: 0.75rem;
	overflow: hidden;
	background: var(--config-none-bg);
}

.config-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Engine icon cards */
.config-card-media--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
}

.config-card-media--icon img {
	width: 50%;
	height: auto;
	object-fit: contain;
}

.config-card-check {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	background: #ffffff;
	border: 1px solid var(--config-border);
}

.config-card:has(input:checked) .config-card-check {
	background: var(--config-gold);
	border-color: var(--config-gold);
}

.config-card-check svg {
	display: none;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	color: #ffffff;
}

.config-card:has(input:checked) .config-card-check svg {
	display: block;
}

.config-card-label {
	font-family: var(--config-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--config-dark);
	text-transform: uppercase;
}

.config-quote-honeypot {
	display: none;
}

/* Badge lands on the Next Step button, so it is hidden and Google's required
   attribution is shown as text by the submit button instead */
.grecaptcha-badge {
	visibility: hidden;
}

.config-quote-recaptcha {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--config-muted-on-light);
}

.config-quote-recaptcha a {
	color: inherit;
}

/* In flow on mobile (the fixed specs bar owns the bottom), pinned on desktop */
.config-disclaimer {
	margin: 2.5rem 0 0;
	font-size: 0.875rem;
	color: var(--config-muted-on-light);
}

@media (min-width: 960px) {
	.config-disclaimer {
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0;
		padding: 0.75rem 2rem;
		background: #ffffff;
	}
}

/* No option images on the quote step, and it would overlap the panels */
.config-layout.is-quote .config-disclaimer {
	display: none;
}

.config-card-description {
	font-size: 1rem;
	color: var(--config-muted-on-light);
}

/* Swatch cards */
.config-card--swatch {
	padding: 0.5rem;
}

.config-card--swatch .config-card-media {
	aspect-ratio: 1 / 1;
	background: var(--swatch, #ffffff);
}

.config-card--swatch .config-card-label {
	font-size: 0.875rem;
}

@media (min-width: 960px) {
	.config-card--swatch .config-card-label {
		font-size: 1rem;
	}
}

/* Parked centre-screen so the native picker pops up centred, not at the card */
.config-card .config-card-picker {
	position: fixed;
	top: calc(50% - 11rem);
	left: calc(50% - 7.5rem);
	width: 1px;
	height: 1px;
	padding: 0;
	background: none;
	border: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.config-card input:checked ~ .config-card-picker {
	visibility: visible;
}

/* Custom wrap colour wheel */
.config-card-wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70%;
	aspect-ratio: 1 / 1;
	background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	-webkit-mask: radial-gradient(closest-side, transparent 54%, #000000 55%);
	mask: radial-gradient(closest-side, transparent 54%, #000000 55%);
}

/* None cards */
.config-card--none .config-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--config-none-bg);
}

.config-card--none .config-card-media > svg {
	width: 40%;
	height: 40%;
	color: #9a9a9a;
}

/* Progress */
.config-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.5rem;
}

.config-progress-counter {
	margin: 0;
	font-family: var(--config-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
}

.config-specs-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	font-family: var(--config-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	text-transform: uppercase;
	background: none;
	border: 0;
	color: #ffffff;
	cursor: pointer;
}

.config-specs-toggle svg {
	transition: transform 0.3s;
}

.config-sidebar.is-expanded .config-specs-toggle svg {
	transform: rotate(45deg);
}

@media (min-width: 960px) {
	.config-specs-toggle {
		display: none;
	}
}

.config-progress-track {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

.config-progress-track span {
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	background: #ffffff;
}

.config-progress-track span.is-current {
	flex: 1 0 1.25rem;
	width: auto;
	background: var(--config-gold);
}

.config-progress-divider {
	display: block;
	margin: 1rem 0 0;
	border: 0;
	border-top: 1px solid var(--config-divider-on-dark);
}

@media (min-width: 960px) {
	.config-progress-divider {
		margin: 2rem 0 0;
	}
}

/* Bottom line only exists once the choices area is open */
.config-progress-divider--bottom {
	display: none;
	margin: 0;
}

.config-sidebar.is-expanded .config-progress-divider--bottom {
	display: block;
}

@media (min-width: 960px) {
	.config-progress-divider--bottom {
		display: block;
	}
}

@media (min-width: 960px) {
	.config-progress-divider {
		display: block;
	}
}

/* Summary */
.config-summary-model {
	margin: 0;
	font-family: var(--config-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--config-muted-on-dark);
	text-transform: uppercase;
}

.config-summary-name {
	margin: 0;
	font-family: var(--config-font-heading);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
	text-transform: uppercase;
}

@media (min-width: 960px) {
	.config-summary-name {
		font-size: 3rem;
	}
}

.config-summary-meta {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	color: var(--config-muted-on-dark);
}

.config-summary-meta p {
	margin: 0;
}

.config-choices {
	margin-top: 2rem;
}

/* Compact mobile sidebar keeps progress and nav only */
.config-sidebar .config-summary-model,
.config-sidebar .config-summary-name,
.config-sidebar .config-summary-meta,
.config-sidebar .config-choices {
	display: none;
}

@media (min-width: 960px) {
	.config-sidebar .config-summary-model,
	.config-sidebar .config-summary-name,
	.config-sidebar .config-summary-meta,
	.config-sidebar .config-choices {
		display: block;
	}
}

.config-choices-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--config-gold);
}

/* Stacked and left-aligned on mobile, two fixed columns from desktop */
.config-choices-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	padding: 0.75rem 0;
}

@media (min-width: 960px) {
	.config-choices-row {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0.5rem 0;
	}
}

.config-choices-row + .config-choices-row {
	border-top: 1px solid var(--config-divider-on-dark);
}

.config-choices-category {
	flex: 0 0 auto;
	margin: 0;
	font-size: 1rem;
	color: var(--config-muted-on-dark);
}

.config-choices-values {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-width: 0;
	gap: 0.375rem;
}

@media (min-width: 960px) {
	.config-choices-category,
	.config-choices-values {
		flex: 0 0 12.1875rem; /* Figma columns 195px */
	}
}

.config-choices-value {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	color: #ffffff;
}

.config-choices-thumb {
	flex: 0 0 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--swatch, transparent);
	border: 1px solid #ffffff;
	object-fit: cover;
}

.config-choices-thumb--wheel {
	background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

.config-choices-thumb--none {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--config-none-bg);
	color: #9a9a9a;
}

.config-choices-thumb--none svg {
	width: 60%;
	height: 60%;
}

/* Sidebar navigation */
.config-nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-top: 1rem;
}

@media (min-width: 960px) {
	.config-nav {
		margin-top: 2rem;
	}
}

/* Gold edge line fills on hover, mirroring the site's qode button */
.config-nav-back {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 0 0 var(--config-control-height);
	width: var(--config-control-height);
	height: var(--config-control-height);
	padding: 0;
	overflow: hidden;
	background: var(--config-back-btn);
	border: 0;
	color: #ffffff;
	cursor: pointer;
	z-index: 0;
}

/* display: flex above beats the UA [hidden] rule, hiding needs its own */
.config-nav-back[hidden] {
	display: none;
}

.config-nav-back::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.375rem;
	height: 100%;
	background: var(--config-gold);
	transition: width 0.4s;
	z-index: -1;
}

.config-nav-back:hover::after,
.config-nav-back:focus-visible::after {
	width: 100%;
}

/* Matches the site's qode button type: Oxanium 600, letter-spaced uppercase */
.config-nav-next {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	gap: 1rem;
	height: var(--config-control-height);
	padding: 0 1.5rem;
	font-family: var(--config-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--config-gold);
	border: 0;
	color: #ffffff;
	cursor: pointer;
}

.config-nav-next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.config-nav svg {
	display: block;
}

/* Quote step: spec first on mobile, both panels side by side on desktop */
.config-quote {
	width: 100%;
}

/* Full-bleed panels on mobile: black spec page, grey details page */
.config-layout.is-quote {
	padding: 0;
}

@media (min-width: 960px) {
	.config-layout.is-quote {
		padding: 2rem;
	}
}

@media (min-width: 960px) {
	.config-quote {
		display: flex;
		align-items: stretch;
		max-width: 71.125rem; /* Figma panels, 2 x 569px */
		margin: 0 auto;
	}

	.config-layout.is-quote .config-main {
		display: flex;
		align-items: center;
		padding-top: 0;
	}

	/* The step section must span the row so the panels can centre inside it */
	.config-layout.is-quote .config-main > [data-step] {
		width: 100%;
	}
}

.config-quote-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--config-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	text-box: trim-both cap alphabetic;
	color: var(--config-gold);
	text-transform: uppercase;
}

/* Details panel */
.config-quote-details {
	display: none;
	min-height: calc(100dvh - var(--config-header-height));
	padding: 1.5rem 1rem 8rem;
	background: var(--config-border);
}

.config-quote.is-details .config-quote-details {
	display: block;
}

@media (min-width: 960px) {
	.config-quote-details,
	.config-quote.is-details .config-quote-details {
		display: block;
		flex: 1 1 50%;
		min-height: 0;
		padding: 3rem;
	}

	.config-quote-details .config-quote-eyebrow {
		display: none;
	}
}

/* Spec panel */
.config-quote-spec {
	min-height: calc(100dvh - var(--config-header-height));
	padding: 1.5rem 1rem 8rem;
	background: var(--config-dark);
}

.config-quote.is-details .config-quote-spec {
	display: none;
}

@media (min-width: 960px) {
	/* The scroll wrapper is absolute, so the row is sized by the form and
	   long choice lists scroll inside the panel */
	.config-quote-spec,
	.config-quote.is-details .config-quote-spec {
		display: block;
		position: relative;
		flex: 1 1 50%;
		min-height: 0;
		padding: 0;
	}

	/* Header and divider stay fixed; only the choices scroll, under the line */
	.config-spec-scroll {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		padding: 3rem;
		overflow: hidden;
	}

	.config-spec-scroll .config-spec-header,
	.config-spec-scroll .config-spec-divider {
		flex: none;
	}

	.config-spec-scroll .config-spec-divider {
		margin: 0;
	}

	.config-quote-spec .config-choices {
		flex: 1 1 auto;
		min-height: 0;
		padding: 1.5rem 0;
		overflow-y: auto;
	}
}

/* Eyebrow, then image, then summary on mobile; image right of the stack on desktop */
.config-spec-header {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 960px) {
	.config-spec-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 1.5rem;
		row-gap: 0.5rem;
	}

	.config-spec-header .config-quote-eyebrow {
		grid-column: 1;
		align-self: end;
		margin: 0;
	}

	.config-spec-summary {
		grid-column: 1;
		align-self: start;
	}
}

.config-spec-image {
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (min-width: 960px) {
	.config-spec-image {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: center;
		width: 14.9375rem; /* Figma 239x171 */
		height: 10.6875rem;
	}
}

.config-quote-spec .config-summary-name {
	font-size: 2.25rem; /* Figma 36px */
}

.config-spec-divider {
	margin: 0 0 1.5rem;
	border: 0;
	border-top: 1px solid var(--config-divider-on-dark);
}

.config-quote-spec .config-choices {
	margin-top: 0;
}

@media (min-width: 960px) {
	.config-quote-spec .config-choices-values {
		flex-basis: 15rem; /* Figma values column 240px */
	}
}

/* Quote navs: fixed dark bars on mobile, in flow on desktop */
.config-quote .config-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 1rem;
	background: var(--config-dark);
	z-index: 10;
}

@media (min-width: 960px) {
	.config-quote .config-nav {
		position: static;
		margin-top: 3rem;
		padding: 0;
		background: none;
	}

	.config-spec-nav {
		display: none;
	}
}

.config-quote-title {
	margin: 0 0 2rem;
	font-family: var(--config-font-heading);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	text-box: trim-both cap alphabetic;
	color: var(--config-dark);
	text-transform: uppercase;
}

@media (min-width: 960px) {
	.config-quote-title {
		font-size: 2.25rem;
	}
}

.config-quote-field {
	display: block;
	margin-bottom: 0.75rem;
}

.config-quote input[type='text'],
.config-quote input[type='email'],
.config-quote input[type='tel'],
.config-quote textarea {
	width: 100%;
	padding: 1rem;
	font-family: var(--config-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	background: #ffffff;
	border: 1px solid var(--config-input-border);
	color: #1d1d1b;
}

.config-quote input::placeholder,
.config-quote textarea::placeholder {
	color: rgba(29, 29, 27, 0.3);
	opacity: 1;
}

.config-quote textarea {
	min-height: 6rem;
	resize: vertical;
}

.config-quote-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	font-family: var(--config-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	color: #1d1d1b;
}

.config-quote-consent input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--config-gold);
}

.config-quote-error {
	margin: 1rem 0 0;
	color: #8c020a;
}

/* Submitted page */
.config-submitted {
	max-width: 40rem;
	margin: 0 auto;
	padding: 4rem 1rem;
	text-align: center;
}

.config-quote-overline {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--config-gold);
	text-transform: uppercase;
}

.config-submitted-copy {
	margin: 0 0 3rem;
	font-size: 1.25rem;
}

.config-submitted-button {
	display: inline-flex;
	max-width: 24rem;
	text-decoration: none;
}

/* Exit dialog */
.config-exit-dialog {
	max-width: 26.25rem;
	padding: 2rem;
	text-align: center;
	border: 0;
}

.config-exit-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.config-exit-dialog h2 {
	margin: 0 0 0.5rem;
	font-family: var(--config-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
}

.config-exit-dialog p {
	margin: 0 0 1.5rem;
}

.config-exit-dialog-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.config-exit-dialog-actions a,
.config-exit-dialog-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.75rem;
	font-family: var(--config-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.config-exit-dialog-actions a {
	background: var(--config-back-btn);
	color: #ffffff;
}

.config-exit-dialog-actions button {
	background: var(--config-gold);
	color: #ffffff;
}