/**
 * Solar Quote Tool — Frontend Styles
 *
 * Mobile-first. All rules scoped under .solar-quote-root.
 * Themed via CSS custom properties set by the shortcode.
 */

/* ─── Reset & Container ─── */
.solar-quote-root {
	--sq-primary: #2563eb;
	--sq-secondary: color-mix(in srgb, var(--sq-primary) 75%, #000);
	--sq-primary-hover: color-mix(in srgb, var(--sq-primary) 88%, #000);
	--sq-primary-soft: color-mix(in srgb, var(--sq-primary) 8%, #fff);
	--sq-accent: #16a34a;
	--sq-btn-bg: var(--sq-primary);
	--sq-radius: 14px;
	--sq-radius-sm: 10px;
	--sq-bg: #ffffff;
	--sq-bg-alt: #f8fafc;
	--sq-bg-muted: #f1f5f9;
	--sq-border: #e5e7eb;
	--sq-border-strong: #d1d5db;
	--sq-text: #0f172a;
	--sq-text-muted: #475569;
	--sq-text-light: #94a3b8;
	--sq-error: #dc2626;
	--sq-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
	--sq-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.04);
	--sq-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--sq-primary) 18%, transparent);
	--sq-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	box-sizing: border-box;
	color: var(--sq-text);
	background: var(--sq-bg);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	box-shadow: var(--sq-shadow);
	max-width: 680px;
	margin: 0 auto;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.solar-quote-root *,
.solar-quote-root *::before,
.solar-quote-root *::after {
	box-sizing: border-box;
}

/* ─── Theme Reset (Enfold / Avia compatibility) ─── */
.solar-quote-root input[type="text"],
.solar-quote-root input[type="email"],
.solar-quote-root input[type="tel"],
.solar-quote-root input[type="number"],
.solar-quote-root textarea,
.solar-quote-root select {
	font-family: inherit;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	float: none;
	width: 100%;
	height: auto;
	background-image: none;
}

/* Range inputs need separate reset — don't kill background or height */
.solar-quote-root input[type="range"] {
	font-family: inherit;
	float: none;
	box-shadow: none;
	border: none;
	padding: 0;
}

.solar-quote-root button,
.solar-quote-root .sq-btn {
	font-family: inherit;
	float: none;
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}

.solar-quote-root h1,
.solar-quote-root h2,
.solar-quote-root h3,
.solar-quote-root h4,
.solar-quote-root h5,
.solar-quote-root h6,
.alternate_color .solar-quote-root h1,
.alternate_color .solar-quote-root h2,
.alternate_color .solar-quote-root h3,
.alternate_color .solar-quote-root h4,
.alternate_color .solar-quote-root h5,
.alternate_color .solar-quote-root h6 {
	margin: 0;
	padding: 0;
	border: none;
	color: var(--sq-text) !important;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

/* Heading-color belt-and-suspenders for specific titles —
   these need to win against any theme rule, including Enfold's
   .alternate_color h1-h6 { color: #fff !important } that bleeds
   into colored sections. */
.solar-quote-root .sq-step__title,
.solar-quote-root .sq-cover__title,
.alternate_color .solar-quote-root .sq-step__title,
.alternate_color .solar-quote-root .sq-cover__title,
.av-special-heading .solar-quote-root .sq-step__title,
.av-special-heading .solar-quote-root .sq-cover__title {
	color: var(--sq-text) !important;
}

.solar-quote-root p {
	margin: 0;
	padding: 0;
	font-style: normal;
}

.solar-quote-root a {
	text-decoration: none;
}

/* Prevent Enfold's .avia-section and .av_textblock_section from injecting padding/margins */
.av_textblock_section .solar-quote-root,
.avia_textblock .solar-quote-root {
	margin-top: 0;
	margin-bottom: 0;
}

/* ─── Dark Theme ─── */
.solar-quote-root.sq-theme-dark {
	--sq-bg: #0f172a;
	--sq-bg-alt: #1e293b;
	--sq-border: #334155;
	--sq-text: #f1f5f9;
	--sq-text-muted: #94a3b8;
	--sq-text-light: #64748b;
	--sq-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ─── Progress Bar ─── */
.sq-progress {
	display: flex;
	gap: 6px;
	padding: 20px 32px 0;
}

.sq-progress__segment {
	flex: 1;
	height: 5px;
	border-radius: 999px;
	background: var(--sq-bg-muted);
	transition: background var(--sq-transition);
}

.sq-progress__segment.sq-active {
	background: var(--sq-primary);
}

/* ─── Step Container ─── */
.sq-step {
	padding: 28px 32px 32px;
	display: none;
	animation: sq-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sq-step.sq-visible {
	display: block;
}

@keyframes sq-fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── Step Header ─── */
.sq-step__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sq-primary);
	margin: 0 0 8px;
}

.sq-step__title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 8px;
	padding: 0;
	border: none;
	color: var(--sq-text);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	font-style: normal;
}

.sq-step__description {
	font-size: 15px;
	color: var(--sq-text-muted);
	margin: 0 0 28px;
	line-height: 1.5;
}

/* ─── Bill Slider (Step 1) ─── */
.sq-bill-display {
	text-align: center;
	margin-bottom: 24px;
	padding: 20px 16px 12px;
	background: linear-gradient(180deg, var(--sq-primary-soft) 0%, transparent 100%);
	border-radius: var(--sq-radius);
}

.sq-bill-display__amount {
	font-size: 56px;
	font-weight: 800;
	color: var(--sq-primary);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sq-bill-display__unit {
	font-size: 14px;
	color: var(--sq-text-muted);
	font-weight: 500;
	margin-top: 4px;
	display: block;
}

.sq-slider-wrap {
	padding: 0 6px;
	margin-bottom: 12px;
}

.sq-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: transparent;
	outline: none;
	cursor: pointer;
	margin: 12px 0;
}

/* ── Track (the visible bar) ── */
.sq-slider::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--sq-primary) 0%,
		var(--sq-primary) var(--sq-fill, 50%),
		var(--sq-bg-muted) var(--sq-fill, 50%),
		var(--sq-bg-muted) 100%
	);
	box-shadow: inset 0 0 0 1px var(--sq-border);
}

