/* ==========================================================================
   Scrapping A Car — Quote Funnel CSS
   v3.7.5

   Every selector in this file is scoped under .smc-quote-page. Nothing here
   can reach the homepage, header, footer or any other inner page.

   Enqueue: the plugin loads this automatically on the Quote page only.
   Do not paste it into Elementor Custom CSS or the theme stylesheet.

   Colours are taken from the existing site theme (navy / bright blue /
   white / light blue-grey) and are declared once as custom properties on
   .smc-quote-page so they can be retuned in one place.
   ========================================================================== */

.smc-quote-page {
	--smcq-navy: #0b2545;
	--smcq-blue: #1273eb;
	--smcq-blue-dark: #0d5cc0;
	--smcq-blue-tint: #eaf2fd;
	--smcq-grey-bg: #f4f7fb;
	--smcq-border: #d7e0ea;
	--smcq-text: #1c2b3a;
	--smcq-muted: #6b7c91;
	--smcq-white: #ffffff;

	/* The reference design uses rounded cards; the brief specified sharp
	   corners. Sharp wins by default. Set this to 10px for the reference look
	   and every card, button, pill and input follows. */
	--smcq-radius: 0px;
	--smcq-error: #b32d2e;
	--smcq-success: #1e7d47;

	--smcq-pad-desktop: 52px;
	--smcq-pad-tablet: 32px;
	--smcq-pad-mobile: 20px;

	background: var(--smcq-grey-bg);
	color: var(--smcq-text);
	font-size: 16px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Elementor container normalisation  (v3.7.4)

   A BOXED Elementor container renders as:

       <div class="e-con e-con-boxed smcq-hero">
         <div class="e-con-inner">  ...the actual children...  </div>
       </div>

   so every layout rule aimed at "the row of children" lands on that single
   wrapper instead, and a two-column grid collapses into one narrow column of
   one-word-per-line text. That is exactly what happened on staging.

   The template now sets every funnel container to full width, which stops the
   wrapper being emitted at all. This block makes the stylesheet correct even
   if a container is switched back to boxed in the editor: the wrapper is made
   transparent to layout by inheriting its parent's display and flow, and by
   spanning the full grid row.
   -------------------------------------------------------------------------- */

.smc-quote-page .e-con > .e-con-inner {
	display: inherit;
	grid-template-columns: inherit;
	grid-template-rows: inherit;
	grid-column: 1 / -1;
	gap: inherit;
	flex-direction: inherit;
	flex-wrap: inherit;
	align-items: inherit;
	justify-content: inherit;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Structural containers carry no chrome of their own; the theme's default
   container background and border must not paint behind them. */
.smc-quote-page .smcq-hero,
.smc-quote-page .smcq-vehicle-row,
.smc-quote-page .smcq-vehicle-photo,
.smc-quote-page .smcq-vehicle-id,
.smc-quote-page .smcq-vehicle-facts,
.smc-quote-page .smcq-ribbon-row,
.smc-quote-page .smcq-with-aside,
.smc-quote-page .smcq-split-help,
.smc-quote-page .smcq-aside,
.smc-quote-page .smcq-main,
.smc-quote-page .smcq-col-main,
.smc-quote-page .smcq-mini-body,
.smc-quote-page .smcq-mini-facts,
.smc-quote-page .smcq-mini-meta,
.smc-quote-page .smcq-reviews,
.smc-quote-page .smcq-trust-row,
.smc-quote-page .smcq-btn-row,
.smc-quote-page .smcq-tracker,
.smc-quote-page .smcq-tracker-stage,
.smc-quote-page .smcq-quote-intro,
.smc-quote-page .smcq-step-heading,
.smc-quote-page .smcq-success-figure {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Sharp corners everywhere inside the funnel.
   !important is load-bearing here and in the four rules that re-round
   specific shapes below. Elementor writes per-widget corner settings as
   .elementor-element-<id> .elementor-button { border-radius: … } (0,2,0),
   which outranks any universal selector, so this is the only way to hold a
   single corner style across widgets whose settings we do not control.
   Everywhere else in this file, specificity does the work instead. */
.smc-quote-page,
.smc-quote-page * {
	border-radius: var(--smcq-radius) !important;
	box-sizing: border-box;
}

.smc-quote-page .smcq-plate,
.smc-quote-page .smcq-tracker-badge,
.smc-quote-page .smcq-faq-toggle {
	border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   Layout: one centred white panel, 1050–1100px
   -------------------------------------------------------------------------- */

.smc-quote-page > .e-con-inner,
.smc-quote-page .smcq-quote-intro,
.smc-quote-page .smcq-tracker,
.smc-quote-page [id^="smcq-step-"] {
	width: 100%;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.smc-quote-page [id^="smcq-step-"] {
	background: var(--smcq-white);
	border: 1px solid var(--smcq-border);
	padding: var(--smcq-pad-desktop);
	margin-bottom: 32px;
}

.smc-quote-page .smcq-quote-intro {
	padding: 40px var(--smcq-pad-desktop) 8px;
	text-align: center;
}

.smc-quote-page .smcq-quote-intro h1 {
	font-family: "Poppins", sans-serif;
	font-size: 46px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--smcq-navy);
	margin: 0 0 10px;
}

.smc-quote-page .smcq-step-heading h2,
.smc-quote-page .smcq-state-panel h2 {
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 0;
}

.smc-quote-page .smcq-step-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--smcq-border);
}

/* Only the step the URL asks for is visible. */
.smc-quote-page .smcq-hidden {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Progress tracker — 5 wide stages
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-tracker {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 24px auto 28px;
	background: var(--smcq-white);
	border: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-tracker-stage {
	flex: 1 1 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 10px;
	position: relative;
	text-align: center;
}

.smc-quote-page .smcq-tracker-stage + .smcq-tracker-stage::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	bottom: 22px;
	width: 1px;
	background: var(--smcq-border);
}

.smc-quote-page .smcq-tracker-badge {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--smcq-grey-bg);
	border: 2px solid var(--smcq-border);
	color: var(--smcq-muted);
	font-weight: 700;
	font-size: 16px;
}

.smc-quote-page .smcq-tracker-badge h2,
.smc-quote-page .smcq-tracker-badge h3,
.smc-quote-page .smcq-tracker-badge h4 {
	margin: 0;
	font-size: 16px;
	line-height: 1;
	color: inherit;
}

/* The badge holds both a number and a checkmark; exactly one shows.
   Targeted by class, NOT by child position. Elementor wraps the children of a
   boxed container in an extra .e-con-inner div, so :first-child/:last-child
   matched that wrapper rather than the two headings and the swap silently did
   nothing on staging: completed steps kept showing their number instead of a
   checkmark, and pending badges rendered empty. */
.smc-quote-page .smcq-badge-tick { display: none; }
.smc-quote-page .smcq-tracker-done .smcq-badge-num { display: none; }
.smc-quote-page .smcq-tracker-done .smcq-badge-tick { display: block; }

.smc-quote-page .smcq-tracker-stage > h2,
.smc-quote-page .smcq-tracker-stage > h3,
.smc-quote-page .smcq-tracker-stage > h4 {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	color: var(--smcq-muted);
}

/* Future stages: muted (the default above). */

.smc-quote-page .smcq-tracker-active .smcq-tracker-badge {
	background: var(--smcq-blue);
	border-color: var(--smcq-blue);
	color: var(--smcq-white);
}

.smc-quote-page .smcq-tracker-active > h2,
.smc-quote-page .smcq-tracker-active > h3,
.smc-quote-page .smcq-tracker-active > h4 {
	color: var(--smcq-navy);
	font-weight: 600;
}

.smc-quote-page .smcq-tracker-done .smcq-tracker-badge {
	background: var(--smcq-navy);
	border-color: var(--smcq-navy);
	color: var(--smcq-white);
}

.smc-quote-page .smcq-tracker-done > h2,
.smc-quote-page .smcq-tracker-done > h3,
.smc-quote-page .smcq-tracker-done > h4 {
	color: var(--smcq-navy);
}

/* --------------------------------------------------------------------------
   Step 1 — vehicle facts
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-vehicle-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	margin: 24px 0;
}

.smc-quote-page .smcq-fact-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-fact-row > *:first-child {
	font-size: 16px;
	color: var(--smcq-muted);
	margin: 0;
	font-weight: 400;
}

.smc-quote-page .smcq-fact-row > *:last-child {
	font-size: 18px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 0;
	text-align: right;
}

.smc-quote-page .smcq-step-vehicle img {
	max-width: 420px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-quote-expiry {
	font-size: 16px;
	color: var(--smcq-muted);
	background: var(--smcq-blue-tint);
	border-left: 3px solid var(--smcq-blue);
	padding: 14px 18px;
	margin: 8px 0 24px;
}

/* --------------------------------------------------------------------------
   Step 2 — two-column details layout
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-split-help {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.smc-quote-page .smcq-help-panel {
	background: var(--smcq-grey-bg);
	border: 1px solid var(--smcq-border);
	padding: 24px;
}

.smc-quote-page .smcq-help-panel h2,
.smc-quote-page .smcq-help-panel h3 {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	color: var(--smcq-navy);
	margin: 0 0 12px;
}

.smc-quote-page .smcq-help-panel .elementor-accordion-title {
	font-size: 16px;
	color: var(--smcq-navy);
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.smc-quote-page .elementor-field-group > label,
.smc-quote-page .elementor-field-label,
.smc-quote-page .smcq-field-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin-bottom: 8px;
	display: block;
	/* The site theme uppercases form labels. Fine for "MILEAGE", unreadable
	   for a full-sentence option label, so it is neutralised inside the
	   funnel only. */
	text-transform: none;
	letter-spacing: normal;
}

.smc-quote-page .elementor-field-option label {
	text-transform: none;
	letter-spacing: normal;
}

.smc-quote-page input[type="text"],
.smc-quote-page input[type="email"],
.smc-quote-page input[type="tel"],
.smc-quote-page input[type="number"],
.smc-quote-page select,
.smc-quote-page textarea {
	min-height: 52px;
	width: 100%;
	font-size: 16px;
	padding: 12px 16px;
	border: 1px solid var(--smcq-border);
	background: var(--smcq-white);
	color: var(--smcq-text);
}

.smc-quote-page input:focus,
.smc-quote-page select:focus,
.smc-quote-page textarea:focus {
	outline: 3px solid var(--smcq-blue);
	outline-offset: 1px;
	border-color: var(--smcq-blue);
}

/* --------------------------------------------------------------------------
   Step 3 — selectable pill/card options (no raw radio controls)

   These selectors target Elementor's ACTUAL rendered form markup, not
   hand-written classes. Elementor outputs, for a radio field:

     .elementor-field-group.elementor-field-type-radio
       > label.elementor-field-label
       > .elementor-field-subgroup
           > .elementor-field-option
               > input[type=radio]
               > label

   The earlier version of this file styled invented .smc-question /
   .smc-options wrappers that Elementor never emits, so the pills fell back
   to raw browser radio controls.
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-offer-price {
	font-family: "Poppins", sans-serif;
	font-size: 52px;
	font-weight: 700;
	color: var(--smcq-navy);
	line-height: 1;
	margin: 0 0 8px;
}

.smc-quote-page .elementor-field-type-radio {
	margin: 0 0 28px;
}

.smc-quote-page .elementor-field-type-radio > .elementor-field-label {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin-bottom: 12px;
}

.smc-quote-page .elementor-field-type-radio .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Elementor gives every option in a NON-inline radio subgroup width:100%,
   which stacked the pills one per row on staging. Overridden here so they
   flow as a wrapped row; the template also sets the field to an inline list,
   so this is belt and braces. */
.smc-quote-page .elementor-field-subgroup .elementor-field-option {
	position: relative;
	display: inline-flex;
	width: auto;
	max-width: 100%;
	margin: 0;
	flex: 0 1 auto;
}

/* The real radio stays in the DOM and stays focusable for keyboard and
   screen-reader users. It is visually replaced by its own label, not
   display:none'd. */
.smc-quote-page .elementor-field-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.smc-quote-page .elementor-field-option label {
	display: inline-flex;
	width: auto;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 22px;
	font-size: 16px;
	font-weight: 500;
	color: var(--smcq-navy);
	background: var(--smcq-white);
	border: 2px solid var(--smcq-border);
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}

/* display:inline-block matters. If anything on the site overrides the label's
   inline-flex, this pseudo-element becomes an inline box, and width/height are
   ignored on inline non-replaced elements: on staging it collapsed to a ~4px
   sliver of border instead of an 18px check box. inline-block keeps its
   geometry whether or not the parent is a flex container. */
.smc-quote-page .elementor-field-option label::before {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 18px;
	min-width: 18px;
	height: 18px;
	flex: 0 0 18px;
	vertical-align: middle;
	border: 2px solid var(--smcq-border);
	background: transparent center center no-repeat;
}

.smc-quote-page .elementor-field-option label:hover {
	border-color: var(--smcq-blue);
	background: var(--smcq-blue-tint);
}

.smc-quote-page .elementor-field-option input[type="radio"]:checked + label {
	background: var(--smcq-blue);
	border-color: var(--smcq-blue);
	color: var(--smcq-white);
}

/* Visible checkmark on the selected option. */
.smc-quote-page .elementor-field-option input[type="radio"]:checked + label::before {
	border-color: var(--smcq-white);
	background-color: var(--smcq-white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231273eb' d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5-5L12.3 5.5z'/%3E%3C/svg%3E");
	background-size: 14px 14px;
}

/* Keyboard focus must be obvious even though the input itself is invisible. */
.smc-quote-page .elementor-field-option input[type="radio"]:focus-visible + label,
.smc-quote-page .elementor-field-option input[type="radio"]:focus + label {
	outline: 3px solid var(--smcq-navy);
	outline-offset: 2px;
}

/* Mileage: numeric input with a clear "miles" suffix. Elementor names the
   field group after the field's custom ID. */
.smc-quote-page .elementor-field-group-mileage {
	position: relative;
	max-width: 340px;
}

.smc-quote-page .elementor-field-group-mileage input {
	padding-right: 76px;
}

.smc-quote-page .elementor-field-group-mileage::after {
	content: "miles";
	position: absolute;
	right: 16px;
	bottom: 15px;
	font-size: 16px;
	color: var(--smcq-muted);
	pointer-events: none;
}

/* Step 1 vehicle image: Elementor wraps the <img>, so size the wrapper. */
.smc-quote-page .smcq-result-image-wrap img {
	max-width: 420px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border: 1px solid var(--smcq-border);
}

/* --------------------------------------------------------------------------
   Step 4 — collection slots

   v3.7.5: these rules previously targeted .smc-slot and .smcq-slots-list, but
   the JS renders .smcq-slot-day > .smcq-slot-day-label + .smcq-slot-row >
   button.smcq-slot-btn, with .smcq-slot-selected on the chosen one. Nothing
   matched, so the slots fell back to the theme's raw button styling. Class
   names now follow what renderSlots() actually emits.
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-slots-list { margin: 4px 0 8px; }

.smc-quote-page .smcq-slot-day { margin-bottom: 22px; }

.smc-quote-page .smcq-slot-day-label {
	font-family: "Poppins", sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 0 0 10px;
}

.smc-quote-page .smcq-slot-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.smc-quote-page .smcq-slot-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 12px 18px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	color: var(--smcq-navy);
	background: var(--smcq-white);
	border: 2px solid var(--smcq-border);
	cursor: pointer;
}

.smc-quote-page .smcq-slot-btn:hover:not([disabled]) {
	border-color: var(--smcq-blue);
	background: var(--smcq-blue-tint);
}

.smc-quote-page .smcq-slot-btn:focus-visible {
	outline: 3px solid var(--smcq-navy);
	outline-offset: 2px;
}

.smc-quote-page .smcq-slot-btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.smc-quote-page .smcq-slot-selected {
	background: var(--smcq-blue);
	border-color: var(--smcq-blue);
	color: var(--smcq-white);
}

.smc-quote-page .smcq-slot-btn-time {
	font-weight: 500;
	white-space: nowrap;
}

.smc-quote-page .smcq-slot-btn-check {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: inline-block;
	border: 2px solid var(--smcq-border);
	background: transparent center center no-repeat;
	background-size: 14px 14px;
}

.smc-quote-page .smcq-slot-selected .smcq-slot-btn-check {
	border-color: var(--smcq-white);
	background-color: var(--smcq-white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231273eb' d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5-5L12.3 5.5z'/%3E%3C/svg%3E");
}

.smc-quote-page .smcq-slot-remaining {
	font-size: 14px;
	color: var(--smcq-muted);
}

/* --------------------------------------------------------------------------
   Step 5 — summary
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-state-panel {
	text-align: center;
	padding: 8px 0;
}

.smc-quote-page .smcq-summary-card {
	max-width: 620px;
	margin: 28px auto;
	border: 1px solid var(--smcq-border);
	background: var(--smcq-grey-bg);
	text-align: left;
}

.smc-quote-page .smcq-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-summary-row:last-child { border-bottom: 0; }

.smc-quote-page .smcq-summary-row > *:first-child {
	font-size: 16px;
	font-weight: 400;
	color: var(--smcq-muted);
	margin: 0;
}

.smc-quote-page .smcq-summary-row > *:last-child {
	font-size: 17px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 0;
	text-align: right;
}

/* A summary row whose value never arrived is hidden by the JS rather than
   shown as an invented placeholder. */
.smc-quote-page .smcq-summary-row.smcq-empty { display: none; }

/* --------------------------------------------------------------------------
   Buttons: Back left, Continue right
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-btn-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-btn-row > *:only-child {
	margin-left: auto;
}

.smc-quote-page .elementor-button,
.smc-quote-page button[type="submit"],
.smc-quote-page .smcq-btn {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	border: 2px solid var(--smcq-blue);
	background: var(--smcq-blue);
	color: var(--smcq-white);
	cursor: pointer;
}

.smc-quote-page .elementor-button:hover,
.smc-quote-page .smcq-btn:hover {
	background: var(--smcq-blue-dark);
	border-color: var(--smcq-blue-dark);
}

.smc-quote-page .smcq-btn-secondary .elementor-button,
.smc-quote-page .smcq-btn-back {
	background: transparent;
	color: var(--smcq-navy);
	border-color: var(--smcq-border);
}

.smc-quote-page .smcq-btn-secondary .elementor-button:hover,
.smc-quote-page .smcq-btn-back:hover {
	background: var(--smcq-grey-bg);
	border-color: var(--smcq-navy);
}

.smc-quote-page .elementor-button:focus-visible,
.smc-quote-page .smcq-btn:focus-visible {
	outline: 3px solid var(--smcq-navy);
	outline-offset: 2px;
}

/* Loading / disabled: set by the plugin JS to block double submission. */
.smc-quote-page .elementor-button[disabled],
.smc-quote-page .smcq-btn[disabled],
.smc-quote-page .smcq-btn-loading {
	opacity: .6;
	cursor: not-allowed;
	pointer-events: none;
}

.smc-quote-page .smcq-btn-loading::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-left: 10px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50% !important;
	animation: smc-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.smc-quote-page .smcq-btn-loading::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Messages — exactly one, ever
   -------------------------------------------------------------------------- */

/* Elementor renders its own failure banner for the same submission the
   plugin already reports through .smcq-message. Suppressed inside the funnel
   steps only; forms elsewhere on the site are untouched. The plugin JS also
   injects this rule at runtime, so the funnel behaves correctly even if this
   stylesheet has not been flushed from cache yet. */
.smc-quote-page [id^="smcq-step-"] .elementor-message-danger {
	display: none;
}

.smc-quote-page .smcq-message {
	font-size: 16px;
	padding: 16px 20px;
	margin: 0 0 24px;
	border-left: 3px solid;
}

.smc-quote-page .smcq-message-error {
	color: var(--smcq-error);
	background: #fdf0f0;
	border-left-color: var(--smcq-error);
}

.smc-quote-page .smcq-message-info {
	color: var(--smcq-navy);
	background: var(--smcq-blue-tint);
	border-left-color: var(--smcq-blue);
}

.smc-quote-page .smcq-loading-text {
	font-size: 16px;
	color: var(--smcq-muted);
	padding: 20px 0;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.smc-quote-page [id^="smcq-step-"] { padding: var(--smcq-pad-tablet); }
	.smc-quote-page .smcq-quote-intro { padding: 32px var(--smcq-pad-tablet) 4px; }
	.smc-quote-page .smcq-quote-intro h1 { font-size: 36px; }
	.smc-quote-page .smcq-step-heading h2 { font-size: 26px; }
	.smc-quote-page .smcq-split-help { grid-template-columns: 1fr; gap: 28px; }
	.smc-quote-page .smcq-tracker-stage > h2,
	.smc-quote-page .smcq-tracker-stage > h3,
	.smc-quote-page .smcq-tracker-stage > h4 { font-size: 14px; }
	.smc-quote-page .smcq-offer-price { font-size: 44px; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.smc-quote-page [id^="smcq-step-"] { padding: var(--smcq-pad-mobile); }
	.smc-quote-page .smcq-quote-intro { padding: 24px var(--smcq-pad-mobile) 0; }
	.smc-quote-page .smcq-quote-intro h1 { font-size: 30px; }
	.smc-quote-page .smcq-step-heading h2 { font-size: 22px; }
	.smc-quote-page .smcq-vehicle-facts { grid-template-columns: 1fr; gap: 0; }
	.smc-quote-page .smcq-offer-price { font-size: 38px; }

	/* Tracker stays on one row: badges only, labels hidden. */
	.smc-quote-page .smcq-tracker-stage { padding: 14px 4px; }
	.smc-quote-page .smcq-tracker-stage > h2,
	.smc-quote-page .smcq-tracker-stage > h3,
	.smc-quote-page .smcq-tracker-stage > h4 {
		font-size: 11px;
		line-height: 1.2;
	}
	.smc-quote-page .smcq-tracker-badge { width: 32px; height: 32px; }

	.smc-quote-page .smcq-btn-row { flex-direction: column-reverse; align-items: stretch; }
	.smc-quote-page .smcq-btn-row > * { width: 100%; margin-left: 0; }
	.smc-quote-page .elementor-button,
	.smc-quote-page .smcq-btn { width: 100%; }
	.smc-quote-page .elementor-field-option,
	.smc-quote-page .elementor-field-option label { flex: 1 1 100%; }
	.smc-quote-page .elementor-field-group-mileage { max-width: none; }
	.smc-quote-page .smcq-slots-list { grid-template-columns: 1fr; }
	.smc-quote-page .smcq-summary-row { flex-direction: column; gap: 4px; }
	.smc-quote-page .smcq-summary-row > *:last-child { text-align: left; }
}

/* ==========================================================================
   v3.7.0 — reference layout

   Structure follows the supplied RemoveMyCar reference: a persistent vehicle
   card beside the step content, a prominent price panel with the primary
   action, an FAQ accordion under the vehicle, and a summary table on
   completion. Colours, type and copy are this site's own (navy / bright blue
   / white / light blue-grey, Poppins, sharp corners); nothing is taken from
   the reference's branding.
   ========================================================================== */

/* ---- Step 1: two-panel hero --------------------------------------------- */

.smc-quote-page .smcq-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
	gap: 32px;
	align-items: start;
}

.smc-quote-page .smcq-hero-main {
	border: 1px solid var(--smcq-border);
	padding: 28px;
	background: var(--smcq-white);
}

.smc-quote-page .smcq-hero-side {
	border: 1px solid var(--smcq-border);
	background: var(--smcq-grey-bg);
	padding: 32px 28px;
	text-align: center;
	position: sticky;
	top: 24px;
}

/* Number plate badge */
.smc-quote-page .smcq-plate {
	display: inline-block;
	background: #f5c400;
	color: #10233d;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 1px;
	line-height: 1;
	padding: 12px 18px 12px 34px;
	margin: 0;
	position: relative;
	border: 1px solid #d8ad00;
}

/* The blue GB flash on the left of a UK plate. */
.smc-quote-page .smcq-plate::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 22px;
	background: #0b3fa8;
}

.smc-quote-page .smcq-hero-plate-row {
	margin-bottom: 18px;
}

.smc-quote-page .smcq-price-cap,
.smc-quote-page .smcq-price-label {
	display: block;
	font-size: 16px;
	color: var(--smcq-muted);
	margin-bottom: 4px;
}

.smc-quote-page .smcq-offer-headline,
.smc-quote-page .smcq-success-price {
	font-family: "Poppins", sans-serif;
	font-size: 58px;
	line-height: 1;
	font-weight: 700;
	color: var(--smcq-blue);
	margin: 0 0 12px;
}

.smc-quote-page .smcq-price-note {
	font-size: 16px;
	color: var(--smcq-text);
	margin: 0 0 18px;
}

.smc-quote-page .smcq-hero-side .smcq-quote-expiry {
	text-align: left;
}

.smc-quote-page .smcq-hero-side .elementor-widget-button {
	width: 100%;
	margin-bottom: 12px;
}

.smc-quote-page .smcq-btn--block .elementor-button,
.smc-quote-page .smcq-btn--block a {
	width: 100%;
}

.smc-quote-page .smcq-btn--ghost .elementor-button {
	background: transparent;
	color: var(--smcq-navy);
	border-color: var(--smcq-border);
}

.smc-quote-page .smcq-btn--ghost .elementor-button:hover {
	background: var(--smcq-white);
	border-color: var(--smcq-navy);
}

/* ---- FAQ accordion under the vehicle ------------------------------------ */

.smc-quote-page .smcq-faq-title {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 28px 0 12px;
}

.smc-quote-page .smcq-faq .elementor-accordion-item {
	border: 1px solid var(--smcq-border);
	margin-bottom: 8px;
}

.smc-quote-page .smcq-faq .elementor-tab-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--smcq-navy);
	padding: 14px 18px;
}

