/**
 * CleanOut Junkers — Quote Wizard Stylesheet
 *
 * Styles the full multi-step quote wizard:
 * path selector, progress bar, step tiles (single + multi-select),
 * customer info form, live price preview, step transitions,
 * and the result modal.
 *
 * Depends on: style.css, main.css, components.css
 *
 * @package CleanOut_Junkers
 */

/* =============================================================================
   QUOTE PAGE LAYOUT
   Full-height dark wrapper with two-column layout on desktop:
   left = wizard, right = sticky price preview.
   ============================================================================= */

.quote-page {
	background-color: var(--color-dark);
	min-height:       100vh;
	padding-block:    var(--space-12) var(--space-20);
}

.quote-page__inner {
	display:               grid;
	grid-template-columns: 1fr 340px;
	gap:                   var(--gap-lg);
	align-items:           start;
}

@media (max-width: 1099px) {
	.quote-page__inner {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   QUOTE WIZARD CONTAINER
   ============================================================================= */

.quote-wizard {
	background-color: var(--color-dark-mid);
	border:           1px solid rgba(255, 255, 255, 0.07);
	border-radius:    var(--radius-xl);
	overflow:         hidden;
}

/* =============================================================================
   PROGRESS BAR
   Shows current step / total steps with orange fill.
   ============================================================================= */

.quote-progress {
	padding:          var(--space-6) var(--space-8) var(--space-5);
	border-bottom:    1px solid rgba(255, 255, 255, 0.06);
	background-color: var(--color-black);
}

.quote-progress__meta {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   var(--space-3);
}

.quote-progress__label {
	font-size:      var(--text-xs);
	font-weight:    var(--weight-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.quote-progress__counter {
	font-size:   var(--text-xs);
	color:       var(--color-text-tertiary);
	font-variant-numeric: tabular-nums;
}

.quote-progress__counter span {
	color:       var(--color-accent);
	font-weight: var(--weight-semibold);
}

/* Track */
.quote-progress__track {
	height:           6px;
	background-color: var(--color-dark-surface);
	border-radius:    var(--radius-full);
	overflow:         hidden;
}

/* Fill — width set via JS style attribute */
.quote-progress__fill {
	height:           100%;
	background:       var(--gradient-accent-h);
	border-radius:    var(--radius-full);
	transition:       width var(--duration-slow) var(--ease-out);
	min-width:        6px;
}

/* Step dots (optional visual row) */
.quote-progress__dots {
	display:         none !important;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--space-1);
	margin-top:      var(--space-3);
}

.quote-progress__dot {
	flex:             1;
	height:           3px;
	background-color: var(--color-dark-surface);
	border-radius:    var(--radius-full);
	transition:       background-color var(--duration-base) var(--ease-out);
}

.quote-progress__dot.is-complete {
	background-color: var(--color-accent);
}

.quote-progress__dot.is-active {
	background:       var(--gradient-accent-h);
	box-shadow:       0 0 8px rgba(244, 98, 31, 0.50);
}

/* =============================================================================
   PATH SELECTOR
   First screen — choose Junk Removal or Dumpster Rental.
   ============================================================================= */

.quote-path-selector {
	padding: var(--space-10) var(--space-8);
}

.quote-path-selector__heading {
	text-align:    center;
	margin-bottom: var(--space-8);
}

.quote-path-selector__title {
	font-family:    var(--font-display);
	font-size:      var(--text-3xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color:          var(--color-text-primary);
	margin-bottom:  var(--space-2);
}

.quote-path-selector__sub {
	font-size:  var(--text-md);
	color:      var(--color-text-secondary);
	max-width:  44ch;
	margin:     0 auto;
	line-height:var(--leading-relaxed);
}

.quote-path-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     var(--gap-md);
}

@media (max-width: 599px) {
	.quote-path-grid {
		grid-template-columns: 1fr;
	}
}

.quote-path-card {
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	gap:              var(--space-4);
	padding:          var(--space-10) var(--space-8);
	background-color: var(--color-dark-surface);
	border:           2px solid rgba(255, 255, 255, 0.08);
	border-radius:    var(--radius-xl);
	cursor:           pointer;
	text-align:       center;
	transition:       var(--transition-base);
	text-decoration:  none;
	color:            var(--color-text-primary);
}

.quote-path-card:hover {
	border-color:     var(--color-accent);
	background-color: var(--color-accent-muted);
	transform:        translateY(-4px);
	box-shadow:       var(--shadow-accent-sm);
}

.quote-path-card__icon {
	width:            72px;
	height:           72px;
	background:       var(--gradient-accent);
	border-radius:    var(--radius-lg);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            var(--color-white);
	box-shadow:       var(--shadow-accent-sm);
	flex-shrink:      0;
}

.quote-path-card__title {
	font-family:    var(--font-display);
	font-size:      var(--text-2xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height:    1.1;
}

.quote-path-card__desc {
	font-size:   var(--text-sm);
	color:       var(--color-text-secondary);
	line-height: var(--leading-relaxed);
}

.quote-path-card__price {
	font-family:    var(--font-display);
	font-size:      var(--text-xl);
	color:          var(--color-accent);
	letter-spacing: var(--tracking-wide);
}

/* =============================================================================
   STEP CONTAINER
   Wraps each step. JS shows/hides steps by adding/removing .is-active.
   ============================================================================= */

.quote-steps {
	position: relative;
	overflow: hidden;
}

.quote-step {
	display:    none;
	padding:    var(--space-8);
	animation:  stepFadeIn var(--duration-slow) var(--ease-out) both;
}

.quote-step.is-active {
	display: block;
}

.quote-step.is-exiting {
	animation: stepFadeOut var(--duration-base) var(--ease-out) both;
}

@keyframes stepFadeIn {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes stepFadeOut {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-30px); }
}

/* Step header */
.quote-step__header {
	margin-bottom: var(--space-6);
}

.quote-step__label {
	font-size:      var(--text-xs);
	font-weight:    var(--weight-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color:          var(--color-accent);
	margin-bottom:  var(--space-2);
}

.quote-step__title {
	font-family:    var(--font-display);
	font-size:      var(--text-3xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color:          var(--color-text-primary);
	line-height:    var(--leading-tight);
	margin-bottom:  var(--space-2);
}

.quote-step__hint {
	font-size:  var(--text-sm);
	color:      var(--color-text-secondary);
	line-height:var(--leading-relaxed);
}

/* =============================================================================
   OPTION TILES — SINGLE SELECT
   Large clickable cards for load size, location, junk type, etc.
   ============================================================================= */

.option-tiles {
	display: grid;
	gap:     var(--space-3);
}

/* 2 columns for most steps */
.option-tiles--2col {
	grid-template-columns: 1fr 1fr;
}

/* 1 column for steps with longer labels */
.option-tiles--1col {
	grid-template-columns: 1fr;
}

/* 3 columns for compact items */
.option-tiles--3col {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
	.option-tiles--2col,
	.option-tiles--3col {
		grid-template-columns: 1fr;
	}
}

/* The tile itself */
.option-tile {
	display:          flex;
	align-items:      center;
	gap:              var(--space-4);
	padding:          var(--space-5) var(--space-6);
	background-color: var(--color-dark-surface);
	border:           2px solid rgba(255, 255, 255, 0.07);
	border-radius:    var(--radius-lg);
	cursor:           pointer;
	transition:       var(--transition-base);
	user-select:      none;
	position:         relative;
}

.option-tile:hover {
	border-color:     rgba(244, 98, 31, 0.35);
	background-color: rgba(244, 98, 31, 0.06);
}

/* Selected state */
.option-tile.is-selected {
	border-color:     var(--color-accent);
	background-color: var(--color-accent-muted);
	box-shadow:       0 0 0 1px var(--color-accent);
}

/* Selected checkmark badge */
.option-tile.is-selected::after {
	content:          '';
	position:         absolute;
	top:              -1px;
	right:            -1px;
	width:            24px;
	height:           24px;
	background:       var(--gradient-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
	border-radius:    0 var(--radius-lg) 0 var(--radius-md);
}

/* Icon container */
.option-tile__icon {
	width:            48px;
	height:           48px;
	background-color: var(--color-charcoal);
	border-radius:    var(--radius-md);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            var(--color-text-secondary);
	flex-shrink:      0;
	transition:       var(--transition-base);
}

.option-tile:hover .option-tile__icon,
.option-tile.is-selected .option-tile__icon {
	background-color: var(--color-accent);
	color:            var(--color-white);
}

/* Text block */
.option-tile__body {
	flex:    1;
	display: flex;
	flex-direction: column;
	gap:     var(--space-1);
}

.option-tile__label {
	font-family:    var(--font-display);
	font-size:      var(--text-xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color:          var(--color-text-primary);
	line-height:    1.1;
}

.option-tile__desc {
	font-size:  var(--text-xs);
	color:      var(--color-text-secondary);
	line-height:var(--leading-snug);
}

/* Price badge */
.option-tile__price {
	font-family:    var(--font-display);
	font-size:      var(--text-lg);
	letter-spacing: var(--tracking-wide);
	color:          var(--color-accent);
	white-space:    nowrap;
	flex-shrink:    0;
}

.option-tile__price--free {
	color: var(--color-success);
}

/* =============================================================================
   MULTI-SELECT TILES
   Heavy items step — checkboxes, can select many.
   ============================================================================= */

/* Visible checkbox in top-left */
.option-tile--multi .option-tile__checkbox {
	width:            22px;
	height:           22px;
	border:           2px solid rgba(255, 255, 255, 0.20);
	border-radius:    var(--radius-sm);
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       var(--transition-base);
	background-color: transparent;
}

.option-tile--multi.is-selected .option-tile__checkbox {
	background:  var(--gradient-accent);
	border-color:var(--color-accent);
}

.option-tile--multi .option-tile__checkbox-icon {
	opacity: 0;
	color:   var(--color-white);
	transition: opacity var(--duration-fast) var(--ease-out);
}

.option-tile--multi.is-selected .option-tile__checkbox-icon {
	opacity: 1;
}

/* "None" skip tile */
.option-tile--skip {
	border-style:  dashed;
	border-color:  rgba(255, 255, 255, 0.12);
	justify-content: center;
}

.option-tile--skip .option-tile__label {
	font-size: var(--text-md);
	color:     var(--color-text-secondary);
	text-align:center;
}

.option-tile--skip:hover {
	border-color: var(--color-text-secondary);
}

.option-tile--skip.is-selected {
	border-style:  solid;
	border-color:  var(--color-text-secondary);
	background-color: rgba(168, 162, 158, 0.08);
	box-shadow:    none;
}

.option-tile--skip.is-selected::after {
	display: none;
}

/* =============================================================================
   CUSTOMER INFO FORM STEP
   ============================================================================= */

.quote-customer-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-5);
}

.quote-customer-form .form-row--2col {
	grid-template-columns: 1fr 1fr;
}

/* =============================================================================
   STEP NAVIGATION
   Back + Next buttons at the bottom of each step.
   ============================================================================= */

.quote-nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--space-4);
	padding:         var(--space-6) var(--space-8);
	border-top:      1px solid rgba(255, 255, 255, 0.06);
	background-color:var(--color-black);
}

.quote-nav__back {
	display:      flex;
	align-items:  center;
	gap:          var(--space-2);
	font-size:    var(--text-sm);
	font-weight:  var(--weight-medium);
	color:        var(--color-text-secondary);
	background:   transparent;
	border:       none;
	cursor:       pointer;
	padding:      var(--space-3) var(--space-4);
	border-radius:var(--radius-sm);
	transition:   var(--transition-color);
}

.quote-nav__back:hover {
	color: var(--color-text-primary);
}

/* Hide back button on first step */
.quote-nav__back.is-hidden {
	visibility: hidden;
	pointer-events: none;
}

.quote-nav__next {
	/* Extends .btn .btn--primary */
	min-width: 160px;
}

.quote-nav__next:disabled,
.quote-nav__next[disabled] {
	opacity:        0.45;
	cursor:         not-allowed;
	pointer-events: none;
	box-shadow:     none;
	transform:      none;
}

/* =============================================================================
   LIVE PRICE PREVIEW (Sidebar)
   Sticky panel on the right showing running total.
   ============================================================================= */

.price-preview {
	position:         sticky;
	top:              calc(var(--header-height) + var(--space-6));
	background-color: var(--color-dark-mid);
	border:           1px solid rgba(255, 255, 255, 0.07);
	border-radius:    var(--radius-xl);
	overflow:         hidden;
}

/* On mobile — shown as a collapsed bar inside wizard */
@media (max-width: 1099px) {
	.price-preview {
		position: static;
		border-radius: var(--radius-lg);
		margin-bottom: var(--space-4);
	}
}

.price-preview__header {
	padding:          var(--space-5) var(--space-6);
	background-color: var(--color-black);
	border-bottom:    1px solid rgba(255, 255, 255, 0.06);
}

.price-preview__title {
	font-family:    var(--font-body);
	font-size:      var(--text-xs);
	font-weight:    var(--weight-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.price-preview__body {
	padding: var(--space-6);
}

/* Total display */
.price-preview__total {
	text-align:    center;
	padding-block: var(--space-5);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.price-preview__est-label {
	font-size:      var(--text-xs);
	color:          var(--color-text-tertiary);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	margin-bottom:  var(--space-1);
}

.price-preview__amount {
	font-family:    var(--font-display);
	font-size:      var(--text-5xl);
	color:          var(--color-accent);
	letter-spacing: var(--tracking-tight);
	line-height:    1;
	transition:     color var(--duration-fast) var(--ease-out);
}

.price-preview__amount.is-updating {
	color: var(--color-accent-light);
}

/* Line items */
.price-preview__lines {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
	margin-bottom:  var(--space-5);
	padding:        var(--space-4) var(--space-5);
	background:     rgba(0, 0, 0, 0.2);
	border-radius:  var(--radius-md);
	border:         1px solid rgba(255, 255, 255, 0.06);
}

.price-line {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             var(--space-3);
	font-size:       var(--text-sm);
}

.price-line__label {
	color:     var(--color-text-secondary);
	line-height:var(--leading-snug);
	flex:      1;
}

.price-line__amount {
	font-weight:  var(--weight-semibold);
	color:        var(--color-text-primary);
	white-space:  nowrap;
	font-variant-numeric: tabular-nums;
}

.price-line__amount--add {
	color: var(--color-accent);
}

.price-line__amount--free {
	color: var(--color-success);
}

/* Empty state */
.price-preview__empty {
	text-align:  center;
	padding:     var(--space-8) var(--space-4);
	font-size:   var(--text-sm);
	color:       var(--color-text-tertiary);
}

.price-preview__disclaimer {
	font-size:        var(--text-xs);
	color:            var(--color-text-tertiary);
	line-height:      var(--leading-relaxed);
	text-align:       center;
	padding:          var(--space-4);
	background-color: var(--color-dark-surface);
	border-radius:    var(--radius-md);
}

/* =============================================================================
   MOBILE PRICE BAR
   Collapsed price display shown inside the wizard on mobile.
   ============================================================================= */

.quote-mobile-price {
	display:          none;
	align-items:      center;
	justify-content:  space-between;
	padding:          var(--space-4) var(--space-6);
	background-color: var(--color-black);
	border-bottom:    1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 1099px) {
	.quote-mobile-price {
		display: flex;
	}
}

.quote-mobile-price__label {
	font-size:   var(--text-xs);
	color:       var(--color-text-tertiary);
	font-weight: var(--weight-medium);
}

.quote-mobile-price__amount {
	font-family:    var(--font-display);
	font-size:      var(--text-2xl);
	color:          var(--color-accent);
	letter-spacing: var(--tracking-wide);
	transition:     color var(--duration-fast);
}

/* =============================================================================
   RESULT SCREEN
   Full-width result panel inside the wizard (not a modal).
   ============================================================================= */

.quote-result {
	display:        none;
	padding:        var(--space-10) var(--space-8) var(--space-12);
	animation:      stepFadeIn var(--duration-slow) var(--ease-out) both;
}

.quote-result.is-active {
	display: block;
}

/* Success mark: deep forest glass + mint ring (distinct from flat brand green / orange). */
.quote-result__icon {
	width:            80px;
	height:           80px;
	border-radius:    var(--radius-full);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	margin:           0 auto var(--space-6);
	color:            #c8efd4;
	background:       linear-gradient(165deg, #1e2d26 0%, #141c18 45%, #0e1412 100%);
	border:           2px solid rgba(120, 210, 170, 0.4);
	box-shadow:       0 0 0 1px rgba(255, 255, 255, 0.06) inset,
	                  0 10px 36px rgba(0, 0, 0, 0.45),
	                  0 0 32px rgba(244, 98, 31, 0.12);
	animation:        popIn var(--duration-slow) var(--ease-spring) both;
}

@keyframes popIn {
	from { transform: scale(0.6); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.quote-result__title {
	font-family:    var(--font-display);
	font-size:      var(--text-3xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color:          var(--color-text-primary);
	text-align:     center;
	margin-bottom:  var(--space-2);
}

.quote-result__subtitle {
	text-align:  center;
	font-size:   var(--text-md);
	color:       var(--color-text-secondary);
	max-width:   40ch;
	margin:      0 auto var(--space-6);
	line-height: var(--leading-relaxed);
}

/* Total price display */
.quote-result__total-wrap {
	text-align:    center;
	margin-bottom: var(--space-6);
}

.quote-result__total-label {
	font-size:      var(--text-xs);
	font-weight:    var(--weight-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color:          var(--color-text-secondary);
	margin-bottom:  var(--space-2);
}

.quote-result__total-amount {
	font-family:    var(--font-display);
	font-size:      clamp(3.5rem, 8vw, 5.5rem);
	color:          var(--color-accent);
	letter-spacing: var(--tracking-tight);
	line-height:    1;
}

/* Summary breakdown */
.quote-result__breakdown {
	box-sizing:       border-box;
	list-style:       none;
	background-color: var(--color-dark-surface);
	border:           1px solid rgba(255, 255, 255, 0.08);
	border-radius:    var(--radius-lg);
	padding:          clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.5rem, 4.5vw, 2.5rem);
	margin:           0 0 var(--space-6);
	text-align:       left;
}

.quote-result__breakdown-title {
	font-size:      var(--text-xs);
	font-weight:    var(--weight-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color:          var(--color-text-secondary);
	margin-bottom:  var(--space-4);
}

.quote-result__lines {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.quote-result__line {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             var(--space-3);
	font-size:       var(--text-sm);
	padding-bottom:  var(--space-3);
	border-bottom:   1px solid rgba(255, 255, 255, 0.05);
}

.quote-result__line:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-top:    var(--space-3);
	padding-top:   var(--space-4);
	font-weight:   var(--weight-semibold);
	font-size:     var(--text-md);
	color:         var(--color-text-primary);
}

.quote-result__line-label {
	min-width: 0;
	color:       var(--color-text-secondary);
}

.quote-result__line-price {
	flex-shrink:        0;
	font-weight:        var(--weight-semibold);
	color:              var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

/* Call button: allow wrap on narrow screens (.btn uses white-space: nowrap globally). */
.quote-result__actions #result-call-btn {
	white-space: normal;
	flex-wrap: wrap;
	line-height: 1.35;
	text-align:  center;
}

@media (min-width: 600px) {
	.quote-result__actions #result-call-btn.btn--lg {
		width:          auto;
		align-self:     center;
		font-size:      var(--text-base);
		font-weight:    var(--weight-semibold);
		letter-spacing: var(--tracking-wide);
		padding:        var(--space-4) var(--space-6);
		max-width:      22rem;
	}
}

/* Disclaimer box */
.quote-result__disclaimer {
	background-color: rgba(244, 98, 31, 0.06);
	border:           1px solid rgba(244, 98, 31, 0.20);
	border-radius:    var(--radius-lg);
	padding:          var(--space-5) var(--space-6);
	margin-bottom:    var(--space-6);
	font-size:        var(--text-sm);
	color:            var(--color-text-secondary);
	line-height:      var(--leading-relaxed);
}

.quote-result__disclaimer p {
	margin-bottom: var(--space-2);
}

.quote-result__disclaimer p:last-child {
	margin-bottom: 0;
}

.quote-result__notify {
	margin:      0 0 var(--space-6);
	font-size:   var(--text-sm);
	line-height: var(--leading-relaxed);
	color:       var(--color-text-secondary);
}

.quote-result__notify--warn {
	color:       var(--color-text-primary);
	padding:     var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	background:  rgba(180, 40, 40, 0.08);
	border:      1px solid rgba(180, 40, 40, 0.25);
}

/* Action buttons */
.quote-result__actions {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.quote-result__actions .btn {
	width:           100%;
	justify-content: center;
}

/* =============================================================================
   QUANTITY STEPPER
   Used for the tire count input in dumpster path.
   ============================================================================= */

.qty-stepper {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
}

.qty-stepper__btn {
	width:            40px;
	height:           40px;
	background-color: var(--color-dark-surface);
	border:           1px solid rgba(255, 255, 255, 0.12);
	border-radius:    var(--radius-sm);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            var(--color-text-primary);
	cursor:           pointer;
	font-size:        var(--text-xl);
	line-height:      1;
	transition:       var(--transition-base);
	flex-shrink:      0;
}

.qty-stepper__btn:hover {
	border-color:     var(--color-accent);
	background-color: var(--color-accent-muted);
	color:            var(--color-accent);
}

.qty-stepper__value {
	font-family:    var(--font-display);
	font-size:      var(--text-3xl);
	color:          var(--color-text-primary);
	min-width:      40px;
	text-align:     center;
	letter-spacing: var(--tracking-wide);
}

.qty-stepper__label {
	font-size:   var(--text-sm);
	color:       var(--color-text-secondary);
}

/* Extra tile containing a stepper */
.option-tile--stepper {
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--space-5);
}

.option-tile--stepper .option-tile__body {
	flex: none;
}

/* =============================================================================
   VALIDATION STATES
   ============================================================================= */

.quote-step__error {
	display:          none;
	align-items:      center;
	gap:              var(--space-2);
	padding:          var(--space-3) var(--space-4);
	background-color: rgba(239, 68, 68, 0.10);
	border:           1px solid rgba(239, 68, 68, 0.25);
	border-radius:    var(--radius-md);
	font-size:        var(--text-sm);
	color:            #f87171;
	margin-top:       var(--space-4);
}

.quote-step__error.is-visible {
	display: flex;
}

/* =============================================================================
   SUBMISSION LOADER
   Full-wizard overlay during AJAX send.
   ============================================================================= */

.quote-submitting {
	display:          none;
	position:         absolute;
	inset:            0;
	background-color: rgba(15, 15, 15, 0.90);
	backdrop-filter:  blur(4px);
	z-index:          var(--z-raised);
	align-items:      center;
	justify-content:  center;
	flex-direction:   column;
	gap:              var(--space-4);
	border-radius:    var(--radius-xl);
}

.quote-submitting.is-visible {
	display: flex;
}

.quote-submitting__text {
	font-family:    var(--font-display);
	font-size:      var(--text-xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color:          var(--color-text-primary);
}

/* =============================================================================
   RESPONSIVE TWEAKS
   ============================================================================= */

@media (max-width: 599px) {
	.quote-path-selector,
	.quote-step,
	.quote-result {
		padding: var(--space-6) var(--space-5);
	}

	.quote-result__actions #result-call-btn.btn--lg {
		font-size:        var(--text-sm);
		padding:          var(--space-4) var(--space-5);
		letter-spacing:   var(--tracking-wide);
	}

	.quote-nav {
		padding: var(--space-5) var(--space-5);
	}

	.quote-progress {
		padding: var(--space-4) var(--space-5);
	}

	.option-tile {
		padding: var(--space-4) var(--space-4);
	}

	.option-tile__icon {
		width:  40px;
		height: 40px;
	}
}

/* =============================================================================
   PAGE HERO — Compact dark strip above the wizard section
   ============================================================================= */

.quote-page-hero {
	background:    linear-gradient(135deg, var(--color-black) 0%, #121816 55%, rgba(244, 98, 31, 0.05) 100%);
	padding-block: var(--space-14) var(--space-12);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	position:      relative;
	overflow:      hidden;
}

/* Accent glow in top-right corner */
.quote-page-hero::before {
	content:       '';
	position:      absolute;
	top:           -80px;
	right:         -80px;
	width:         400px;
	height:        400px;
	background:    radial-gradient(circle, rgba(244, 98, 31, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Orange accent line at top */
.quote-page-hero::after {
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	right:      0;
	height:     3px;
	background: var(--gradient-accent-h);
}

.quote-page-hero__inner {
	max-width: min(72rem, 100%);
	position:  relative;
	z-index:   1;
}

/* Keep “Get your instant quote” on one line from tablet up; stack on small phones. */
.quote-page-hero__title {
	font-family:    var(--font-display);
	font-size:      clamp(1.65rem, 3.4vw + 0.6rem, 3.15rem);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height:    1.08;
	color:          var(--color-text-primary);
	margin-block:   var(--space-3) var(--space-4);
}

@media (min-width: 640px) {
	.quote-page-hero__title {
		white-space: nowrap;
	}
}

.quote-page-hero__sub {
	font-family: var(--font-para);
	font-size:   var(--text-base);
	color:       var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	max-width:   48ch;
}

/* =============================================================================
   WIZARD UI WRAPPER
   Wraps progress + steps + nav inside #quote-wizard-ui
   ============================================================================= */

.quote-wizard__ui {
	display:        flex;
	flex-direction: column;
}

/* =============================================================================
   PATH SELECTOR TRUST STRIP
   Small 3-item row below the path cards
   ============================================================================= */

.quote-path-trust {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             var(--space-4) var(--space-8);
	margin-top:      var(--space-6);
	padding-top:     var(--space-6);
	border-top:      1px solid rgba(255,255,255,0.06);
}

.quote-path-trust span {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
	font-size:   var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color:       var(--color-text-secondary);
}

.quote-path-trust svg {
	color:       var(--color-accent);
	flex-shrink: 0;
}

/* =============================================================================
   PRICE PREVIEW — Additional elements
   ============================================================================= */

/* Live badge next to sidebar title */
.price-preview__badge {
	display:        inline-flex;
	align-items:    center;
	font-size:      9px;
	font-weight:    var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding:        2px 7px;
	border-radius:  var(--radius-full);
	background:     rgba(104,211,145,0.12);
	color:          #68d391;
	border:         1px solid rgba(104,211,145,0.3);
	margin-left:    var(--space-2);
}

/* CTA block shown in later steps */
.price-preview__cta {
	padding:       var(--space-4) var(--space-5);
	background:    var(--color-dark-surface);
	border-radius: var(--radius-md);
	border:        var(--border-thin) solid var(--color-border);
	margin-bottom: var(--space-5);
	text-align:    center;
}
.price-preview__cta p {
	font-size:     var(--text-xs);
	color:         var(--color-text-secondary);
	margin-bottom: var(--space-3);
	line-height:   var(--leading-relaxed);
}

/* Trust items row */
.price-preview__trust {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
	margin-top:     var(--space-5);
	padding-top:    var(--space-5);
	border-top:     1px solid rgba(255,255,255,0.06);
}

.preview-trust-item {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
	font-size:   var(--text-xs);
	color:       var(--color-text-tertiary);
}

.preview-trust-item svg {
	color:       var(--color-accent);
	flex-shrink: 0;
}

/* =============================================================================
   BELOW-THE-FOLD TRUST STRIP
   Three-column trust callouts below the wizard section
   ============================================================================= */

.quote-below-trust {
	padding-block: var(--space-12);
}

.quote-below-trust__inner {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--gap-lg);
}

.qbt-item {
	display:     flex;
	align-items: flex-start;
	gap:         var(--space-4);
}

.qbt-icon {
	flex-shrink:     0;
	width:           48px;
	height:          48px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--color-accent-muted);
	border-radius:   var(--radius-md);
	color:           var(--color-accent);
}

.qbt-item strong {
	display:       block;
	font-size:     var(--text-base);
	font-weight:   var(--weight-semibold);
	color:         var(--color-text-dark);
	margin-bottom: var(--space-1);
}

.qbt-item p {
	font-size:   var(--text-sm);
	color:       var(--color-text-secondary);
	line-height: var(--leading-relaxed);
}

.qbt-item p a {
	color:           var(--color-accent);
	text-decoration: none;
	font-weight:     var(--weight-semibold);
}
.qbt-item p a:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.quote-below-trust__inner {
		grid-template-columns: 1fr;
		gap:                   var(--gap-md);
	}
}

@media (max-width: 599px) {
	.quote-page-hero { padding-block: var(--space-10) var(--space-8); }
	.quote-path-trust { gap: var(--space-3) var(--space-5); }
}

/* Quote page — force full container width */
.quote-page .container,
.quote-page-hero .container,
.quote-below-trust .container {
	max-width: 1200px;
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
	margin-left: auto;
	margin-right: auto;
}