/**
 * Paint Protection Prediction Calculator — front end styles.
 */

.ppp-root {
	/* Brand palette. Override these in your theme to restyle. */
	--ppp-bg: #0C1E33;          /* page / modal backdrop */
	--ppp-card: #132F4C;        /* primary surface */
	--ppp-card-2: #1B3E63;      /* raised surface */
	--ppp-line: #2C5480;
	--ppp-line-soft: #21456B;
	--ppp-text: #FFFFFF;
	--ppp-muted: #C2D4E4;       /* 8.9:1 on --ppp-card */
	--ppp-dim: #9DB6CC;         /* 5.7:1 on --ppp-card */
	--ppp-accent: #C62828;      /* brand accent */
	--ppp-accent-2: #D93636;   /* 4.6:1 with white — safe as a gradient top stop */
	--ppp-accent-text: #FF7A7A; /* 5.4:1 on --ppp-card — accent-coloured TEXT on dark */
	--ppp-accent-ink: #FFFFFF;  /* 5.9:1 on --ppp-accent */

	/* Form control surfaces are light on purpose — see the Fields section. */
	--ppp-field-bg: #FFFFFF;
	--ppp-field-ink: #10263D;
	--ppp-field-placeholder: #5A7590;
	--ppp-field-border: #A9BFD3;

	--ppp-radius: 18px;
	--ppp-radius-sm: 12px;

	box-sizing: border-box;
	color: var(--ppp-text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.ppp-root *,
.ppp-root *::before,
.ppp-root *::after {
	box-sizing: inherit;
}

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

/* ---------- Launch button (modal mode) ---------- */

.ppp-launch {
	display: block;
	width: 100%;
	max-width: 520px;
	padding: 16px 22px;
	border: 0;
	border-radius: var(--ppp-radius-sm);
	background: linear-gradient(180deg, var(--ppp-accent-2), var(--ppp-accent));
	color: var(--ppp-accent-ink);
	cursor: pointer;
	text-align: center;
	transition: transform 0.18s ease, filter 0.18s ease;
}

.ppp-launch:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.ppp-launch__label {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.ppp-launch__sub {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	opacity: 0.85;
}

/* ---------- Shell ---------- */

.ppp-mode-modal .ppp-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	background: rgba(4, 6, 8, 0.82);
	backdrop-filter: blur(3px);
	animation: ppp-fade 0.22s ease;
}

.ppp-overlay[hidden] {
	display: none;
}

.ppp-shell {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	background: var(--ppp-bg);
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius);
	overflow: hidden;
}

.ppp-mode-modal .ppp-shell {
	margin-top: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.ppp-shell__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--ppp-line-soft);
}

.ppp-shell__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ppp-text);
}

.ppp-close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ppp-line);
	border-radius: 50%;
	background: transparent;
	color: var(--ppp-muted);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.ppp-close:hover {
	color: var(--ppp-text);
	border-color: var(--ppp-muted);
}

.ppp-close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.ppp-shell__body {
	padding: 22px;
}

/* ---------- Cards and steps ---------- */

.ppp-card {
	padding: 26px 24px 28px;
	background: var(--ppp-card);
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius);
}

.ppp-step[hidden] {
	display: none;
}

.ppp-step.is-active {
	animation: ppp-step-in 0.28s ease;
}

@keyframes ppp-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ppp-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------- Typography ---------- */

.ppp-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ppp-dim);
}

.ppp-eyebrow--center {
	text-align: center;
}

.ppp-q {
	margin: 0 0 6px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.22;
	color: #fff;
}

.ppp-q--center {
	text-align: center;
}

.ppp-sub {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--ppp-muted);
}

.ppp-sub--center {
	text-align: center;
}

.ppp-hint {
	margin: 10px 0 16px;
	font-size: 14px;
	color: var(--ppp-muted);
}

.ppp-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ppp-prompt__hand {
	font-size: 26px;
	animation: ppp-bob 1.8s ease-in-out infinite;
}