.smc-quote-page .smcq-faq .elementor-tab-content {
	font-size: 16px;
	padding: 0 18px 16px;
}

/* ---- Trust strip -------------------------------------------------------- */

.smc-quote-page .smcq-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-trust-item {
	font-size: 15px;
	color: var(--smcq-muted);
	padding-left: 22px;
	position: relative;
	display: inline-block;
}

.smc-quote-page .smcq-trust-item::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--smcq-blue);
	font-weight: 700;
}

/* ---- Steps 2-4: vehicle card alongside the step content ----------------- */

.smc-quote-page .smcq-with-aside,
.smc-quote-page .smcq-split-help {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
	gap: 36px;
	align-items: start;
}

.smc-quote-page .smcq-aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.smc-quote-page .smcq-aside-card {
	border: 1px solid var(--smcq-border);
	background: var(--smcq-grey-bg);
	padding: 20px;
}

.smc-quote-page .smcq-aside-card .smcq-plate {
	font-size: 20px;
	padding: 9px 14px 9px 28px;
	margin-bottom: 14px;
}

.smc-quote-page .smcq-aside-card .smcq-plate::before { width: 17px; }

.smc-quote-page .smcq-mini-body {
	display: flex;
	gap: 14px;
	align-items: center;
}

.smc-quote-page .smcq-mini-body .smcq-result-image-wrap img {
	width: 96px;
	max-width: 96px;
	border: 0;
	margin: 0;
}

