/**
 * Quote wizard.
 *
 * Built entirely on the existing --zen-* tokens so the wizard inherits the
 * site's type scale, spacing and colour rather than starting a second system
 * that drifts. No new blues, no new radii.
 */

.zen-quote {
	--zq-gap: var(--zen-space-4, 1rem);
	max-inline-size: 46rem;
}

/* ---- Stepper --------------------------------------------------------- */

.zen-quote__steps {
	display: none;
	list-style: none;
	margin: 0 0 var(--zen-space-6, 2rem);
	padding: 0;
	gap: var(--zen-space-2, 0.5rem);
}

@media (min-width: 768px) {
	.zen-quote__steps { display: flex; }
	.zen-quote__mobile-progress { display: none; }
}

.zen-quote__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	font-size: 0.8rem;
	color: var(--zen-ink-3, #6b7885);
	padding-block-end: 0.6rem;
	border-block-end: 2px solid var(--zen-line, #e6e2da);
	transition: color 180ms ease, border-color 180ms ease;
}

.zen-quote__step.is-current { color: var(--zen-blue-700); border-block-end-color: var(--zen-blue-600); }
.zen-quote__step.is-done { color: var(--zen-ink-2); border-block-end-color: var(--zen-blue-500); }

.zen-quote__step-num {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--zen-sunk, #f4f2ee);
	font-size: 0.72rem;
	font-weight: 600;
	flex: 0 0 auto;
}

.zen-quote__step.is-current .zen-quote__step-num { background: var(--zen-blue-600); color: #fff; }
.zen-quote__step.is-done .zen-quote__step-num { background: var(--zen-blue-100); color: var(--zen-blue-700); }

/* Mobile falls back to a count and a bar - six labels do not fit a phone. */
.zen-quote__mobile-progress {
	display: flex;
	align-items: center;
	gap: var(--zen-space-3, 0.75rem);
	margin: 0 0 var(--zen-space-5, 1.5rem);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--zen-ink-2);
}

.zen-quote__bar {
	flex: 1;
	block-size: 6px;
	border-radius: 999px;
	background: var(--zen-line, #e6e2da);
	overflow: hidden;
}

.zen-quote__bar-fill {
	display: block;
	block-size: 100%;
	inline-size: 16%;
	background: var(--zen-blue-600);
	transition: inline-size 220ms ease;
}

/* ---- Panels ----------------------------------------------------------- */

.zen-quote__title {
	font-size: var(--zen-step-2);
	margin: 0 0 var(--zen-space-2, 0.5rem);
	outline: none;
}

.zen-quote__lede {
	margin: 0 0 var(--zen-space-5, 1.5rem);
	color: var(--zen-ink-2);
}

.zen-quote__hint {
	display: block;
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--zen-ink-3);
	margin-block-start: 0.2rem;
}

.zen-quote__group {
	border: 0;
	padding: 0;
	margin: 0 0 var(--zen-space-5, 1.5rem);
}

.zen-quote__group legend {
	padding: 0;
	margin-block-end: var(--zen-space-3, 0.75rem);
	font-weight: 600;
}

/* ---- Fields ------------------------------------------------------------ */

.zen-quote__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--zq-gap);
}

.zen-quote__field { margin: 0; }

.zen-quote__field label {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	margin-block-end: 0.35rem;
}

.zen-quote__req { color: var(--zen-red-600); }