@keyframes ppp-bob {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppp-root * {
		animation: none !important;
		transition: none !important;
	}
}

.ppp-rule {
	height: 1px;
	margin: 26px 0;
	border: 0;
	background: var(--ppp-line-soft);
}

/* ---------- Progress ---------- */

.ppp-progress {
	margin-bottom: 18px;
}

.ppp-progress__track {
	height: 3px;
	border-radius: 3px;
	background: var(--ppp-line-soft);
	overflow: hidden;
}

.ppp-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--ppp-accent), var(--ppp-accent-2));
	border-radius: 3px;
	transition: width 0.35s ease;
}

.ppp-progress__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ppp-dim);
}

/* ---------- Options ---------- */

.ppp-options {
	display: grid;
	gap: 0 26px;
	margin: 6px 0 4px;
}

.ppp-options--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ppp-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 6px;
	border: 0;
	border-bottom: 1px solid var(--ppp-line-soft);
	background: transparent;
	color: var(--ppp-text);
	font-size: 17px;
	text-align: left;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease;
}

.ppp-option:hover {
	color: #fff;
	border-color: var(--ppp-accent);
	padding-left: 10px;
}

.ppp-option.is-selected {
	color: #fff;
	border-color: var(--ppp-accent-2);
}

.ppp-option.is-selected .ppp-option__label {
	font-weight: 700;
}

.ppp-option.is-selected::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--ppp-accent-2);
	box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.30);
}

.ppp-option__icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	color: var(--ppp-muted);
}

.ppp-option__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ppp-option--plain {
	color: var(--ppp-muted);
}

/* ---------- Selects ---------- */

.ppp-selects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.ppp-select {
	display: block;
	position: relative;
}

.ppp-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid #3D5F80;
	border-bottom: 2px solid #3D5F80;
	transform: rotate(45deg);
	pointer-events: none;
}

/*
 * Native <option> elements are rendered by the operating system, and on Windows,
 * Android and several Linux builds they inherit the select's own background and
 * colour. A dark select therefore produces an unreadable dropdown list on those
 * platforms. Light control surfaces with dark ink avoid the problem entirely and
 * keep every value, placeholder and option legible everywhere.
 */
.ppp-select select {
	width: 100%;
	padding: 15px 40px 15px 16px;
	border: 1px solid var(--ppp-field-border);
	border-radius: var(--ppp-radius-sm);
	background: var(--ppp-field-bg);
	color: var(--ppp-field-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ppp-select select:hover:not(:disabled) {
	border-color: var(--ppp-accent);
}

.ppp-select select:focus {
	border-color: var(--ppp-accent);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.32);
	outline: none;
}

/* Explicit colours for the dropdown list itself. */
.ppp-select select option,
.ppp-select select optgroup {
	background-color: #FFFFFF;
	color: #10263D;
}

.ppp-select select option:disabled {
	color: #7C8FA1;
}

/* The first option acts as a placeholder while nothing is chosen. */
.ppp-select select:invalid,
.ppp-select select.is-placeholder {
	color: var(--ppp-field-placeholder);
}

.ppp-select select:disabled {
	background: #E6EDF4;
	color: #566A7D;
	cursor: not-allowed;
	opacity: 1;
}

/* ---------- Swatches and pills ---------- */

.ppp-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.ppp-swatch {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	border-radius: 10px;
}

.ppp-swatch__chip {
	display: block;
	width: 54px;
	height: 46px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(200deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 60%),
		var(--ppp-swatch, #888);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ppp-swatch:hover .ppp-swatch__chip {
	transform: translateY(-2px);
}

.ppp-swatch.is-selected .ppp-swatch__chip {
	box-shadow: 0 0 0 2px var(--ppp-bg), 0 0 0 4px var(--ppp-accent-2);
}

.ppp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.ppp-pill {
	padding: 12px 22px;
	border: 1px solid var(--ppp-line);
	border-radius: 999px;
	background: var(--ppp-card-2);
	color: var(--ppp-text);
	font-size: 15px;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.ppp-pill:hover {
	border-color: var(--ppp-muted);
}

.ppp-pill.is-selected {
	border-color: var(--ppp-accent-2);
	background: rgba(198, 40, 40, 0.16);
	font-weight: 600;
}

/* ----------------------------------------------------------------
 * Mileage slider
 *
 * A range input has three separately styled parts and no shared syntax
 * between engines: WebKit and Blink use ::-webkit-slider-runnable-track
 * and ::-webkit-slider-thumb, Firefox uses ::-moz-range-track,
 * ::-moz-range-thumb and ::-moz-range-progress. A selector list mixing
 * vendor pseudo-elements is dropped wholesale by every engine, so each
 * one has to be declared in its own rule.
 *
 * The filled portion left of the thumb comes from --ppp-fill, which the
 * script updates as the value changes (Firefox gets it natively from
 * ::-moz-range-progress).
 * ---------------------------------------------------------------- */

.ppp-slider-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 10px 0 22px;
}

.ppp-slider {
	--ppp-fill: 50%;
	flex: 1 1 auto;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	touch-action: pan-y;
}

.ppp-slider:focus {
	outline: none;
}

/* --- Track --- */

.ppp-slider::-webkit-slider-runnable-track {
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--ppp-accent) 0%,
		var(--ppp-accent-2) var(--ppp-fill),
		var(--ppp-line) var(--ppp-fill),
		var(--ppp-line) 100%
	);
}