.sq-slider::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	border: 1px solid var(--sq-border);
	background: var(--sq-bg-muted);
}

/* Firefox uses ::-moz-range-progress for the filled portion */
.sq-slider::-moz-range-progress {
	height: 8px;
	border-radius: 999px 0 0 999px;
	background: var(--sq-primary);
}

/* ── Thumb (the draggable dot) ── */
.sq-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--sq-primary);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.08);
	cursor: grab;
	margin-top: -8px;
	transition: transform var(--sq-transition), box-shadow var(--sq-transition);
}

.sq-slider::-webkit-slider-thumb:hover {
	transform: scale(1.12);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22), var(--sq-shadow-focus);
}

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

.sq-slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--sq-primary);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
	cursor: grab;
}

.sq-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--sq-text-light);
	margin-bottom: 16px;
	font-weight: 500;
	padding: 0 4px;
}

.sq-manual-input {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	color: var(--sq-text-muted);
	margin-top: 4px;
}

.solar-quote-root .sq-manual-input__field,
.solar-quote-root .sq-manual-input input.sq-input {
	width: 110px;
	max-width: 110px;
	padding: 8px 12px;
	border: 1.5px solid var(--sq-border);
	border-radius: var(--sq-radius-sm);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	background: var(--sq-bg);
	color: var(--sq-text);
	transition: border-color var(--sq-transition), box-shadow var(--sq-transition);
}

.solar-quote-root .sq-manual-input__field:focus,
.solar-quote-root .sq-manual-input input.sq-input:focus {
	outline: none;
	border-color: var(--sq-primary);
	box-shadow: var(--sq-shadow-focus);
}

/* ─── Text Input (Step 2: ZIP) ─── */
.sq-input-wrap {
	margin-bottom: 16px;
}

.sq-input {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--sq-border-strong);
	border-radius: var(--sq-radius-sm);
	font-size: 17px;
	background: var(--sq-bg);
	color: var(--sq-text);
	transition: border-color var(--sq-transition), box-shadow var(--sq-transition);
}

.sq-input::placeholder {
	color: var(--sq-text-light);
}

.sq-input:focus {
	outline: none;
	border-color: var(--sq-primary);
	box-shadow: var(--sq-shadow-focus);
}

.sq-input.sq-input--error {
	border-color: var(--sq-error);
}

.sq-input-error {
	font-size: 13px;
	color: var(--sq-error);
	margin-top: 6px;
	display: none;
}

.sq-input-error.sq-visible {
	display: block;
}

/* ─── Card Selectors (Step 3: Shade + Roof) ─── */
.sq-card-group {
	margin-bottom: 24px;
}

