/**
 * Quote flow — loaded with cn-quote-flow.js.
 * Selectors are doubled with the .entry-content prefix so the component keeps
 * its own list/label/spacing rules inside rendered page content.
 */

.entry-content .cn-section-full .cn-quote-flow,
.cn-quote-flow {
	box-sizing: border-box;
	scroll-margin-top: var(--cn-header-offset, 5.5rem);
}

.cn-quote-flow *,
.cn-quote-flow *::before,
.cn-quote-flow *::after {
	box-sizing: border-box;
}

/*
 * Author-origin display rules (.cn-button is inline-flex, .cn-quote-flow__nav is
 * flex) outrank the UA [hidden] rule, which would leave "hidden" steps and the
 * back button visible and tabbable. Step state is driven entirely by [hidden],
 * so it has to win here.
 */
.cn-quote-flow [hidden] {
	display: none !important;
}

/* Revealed by JS once the step machine is wired up (see cn-quote-flow.js). */
.cn-quote-flow__form {
	margin-top: var(--cn-space-5, 1.5rem);
}

/* ------------------------------- progress ------------------------------- */

.entry-content .cn-section-full ol.cn-quote-flow__progress,
.cn-quote-flow__progress {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-space-2, 0.5rem);
	margin: var(--cn-space-5, 1.5rem) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