.ppp-slider::-moz-range-track {
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--ppp-line);
}

.ppp-slider::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ppp-accent), var(--ppp-accent-2));
}

/* --- Thumb --- */

.ppp-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	/* WebKit does not centre the thumb on the track; offset it by hand. */
	margin-top: -9px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--ppp-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	cursor: grab;
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.ppp-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--ppp-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	cursor: grab;
}

.ppp-slider:hover::-webkit-slider-thumb {
	transform: scale(1.08);
}

.ppp-slider:active::-webkit-slider-thumb {
	cursor: grabbing;
	transform: scale(1.14);
}

/* Focus ring has to be drawn on the thumb, not the input. */
.ppp-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(217, 54, 54, 0.45);
}

.ppp-slider:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba(217, 54, 54, 0.45);
}

/* --- Value readout and range ends --- */

.ppp-slider__value {
	flex: 0 0 auto;
	min-width: 118px;
	text-align: right;
	font-size: 25px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.ppp-slider-scale {
	display: flex;
	justify-content: space-between;
	margin: -14px 0 22px;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--ppp-dim);
}

@media (forced-colors: active) {
	.ppp-slider::-webkit-slider-runnable-track,
	.ppp-slider::-moz-range-track {
		background: ButtonBorder;
	}

	.ppp-slider::-webkit-slider-thumb,
	.ppp-slider::-moz-range-thumb {
		background: ButtonText;
	}
}

/* ---------- Vehicle preview ---------- */

.ppp-preview {
	margin-bottom: 18px;
}

.ppp-preview__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 8;
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius-sm);
	background: radial-gradient(circle at 50% 120%, #1B3E63 0%, #0A1B2C 70%);
	touch-action: none;
	user-select: none;
}

.ppp-preview__layer {
	position: absolute;
	inset: 0;
}

.ppp-preview__layer svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ppp-preview__layer--protected {
	clip-path: inset(0 0 0 50%);
}

.ppp-preview__name {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	padding: 7px 12px;
	border-radius: 8px;
	background: rgba(8, 10, 12, 0.86);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.ppp-preview__tag {
	position: absolute;
	bottom: 12px;
	z-index: 4;
	padding: 6px 12px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ppp-preview__tag--left {
	left: 12px;
	background: rgba(8, 10, 12, 0.86);
	color: var(--ppp-text);
}

.ppp-preview__tag--right {
	right: 12px;
	background: #fff;
	color: #10263D;
}

.ppp-preview__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 5;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	pointer-events: none;
}

.ppp-preview__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 6;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #10263D;
	cursor: ew-resize;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.ppp-preview__handle svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ppp-preview__caption {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--ppp-muted);
}