.sq-card-group__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--sq-text);
	margin-bottom: 10px;
}

.sq-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/* Large variant for Step 1 property selector — only 2 options, centered */
.sq-cards--large {
	grid-template-columns: repeat(2, minmax(0, 240px));
	justify-content: center;
	gap: 16px;
	max-width: 520px;
	margin: 0 auto;
}

.sq-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 12px;
	border: 2px solid var(--sq-border);
	border-radius: var(--sq-radius-sm);
	background: var(--sq-bg);
	cursor: pointer;
	transition: border-color var(--sq-transition), background var(--sq-transition), box-shadow var(--sq-transition), transform var(--sq-transition);
	text-align: center;
	min-height: 100px;
}

.sq-card--large {
	padding: 28px 16px;
	min-height: 160px;
	gap: 12px;
}

.sq-card:hover {
	border-color: color-mix(in srgb, var(--sq-primary) 45%, var(--sq-border));
	background: var(--sq-primary-soft);
	transform: translateY(-1px);
}

.sq-card.sq-selected {
	border-color: var(--sq-primary);
	background: var(--sq-primary-soft);
	box-shadow: var(--sq-shadow-focus);
}

.sq-card__icon {
	width: 36px;
	height: 36px;
	color: var(--sq-text-muted);
	transition: color var(--sq-transition);
}

.sq-card__icon--large {
	width: 48px;
	height: 48px;
}

.sq-card:hover .sq-card__icon,
.sq-card.sq-selected .sq-card__icon {
	color: var(--sq-primary);
}

.sq-card__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--sq-text);
}

.sq-card--large .sq-card__label {
	font-size: 17px;
	font-weight: 700;
}

.sq-card__hint {
	font-size: 12px;
	color: var(--sq-text-light);
	font-weight: 500;
}

.sq-card--large .sq-card__hint {
	font-size: 13px;
}

/* ─── Goal Selector (Step 4) ─── */
.sq-goal-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.sq-goal-btn {
	padding: 22px 16px;
	border: 2px solid var(--sq-border);
	border-radius: var(--sq-radius-sm);
	background: var(--sq-bg);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--sq-transition), background var(--sq-transition), box-shadow var(--sq-transition), transform var(--sq-transition);
}

.sq-goal-btn:hover {
	border-color: color-mix(in srgb, var(--sq-primary) 45%, var(--sq-border));
	background: var(--sq-primary-soft);
	transform: translateY(-1px);
}

.sq-goal-btn.sq-selected {
	border-color: var(--sq-primary);
	background: var(--sq-primary-soft);
	box-shadow: var(--sq-shadow-focus);
}

.sq-goal-btn__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--sq-text);
	margin-bottom: 4px;
}

.sq-goal-btn__subtitle {
	font-size: 13px;
	color: var(--sq-text-muted);
}

.sq-offset-slider-wrap {
	display: none;
	margin-top: 4px;
}

.sq-offset-slider-wrap.sq-visible {
	display: block;
}

.sq-offset-value {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	color: var(--sq-primary);
	margin-bottom: 8px;
}

/* ─── Savings Preview (Pre-Lead Teaser) ─── */
.sq-preview {
	background: color-mix(in srgb, var(--sq-accent) 8%, var(--sq-bg));
	border: 1px solid color-mix(in srgb, var(--sq-accent) 25%, var(--sq-border));
	border-radius: var(--sq-radius);
	padding: 20px;
	text-align: center;
	margin-bottom: 24px;
}

.sq-preview__label {
	font-size: 13px;
	color: var(--sq-text-muted);
	margin-bottom: 4px;
}

.sq-preview__amount {
	font-size: 36px;
	font-weight: 800;
	color: var(--sq-accent);
	line-height: 1.2;
}

.sq-preview__note {
	font-size: 12px;
	color: var(--sq-text-light);
	margin-top: 4px;
}

/* ─── Lead Capture Form (Step 5) ─── */
.sq-form-group {
	margin-bottom: 16px;
}

.sq-form-group label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--sq-text);
	margin-bottom: 5px;
}

.sq-form-group label .sq-optional {
	font-weight: 400;
	color: var(--sq-text-light);
}

.sq-form-group .sq-input {
	font-size: 16px;
	padding: 12px 14px;
}

.sq-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.sq-consent-wrap {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--sq-text-muted);
	line-height: 1.4;
}

.sq-consent-wrap input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
}

.sq-consent-wrap a {
	color: var(--sq-primary);
}