.smc-quote-page .smcq-mini-facts h4 {
	font-size: 16px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 0;
	line-height: 1.25;
}

.smc-quote-page .smcq-mini-meta {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.smc-quote-page .smcq-mini-meta h5 {
	font-size: 14px;
	font-weight: 400;
	color: var(--smcq-muted);
	margin: 0;
}

.smc-quote-page .smcq-mini-price {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-mini-price h3 {
	font-family: "Poppins", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--smcq-blue);
	margin: 0;
	line-height: 1;
}

.smc-quote-page .smcq-mini-price-label {
	font-size: 14px;
	color: var(--smcq-muted);
}

/* ---- Step 5: completion figure + summary table -------------------------- */

.smc-quote-page .smcq-success-figure {
	margin: 8px 0 20px;
}

.smc-quote-page .smcq-success-reg {
	font-size: 18px;
	font-weight: 600;
	color: var(--smcq-navy);
	margin: 0;
}

.smc-quote-page .smcq-summary-card {
	border-top: 3px solid var(--smcq-navy);
}

.smc-quote-page .smcq-btn-home,
.smc-quote-page #smcq-btn-home {
	margin-top: 8px;
}

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.smc-quote-page .smcq-hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.smc-quote-page .smcq-hero-side {
		position: static;
		order: -1;
	}
	.smc-quote-page .smcq-with-aside,
	.smc-quote-page .smcq-split-help {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.smc-quote-page .smcq-aside { position: static; }
	.smc-quote-page .smcq-offer-headline,
	.smc-quote-page .smcq-success-price { font-size: 48px; }
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
	.smc-quote-page .smcq-hero-main { padding: 18px; }
	.smc-quote-page .smcq-hero-side { padding: 22px 18px; }
	.smc-quote-page .smcq-plate { font-size: 20px; }
	.smc-quote-page .smcq-offer-headline,
	.smc-quote-page .smcq-success-price { font-size: 40px; }
	.smc-quote-page .smcq-trust-row { flex-direction: column; gap: 10px; }
	.smc-quote-page .smcq-mini-body { flex-direction: column; align-items: flex-start; }
	.smc-quote-page .smcq-mini-body .smcq-result-image-wrap img { width: 120px; max-width: 120px; }
}