/* ---------- Fields ---------- */

.ppp-fields {
	display: grid;
	gap: 12px;
	margin-bottom: 6px;
}

.ppp-field input {
	width: 100%;
	padding: 17px 16px;
	border: 1px solid var(--ppp-field-border);
	border-radius: var(--ppp-radius-sm);
	background: var(--ppp-field-bg);
	color: var(--ppp-field-ink);
	font-size: 17px;
	font-weight: 500;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ppp-field input::placeholder {
	color: var(--ppp-field-placeholder);
	opacity: 1;
}

.ppp-field input:hover {
	border-color: var(--ppp-accent);
}

.ppp-field input:focus {
	border-color: var(--ppp-accent);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.32);
	outline: none;
}

/* Chrome and Safari autofill otherwise repaint the field with their own colours. */
.ppp-field input:-webkit-autofill,
.ppp-field input:-webkit-autofill:hover,
.ppp-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ppp-field-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--ppp-field-bg) inset;
	caret-color: var(--ppp-field-ink);
}

/* Field labels sit on the dark surface. */
.ppp-field label,
.ppp-field > span:first-child {
	color: var(--ppp-muted);
}

.ppp-consent {
	display: flex;
	gap: 10px;
	font-size: 13px;
	color: var(--ppp-muted);
	line-height: 1.5;
}

.ppp-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.ppp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Buttons ---------- */

.ppp-cta {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 17px 20px;
	border: 0;
	border-radius: var(--ppp-radius-sm);
	background: linear-gradient(180deg, var(--ppp-accent-2), var(--ppp-accent));
	color: var(--ppp-accent-ink);
	cursor: pointer;
	text-align: center;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.ppp-cta:hover {
	filter: brightness(1.07);
}

.ppp-cta:active {
	transform: translateY(1px);
}

.ppp-cta--bright {
	background: linear-gradient(180deg, #E14A4A, #B22222);
}

.ppp-cta--compact {
	margin-top: 0;
}

.ppp-cta__label {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.ppp-cta__sub {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	opacity: 0.9;
}

.ppp-cta[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ppp-actions {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

.ppp-actions--single {
	grid-template-columns: auto;
	margin-top: 16px;
}

.ppp-back {
	padding: 12px 18px;
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius-sm);
	background: transparent;
	color: var(--ppp-muted);
	font-size: 15px;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.ppp-back:hover {
	color: var(--ppp-text);
	border-color: var(--ppp-muted);
}

.ppp-footnote {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--ppp-muted);
	text-align: center;
}

.ppp-footnote__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--ppp-dim);
}

.ppp-footnote__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.ppp-error {
	min-height: 20px;
	margin: 12px 0 0;
	font-size: 14px;
	color: #FF9A9A;
}

.ppp-error:empty {
	margin: 0;
	min-height: 0;
}

/* ---------- Focus ---------- */

.ppp-root button:focus-visible,
.ppp-root select:focus-visible,
.ppp-root input:focus-visible,
.ppp-root a:focus-visible {
	outline: 2px solid var(--ppp-accent-2);
	outline-offset: 3px;
}

/* ---------- Results ---------- */

.ppp-results__kicker {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ppp-accent-text);
}

.ppp-results__headline {
	margin: 0 0 20px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}

.ppp-numbers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.ppp-number {
	padding: 22px 20px;
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius-sm);
	background: var(--ppp-card-2);
	text-align: center;
}

.ppp-number--protected {
	border-color: rgba(198, 40, 40, 0.55);
	background: linear-gradient(180deg, rgba(198, 40, 40, 0.16), rgba(23, 28, 33, 0.4));
}

.ppp-number__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ppp-muted);
}

.ppp-number__value {
	display: block;
	margin-top: 10px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.ppp-gap {
	margin-top: 14px;
	padding: 18px;
	border: 1px dashed var(--ppp-line);
	border-radius: var(--ppp-radius-sm);
	text-align: center;
}

.ppp-gap__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ppp-muted);
}