/* Honeypot — visually hidden, accessible to bots */
.sq-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* ─── Privacy Notice ─── */
.sq-privacy {
	font-size: 12px;
	color: var(--sq-text-light);
	text-align: center;
	margin-top: 12px;
}

.sq-privacy a {
	color: var(--sq-primary);
}

/* ─── Property Type Cards (Step 1) ─── */
.sq-property-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.sq-property-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 20px;
	border: 2px solid var(--sq-border);
	border-radius: var(--sq-radius);
	background: var(--sq-bg);
	cursor: pointer;
	transition: border-color var(--sq-transition), background var(--sq-transition), box-shadow var(--sq-transition), transform var(--sq-transition);
	text-align: center;
}

.sq-property-card:hover {
	border-color: color-mix(in srgb, var(--sq-primary) 40%, var(--sq-border));
	background: var(--sq-bg-alt);
	transform: translateY(-2px);
	box-shadow: var(--sq-shadow-lg);
}

.sq-property-card.sq-selected {
	border-color: var(--sq-primary);
	background: color-mix(in srgb, var(--sq-primary) 6%, var(--sq-bg));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-primary) 15%, transparent);
}

.sq-property-card__icon {
	width: 48px;
	height: 48px;
	color: var(--sq-text-muted);
	transition: color var(--sq-transition);
}

.sq-property-card.sq-selected .sq-property-card__icon,
.sq-property-card:hover .sq-property-card__icon {
	color: var(--sq-primary);
}

.sq-property-card__label {
	font-size: 18px;
	font-weight: 700;
	color: var(--sq-text);
}

.sq-property-card__hint {
	font-size: 13px;
	color: var(--sq-text-light);
}

/* ─── Bill Presets (Step 2) ─── */
.sq-presets {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.sq-preset {
	padding: 9px 18px;
	border: 1.5px solid var(--sq-border);
	border-radius: 999px;
	background: var(--sq-bg);
	color: var(--sq-text-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--sq-transition);
	white-space: nowrap;
}

.sq-preset:hover {
	border-color: var(--sq-primary);
	color: var(--sq-primary);
	background: var(--sq-primary-soft);
}

.sq-preset.sq-active {
	background: var(--sq-primary);
	border-color: var(--sq-primary);
	color: #fff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--sq-primary) 35%, transparent);
}

/* ─── Bill Feedback (Step 2) ─── */
.sq-bill-feedback {
	text-align: center;
	font-size: 13px;
	color: var(--sq-text-muted);
	margin-top: 14px;
	min-height: 20px;
	transition: color var(--sq-transition);
	font-weight: 500;
	font-style: italic;
}

.sq-bill-feedback--high {
	color: var(--sq-accent);
	font-weight: 600;
	font-style: normal;
}

/* ─── Pill Selectors (Step 5: Timeline, Ownership) ─── */
.sq-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.sq-pill {
	padding: 10px 18px;
	border: 1.5px solid var(--sq-border-strong);
	border-radius: 999px;
	background: var(--sq-bg);
	color: var(--sq-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--sq-transition);
	text-align: center;
}

.sq-pill:hover {
	border-color: var(--sq-primary);
	background: var(--sq-primary-soft);
	color: var(--sq-primary);
}

.sq-pill.sq-selected {
	border-color: var(--sq-primary);
	background: var(--sq-primary);
	color: #ffffff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--sq-primary) 30%, transparent);
}

/* ─── Battery Cards (Step 5) ─── */
.sq-battery-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 20px;
}

/* ─── Section Labels within Steps ─── */
.sq-section-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--sq-text);
	margin: 20px 0 10px;
}

.sq-section-label:first-of-type {
	margin-top: 0;
}

/* ─── Trust Signals (Step 6) ─── */
.sq-trust-row {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.sq-trust-signal {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sq-text);
	line-height: 1.4;
}

.sq-trust-signal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--sq-accent);
	background: color-mix(in srgb, var(--sq-accent) 12%, transparent);
	border-radius: 50%;
}

.sq-trust-signal__icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* ─── Teaser Box (Step 6) ─── */
.sq-teaser {
	background: color-mix(in srgb, var(--sq-accent) 6%, var(--sq-bg));
	border: 1px solid color-mix(in srgb, var(--sq-accent) 20%, var(--sq-border));
	border-radius: var(--sq-radius);
	padding: 20px 24px;
	text-align: center;
	margin-bottom: 24px;
	font-size: 15px;
	color: var(--sq-text);
	line-height: 1.6;
}

