/* Quote page only */

/* ---------- Hero ---------- */
.quote-hero{
	padding:34px 0 18px;
}
.quote-title{
	margin:0 0 8px;
	font-size:1.875rem;
	letter-spacing:.2px;
}
.quote-sub{
	margin:0;
	max-width:70ch;
	color:rgba(234,240,255,.72);
	line-height:1.5;
}

/* ---------- Card / top bar ---------- */
.quote-card{
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.04);
	border-radius:16px;
	overflow:hidden;
}
.quote-top{
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:space-between;
	padding:14px;
	border-bottom:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.18);
	flex-wrap:wrap;
}

.quote-steps{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.quote-step{
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.03);
	color:rgba(234,240,255,.72);
	padding:8px 10px;
	border-radius:999px;
	display:flex;
	align-items:center;
	gap:8px;
	font-size:0.8125rem;
	cursor:default;          /* indicators only — not clickable (2026-07-01) */
	opacity:1;
}
.quote-step.is-locked{
	opacity:.4;
}
.quote-step span{
	width:22px;
	height:22px;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.08);
	color:#eaf0ff;
	font-weight:700;
	font-size:0.75rem;
}
.quote-step.is-active{
	border-color:rgba(78,161,255,.55);
	background:rgba(78,161,255,.10);
	color:#eaf0ff;
}
.quote-step.is-done{
	border-color:rgba(45,227,143,.45);
	background:rgba(45,227,143,.10);
	color:#eaf0ff;
}

.quote-actions{
	display:flex;
	gap:10px;
}

/* Back / Next — one consistent pill pair, defined explicitly for both themes
   so they no longer differ by hue (light) or opacity (dark). Back is a neutral
   ghost; Next carries the quote-flow blue accent (same tokens as .is-active).
   FIXED equal width (2026-07-02): the pair must not resize as the label swaps
   between Next / Generate Quote / Saving... — sized to fit the longest. */
.quote-actions .btn{
	border-radius:999px;
	width:8.5rem;
	padding:8px 0;
	/* base .btn is inline-flex, so centering needs justify-content (text-align
	   is inert on a flex container) */
	justify-content:center;
	text-align:center;
	font-size:0.8125rem;
	border:1px solid transparent;
	transition:background var(--dur-hover,120ms) ease,
	           border-color var(--dur-hover,120ms) ease,
	           opacity var(--dur-hover,120ms) ease;
}
.quote-actions #btnBack{
	background:rgba(255,255,255,.05);
	border-color:rgba(255,255,255,.16);
	color:rgba(234,240,255,.82);
}
.quote-actions #btnBack:hover:not(:disabled){ background:rgba(255,255,255,.09); }
.quote-actions #btnNext{
	background:rgba(78,161,255,.16);
	border-color:rgba(78,161,255,.55);
	color:#eaf0ff;
}
.quote-actions #btnNext:hover:not(:disabled){ background:rgba(78,161,255,.24); }
.quote-actions .btn:disabled{ opacity:.4; cursor:not-allowed; }

.quote-body{
	padding:16px;
}

/* ---------- Section header ---------- */
.quote-section-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}
.quote-section-head h2{
	margin:0 0 4px;
	font-size:1rem;
}
.quote-section-head .muted{
	color:rgba(234,240,255,.60);
}

.q-note{
	margin-top:10px;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.18);
	color:rgba(234,240,255,.68);
	font-size:0.8125rem;
	line-height:1.35;
}

/* ---------- Errors ---------- */
.quote-error{
	display:none;
	margin:0 0 12px;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid rgba(255,92,122,.35);
	background:rgba(255,92,122,.10);
	color:#ffdbe2;
	font-size:0.8125rem;
}
/* Grouped missing-field list inside the error box */
.quote-error-intro{ font-weight:600; }
.quote-error-list{
	margin:6px 0 0;
	padding:0 0 0 18px;
	list-style:disc;
}
.quote-error-list li{ margin:2px 0; }