/* ==========================================================================
   v3.7.1 — closer to the supplied reference

   Same arrangement and hierarchy as the reference: connected circular
   progress track, photo beside the plate, FAQ as tappable rows, a price panel
   whose figure dominates, a reviews strip, and a titled summary table.
   Colour, type and copy remain this site's own.
   ========================================================================== */

/* ---- Progress track: circles joined by a line ---------------------------- */

.smc-quote-page .smcq-tracker {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 8px auto 32px;
	position: relative;
}

.smc-quote-page .smcq-tracker-stage::before { display: none; }

.smc-quote-page .smcq-tracker-stage {
	position: relative;
	padding: 8px 6px 0;
}

/* The connecting line, drawn behind the badges. */
.smc-quote-page .smcq-tracker-stage:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 27px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--smcq-border);
	z-index: 0;
}

.smc-quote-page .smcq-tracker-done:not(:last-child)::after {
	background: var(--smcq-blue);
}

.smc-quote-page .smcq-tracker-badge {
	width: 38px;
	height: 38px;
	border-radius: 50% !important;
	position: relative;
	z-index: 1;
	background: var(--smcq-white);
	border: 2px solid var(--smcq-border);
	box-shadow: 0 0 0 4px var(--smcq-grey-bg);
}

.smc-quote-page .smcq-tracker-active .smcq-tracker-badge,
.smc-quote-page .smcq-tracker-done .smcq-tracker-badge {
	border-color: var(--smcq-blue);
}