.sq-teaser strong {
	color: var(--sq-accent);
}

/* ─── Emotional Framing (Results) ─── */
.sq-emotional,
.sq-results__emotional {
	padding: 20px 24px;
	border-top: 1px solid var(--sq-border);
	text-align: center;
}

.sq-emotional__item,
.sq-results__emotional-item {
	font-size: 15px;
	color: var(--sq-text);
	margin-bottom: 8px;
	line-height: 1.5;
}

.sq-emotional__item:last-child,
.sq-results__emotional-item:last-child {
	margin-bottom: 0;
}

.sq-emotional__item strong,
.sq-results__emotional-item strong {
	color: var(--sq-accent);
	font-weight: 700;
}

.sq-emotional__icon {
	display: inline-block;
	margin-right: 6px;
	font-size: 18px;
}

/* Results page bottom links (Adjust my inputs · Print results) */
.sq-results__links {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: var(--sq-text-light);
}

.sq-results__links a.sq-results__restart {
	color: var(--sq-text-muted);
	text-decoration: underline;
	cursor: pointer;
	transition: color var(--sq-transition);
}

.sq-results__links a.sq-results__restart:hover {
	color: var(--sq-primary);
}

/* ─── Print Link (Results) ─── */
.sq-results__print {
	text-align: center;
	margin-top: 4px;
}

.sq-results__print a {
	font-size: 13px;
	color: var(--sq-text-muted);
	cursor: pointer;
	text-decoration: underline;
}

/* ─── Navigation Buttons ─── */
.sq-nav {
	display: flex;
	gap: 12px;
	margin-top: 28px;
	align-items: stretch;
}

.sq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border: none;
	border-radius: var(--sq-radius-sm);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--sq-transition), transform var(--sq-transition), box-shadow var(--sq-transition), border-color var(--sq-transition);
	line-height: 1;
	letter-spacing: -0.005em;
}

.sq-btn:active {
	transform: scale(0.98);
}

.sq-btn--primary {
	background: var(--sq-btn-bg);
	color: #ffffff;
	flex: 2;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--sq-btn-bg) 30%, transparent);
	min-height: 50px;
}

.sq-btn--primary:hover {
	background: var(--sq-primary-hover);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sq-btn-bg) 40%, transparent);
	transform: translateY(-1px);
}

.sq-btn--primary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.sq-btn--secondary {
	background: var(--sq-bg);
	color: var(--sq-text);
	border: 1.5px solid var(--sq-border-strong);
	flex: 1;
	min-height: 50px;
}

.sq-btn--secondary:hover {
	background: var(--sq-bg-muted);
	border-color: var(--sq-text-muted);
}

.sq-btn--accent {
	background: var(--sq-accent);
	color: #ffffff;
	flex: 1;
}

.sq-btn--accent:hover {
	filter: brightness(0.9);
	box-shadow: var(--sq-shadow-lg);
}

/* ─── Spinner ─── */
.sq-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sq-spin 0.6s linear infinite;
}

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

/* ─── Results Page ─── */
.sq-results {
	padding: 0;
}

.sq-results__hero {
	background: linear-gradient(135deg, var(--sq-primary), var(--sq-secondary));
	color: #ffffff;
	text-align: center;
	padding: 32px 24px;
}

.sq-results__hero-label {
	font-size: 14px;
	opacity: 0.85;
	margin-bottom: 4px;
}

.sq-results__hero-amount {
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
}

.sq-results__hero-note {
	font-size: 13px;
	opacity: 0.7;
	margin-top: 6px;
}

.sq-results__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--sq-border);
}

.sq-results__card {
	background: var(--sq-bg);
	padding: 20px;
	text-align: center;
}

.sq-results__card-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--sq-text);
	line-height: 1.2;
}

.sq-results__card-label {
	font-size: 12px;
	color: var(--sq-text-muted);
	margin-top: 4px;
}

.sq-results__card--accent .sq-results__card-value {
	color: var(--sq-accent);
}

.sq-results__co2 {
	background: color-mix(in srgb, var(--sq-accent) 8%, var(--sq-bg));
	text-align: center;
	padding: 16px 24px;
	border-top: 1px solid var(--sq-border);
}

.sq-results__co2-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--sq-accent);
}

.sq-results__co2-label {
	font-size: 12px;
	color: var(--sq-text-muted);
}