.ppp-gap__value {
	display: block;
	margin-top: 8px;
	font-size: 32px;
	font-weight: 800;
	color: var(--ppp-accent-text);
	font-variant-numeric: tabular-nums;
}

.ppp-section {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--ppp-line-soft);
}

.ppp-section__title {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}

.ppp-section p {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--ppp-muted);
}

.ppp-disclaimer {
	font-size: 13px !important;
	color: var(--ppp-dim) !important;
}

.ppp-reco {
	padding: 18px;
	border: 1px solid rgba(198, 40, 40, 0.45);
	border-radius: var(--ppp-radius-sm);
	background: rgba(198, 40, 40, 0.10);
}

.ppp-reco__name {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.ppp-failures {
	display: grid;
	gap: 12px;
	margin-top: 14px;
}

.ppp-failure {
	padding: 18px;
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius-sm);
	background: var(--ppp-card-2);
}

.ppp-failure__index {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ppp-dim);
}

.ppp-failure__title {
	margin: 6px 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}

.ppp-failure__range {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ppp-accent-text);
}

.ppp-includes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 18px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ppp-includes li {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	color: var(--ppp-muted);
}

.ppp-includes li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ppp-accent);
}

.ppp-book {
	display: block;
	margin-top: 18px;
	padding: 18px 20px;
	border-radius: var(--ppp-radius-sm);
	background: linear-gradient(180deg, #E14A4A, #B22222);
	color: var(--ppp-accent-ink);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.ppp-book:hover {
	filter: brightness(1.06);
	color: var(--ppp-accent-ink);
}

.ppp-note {
	margin-top: 12px;
	padding: 14px 16px;
	border-left: 2px solid var(--ppp-accent);
	background: rgba(255, 255, 255, 0.02);
	font-size: 14px;
	color: var(--ppp-muted);
}

.ppp-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.ppp-trust__item {
	flex: 1 1 150px;
	padding: 14px;
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius-sm);
	text-align: center;
}

.ppp-trust__item img {
	max-width: 100%;
	height: 38px;
	object-fit: contain;
	margin-bottom: 8px;
}

.ppp-trust__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.ppp-trust__desc {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--ppp-dim);
}

.ppp-debug {
	margin-top: 22px;
	padding: 16px;
	border: 1px dashed #4a5560;
	border-radius: var(--ppp-radius-sm);
	background: #0b0e11;
}

.ppp-debug pre {
	overflow-x: auto;
	margin: 8px 0 0;
	font-size: 12px;
	color: #9fb0bd;
	white-space: pre-wrap;
	word-break: break-word;
}

.ppp-model-tag {
	margin-top: 18px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ppp-dim);
}

.ppp-loading {
	display: grid;
	place-items: center;
	gap: 14px;
	padding: 60px 20px;
	text-align: center;
	color: var(--ppp-muted);
}

.ppp-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid #2b333b;
	border-top-color: var(--ppp-accent-2);
	border-radius: 50%;
	animation: ppp-spin 0.8s linear infinite;
}

@keyframes ppp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
	.ppp-shell__body {
		padding: 14px;
	}

	.ppp-card {
		padding: 20px 16px 22px;
	}

	.ppp-q {
		font-size: 22px;
	}

	.ppp-results__headline {
		font-size: 23px;
	}

	.ppp-selects,
	.ppp-options--2,
	.ppp-numbers,
	.ppp-includes {
		grid-template-columns: minmax(0, 1fr);
	}

	.ppp-options {
		gap: 0;
	}

	.ppp-number__value {
		font-size: 34px;
	}

	.ppp-slider-row {
		flex-wrap: wrap;
	}

	.ppp-slider__value {
		min-width: 0;
		width: 100%;
		text-align: left;
		font-size: 22px;
	}

	.ppp-swatch__chip {
		width: 44px;
		height: 40px;
	}

	.ppp-mode-modal .ppp-overlay {
		padding: 10px 8px;
	}
}

/* Recommended service price, shown separately from the damage forecast. */
.ppp-reco__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ppp-line);
}