.smc-quote-page .smcq-tracker-done .smcq-tracker-badge {
	background: var(--smcq-blue);
	color: var(--smcq-white);
}

.smc-quote-page .smcq-tracker-active .smcq-tracker-badge {
	background: var(--smcq-blue);
	color: var(--smcq-white);
}

/* ---- Step 1 card: ribbon, photo beside the plate ------------------------- */

.smc-quote-page .smcq-hero-main {
	position: relative;
	overflow: hidden;
	padding: 32px;
}

.smc-quote-page .smcq-ribbon-row { margin: 0; }

.smc-quote-page .smcq-ribbon {
	position: absolute;
	top: 20px;
	left: -46px;
	width: 190px;
	transform: rotate(-45deg);
	background: var(--smcq-navy);
	color: var(--smcq-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-align: center;
	padding: 7px 0;
	z-index: 2;
}

.smc-quote-page .smcq-vehicle-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	margin-bottom: 8px;
}

.smc-quote-page .smcq-vehicle-photo img {
	width: 100%;
	max-width: 300px;
	border: 0;
	margin: 0;
}

/* Spec lines, not a label/value table: the label column is dropped so the
   card reads "HONDA / ACCORD EX I-DTEC / 2012 / GREY" like the reference. */
.smc-quote-page .smcq-vehicle-id .smcq-vehicle-facts {
	display: block;
	margin: 14px 0 0;
}

.smc-quote-page .smcq-vehicle-id .smcq-fact-row {
	display: block;
	border: 0;
	padding: 0;
}

.smc-quote-page .smcq-vehicle-id .smcq-fact-row > *:first-child { display: none; }

.smc-quote-page .smcq-vehicle-id .smcq-fact-row > *:last-child {
	font-family: "Poppins", sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--smcq-navy);
	text-align: left;
	line-height: 1.35;
}

/* ---- FAQ as tappable rows with a chevron -------------------------------- */

.smc-quote-page .smcq-faq .elementor-accordion-item {
	border: 0;
	background: var(--smcq-grey-bg);
	margin-bottom: 10px;
}

.smc-quote-page .smcq-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
}

.smc-quote-page .smcq-faq .elementor-tab-title::after {
	content: "⌄";
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--smcq-blue);
	border-radius: 50% !important;
	color: var(--smcq-blue);
	font-size: 15px;
	line-height: 1;
}

.smc-quote-page .smcq-faq .elementor-tab-content {
	background: var(--smcq-white);
	border: 1px solid var(--smcq-border);
	border-top: 0;
}

/* ---- Price panel -------------------------------------------------------- */