.sq-results__actions {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sq-results__restart {
	text-align: center;
}

.sq-results__restart a {
	font-size: 13px;
	color: var(--sq-text-muted);
	cursor: pointer;
	text-decoration: underline;
}

/* ═══════════════════════════════════════════
 * OPTIONAL DETAILS (collapsible in Step 3)
 * ═══════════════════════════════════════════ */

.sq-optional-details {
	margin: 16px 0 8px;
	border: 1.5px dashed var(--sq-border-strong);
	border-radius: var(--sq-radius-sm);
	background: var(--sq-bg-alt);
	transition: background var(--sq-transition), border-color var(--sq-transition);
}

.sq-optional-details[open] {
	background: var(--sq-bg);
	border-color: var(--sq-primary);
	border-style: solid;
	box-shadow: var(--sq-shadow);
}

.sq-optional-details__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	outline: none;
}

.sq-optional-details__summary::-webkit-details-marker {
	display: none;
}

.sq-optional-details__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sq-primary-soft);
	color: var(--sq-primary);
	border-radius: 50%;
	transition: transform var(--sq-transition);
}

.sq-optional-details[open] .sq-optional-details__icon {
	transform: rotate(90deg);
}

.sq-optional-details__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.4;
}

.sq-optional-details__text strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--sq-text);
}

.sq-optional-details__hint {
	font-size: 12px;
	color: var(--sq-text-muted);
	font-weight: 500;
}

.sq-optional-details__body {
	padding: 4px 16px 16px;
	animation: sq-fadeIn 0.25s ease;
}

.sq-optional-details__body .sq-form-row {
	margin-bottom: 12px;
}

.sq-optional-details__body .sq-form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.sq-optional-details__body .sq-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sq-optional-details__body label {
	font-size: 13px;
	font-weight: 600;
	color: var(--sq-text);
}

.sq-optional-details__body .sq-optional {
	color: var(--sq-text-light);
	font-weight: 500;
	font-size: 12px;
}

.sq-optional-details__body select.sq-input {
	padding: 12px 14px;
	font-size: 15px;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
	padding-right: 36px;
}

.sq-optional-details__reassure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--sq-text-muted);
	margin: 4px 0 0;
	line-height: 1.5;
}

.sq-optional-details__check {
	flex-shrink: 0;
	color: var(--sq-accent);
	display: inline-flex;
	margin-top: 2px;
}

.sq-optional-details__check svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 520px) {
	.sq-optional-details__body .sq-form-row--split {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════
 * COVER PAGE (Step 0) — Hook / Intro
 * ═══════════════════════════════════════════ */

.sq-cover {
	padding: 44px 32px 36px;
	text-align: center;
	background:
		radial-gradient(ellipse at top, var(--sq-primary-soft) 0%, transparent 65%),
		linear-gradient(180deg, var(--sq-bg-alt) 0%, var(--sq-bg) 50%);
}

.sq-cover__logo {
	display: block;
	max-height: 52px;
	max-width: 220px;
	width: auto;
	height: auto;
	margin: 0 auto 18px;
	object-fit: contain;
}

.sq-cover__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	background: #ffffff;
	border: 1px solid var(--sq-border);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sq-text-muted);
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	letter-spacing: 0.01em;
}

.sq-cover__eyebrow svg {
	width: 13px;
	height: 13px;
	color: var(--sq-primary);
	flex-shrink: 0;
}

.sq-cover__title,
.sq-cover h2.sq-cover__title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--sq-text);
	margin: 0 auto 14px;
	max-width: 520px;
	padding: 0;
	border: none;
	text-transform: none;
	font-style: normal;
	text-align: center;
	/* Suppress focus ring — this element is programmatically focused
	   for screen-reader step announcements, but the ring reads as a bug visually. */
	outline: none !important;
	box-shadow: none !important;
}

.sq-cover__title:focus,
.sq-cover__title:focus-visible,
.sq-step__title:focus,
.sq-step__title:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.sq-cover__subhead,
.sq-cover p.sq-cover__subhead {
	font-size: 16px;
	line-height: 1.55;
	color: var(--sq-text-muted);
	margin: 0 auto 30px;
	max-width: 460px;
	padding: 0;
	font-style: normal;
	text-align: center !important;
	text-indent: 0;
}

.sq-cover__benefits {
	list-style: none;
	margin: 0 auto 28px;
	padding: 22px 26px;
	max-width: 480px;
	background: #ffffff;
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sq-cover__benefit {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	list-style: none;
}

.sq-cover__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--sq-primary-soft);
	color: var(--sq-primary);
}