/* Single "all fields required" statement above the form */
.quote-required-note{
	margin:0 0 14px;
	font-size:0.8125rem;
	color:var(--muted, #9aa4b2);
}
.quote-required-note .q-optional{ font-style:italic; }

/* Engine-added "(optional)" tag on fields shown-but-not-required (e.g. DC
   odometer on new vehicles). Mirrors the static .muted (optional) hints. */
.q-optional-tag{ color:var(--muted, #9aa4b2); font-weight:400; }

/* ---------- Stacked rows (all steps) ---------- */
.q-stack{
	display:flex;
	flex-direction:column;
	gap:14px;
}

/* each question row */
.q-row{
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:10px 0;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.q-row:last-child{
	border-bottom:none;
}

/* Let the label column grow taller and align to the top */
.q-row .q-label{
	align-self:flex-start;
}

/* Ensure label + muted wrap and don't overlap controls */
.js-trade-gate-1 .q-label,
.js-trade-gate-2 .q-label,
.js-trade-in .q-label,
.js-has-private-sale-credit .q-label,
.js-private-sale-eligibility .q-label{
	padding-right:12px;
}

/* Muted text: block, wraps, adds spacing */
.js-trade-gate-1-muted,
.js-trade-gate-2-muted,
.js-trade-in-muted,
.js-has-private-sale-credit-muted,
.js-private-sale-eligibility-muted{
	display:block !important;
	margin-top:6px;
	line-height:1.3;
	white-space:normal;
}

/* If q-row is flex, prevent vertical centering */
.js-trade-gate-1,
.js-trade-gate-2,
.js-trade-in,
.js-has-private-sale-credit,
.js-private-sale-eligibility{
	align-items:flex-start;
}

/* Trade gate labels need to stack label + muted text vertically */
.js-trade-gate-1 .q-label label,
.js-trade-gate-2 .q-label label,
.js-trade-in .q-label label,
.js-has-private-sale-credit .q-label label,
.js-private-sale-eligibility .q-label label{
	display:block;          /* stop flex row layout */
}

.js-trade-gate-1 .q-label label span,
.js-trade-gate-2 .q-label label span,
.js-trade-in .q-label label span,
.js-has-private-sale-credit .q-label label span,
.js-private-sale-eligibility .q-label label span{
	white-space:normal;     /* allow wrapping for muted/help */
}

/* left column */
.q-label{
	flex:0 0 34%;      /* label column width */
	min-width:240px;   /* keeps labels readable on desktop */
}

/* right column */
.q-control{
	flex:1 1 auto;
	min-width:0;

	display:flex;
	gap:12px;
	align-items:center;
	flex-wrap:wrap;
}

.q-control .muted{
	pointer-events: none;
}

/* label styling */
.q-label label{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin:0 0 6px;
	font-size:0.8125rem;
	color:rgba(234,240,255,.72);
	min-height:18px;
}
.q-label label em{
	font-style:normal;
	font-size:0.75rem;
	color:rgba(234,240,255,.50);
	white-space:nowrap;
}
.q-label label span{
	font-size:0.75rem;
	color:rgba(234,240,255,.50);
	white-space:nowrap;
}

/* helper text under the label */
.q-label .q-help{
	margin-top:6px;
	font-size:0.75rem;
	color:rgba(234,240,255,.55);
	line-height:1.35;
}

/* controls */
.q-control input,
.q-control select{
	width:100%;
	padding:12px 12px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(0,0,0,.22);
	color:#eaf0ff;
	outline:none;
	min-height:44px;
	/* Native controls don't inherit page font — set Inter + rem so they
	   track the Text Size setting like the rest of the form. */
	font-family:inherit;
	font-size:0.9375rem;
}

/* focus ring */
.q-control input:focus,
.q-control select:focus{
	border-color:rgba(78,161,255,.55);
	box-shadow:0 0 0 3px rgba(78,161,255,.16);
}

/* placeholder tone for selects when value="" */
.q-control select:invalid{
	color:rgba(234,240,255,.55);
}

/* dropdown list readability */
.q-control select option{
	background:#0b1220;
	color:#eaf0ff;
}
.q-control select optgroup{
	background:#0b1220;
	color:#eaf0ff;
}

/* ---------- Choice pills ---------- */
.q-control .q-choices{
	display:flex;
	flex-wrap:nowrap;      /* never wrap */
	gap:8px;
	align-items:center;
}

.q-control .q-choice{
	display:flex;
	align-items:center;
	gap:6px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.03);
	padding:8px 10px;      /* slightly tighter */
	border-radius:12px;
	cursor:pointer;
	user-select:none;

	white-space:nowrap;    /* text never wraps */
	flex:1 1 auto;         /* distribute evenly */
	justify-content:center;
	font-size:0.875rem;        /* slightly smaller */
}

.q-control .q-choice input{
	width:auto;
}

.q-control .q-choice.is-active{
	border-color:rgba(78,161,255,.55);
	background:rgba(78,161,255,.10);
}


/* ---------- Address sub-grid ---------- */
.q-subgrid{
	margin-top:10px;
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	gap:10px;
}

/* hide rows/blocks cleanly */
.is-hidden{ display:none !important; }

/* ---------- Result ---------- */
.quote-result{
	padding:18px;
}
.quote-result h2{
	margin:0 0 8px;
	font-size:1.25rem;
}
.quote-ref{
	display:inline-flex;
	margin-top:10px;
	padding:8px 10px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.04);
	color:rgba(234,240,255,.70);
	font-size:0.8125rem;
}
.quote-result-actions{
	margin-top:14px;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

/* ---------- Mobile behavior (stack label above control) ---------- */
@media (max-width: 860px){
	.q-row{
		flex-direction:column;
		gap:10px;
	}
	.q-label{
		flex:none;
		min-width:0;
	}
	.q-subgrid{
		grid-template-columns:1fr;
	}
}


/* Step 2 two-column grouping */
.q-grid2{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 12px;
}

.q-col{
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 14px;
	padding: 14px;
}

.q-col-head{
	font-weight: 700;
	margin: 0 0 10px;
	opacity: .9;
}

.q-col .q-row{
	margin-top: 10px;
}

.q-col .q-row:first-of-type{
	margin-top: 0;
}

/* Match .quote-error tone */
:root{
	--quote-error-base: 255, 92, 122;
}

/* Input glow */
.field-invalid{
	border-color: rgba(var(--quote-error-base), .6) !important;
	box-shadow: 0 0 0 4px rgba(var(--quote-error-base), .15) !important;
	outline: none !important;
}

/* Optional: glow entire row */
.row-invalid{
	border-radius: 12px;
	box-shadow: 0 0 0 4px rgba(var(--quote-error-base), .10);
}

/* Inline message under field */
.field-invalid-msg{
	margin-top: 6px;
	font-size: 0.75rem;
	color: #ffdbe2;
}

/* Mobile: stack */
@media (max-width: 900px){
	.q-grid2{
		grid-template-columns: 1fr;
	}
}


.qc-doc-card{
	border:1px solid rgba(255,255,255,.10);
}

.qc-doc-head{
	margin-bottom:14px;
}

.qc-doc-heading{
	font-weight:900;
	font-size:1.125rem;
	line-height:1.2;
}

.qc-doc-subhead{
	margin-top:4px;
	color:rgba(234,240,255,.62);
	font-size:0.8125rem;
	line-height:1.4;
}

.qc-doc-checklist{
	display:flex;
	flex-direction:column;
	gap:0;
}

.qc-doc-item{
	display:grid;
	grid-template-columns:20px minmax(0,1fr);
	gap:12px;
	align-items:start;
	padding:14px 0;
	border-top:1px solid rgba(255,255,255,.10);
}

.qc-doc-item:first-child{
	border-top:0;
	padding-top:0;
}

.qc-doc-box{
	width:16px;
	height:16px;
	border:2px solid rgba(234,240,255,.82);
	border-radius:3px;
	margin-top:2px;
	box-sizing:border-box;
	background:transparent;
}

.qc-doc-copy{
	min-width:0;
}

.qc-doc-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.qc-doc-label{
	font-weight:800;
	line-height:1.35;
	color:#eaf0ff;
	flex:1;
	min-width:0;
}

.qc-doc-note{
	margin-top:4px;
	font-size:0.75rem;
	line-height:1.35;
	color:rgba(234,240,255,.64);
}

.qc-doc-detail{
	margin-top:6px;
	font-size:0.875rem;
	line-height:1.55;
	color:rgba(234,240,255,.88);
}
.qc-doc-meta{
	display:flex;
	gap:8px;
	white-space:nowrap;
}

.qc-doc-badge{
	display:inline-flex;
	align-items:center;
	padding:4px 8px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:999px;
	font-size:0.75rem;
	font-weight:700;
	line-height:1.2;
	color:#eaf0ff;
	background:rgba(255,255,255,.04);
}

.qc-doc-badge-esign{
	background:rgba(255,255,255,.02);
	color:rgba(234,240,255,.78);
}

.qc-doc-note{
	margin-top:6px;
	font-size:0.75rem;
	line-height:1.4;
	color:rgba(234,240,255,.62);
}

.qc-doc-attachments{
	margin-top:10px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.qc-doc-attachment{
	line-height:1.35;
}

.qc-doc-link{
	font-size:0.8125rem;
	font-weight:700;
	text-decoration:none;
}

.qc-doc-link:hover{
	text-decoration:underline;
}

/* Key/Value rows inside the cards */
.qc-kv .kv-row{
	display:flex;
	align-items:flex-start;
	gap:10px;
}

/* fixed label column */
.qc-kv .kv-key{
	width:140px;        /* adjust to taste */
	flex:0 0 140px;
	font-weight:600;
}

/* value column grows */
.qc-kv .kv-val{
	flex:1;
}

@media print{
	.no-print{
		display:none !important;
	}
}

@media print{
	.qc-doc-badge{
		border:1px solid #777 !important;
		background:#fff !important;
		color:#000 !important;
	}

	.qc-doc-badge-esign{
		color:#000 !important;
	}

	.qc-doc-note{
		color:#222 !important;
	}
}

@media print{
	.qc-print-pagebreak{
		break-before: page;
		page-break-before: always;
	}

	.qc-doc-card{
		margin-top:0 !important;
		border:0 !important;
		background:#fff !important;
		color:#000 !important;
		box-shadow:none !important;
	}

	.qc-doc-heading,
	.qc-doc-label{
		color:#000 !important;
	}

	.qc-doc-subhead,
	.qc-doc-note,
	.qc-doc-detail{
		color:#222 !important;
	}

	.qc-doc-item{
		border-top:1px solid #ccc !important;
	}

	.qc-doc-item:first-child{
		border-top:0 !important;
	}

	.qc-doc-box{
		width:16px;
		height:16px;
		border:2px solid #000 !important;
		border-radius:2px;
		background:#fff !important;
	}
}

/* ---------- Google Address Autocomplete ---------- */

.pac-container{
	z-index: 99999 !important;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(15,22,38,.98);
	box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* ensure correct positioning anchor */
.q-control{
	position: relative;
}

/* style dropdown items */
.pac-item{
	background: transparent;
	color: #eaf0ff;
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 8px 12px;
}

.pac-item:hover{
	background: rgba(255,255,255,.08);
}

.pac-item-query{
	color: #fff;
}

/* ---------- Calc overlay ---------- */
.quote-card{
	position: relative;
}
#quote-calc-overlay{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(11,18,32,.72);
	z-index: 200;
	align-items: center;
	justify-content: center;
}
#quote-calc-overlay.is-visible{
	display: flex;
}
.qco-inner{
	text-align: center;
}
.qco-spinner{
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255,255,255,.15);
	border-top-color: rgba(120,170,255,.9);
	border-radius: 50%;
	animation: qcBtnSpin .75s linear infinite;
	margin: 0 auto 14px;
}
.qco-label{
	color: rgba(234,240,255,.80);
	font-size: .875rem;
	margin: 0;
	letter-spacing: .3px;
}

/* ============================================================
   Light mode (opt-in via <html data-theme="light">)
   quote.css is otherwise dark-only — every surface/text color
   above is hardcoded for the dark portal. This block re-skins
   the quote form, result card, and Google Places dropdown to
   the light palette used in portal.css. Dark is unaffected.
   Remove this block to revert.
   ============================================================ */
:root[data-theme="light"] .quote-sub{ color:#64748B; }

/* Card + top bar */
:root[data-theme="light"] .quote-card{ background:#FFFFFF; border-color:#E2E8F0; }
:root[data-theme="light"] .quote-top{ background:#F8FAFC; border-bottom-color:#E2E8F0; }

/* Step pills */
:root[data-theme="light"] .quote-step{ background:#FFFFFF; border-color:#E2E8F0; color:#64748B; }
:root[data-theme="light"] .quote-step span{ background:#EEF2F7; color:#0A2540; }
:root[data-theme="light"] .quote-step.is-active{ border-color:#3A80D2; background:rgba(58,128,210,.12); color:#1B4F8A; }
:root[data-theme="light"] .quote-step.is-active span{ background:var(--accent2); color:#fff; }
:root[data-theme="light"] .quote-step.is-done{ border-color:rgba(21,128,61,.45); background:rgba(21,128,61,.10); color:#15803D; }

/* Back / Next (light) — mirror the step-pill blue so the pair matches the flow */
:root[data-theme="light"] .quote-actions #btnBack{ background:#FFFFFF; border-color:#E2E8F0; color:#475569; }
:root[data-theme="light"] .quote-actions #btnBack:hover:not(:disabled){ background:#F1F5F9; }
:root[data-theme="light"] .quote-actions #btnNext{ background:rgba(58,128,210,.12); border-color:#3A80D2; color:#1B4F8A; }
:root[data-theme="light"] .quote-actions #btnNext:hover:not(:disabled){ background:rgba(58,128,210,.20); }

/* Section header + notes */
:root[data-theme="light"] .quote-section-head .muted{ color:#64748B; }
:root[data-theme="light"] .q-note{ background:#F8FAFC; border-color:#E2E8F0; color:#475569; }

/* Errors */
:root[data-theme="light"] .quote-error{ border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.08); color:#B91C1C; }
:root[data-theme="light"] .field-invalid-msg{ color:#B91C1C; }

/* Rows + labels */
:root[data-theme="light"] .q-row{ border-bottom-color:#E2E8F0; }
:root[data-theme="light"] .q-label label{ color:#334155; }
:root[data-theme="light"] .q-label label em,
:root[data-theme="light"] .q-label label span{ color:#94A3B8; }
:root[data-theme="light"] .q-label .q-help{ color:#64748B; }

/* Inputs / selects */
:root[data-theme="light"] .q-control input,
:root[data-theme="light"] .q-control select{ background:#FFFFFF; border-color:#E2E8F0; color:#0A2540; }
:root[data-theme="light"] .q-control select:invalid{ color:#94A3B8; }
:root[data-theme="light"] .q-control select option,
:root[data-theme="light"] .q-control select optgroup{ background:#FFFFFF; color:#0A2540; }

/* Choice pills */
:root[data-theme="light"] .q-control .q-choice{ background:#FFFFFF; border-color:#E2E8F0; }
:root[data-theme="light"] .q-control .q-choice.is-active{ border-color:#3A80D2; background:rgba(58,128,210,.12); }

/* Step-2 column groups */
:root[data-theme="light"] .q-col{ background:#FFFFFF; border-color:#E2E8F0; }

/* Result / quote_complete card surfaces */
:root[data-theme="light"] .quote-ref{ background:#F8FAFC; border-color:#E2E8F0; color:#475569; }
:root[data-theme="light"] .qc-doc-card{ border-color:#E2E8F0; }
:root[data-theme="light"] .qc-doc-subhead{ color:#64748B; }
:root[data-theme="light"] .qc-doc-box{ border-color:#94A3B8; }
:root[data-theme="light"] .qc-doc-label{ color:#0A2540; }
:root[data-theme="light"] .qc-doc-note{ color:#64748B; }
:root[data-theme="light"] .qc-doc-detail{ color:#1E293B; }
:root[data-theme="light"] .qc-doc-item{ border-top-color:#E2E8F0; }
:root[data-theme="light"] .qc-doc-badge{ background:#F1F5F9; border-color:#E2E8F0; color:#0A2540; }
:root[data-theme="light"] .qc-doc-badge-esign{ background:#F8FAFC; color:#475569; }

/* Google Places autocomplete dropdown (attached to <body>) */
:root[data-theme="light"] .pac-container{ background:#FFFFFF; border-color:#E2E8F0; box-shadow:0 16px 40px rgba(10,37,64,.18); }
:root[data-theme="light"] .pac-item{ color:#0A2540; border-top-color:#E2E8F0; }
:root[data-theme="light"] .pac-item:hover{ background:#F1F5F9; }
:root[data-theme="light"] .pac-item-query{ color:#0A2540; }