.smc-quote-page .smcq-hero-side {
	padding: 40px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.smc-quote-page .smcq-offer-headline {
	font-size: 68px;
	margin-bottom: 18px;
}

.smc-quote-page .smcq-collect-line {
	font-size: 16px;
	color: var(--smcq-text);
	margin: 0 0 8px;
}

.smc-quote-page .smcq-collect-line.smcq-empty { display: none; }

.smc-quote-page .smcq-pin { color: var(--smcq-blue); }

.smc-quote-page .smcq-guarantee {
	font-size: 15px;
	font-weight: 600;
	color: var(--smcq-muted);
	margin: 0 0 20px;
}

/* Two-line primary action, as the reference's ACCEPT button. */
.smc-quote-page #smcq-btn-confirm-vehicle .elementor-button,
.smc-quote-page .smcq-btn-confirm-vehicle .elementor-button {
	flex-direction: column;
	gap: 2px;
	padding: 16px 24px;
	font-size: 19px;
	line-height: 1.1;
}

.smc-quote-page #smcq-btn-confirm-vehicle .elementor-button::after,
.smc-quote-page .smcq-btn-confirm-vehicle .elementor-button::after {
	content: "and arrange a collection";
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .4px;
	text-transform: uppercase;
	opacity: .85;
}

/* ---- Reviews strip ------------------------------------------------------ */

.smc-quote-page .smcq-reviews {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-stars {
	color: #f5c400;
	font-size: 22px;
	letter-spacing: 2px;
	line-height: 1;
}

.smc-quote-page .smcq-reviews-text {
	font-size: 16px;
	color: var(--smcq-navy);
	font-weight: 500;
}

.smc-quote-page .smcq-trust-row {
	justify-content: center;
	border-top: 0;
	margin-top: 6px;
	padding-top: 0;
}

/* ---- Two fields per row, as the reference form --------------------------
   v3.7.2: the row gap was 0, so every label sat flush against the input
   above it, and the submit button was being laid out as an ordinary grid
   cell — landing half-width in the left column, mid-row, next to a
   checkbox. Both fixed here.
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-main .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
	align-items: start;
}

.smc-quote-page .smcq-main .elementor-field-group {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Anything that is not a plain half-width input spans the full row.
   Matched by Elementor's field-type class AND, as a safety net, by any
   group that contains a button — because a submit group that is missing
   its type class is exactly how this broke. */
.smc-quote-page .smcq-main .elementor-field-type-radio,
.smc-quote-page .smcq-main .elementor-field-type-checkbox,
.smc-quote-page .smcq-main .elementor-field-type-textarea,
.smc-quote-page .smcq-main .elementor-field-type-acceptance,
.smc-quote-page .smcq-main .elementor-field-group-mileage,
.smc-quote-page .smcq-main .elementor-field-type-submit,
.smc-quote-page .smcq-main .elementor-field-group:has(.elementor-button),
.smc-quote-page .smcq-main .elementor-field-group:has(button[type="submit"]) {
	grid-column: 1 / -1;
}

/* ---- Step actions: Back on the left, Continue on the right ---------------
   Elementor renders a form's submit button inside the form, while the Back
   button is a sibling widget outside it, so they cannot share a row in the
   markup. The plugin's JS moves the Back button into the submit group at
   runtime and tags it .smcq-actions-merged; this styles the result as one
   row. If the JS has not run, the fallback below still separates the
   actions from the fields instead of leaving the button mid-grid.
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-main .elementor-field-type-submit,
.smc-quote-page .smcq-main .elementor-field-group:has(.elementor-button),
.smc-quote-page .smcq-main .elementor-field-group:has(button[type="submit"]) {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 10px;
	padding-top: 22px;
	border-top: 1px solid var(--smcq-border);
}

.smc-quote-page .smcq-actions-merged {
	justify-content: space-between;
}

.smc-quote-page .smcq-actions-merged > *:first-child {
	margin-right: auto;
}

/* Once merged, the original row is empty. The generic .smcq-hidden utility
   already hides it; no separate rule is needed. */

/* ---- Step 5: titled summary table --------------------------------------- */

.smc-quote-page .smcq-summary-card { border-top: 1px solid var(--smcq-border); }

.smc-quote-page .smcq-summary-head {
	background: var(--smcq-navy);
	padding: 12px 24px;
}

.smc-quote-page .smcq-summary-title {
	color: var(--smcq-white);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	text-align: left;
}

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

@media (max-width: 1024px) {
	.smc-quote-page .smcq-offer-headline { font-size: 52px; }
	.smc-quote-page .smcq-main .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.smc-quote-page .smcq-vehicle-row { grid-template-columns: 1fr; text-align: center; }
	.smc-quote-page .smcq-vehicle-photo img { margin: 0 auto; }
	.smc-quote-page .smcq-vehicle-id .smcq-fact-row > *:last-child { text-align: center; }
	.smc-quote-page .smcq-offer-headline { font-size: 44px; }
	.smc-quote-page .smcq-ribbon { display: none; }
	.smc-quote-page .smcq-reviews { flex-direction: column; gap: 6px; }
	.smc-quote-page .smcq-tracker-stage > h2,
	.smc-quote-page .smcq-tracker-stage > h3,
	.smc-quote-page .smcq-tracker-stage > h4 { font-size: 10px; }
}

/* ---- v3.7.3: button variants used by the template ----------------------- */

.smc-quote-page .smcq-btn--primary .elementor-button {
	background: var(--smcq-blue);
	border-color: var(--smcq-blue);
	color: var(--smcq-white);
}

.smc-quote-page .smcq-btn--primary .elementor-button:hover {
	background: var(--smcq-blue-dark);
	border-color: var(--smcq-blue-dark);
}

/* The slots step has no form widget, so its Back/Continue row is never
   merged into a submit group. It has to read as a real action row on its
   own. */
.smc-quote-page #smcq-step-slots .smcq-btn-row {
	justify-content: space-between;
}

/* A Back button that has been moved into the submit row must not stretch. */
.smc-quote-page .smcq-actions-merged .elementor-widget-button { width: auto; }

/* ---- Button colours -----------------------------------------------------

   !important is load-bearing here, and removing it in v3.7.6 was a mistake
   that put the blue Back buttons straight back on staging.

   I had assumed Elementor emits per-widget colours as
   .elementor-element-<id> .elementor-button (0,2,0), which these three-class
   selectors would outrank. It actually emits
   .elementor-element.elementor-element-<id> .elementor-button — also (0,3,0).
   That is a tie, and Elementor's generated post stylesheet is enqueued AFTER
   the plugin's, so source order hands the win to Elementor every time.
   Specificity cannot settle a tie; only !important can.

   Elementor's post CSS is also cached, so a colour removed from the template
   keeps being served until Regenerate CSS & Data is run. That is a second,
   independent reason these declarations have to be unconditional.
   ------------------------------------------------------------------------- */

.smc-quote-page .smcq-btn--ghost .elementor-button,
.smc-quote-page .smcq-btn--ghost .elementor-button:visited {
	background-color: transparent !important;
	color: var(--smcq-navy) !important;
	border: 2px solid var(--smcq-border) !important;
}

.smc-quote-page .smcq-btn--ghost .elementor-button:hover {
	background-color: var(--smcq-grey-bg) !important;
	border-color: var(--smcq-navy) !important;
}

.smc-quote-page .smcq-btn--primary .elementor-button,
.smc-quote-page .elementor-field-type-submit .elementor-button,
.smc-quote-page .elementor-field-type-submit button[type="submit"] {
	background-color: var(--smcq-blue) !important;
	color: var(--smcq-white) !important;
	border: 2px solid var(--smcq-blue) !important;
}

.smc-quote-page .smcq-btn--primary .elementor-button:hover,
.smc-quote-page .elementor-field-type-submit .elementor-button:hover,
.smc-quote-page .elementor-field-type-submit button[type="submit"]:hover {
	background-color: var(--smcq-blue-dark) !important;
	border-color: var(--smcq-blue-dark) !important;
}

/* Sentence case, not the theme's uppercase, so a full-sentence option label
   is readable. */
.smc-quote-page .elementor-widget-form .elementor-field-group > label.elementor-field-label,
.smc-quote-page .elementor-widget-form .elementor-field-group > label,
.smc-quote-page .elementor-field-group > label.elementor-field-label {
	text-transform: none;
	letter-spacing: normal;
	font-size: 16px;
}

/* The wrapper Elementor puts around a button must not carry a fill of its
   own: that is what produced a blue block with an outlined button inside it. */
.smc-quote-page .smcq-btn--ghost,
.smc-quote-page .smcq-btn--ghost .elementor-button-wrapper,
.smc-quote-page .smcq-btn--primary,
.smc-quote-page .smcq-btn--primary .elementor-button-wrapper {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ---- FAQ: use Elementor's own accordion icon ----------------------------
   The stylesheet was drawing a chevron with ::after while Elementor renders
   its own +/- icon in the same row, so both appeared, overlapping. Style
   Elementor's icon and draw nothing extra. */

.smc-quote-page .smcq-faq .elementor-tab-title::after { content: none; }

.smc-quote-page .smcq-faq .elementor-accordion-icon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--smcq-blue);
	border-radius: 50% !important;
	color: var(--smcq-blue);
	font-size: 13px;
	line-height: 1;
}

.smc-quote-page .smcq-faq .elementor-accordion-icon svg { width: 11px; height: 11px; }

/* ==========================================================================
   v3.7.9 — three fixes from the staging screenshots
   ========================================================================== */

/* ---- 1. The dark block behind the price panel was a SHADOW ---------------
   Not a background. The theme puts a large offset box-shadow on containers,
   which showed as a hard dark rectangle down and right of the price panel.
   v3.7.7 tried to fix it by pinning container backgrounds in the template;
   that was the wrong tool and it broke the tracker (see 2). Killing the
   shadow on funnel containers is the actual fix. */

.smc-quote-page .e-con,
.smc-quote-page .e-con-inner {
	box-shadow: none;
}

/* ---- 2. Tracker badges ---------------------------------------------------
   The number was white on a white circle because the badge's blue fill had
   been overridden. These rules are raised to four classes so nothing emitted
   per widget can tie with them, and the glyph colour is set on the heading
   inside the badge as well as on the badge itself — a heading widget's CSS
   class lands on its wrapper, never on the h1-h6, so colour set only on the
   wrapper is discarded by any theme rule that colours headings directly. */

.smc-quote-page .smcq-tracker .smcq-tracker-stage .smcq-tracker-badge {
	background: var(--smcq-white);
	border: 2px solid var(--smcq-border);
	color: var(--smcq-muted);
}

.smc-quote-page .smcq-tracker .smcq-tracker-active .smcq-tracker-badge,
.smc-quote-page .smcq-tracker .smcq-tracker-done .smcq-tracker-badge {
	background: var(--smcq-blue);
	border-color: var(--smcq-blue);
	color: var(--smcq-white);
}