.sq-cover__benefit-icon svg {
	width: 20px;
	height: 20px;
}

.sq-cover__benefit-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.5;
	min-width: 0;
	flex: 1;
}

.sq-cover__benefit-text strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--sq-text);
	letter-spacing: -0.005em;
}

/* Lock the hint copy color — Enfold's default link/span color can bleed through
   on plain text, making benefit descriptions look like broken links. */
.sq-cover__benefit-text span,
.solar-quote-root .sq-cover__benefit-text span {
	font-size: 13px;
	color: var(--sq-text-muted) !important;
	font-weight: 400;
	text-decoration: none;
}

.sq-cover__cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.sq-cover__cta {
	font-size: 17px !important;
	padding: 16px 40px !important;
	min-width: 260px;
	letter-spacing: -0.005em;
	font-weight: 700 !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--sq-btn-bg) 35%, transparent), 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.sq-cover__cta:hover {
	box-shadow: 0 8px 22px color-mix(in srgb, var(--sq-btn-bg) 45%, transparent), 0 2px 4px rgba(15, 23, 42, 0.1) !important;
	transform: translateY(-1px);
}

.sq-cover__reassure,
.sq-cover p.sq-cover__reassure {
	font-size: 12px;
	color: var(--sq-text-muted);
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-align: center !important;
}

/* Belt-and-suspenders: any <p> inside the cover block defaults centered
   regardless of what Enfold (or any theme) does to paragraph alignment. */
.sq-cover p {
	text-align: center;
}

/* Benefits card keeps its left-aligned text internally */
.sq-cover__benefits,
.sq-cover__benefits * {
	text-align: left;
}

/* Tablet / mobile */
@media (max-width: 640px) {
	.sq-cover {
		padding: 32px 20px 28px;
	}
	.sq-cover__logo {
		max-height: 44px;
		margin-bottom: 14px;
	}
	.sq-cover__title,
	.sq-cover h2.sq-cover__title {
		font-size: 24px;
	}
	.sq-cover__subhead {
		font-size: 15px;
		margin-bottom: 24px;
	}
	.sq-cover__benefits {
		padding: 18px 18px;
		gap: 14px;
	}
	.sq-cover__benefit-icon {
		width: 36px;
		height: 36px;
	}
	.sq-cover__benefit-icon svg {
		width: 18px;
		height: 18px;
	}
	.sq-cover__cta {
		font-size: 16px !important;
		padding: 14px 28px !important;
		min-width: 0;
		width: 100%;
	}
}

/* ─── Roof-Capped Notice (Results) ─── */
.sq-results__capped-note {
	margin: 16px 20px 0;
	padding: 14px 16px;
	background: color-mix(in srgb, var(--sq-primary) 6%, var(--sq-bg));
	border: 1px solid color-mix(in srgb, var(--sq-primary) 25%, var(--sq-border));
	border-left: 4px solid var(--sq-primary);
	border-radius: var(--sq-radius-sm);
	font-size: 13px;
	line-height: 1.55;
	color: var(--sq-text);
}

.sq-results__capped-note strong {
	color: var(--sq-primary);
}

/* ─── Error Banner ─── */
.sq-error-banner {
	background: color-mix(in srgb, var(--sq-error) 8%, var(--sq-bg));
	border: 1px solid color-mix(in srgb, var(--sq-error) 25%, var(--sq-border));
	border-radius: var(--sq-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--sq-error);
	display: none;
}

.sq-error-banner.sq-visible {
	display: block;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
	.solar-quote-root {
		border-radius: var(--sq-radius-sm);
	}

	.sq-progress {
		padding: 16px 20px 0;
	}

	.sq-step {
		padding: 22px 20px 24px;
	}

	.sq-step__title {
		font-size: 22px;
	}

	.sq-step__description {
		font-size: 14px;
		margin-bottom: 22px;
	}

	.sq-bill-display {
		padding: 16px 12px 10px;
	}

	.sq-bill-display__amount {
		font-size: 44px;
	}

	.sq-results__hero-amount {
		font-size: 36px;
	}

	.sq-results__card-value {
		font-size: 22px;
	}

	.sq-form-row {
		grid-template-columns: 1fr;
	}

	.sq-goal-buttons {
		grid-template-columns: 1fr;
	}

	.sq-cards--large {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		max-width: 100%;
	}

	.sq-card--large {
		min-height: 130px;
		padding: 20px 10px;
	}

	.sq-card--large .sq-card__label {
		font-size: 15px;
	}

	.sq-presets {
		gap: 6px;
	}

	.sq-preset {
		padding: 8px 14px;
		font-size: 12px;
		flex: 1;
		min-width: 0;
	}

	.sq-battery-cards {
		grid-template-columns: 1fr;
	}

	.sq-pills {
		justify-content: flex-start;
	}

	.sq-trust-row {
		gap: 8px;
	}

	.sq-nav {
		gap: 10px;
	}

	.sq-btn {
		padding: 13px 18px;
		font-size: 14px;
	}

	.sq-btn--primary {
		flex: 2;
	}
}