.zen-quote__field input[type=text],
.zen-quote__field input[type=tel],
.zen-quote__field input[type=email] {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--zen-line-2, #d3cdc2);
	border-radius: var(--zen-radius, 8px);
	background: var(--zen-surface, #fff);
	/* 16px keeps iOS from zooming the page when the field takes focus. */
	font-size: 16px;
	font-family: inherit;
	color: var(--zen-ink);
}

.zen-quote__field input:focus-visible {
	outline: 3px solid var(--zen-blue-500);
	outline-offset: 1px;
	border-color: var(--zen-blue-600);
}

.zen-quote__field.has-error input { border-color: var(--zen-danger, #b3261e); }

.zen-quote__err {
	display: block;
	min-block-size: 1.1rem;
	margin-block-start: 0.25rem;
	font-size: 0.82rem;
	color: var(--zen-danger, #b3261e);
}

.zen-quote__unknown {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--zen-ink-2);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.zen-quote__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Selectable cards --------------------------------------------------- */

.zen-quote__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--zen-space-3, 0.75rem);
}

.zen-quote__cards--tight { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.zq-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 56px;
	padding: 0.75rem 2.25rem 0.75rem 0.9rem;
	border: 1px solid var(--zen-line-2, #d3cdc2);
	border-radius: var(--zen-radius, 8px);
	background: var(--zen-surface, #fff);
	cursor: pointer;
	font-weight: 500;
	line-height: 1.3;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.zq-card--sm { min-block-size: 48px; font-size: 0.92rem; }

.zq-card:hover { border-color: var(--zen-blue-500); box-shadow: 0 1px 3px rgba(11, 37, 69, 0.08); }

/* The input stays in the accessibility tree and drives the visual state. */
.zq-card input {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.zq-card:has(input:focus-visible) {
	outline: 3px solid var(--zen-blue-500);
	outline-offset: 2px;
}

.zq-card:has(input:checked),
.zq-card.is-selected {
	border-color: var(--zen-blue-600);
	background: var(--zen-blue-050, #f4f8fd);
}

.zq-card__tick {
	position: absolute;
	inset-inline-end: 0.75rem;
	inline-size: 20px;
	block-size: 20px;
	border: 1px solid var(--zen-line-2, #d3cdc2);
	border-radius: 50%;
	background: var(--zen-surface, #fff);
}

/* A tick as well as a colour change, so selection is not colour-only. */
.zq-card:has(input:checked) .zq-card__tick,
.zq-card.is-selected .zq-card__tick {
	border-color: var(--zen-blue-600);
	background: var(--zen-blue-600);
}

.zq-card:has(input:checked) .zq-card__tick::after,
.zq-card.is-selected .zq-card__tick::after {
	content: '';
	position: absolute;
	inset-block-start: 5px;
	inset-inline-start: 7px;
	inline-size: 5px;
	block-size: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---- Uploads ------------------------------------------------------------ */

.zen-quote__uploads {
	display: grid;
	gap: var(--zen-space-3, 0.75rem);
}

.zen-upload__drop {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--zen-space-4, 1rem);
	border: 1px dashed var(--zen-line-2, #d3cdc2);
	border-radius: var(--zen-radius, 8px);
	background: var(--zen-sunk, #f4f2ee);
	cursor: pointer;
	min-block-size: 64px;
}

.zen-upload__drop.is-over { border-color: var(--zen-blue-600); background: var(--zen-blue-050); }
.zen-upload__drop:has(input:focus-visible) { outline: 3px solid var(--zen-blue-500); outline-offset: 2px; }

.zen-upload__label { font-weight: 600; }
.zen-upload__hint { font-size: 0.82rem; color: var(--zen-ink-3); }

.zen-upload__drop input[type=file] {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
	cursor: pointer;
}

.zen-upload__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

.zen-upload__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--zen-line, #e6e2da);
	border-radius: var(--zen-radius, 8px);
	font-size: 0.86rem;
}

.zen-upload__thumb { inline-size: 40px; block-size: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.zen-upload__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zen-upload__state { color: var(--zen-ink-3); font-size: 0.8rem; }

.zen-upload__remove {
	min-block-size: 40px;
	padding-inline: 0.6rem;
	border: 0;
	background: none;
	color: var(--zen-red-600);
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
	text-decoration: underline;
}

/* ---- Review -------------------------------------------------------------- */

.zen-review {
	position: relative;
	padding: var(--zen-space-4, 1rem);
	border: 1px solid var(--zen-line, #e6e2da);
	border-radius: var(--zen-radius, 8px);
	margin-block-end: var(--zen-space-3, 0.75rem);
}

.zen-review__title { margin: 0 0 0.4rem; font-size: 1rem; }
.zen-review__list { list-style: none; margin: 0; padding: 0; color: var(--zen-ink-2); }
.zen-review__list li { padding-block: 0.1rem; }

.zen-review__edit {
	position: absolute;
	inset-block-start: var(--zen-space-3, 0.75rem);
	inset-inline-end: var(--zen-space-3, 0.75rem);
	min-block-size: 40px;
	padding-inline: 0.7rem;
	border: 1px solid var(--zen-line-2, #d3cdc2);
	border-radius: var(--zen-radius, 8px);
	background: var(--zen-surface, #fff);
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
}

/* ---- Navigation ----------------------------------------------------------- */

.zen-quote__nav {
	display: flex;
	gap: var(--zen-space-3, 0.75rem);
	align-items: center;
	margin-block-start: var(--zen-space-6, 2rem);
}

.zen-quote__next,
.zen-quote__submit { margin-inline-start: auto; }

@media (max-width: 767px) {
	.zen-quote__nav { flex-direction: column-reverse; align-items: stretch; }
	.zen-quote__nav .zen-btn { inline-size: 100%; justify-content: center; }
	.zen-quote__next, .zen-quote__submit { margin-inline-start: 0; }
	.zen-quote__cards { grid-template-columns: 1fr 1fr; }
	.zen-quote__grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
	.zen-quote__cards { grid-template-columns: 1fr; }
}

.zen-quote__empty { color: var(--zen-ink-2); }
.zen-quote__done-actions { display: flex; flex-wrap: wrap; gap: var(--zen-space-3, 0.75rem); }

@media (prefers-reduced-motion: reduce) {
	.zen-quote__step, .zq-card, .zen-quote__bar-fill { transition: none; }
}

/* ---- Page layout --------------------------------------------------------- */

/* Elementor rendered both columns at a fixed 408px, leaving 344px of the
   1200px row empty and squeezing the wizard into a third of the space it was
   designed for. The row is a flex container, so the columns are sized here:
   the wizard takes what is left, the help panel gets a fixed, readable
   measure. Scoped to the quote page so no other Elementor row is touched. */
@media (min-width: 1024px) {

	.zen-quote-page > .e-con-inner {
		align-items: flex-start;
	}

	.zen-quote-page > .e-con-inner > .e-con:first-child {
		flex: 1 1 auto;
		inline-size: auto;
		max-inline-size: none;
	}

	.zen-quote-page > .e-con-inner > .e-con:last-child {
		flex: 0 0 20rem;
		inline-size: 20rem;
		max-inline-size: 20rem;

		/* A quiet card so the panel reads as support, not a second form. */
		padding: var(--zen-space-5, 1.5rem);
		border: 1px solid var(--zen-line, #e6e2da);
		border-radius: var(--zen-radius-lg, 14px);
		background: var(--zen-sunk, #f4f2ee);
		position: sticky;
		inset-block-start: 120px;
	}
}

.zen-quote {
	max-inline-size: none;
}

/* ---- Help panel ----------------------------------------------------------- */

.zen-quote-page > .e-con-inner > .e-con:last-child h2 {
	font-size: var(--zen-step-1);
	margin-block: 0 var(--zen-space-3, 0.75rem);
}

.zen-quote-page > .e-con-inner > .e-con:last-child h3 {
	font-size: 1rem;
	margin-block: var(--zen-space-4, 1rem) 0.35rem;
}

.zen-quote-page > .e-con-inner > .e-con:last-child ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: 0.92rem;
	color: var(--zen-ink-2);
}

/* A tick rather than a bullet: these are reasons, not a shopping list. */
.zen-quote-page > .e-con-inner > .e-con:last-child li {
	position: relative;
	padding-inline-start: 1.6rem;
	line-height: 1.45;
}

.zen-quote-page > .e-con-inner > .e-con:last-child li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.34rem;
	inline-size: 0.45rem;
	block-size: 0.8rem;
	border: solid var(--zen-blue-600);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---- Hero ------------------------------------------------------------------ */

.zen-quote-hero__lede {
	max-inline-size: 40rem;
	color: rgba(255, 255, 255, 0.86);
}

.zen-quote-hero__trust {
	list-style: none;
	margin: var(--zen-space-4, 1rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.zen-quote-hero__trust li {
	padding: 0.3rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	color: #fff;
}


/* ---- Card text clearance --------------------------------------------------- */

/* The tick sits 12px from the right edge and is 20px wide, so it occupies the
   first 32px of the card. A label needs to stop before that. The padding was
   written in rem and a narrower card on a phone left only 24px, so longer
   labels - Tankless Water Heater, Not Sure / Need Advice - ran underneath it.
   Reserving room the tick actually needs, in the units the tick is drawn in. */
.zq-card {
	padding-inline-end: 2.75rem;
}

/* Two-column cards on a phone are narrow, so the label wraps to two lines and
   the card grows rather than the text being clipped. */
@media (max-width: 767px) {
	.zq-card {
		padding-inline-end: 2.5rem;
		align-items: flex-start;
	}

	.zq-card__tick {
		inset-block-start: 0.85rem;
	}
}

/* ---- Review on a phone ------------------------------------------------------ */

/* The Edit button sits over the top-right corner, which is fine on a desktop
   card 700px wide. On a 335px card the summary lines run under it. Below the
   layout breakpoint it becomes a normal block after the list, full width and
   easy to hit. */
@media (max-width: 767px) {
	.zen-review {
		padding-block-end: var(--zen-space-3, 0.75rem);
	}

	.zen-review__edit {
		position: static;
		display: block;
		inline-size: 100%;
		min-block-size: 44px;
		margin-block-start: var(--zen-space-3, 0.75rem);
	}
}


/* The section title runs the full width of the card and its box slides under
   the floating Edit button. The text is short enough that nothing is visibly
   covered today, but a longer heading would be, so the title keeps clear of
   the button's column. */
@media (min-width: 768px) {
	.zen-review__title {
		margin-inline-end: 5rem;
	}
}