/*!
 * Harvardbridge Automotives — quote form
 * @version 1.1.0
 * Changelog: 1.1.0 — Initial build.
 *
 * Inherits the theme's tokens where they exist and falls back to literals where they do not,
 * so the form still looks right if it is ever dropped onto a page outside the theme.
 */
.hba-quote {
	--q-ink: var(--hba-chrome, #E9EDF2);
	--q-muted: var(--hba-steel, #9BA7B4);
	--q-surface: var(--hba-carbon, #161C24);
	--q-line: var(--hba-slate, #1E2732);
	--q-solar: var(--hba-solar, #F5B301);
	--q-on-cta: var(--hba-on-cta, #0B0F14);
	--q-alert: var(--hba-alert, #E5675F);
	max-width: 44rem;
}

.hba-quote fieldset { margin: 0; padding: 0; border: 0; }
.hba-quote legend { padding: 0; font-size: 1.15rem; font-weight: 700; }

.hba-step { display: none; }
.hba-step.is-active { display: block; }

/* No JavaScript: every step is visible and the form still submits. */
.no-js .hba-step,
.hba-quote__form:not([data-enhanced]) .hba-step:first-of-type { display: block; }

.hba-steps-bar {
	display: flex;
	gap: 4px;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: qstep;
}

.hba-steps-bar li {
	flex: 1;
	margin: 0;
	padding: 8px 4px 0;
	border-top: 3px solid var(--q-line);
	font-size: 0.78rem;
	color: var(--q-muted);
}

.hba-steps-bar li.is-current,
.hba-steps-bar li.is-done { border-top-color: var(--q-solar); color: var(--q-ink); }

.hba-field { margin-bottom: 1.25rem; }
.hba-field label,
.hba-field .hba-label { display: block; margin-bottom: 0.35rem; font-weight: 600; }

.hba-quote input[type="text"],
.hba-quote input[type="tel"],
.hba-quote input[type="email"],
.hba-quote input[type="date"],
.hba-quote input[type="file"],
.hba-quote select,
.hba-quote textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--q-surface);
	color: var(--q-ink);
	border: 1px solid var(--q-line);
	border-radius: 8px;
	font: inherit;
	font-size: 1rem; /* 16px minimum: anything smaller makes iOS zoom on focus */
}

.hba-quote textarea { min-height: 6rem; }
.hba-quote :focus-visible { outline: 3px solid var(--q-solar); outline-offset: 2px; }

.hba-hint { margin: 0.4rem 0 0; color: var(--q-muted); font-size: 0.87rem; }

.hba-radio,
.hba-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	min-height: 48px;
	padding: 10px 0;
	font-weight: 400;
	cursor: pointer;
}

.hba-radio input,
.hba-checkbox input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--q-solar); }

.hba-yesno { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.hba-tiercard {
	display: flex;
	gap: 12px;
	padding: 14px;
	margin-bottom: 10px;
	background: var(--q-surface);
	border: 1px solid var(--q-line);
	border-radius: 12px;
	cursor: pointer;
}

.hba-tiercard:has( input:checked ) { border-color: var(--q-solar); }
.hba-tiercard input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--q-solar); }
.hba-tiercard__body { display: block; }
.hba-tiercard__sub { display: block; color: var(--q-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; }
.hba-tiercard__price { display: block; margin-top: 4px; color: var(--q-solar); font-weight: 600; font-size: 0.9rem; }
.hba-tiercard__for { display: block; margin-top: 4px; color: var(--q-muted); font-size: 0.9rem; }

.hba-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hba-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 8px 14px;
	background: var(--q-surface);
	border: 1px solid var(--q-line);
	border-radius: 999px;
	font-size: 0.9rem;
	cursor: pointer;
}
.hba-chip:has( input:checked ) { border-color: var(--q-solar); }
.hba-chip input { accent-color: var(--q-solar); }

.hba-estimate {
	padding: 16px;
	margin: 1.25rem 0;
	background: var(--q-surface);
	border: 1px solid var(--q-line);
	border-left: 3px solid var(--q-solar);
	border-radius: 10px;
}

.hba-estimate__label { margin: 0; color: var(--q-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hba-estimate__amount { margin: 4px 0; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hba-estimate__gst { margin: 0; color: var(--q-muted); font-size: 0.9rem; }

.hba-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }

.hba-quote .hba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

.hba-quote .hba-btn--primary { background: var(--q-solar); color: var(--q-on-cta); }
.hba-quote .hba-btn--ghost { background: transparent; color: var(--q-ink); border-color: var(--q-line); }

@media (max-width: 479px) {
	.hba-quote .hba-btn { width: 100%; }
}

.hba-quote__error {
	padding: 14px 16px;
	margin-bottom: 1.25rem;
	border: 1px solid var(--q-alert);
	border-left-width: 4px;
	border-radius: 8px;
	color: var(--q-alert);
	font-weight: 600;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.hba-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hba-quote--done .hba-estimate--final { border-left-color: var(--hba-verified, #1FA971); }