@media (max-width: 380px) {
	.sq-step__title {
		font-size: 20px;
	}

	.sq-cards--large {
		grid-template-columns: 1fr;
	}

	.sq-cards {
		grid-template-columns: 1fr 1fr;
	}
}

/* ─── Focus Visible (keyboard-only focus rings) ─── */
.sq-btn:focus-visible,
.sq-input:focus-visible,
.sq-card:focus-visible,
.sq-goal-btn:focus-visible,
.sq-pill:focus-visible,
.sq-preset:focus-visible,
.sq-slider:focus-visible {
	outline: none;
	box-shadow: var(--sq-shadow-focus);
	border-color: var(--sq-primary);
}

.sq-btn--primary:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -5px;
	box-shadow: var(--sq-shadow-focus), 0 2px 6px color-mix(in srgb, var(--sq-btn-bg) 30%, transparent);
}

/* High contrast mode support */
@media (forced-colors: active) {
	.sq-card,
	.sq-pill,
	.sq-preset,
	.sq-goal-btn,
	.sq-btn {
		border: 1px solid CanvasText;
	}

	.sq-card.sq-selected,
	.sq-pill.sq-selected,
	.sq-preset.sq-active,
	.sq-goal-btn.sq-selected {
		border: 2px solid Highlight;
	}
}

/* Slider track fill is handled via ::-webkit-slider-runnable-track
   and ::-moz-range-progress in the slider section above. */

/* ─── Results Card Stagger Animation ─── */
@keyframes sq-slideUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sq-results__hero {
	animation: sq-fadeIn 0.4s ease;
}

.sq-results__card {
	animation: sq-slideUp 0.35s ease both;
}

.sq-results__card:nth-child(1) { animation-delay: 0.1s; }
.sq-results__card:nth-child(2) { animation-delay: 0.15s; }
.sq-results__card:nth-child(3) { animation-delay: 0.2s; }
.sq-results__card:nth-child(4) { animation-delay: 0.25s; }
.sq-results__card:nth-child(5) { animation-delay: 0.3s; }
.sq-results__card:nth-child(6) { animation-delay: 0.35s; }

.sq-results__co2 {
	animation: sq-slideUp 0.35s ease 0.4s both;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
	.sq-step,
	.sq-results__hero,
	.sq-results__card,
	.sq-results__co2 {
		animation: none;
	}

	.sq-slider::-webkit-slider-thumb:hover {
		transform: none;
	}

	.sq-btn:active {
		transform: none;
	}
}

/* ─── Print ─── */
@media print {
	.solar-quote-root {
		box-shadow: none;
		border: 1px solid #ccc;
		max-width: 100%;
		break-inside: avoid;
	}

	.sq-progress,
	.sq-nav,
	.sq-results__actions,
	.sq-results__restart,
	.sq-consent-wrap,
	.sq-hp,
	.sq-privacy,
	.sq-error-banner {
		display: none !important;
	}

	/* Force background colors to print */
	.sq-results__hero {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		background: #1e40af !important;
		color: #fff !important;
		padding: 20px 24px;
	}

	.sq-results__co2 {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		background: #f0fdf4 !important;
	}

	.sq-results__grid {
		background: #e2e8f0;
	}

	.sq-results__card {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		animation: none;
	}

	/* Show all step content for print if results visible */
	.sq-results.sq-visible {
		display: block !important;
	}

	/* Add a print footer with branding */
	.solar-quote-root::after {
		content: 'Solar savings estimate — for informational purposes only. Actual results may vary.';
		display: block;
		padding: 12px 24px;
		font-size: 10px;
		color: #6b7280;
		text-align: center;
		border-top: 1px solid #e2e8f0;
	}
}