.smc-quote-page .smcq-tracker .smcq-tracker-badge h1,
.smc-quote-page .smcq-tracker .smcq-tracker-badge h2,
.smc-quote-page .smcq-tracker .smcq-tracker-badge h3,
.smc-quote-page .smcq-tracker .smcq-tracker-badge h4,
.smc-quote-page .smcq-tracker .smcq-tracker-badge h5,
.smc-quote-page .smcq-tracker .smcq-tracker-badge h6 {
	color: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

/* ---- 3. Headings inside coloured panels ---------------------------------
   Same wrapper problem: "Summary details" was rendering in the theme's dark
   heading colour on a navy bar. Colour the heading element, not just the
   widget wrapper. */

.smc-quote-page .smcq-summary-head,
.smc-quote-page .smcq-summary-title,
.smc-quote-page .smcq-summary-title h1,
.smc-quote-page .smcq-summary-title h2,
.smc-quote-page .smcq-summary-title h3,
.smc-quote-page .smcq-summary-title h4,
.smc-quote-page .smcq-summary-title h5,
.smc-quote-page .smcq-summary-title h6 {
	color: var(--smcq-white);
}

.smc-quote-page .smcq-summary-title h1,
.smc-quote-page .smcq-summary-title h2,
.smc-quote-page .smcq-summary-title h3,
.smc-quote-page .smcq-summary-title h4,
.smc-quote-page .smcq-summary-title h5,
.smc-quote-page .smcq-summary-title h6 {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	margin: 0;
	text-align: left;
}

/* Panels keep their own surface; the shadow reset above does not touch it. */
.smc-quote-page .smcq-hero-main { background: var(--smcq-white); }
.smc-quote-page .smcq-hero-side,
.smc-quote-page .smcq-aside-card,
.smc-quote-page .smcq-help-panel { background: var(--smcq-grey-bg); }

/* The step heading icon. Previously .smc-icon-tile, which collided with the
   site's own icon tile component. */
.smc-quote-page .smcq-icon-tile .elementor-icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--smcq-blue-tint);
	color: var(--smcq-blue);
	font-size: 19px;
}
/* ==========================================================================
   Scrapping A Car — funnel mobile layer (v3.8.1)

   Append this to the END of the active funnel stylesheet, i.e. whichever
   of these exists first:

     1. wp-content/uploads/smc-funnel/smc-funnel.css   (override, wins)
     2. <child theme>/smc-funnel.css
     3. wp-content/plugins/smc-api-integration/assets/css/smc-funnel.css

   Everything here is inside @media (max-width: 767px) except the two step
   transition rules, which are inert on desktop. Nothing above 768px is
   touched, so the desktop design is unchanged.

   Do not paste this into Elementor Custom CSS: it belongs in the same
   cascade position as the rest of the funnel CSS, after the base rules it
   is meant to override.
   ========================================================================== */


/* --------------------------------------------------------------------------
   A. Step transition (all breakpoints)

   showStep() adds .smcq-step-enter to the step it reveals. The step is
   already visible and interactive before this class lands, so the fade is
   decoration on top of an instant swap, never a gate in front of it.
   -------------------------------------------------------------------------- */

.smc-quote-page .smcq-step-enter {
	animation: smcq-step-in .16s ease-out both;
}