.ppp-reco__price span {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ppp-muted);
}

.ppp-reco__price strong {
	font-size: 24px;
	font-weight: 600;
	color: var(--ppp-text);
}

/* ---------- The $99 consultation offer ---------- */

.ppp-offer {
	margin-top: 26px;
	padding: 26px 24px;
	border: 1px solid var(--ppp-line);
	border-top: 3px solid var(--ppp-accent);
	border-radius: var(--ppp-radius);
	background: linear-gradient(180deg, rgba(198, 40, 40, 0.10), rgba(19, 47, 76, 0.35));
}

.ppp-offer__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ppp-accent-text);
}

.ppp-offer__headline {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--ppp-text);
}

.ppp-offer__sub {
	margin: 0 0 20px;
	color: var(--ppp-muted);
}

.ppp-offer__block + .ppp-offer__block {
	margin-top: 18px;
}

.ppp-offer__label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ppp-dim);
}

.ppp-includes--compact {
	columns: 2;
	column-gap: 22px;
}

.ppp-includes--compact li {
	break-inside: avoid;
}

/* ---------- Booking call to action ---------- */

.ppp-booking {
	margin: 24px 0 6px;
}

.ppp-book {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 20px 24px;
	border: 0;
	border-radius: var(--ppp-radius-sm);
	background: linear-gradient(180deg, var(--ppp-accent-2), var(--ppp-accent));
	box-shadow: 0 10px 26px rgba(198, 40, 40, 0.32);
	color: var(--ppp-accent-ink);
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.ppp-book:hover,
.ppp-book:focus {
	color: var(--ppp-accent-ink);
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(198, 40, 40, 0.42);
}

.ppp-book:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.ppp-book__label {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .01em;
}

.ppp-book__price {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.92;
}

.ppp-booking__credit,
.ppp-booking__phone {
	margin: 12px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--ppp-muted);
}

/* ---------- What happens next ---------- */

.ppp-next {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: ppp-next;
}

.ppp-next li {
	position: relative;
	counter-increment: ppp-next;
	margin: 0;
	padding: 12px 0 12px 44px;
	border-top: 1px solid var(--ppp-line-soft);
	font-size: 15px;
	color: var(--ppp-muted);
}