.entry-content .cn-section-full li.cn-quote-flow__progress-step,
.cn-quote-flow__progress-step {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 6px 12px;
	border: 1px solid var(--cn-color-border-subtle, #e0dcd4);
	border-radius: var(--cn-radius-pill, 10px);
	background: var(--cn-color-bg-subcard, #faf9f7);
	color: var(--cn-color-text-muted, #55606d);
	font-size: 0.85rem;
	line-height: 1.2;
	list-style: none !important;
}

.cn-quote-flow__progress-step.is-current {
	border-color: var(--cn-color-accent, #046bd2);
	background: var(--cn-color-accent-wash, #e9f0f6);
	color: var(--cn-color-text-heading, #1c2836);
	font-weight: 600;
}

.cn-quote-flow__progress-step.is-done {
	border-color: var(--cn-color-patina-edge, rgba(4, 107, 210, 0.18));
	color: var(--cn-color-text-subtle, #46525e);
}

.cn-quote-flow__progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cn-color-bg-card, #fff);
	border: 1px solid currentColor;
	font-size: 0.75rem;
	font-weight: 700;
}

.cn-quote-flow__progress-step.is-done .cn-quote-flow__progress-num::before {
	content: "✓";
}

.cn-quote-flow__progress-step.is-done .cn-quote-flow__progress-num {
	color: transparent;
	position: relative;
}

.cn-quote-flow__progress-step.is-done .cn-quote-flow__progress-num::before {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cn-color-accent, #046bd2);
}

.cn-quote-flow__status {
	margin: var(--cn-space-2, 0.5rem) 0 0;
	font-size: 0.85rem;
	color: var(--cn-color-text-muted, #55606d);
	min-height: 1.2em;
}

/* -------------------------------- steps --------------------------------- */

.cn-quote-flow__step {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.entry-content .cn-section-full .cn-quote-flow__legend,
.cn-quote-flow__legend {
	padding: 0;
	margin-bottom: var(--cn-space-4, 1rem);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cn-color-text-heading, #1c2836);
}

/* -------------------------------- fields -------------------------------- */

.cn-quote-flow__field {
	margin-top: var(--cn-space-4, 1rem);
}

.cn-quote-flow__field:first-of-type {
	margin-top: 0;
}

.entry-content .cn-section-full .cn-quote-flow__label,
.cn-quote-flow__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--cn-color-text-heading, #1c2836);
}

.cn-quote-flow__optional {
	font-weight: 400;
	color: var(--cn-color-text-muted, #55606d);
}

.entry-content .cn-section-full p.cn-quote-flow__hint,
.cn-quote-flow__hint {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: var(--cn-color-text-muted, #55606d);
}

.entry-content .cn-section-full .cn-quote-flow__input,
.cn-quote-flow__input {
	display: block;
	width: 100%;
	min-height: var(--cn-touch-target-min, 48px);
	padding: 10px 12px;
	border: 1px solid var(--cn-color-border-subtle, #e0dcd4);
	border-radius: var(--cn-radius-medium, 10px);
	background: var(--cn-color-bg-card, #fff);
	color: var(--cn-color-text-main, #2e3438);
	font: inherit;
	font-size: 16px; /* Anything smaller makes iOS Safari zoom on focus. */
}

.cn-quote-flow__input--narrow {
	max-width: 9rem;
}

.cn-quote-flow__input:focus-visible {
	/* Same focus language as every other control (see --cn-shadow-focus-ring). */
	outline: none;
	border-color: var(--cn-color-accent, #046bd2);
	box-shadow: var(--cn-shadow-focus-ring, 0 0 0 2px #f6f4f0, 0 0 0 4px rgba(4, 107, 210, 0.45));
}

.cn-quote-flow__field.is-invalid .cn-quote-flow__input {
	border-color: var(--cn-color-alert, #b42318);
	background: var(--cn-color-alert-bg, #fef3f2);
}

.entry-content .cn-section-full p.cn-quote-flow__error,
.cn-quote-flow__error {
	margin: 6px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cn-color-alert, #b42318);
}

.cn-quote-flow__error--form {
	margin-bottom: var(--cn-space-3, 0.75rem);
}

/* ------------------------------- options -------------------------------- */

.cn-quote-flow__options {
	display: grid;
	gap: var(--cn-space-2, 0.5rem);
}

.entry-content .cn-section-full label.cn-quote-flow__option,
.cn-quote-flow__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: var(--cn-touch-target-min, 48px);
	padding: 12px;
	border: 1px solid var(--cn-color-border-subtle, #e0dcd4);
	border-radius: var(--cn-radius-medium, 10px);
	background: var(--cn-color-bg-subcard, #faf9f7);
	cursor: pointer;
	font-weight: 400;
}

.cn-quote-flow__option input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--cn-color-accent, #046bd2);
}

.cn-quote-flow__option:has(input:checked) {
	border-color: var(--cn-color-accent, #046bd2);
	background: var(--cn-color-accent-wash, #e9f0f6);
}

.cn-quote-flow__option:has(input:focus-visible) {
	box-shadow: var(--cn-shadow-focus-ring, 0 0 0 2px #f6f4f0, 0 0 0 4px rgba(4, 107, 210, 0.45));
}

.cn-quote-flow__field--consent .cn-quote-flow__option {
	background: var(--cn-color-bg-card, #fff);
}

/*
 * High contrast strips box-shadow, which is the only focus indicator these
 * controls have once outline is removed. Same fallback the theme uses for its
 * other focus-ring controls (style.css, forced-colors block).
 */
@media (forced-colors: active) {
	.cn-quote-flow__input:focus-visible,
	.cn-quote-flow__chip:focus-visible,
	.cn-quote-flow__option:has(input:focus-visible) {
		outline: 2px solid CanvasText !important;
		outline-offset: 2px;
		box-shadow: none !important;
	}
}

/* --------------------------- duration chips ----------------------------- */

.cn-quote-flow__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-space-2, 0.5rem);
	margin-bottom: var(--cn-space-3, 0.75rem);
}

.cn-quote-flow__chip {
	min-height: var(--cn-touch-target-min, 48px);
	padding: 8px 14px;
	border: 1px solid var(--cn-color-border-subtle, #e0dcd4);
	border-radius: var(--cn-radius-pill, 10px);
	background: var(--cn-color-bg-card, #fff);
	color: var(--cn-color-text-subtle, #46525e);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.cn-quote-flow__chip.is-active {
	border-color: var(--cn-color-accent, #046bd2);
	background: var(--cn-color-accent-wash, #e9f0f6);
	color: var(--cn-color-text-heading, #1c2836);
	font-weight: 600;
}

/* -------------------------------- summary ------------------------------- */

.entry-content .cn-section-full dl.cn-quote-flow__summary,
.cn-quote-flow__summary {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: 8px var(--cn-space-4, 1rem);
	margin: 0 0 var(--cn-space-5, 1.5rem);
	padding: var(--cn-space-4, 1rem);
	border: 1px solid var(--cn-color-border-subtle, #e0dcd4);
	border-radius: var(--cn-radius-medium, 10px);
	background: var(--cn-color-bg-subcard, #faf9f7);
}

.cn-quote-flow__summary dt {
	margin: 0;
	font-weight: 600;
	color: var(--cn-color-text-muted, #55606d);
}

.cn-quote-flow__summary dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--cn-color-text-main, #2e3438);
}

/* ------------------------------ navigation ------------------------------ */

.cn-quote-flow__nav,
.cn-quote-flow__send,
.cn-quote-flow__done-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-space-3, 0.75rem);
	align-items: center;
	margin-top: var(--cn-space-5, 1.5rem);
}

/* --------------------------------- done --------------------------------- */

.cn-quote-flow__done {
	margin-top: var(--cn-space-5, 1.5rem);
	padding: var(--cn-space-5, 1.5rem);
	border: 1px solid var(--cn-color-patina-edge, rgba(4, 107, 210, 0.18));
	border-radius: var(--cn-radius-large, 14px);
	background: var(--cn-color-accent-wash, #e9f0f6);
}

.cn-quote-flow__done-title {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--cn-color-text-heading, #1c2836);
}

/* ------------------------------- bot trap ------------------------------- */

.cn-quote-flow__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------ responsive ------------------------------ */

@media (min-width: 600px) {
	.cn-quote-flow__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.entry-content .cn-section-full dl.cn-quote-flow__summary,
	.cn-quote-flow__summary {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.cn-quote-flow__summary dd {
		margin-bottom: 10px;
	}

	.cn-quote-flow__nav .cn-button,
	.cn-quote-flow__send .cn-button {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-quote-flow,
	.cn-quote-flow * {
		scroll-behavior: auto !important;
	}
}