@keyframes smcq-step-in {
	from { opacity: .35; transform: translateY(4px); }
	to   { opacity: 1;   transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.smc-quote-page .smcq-step-enter { animation: none; }
}


@media (max-width: 767px) {

	/* ----------------------------------------------------------------------
	   B. Kill horizontal overflow at source

	   Three separate causes on this page: the rotated .smcq-ribbon sitting
	   at left:-46px, Elementor's negative gutter margins on nested
	   containers, and long unbroken strings such as a registration or a
	   reference number. All three are contained here rather than papered
	   over with overflow-x on <body>, which would break position:sticky
	   elsewhere on the site.
	   -------------------------------------------------------------------- */

	.smc-quote-page {
		overflow-x: hidden;
		max-width: 100%;
	}

	.smc-quote-page > .e-con-inner,
	.smc-quote-page .smcq-funnel-step,
	.smc-quote-page .smcq-funnel-step > .e-con-inner {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Any nested container that inherited a negative gutter. */
	.smc-quote-page .smcq-hero,
	.smc-quote-page .smcq-with-aside,
	.smc-quote-page .smcq-split-help,
	.smc-quote-page .smcq-vehicle-row,
	.smc-quote-page .smcq-mini-body,
	.smc-quote-page .smcq-ribbon-row {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		min-width: 0;
	}

	/* Grid and flex children default to min-width:auto, which is what lets
	   a long word push the whole row wider than the viewport. */
	.smc-quote-page .smcq-funnel-step * {
		min-width: 0;
	}

	.smc-quote-page .smcq-plate,
	.smc-quote-page .smcq-summary-row,
	.smc-quote-page .smcq-summary-reference,
	.smc-quote-page .smcq-summary-address {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* The ribbon is the single worst offender and carries no information
	   the card does not already state. It stays hidden below 768px. */
	.smc-quote-page .smcq-ribbon { display: none; }
	.smc-quote-page .smcq-ribbon-row { display: none; }


	/* ----------------------------------------------------------------------
	   C. Progress tracker: one row, five stages, no wrap

	   flex: 1 1 0 with min-width:0 is what holds all five on one line. The
	   badge shrinks to 28px and the connector line is re-aimed at its new
	   centre (10px stage padding + 14px half-badge = 24px).
	   -------------------------------------------------------------------- */

	.smc-quote-page .smcq-tracker {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0;
		margin: 10px auto 22px;
		padding: 0;
		border: 0;
		background: transparent;
		max-width: 100%;
	}

	.smc-quote-page .smcq-tracker-stage {
		flex: 1 1 0;
		min-width: 0;
		gap: 6px;
		padding: 10px 2px 0;
		text-align: center;
	}

	/* The vertical divider from the boxed desktop tracker. */
	.smc-quote-page .smcq-tracker-stage + .smcq-tracker-stage::before {
		display: none;
	}

	.smc-quote-page .smcq-tracker-stage:not(:last-child)::after {
		top: 23px;
		height: 2px;
	}

	.smc-quote-page .smcq-tracker-badge {
		width: 28px;
		height: 28px;
		min-width: 28px;
		border-width: 2px;
		box-shadow: 0 0 0 3px var(--smcq-grey-bg);
		font-size: 12px;
	}

	.smc-quote-page .smcq-tracker-badge h2,
	.smc-quote-page .smcq-tracker-badge h3,
	.smc-quote-page .smcq-tracker-badge h4 {
		font-size: 12px;
		line-height: 1;
	}

	.smc-quote-page .smcq-tracker-done .smcq-badge-tick {
		font-size: 13px;
		line-height: 1;
	}

	/* Labels wrap to two lines rather than forcing the row wider. */
	.smc-quote-page .smcq-tracker-stage > h2,
	.smc-quote-page .smcq-tracker-stage > h3,
	.smc-quote-page .smcq-tracker-stage > h4 {
		font-size: 10px;
		line-height: 1.25;
		letter-spacing: 0;
		hyphens: auto;
		overflow-wrap: anywhere;
	}

	/* Under ~360px five labels stop being legible at any size. The numbered
	   badges alone still carry the position, so the labels go. */
	@media (max-width: 359px) {
		.smc-quote-page .smcq-tracker-stage > h2,
		.smc-quote-page .smcq-tracker-stage > h3,
		.smc-quote-page .smcq-tracker-stage > h4 {
			display: none;
		}
		.smc-quote-page .smcq-tracker-stage { padding-bottom: 4px; }
	}


	/* ----------------------------------------------------------------------
	   D. Vehicle card and main column: one full-width stack
	   -------------------------------------------------------------------- */

	.smc-quote-page .smcq-with-aside,
	.smc-quote-page .smcq-split-help,
	.smc-quote-page .smcq-hero {
		display: grid;
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.smc-quote-page .smcq-aside,
	.smc-quote-page .smcq-main,
	.smc-quote-page .smcq-col-main,
	.smc-quote-page .smcq-hero-main,
	.smc-quote-page .smcq-hero-side,
	.smc-quote-page .smcq-aside-card,
	.smc-quote-page .smcq-help-panel {
		width: 100%;
		max-width: 100%;
	}

	/* The summary card reads first on mobile: the visitor wants the price
	   and the vehicle confirmed before the form. */
	.smc-quote-page .smcq-aside { order: -1; }

	.smc-quote-page .smcq-aside-card { padding: 16px; }

	.smc-quote-page .smcq-mini-body {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.smc-quote-page .smcq-mini-body .smcq-result-image-wrap img {
		width: 96px;
		max-width: 96px;
		height: auto;
	}

	.smc-quote-page .smcq-mini-price { margin-top: 14px; }


	/* ----------------------------------------------------------------------
	   E. Form fields: single column, 48px minimum, no iOS zoom

	   font-size:16px on inputs is not cosmetic. Safari on iOS zooms the
	   viewport on focus for anything below 16px, and the page does not zoom
	   back out, which is the usual cause of a funnel that "goes sideways"
	   after the first tap.
	   -------------------------------------------------------------------- */

	.smc-quote-page .elementor-form-fields-wrapper,
	.smc-quote-page .smcq-main .elementor-form-fields-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.smc-quote-page .elementor-field-group {
		width: 100%;
		max-width: 100%;
		margin-bottom: 0;
	}

	.smc-quote-page input[type="text"],
	.smc-quote-page input[type="email"],
	.smc-quote-page input[type="tel"],
	.smc-quote-page input[type="number"],
	.smc-quote-page input[type="date"],
	.smc-quote-page select,
	.smc-quote-page textarea {
		width: 100%;
		min-height: 48px;
		height: auto;
		font-size: 16px;
	}

	.smc-quote-page textarea { min-height: 96px; }

	/* Radio and checkbox pills: a real 48px target, not an 18px box with
	   text beside it. */
	.smc-quote-page .elementor-field-option {
		width: 100%;
	}

	.smc-quote-page .elementor-field-option label {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 48px;
		padding: 10px 14px;
		width: 100%;
	}

	.smc-quote-page .elementor-field-option input[type="radio"],
	.smc-quote-page .elementor-field-option input[type="checkbox"] {
		width: 20px;
		height: 20px;
		min-width: 20px;
		flex-shrink: 0;
	}

	.smc-quote-page .elementor-field-type-acceptance label {
		align-items: flex-start;
		min-height: 44px;
		line-height: 1.45;
	}


	/* ----------------------------------------------------------------------
	   F. Action rows: Continue on top, Back underneath, both full width

	   Back is prepended into the submit group by mergeStepActions(), so in
	   DOM order it is first and the submit button second. column-reverse
	   puts the primary action above the secondary one, which is the right
	   way round for a thumb, without reordering the DOM or changing the
	   tab order rules the desktop layout depends on.
	   -------------------------------------------------------------------- */

	.smc-quote-page .smcq-btn-row,
	.smc-quote-page #smcq-step-slots .smcq-btn-row,
	.smc-quote-page .smcq-main .elementor-field-type-submit,
	.smc-quote-page .smcq-actions-merged {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		justify-content: flex-start;
		gap: 10px;
		width: 100%;
	}

	/* Desktop pins the merged Back button to the left with margin-right:auto
	   and width:auto. Both have to go once the row is a column. */
	.smc-quote-page .smcq-actions-merged > *:first-child { margin-right: 0; }
	.smc-quote-page .smcq-actions-merged .elementor-widget-button { width: 100%; }

	.smc-quote-page .smcq-btn-row .elementor-widget-button,
	.smc-quote-page .smcq-btn-row > * {
		width: 100%;
	}

	.smc-quote-page .elementor-button,
	.smc-quote-page .smcq-btn .elementor-button,
	.smc-quote-page button[type="submit"],
	.smc-quote-page .smcq-btn-row .elementor-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		font-size: 16px;
		padding: 12px 18px;
	}

	.smc-quote-page .smcq-hero-side .elementor-widget-button { width: 100%; }


	/* ----------------------------------------------------------------------
	   G. Collection slots: 2-column grid, stacking under 380px

	   renderSlots() emits .smcq-slot-day > .smcq-slot-day-label +
	   .smcq-slot-row > button.smcq-slot-btn. The desktop rule is a wrapping
	   flex row, which leaves a ragged last line on a narrow screen. A grid
	   keeps every tile the same width and the same 48px height.
	   -------------------------------------------------------------------- */

	.smc-quote-page .smcq-slot-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.smc-quote-page .smcq-slot-btn {
		display: flex;
		width: 100%;
		min-height: 48px;
		padding: 10px 12px;
		font-size: 15px;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		text-align: left;
	}

	.smc-quote-page .smcq-slot-btn .smcq-slot-btn-time {
		overflow-wrap: anywhere;
		line-height: 1.25;
	}

	.smc-quote-page .smcq-slot-btn .smcq-slot-btn-check { flex-shrink: 0; }

	.smc-quote-page .smcq-slot-day { margin-bottom: 18px; }

	.smc-quote-page .smcq-slot-day-label { font-size: 15px; }

	@media (max-width: 379px) {
		.smc-quote-page .smcq-slot-row { grid-template-columns: 1fr; }
	}


	/* ----------------------------------------------------------------------
	   H. Type scale and remaining panels
	   -------------------------------------------------------------------- */

	.smc-quote-page .smcq-step-heading { text-align: left; }

	.smc-quote-page .smcq-hero-main { padding: 18px; }
	.smc-quote-page .smcq-hero-side { padding: 20px 18px; }

	.smc-quote-page .smcq-offer-headline,
	.smc-quote-page .smcq-success-price { font-size: 40px; line-height: 1.1; }

	.smc-quote-page .smcq-plate { font-size: 20px; }

	.smc-quote-page .smcq-summary-head { padding: 12px 16px; }
	.smc-quote-page .smcq-summary-row {
		flex-wrap: wrap;
		gap: 2px 10px;
		padding: 12px 16px;
	}

	.smc-quote-page .smcq-state-panel { padding-left: 16px; padding-right: 16px; }

	.smc-quote-page .smcq-trust-row { flex-direction: column; gap: 10px; }
	.smc-quote-page .smcq-reviews { flex-direction: column; gap: 6px; }
}
/* API quote options: supplementary prices; booking continues with collection. */
.smc-quote-page .smcq-option-price-source { display:none; }
.smc-quote-page .smcq-price-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; max-width:520px; margin:16px auto 0; }
.smc-quote-page .smcq-price-option { display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:12px; border:1px solid #d9e2eb; border-radius:9px; background:#fff; color:#0a2545; text-align:left; min-width:0; }
.smc-quote-page .smcq-price-option strong { font-size:13px; line-height:1.3; }
.smc-quote-page .smcq-price-option span { font-size:20px; font-weight:700; line-height:1.2; }
.smc-quote-page .smcq-field-validation-error { color:#b42318; font-size:13px; margin-top:6px; }