.ppp-next li::before {
	content: counter(ppp-next);
	position: absolute;
	left: 0;
	top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ppp-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* ---------- Value without a project ---------- */

.ppp-noob {
	border-left: 3px solid var(--ppp-accent);
	padding-left: 18px;
}

/* ---------- Compatibility and responsive ---------- */

/* Safari below 15 has no aspect-ratio; keep the preview stage from collapsing. */
@supports not (aspect-ratio: 16 / 9) {
	.ppp-preview__stage {
		height: 0;
		padding-bottom: 50%;
	}
}

@media (max-width: 720px) {
	.ppp-offer {
		padding: 20px 16px;
	}

	.ppp-offer__headline {
		font-size: 20px;
	}

	.ppp-includes--compact {
		columns: 1;
	}

	.ppp-book {
		padding: 18px 16px;
	}

	.ppp-book__label {
		font-size: 17px;
	}

	/* Never let iOS zoom the page when a field takes focus. */
	.ppp-field input,
	.ppp-select select {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.ppp-preview__stage {
		aspect-ratio: 16 / 10;
	}

	.ppp-next li {
		padding-left: 38px;
		font-size: 14px;
	}
}

/* Windows high contrast / forced colours. */
@media (forced-colors: active) {
	.ppp-option.is-selected,
	.ppp-pill.is-selected,
	.ppp-swatch.is-selected {
		outline: 2px solid Highlight;
	}

	.ppp-book {
		border: 2px solid ButtonText;
	}
}

/* ==================================================================
 * Form control hardening
 *
 * This plugin drops into unknown themes, and themes style form
 * controls aggressively — usually with selectors of equal or higher
 * specificity than the plugin's own, loaded after the plugin's
 * stylesheet. The result is a select or input that inherits the
 * theme's colours instead of ours: dark text on dark, or the classic
 * white-on-white dropdown.
 *
 * The declarations below are deliberately scoped to .ppp-root and
 * deliberately forced. They cover only the properties that decide
 * whether text is legible, so a theme can still influence spacing and
 * typography, but it cannot make the field unreadable.
 *
 * -webkit-text-fill-color is set alongside every color: on WebKit and
 * Blink it takes precedence over color, so a theme setting it (common
 * in gradient-text and dark-mode helpers) makes text invisible no
 * matter what colour is declared.
 * ================================================================== */

.ppp-root .ppp-select > select,
.ppp-root .ppp-field > input:not([type="range"]):not([type="checkbox"]),
.ppp-root input[data-ppp-field]:not([type="range"]):not([type="checkbox"]),
.ppp-root select[data-ppp-field] {
	color: var(--ppp-field-ink) !important;
	-webkit-text-fill-color: var(--ppp-field-ink) !important;
	background-color: var(--ppp-field-bg) !important;
	background-image: none !important;
	border-color: var(--ppp-field-border);
	opacity: 1 !important;
	text-shadow: none !important;
	text-indent: 0 !important;
	text-transform: none !important;
	letter-spacing: normal;
	min-height: 54px;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	filter: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Long values ("Mercedes-Benz", "Grand Highlander") must not run under the chevron. */
.ppp-root .ppp-select > select {
	padding-right: 46px !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* The chevron is decoration; it must never sit on top of the value. */
.ppp-root .ppp-select::after {
	z-index: 1;
}

/* The dropdown list itself. Rendered by the OS, so state both colours. */
.ppp-root .ppp-select > select option {
	color: #10263D !important;
	-webkit-text-fill-color: #10263D !important;
	background-color: #FFFFFF !important;
	text-shadow: none !important;
}

/* Placeholder option and empty state read as a prompt, not a value. */
.ppp-root .ppp-select > select.is-placeholder {
	color: var(--ppp-field-placeholder) !important;
	-webkit-text-fill-color: var(--ppp-field-placeholder) !important;
}

.ppp-root .ppp-field > input:not([type="range"])::placeholder {
	color: var(--ppp-field-placeholder) !important;
	-webkit-text-fill-color: var(--ppp-field-placeholder) !important;
	opacity: 1 !important;
}

/* Disabled make/model before a year is chosen. iOS forces its own opacity. */
.ppp-root .ppp-select > select:disabled {
	color: #566A7D !important;
	-webkit-text-fill-color: #566A7D !important;
	background-color: #E6EDF4 !important;
	opacity: 1 !important;
}

/* Grid children need min-width:0 or a long option stretches the column. */
.ppp-root .ppp-selects > .ppp-select {
	min-width: 0;
}

/* Some themes hide the native focus ring; keep an explicit one. */
.ppp-root .ppp-select > select:focus-visible,
.ppp-root .ppp-field > input:not([type="range"]):focus-visible {
	outline: 2px solid var(--ppp-accent-2);
	outline-offset: 2px;
}

/*
 * Visible field labels. The first <option> still reads "Year" / "Make" /
 * "Model" as a prompt, but a prompt inside a narrow column can be clipped
 * or mistaken for a chosen value, so each control also carries a label
 * above it that never moves.
 */
.ppp-root .ppp-select__label {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ppp-muted);
}

/* The chevron is positioned against the label block, so push it clear of it. */
.ppp-root .ppp-select::after {
	top: auto;
	bottom: 23px;
	margin-top: 0;
}

/*
 * Consent checkbox. Excluded from the text-field hardening above (that block
 * would have forced a 54px white box onto it), so state its appearance here.
 */
.ppp-root .ppp-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
	border: 1px solid var(--ppp-field-border);
	border-radius: 4px;
	background: var(--ppp-field-bg);
	accent-color: var(--ppp-accent);
	cursor: pointer;
	appearance: auto;
	-webkit-appearance: checkbox;
}

.ppp-root .ppp-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ppp-accent-2);
	outline-offset: 2px;
}