/**
 * תן לי — shared styling for the "conversion flow" (processing state, result
 * preview, conversion panel, contact-step additions, done/resend UI) reused
 * by ALL insurance-calculator wizards on the site (14 pages as of writing:
 * car/home/life/health/travel/personal-accident/elderly-ltc/mortgage/
 * pension/cyber/small-business/professional-liability/contracting-
 * engineering/disability-income-insurance). Every class here is prefixed
 * `ccf-` (calc-conversion-flow) and this file is enqueued from exactly one
 * place — tenli_calc_conversion_flow_enqueue_shared_css() in
 * inc/calc-conversion-flow.php, gated on whether the current request is ANY
 * of the 14 calculator pages — so it never loads on unrelated pages either.
 * Reuses the site's existing tokens (--color-navy/--color-teal/
 * --color-bg-light/--radius-pill, --font-heading) and the shared
 * .btn/.info-card visual language instead of inventing a parallel design
 * system. Started life as the disability-income-insurance pilot's
 * page-scoped disability-income-insurance.css (dii- prefix) — generalized
 * here (ccf- prefix) once the pilot was approved for site-wide rollout; that
 * file no longer exists.
 */

/* ==========================================================================
   Shared result-step frame — a fixed-ish min-height keeps the "next/back"
   actions bar below it from jumping around as the processing state gives
   way to the (taller) preview + conversion panel.
   ========================================================================== */
.ccf-result {
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* .ccf-result sets an explicit `display`, which (being an author rule) beats
   the UA stylesheet's `[hidden] { display: none }` even though selector
   specificity is tied — author styles always win over UA defaults. Same
   issue/fix already documented for .wizard__actions/.wizard__progress/.btn
   in main.css: restate `display: none` here, at higher specificity, so
   toggling the `hidden` attribute from JS (showStep()) actually hides the
   result step while another step is active — this shipped as a real bug on
   the disability-income-insurance pilot (caught via a live screenshot) before
   this fix was added; kept here so every calculator inherits the fix. */
.ccf-result[hidden] { display: none; }

/* ==========================================================================
   Processing state
   ========================================================================== */
.ccf-processing {
	text-align: center;
	padding-block: 24px;
	max-width: 420px;
	margin-inline: auto;
}
.ccf-processing__spinner {
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 22px;
	border-radius: 50%;
	border: 4px solid var(--color-bg-light);
	border-block-start-color: var(--color-teal);
	animation: ccf-spin 0.9s linear infinite;
}
@keyframes ccf-spin {
	to { transform: rotate(360deg); }
}
.ccf-processing__status {
	margin-block-start: 14px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	min-height: 1.6em;
}
.ccf-processing__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-block-start: 20px;
	list-style: none;
	padding: 0;
}
.ccf-processing__dots li {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-bg-light);
	transition: background 0.25s ease, transform 0.25s ease;
}
.ccf-processing__dots li.is-active {
	background: var(--color-teal);
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	.ccf-processing__spinner { animation: none; border-block-start-color: var(--color-teal); }
	.ccf-processing__dots li { transition: none; }
}

/* ==========================================================================
   Preview — .ccf-preview__count doubles as both the points-family "מצאנו N
   נקודות שחשוב לבדוק" line AND the price-family truthful range line (e.g.
   "טווח משוער: X–Y ₪ לשנה") — same visual treatment, content decided by
   each calculator's own JS, not by this stylesheet.
   ========================================================================== */
.ccf-preview {
	text-align: center;
}
.ccf-preview__copy {
	max-width: 560px;
	margin: 10px auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text);
	opacity: 0.85;
}
.ccf-preview__count {
	margin-block-start: 18px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--color-navy);
}
.ccf-preview__insight {
	max-width: 560px;
	margin: 10px auto 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-text);
	background: var(--color-bg-light);
	border-radius: 12px;
	padding: 14px 18px;
}

/* ==========================================================================
   Conversion panel — visually distinct from the preview above it: its own
   white card, a teal accent border (same "featured" language already used
   elsewhere on the site, not a color-only cue — it also gets its own icon,
   heading, and the single most prominent button in this whole step).
   ========================================================================== */
.ccf-panel {
	max-width: 520px;
	margin: 28px auto 0;
	background: var(--color-white);
	border-radius: 16px;
	border-inline-start: 4px solid var(--color-teal);
	box-shadow: 0 8px 28px -10px rgba(44, 52, 126, 0.22);
	padding: 28px 30px;
	text-align: center;
}
.ccf-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg-light);
	color: var(--color-teal);
	margin-block-end: 12px;
}
.ccf-panel__icon svg { width: 22px; height: 22px; }
.ccf-panel__title {
	font-family: var(--font-heading);
	font-size: 19px;
	color: var(--color-navy);
	margin-block-end: 10px;
}
.ccf-panel__text {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--color-text);
	opacity: 0.88;
	margin-block-end: 20px;
}
.ccf-panel__cta {
	width: 100%;
	font-size: 18px;
}
.ccf-panel__microcopy {
	margin-block-start: 12px;
	font-size: 12.5px;
	color: var(--color-text);
	opacity: 0.65;
}

/* ==========================================================================
   Error state (retry) — reuses the shared .wizard__error look-and-feel
   values inline rather than the class itself, since .ccf-error also needs
   to host a retry button beneath the message.
   ========================================================================== */
.ccf-error {
	text-align: center;
	background: #fdecea;
	color: #a4362f;
	border-radius: 12px;
	padding: 20px 22px;
	max-width: 480px;
	margin-inline: auto;
}
.ccf-error p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   Contact step additions
   ========================================================================== */
.ccf-contact__intro {
	text-align: center;
	margin-block: -6px 24px;
}
.ccf-contact__disclosure {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--color-text);
	opacity: 0.7;
	margin-block-start: 4px;
}
.ccf-consent__note {
	margin-block-start: 4px;
}

/* ==========================================================================
   Success state additions — entered-email confirmation + scoped "resend
   only the email" affordance (never resubmits the lead).
   ========================================================================== */
.ccf-done__email {
	margin-block-start: 8px;
	font-weight: 700;
	color: var(--color-navy);
}
.ccf-done__toggle {
	display: inline-block;
	margin-block-start: 16px;
	background: none;
	border: 0;
	padding: 4px;
	font-size: 13.5px;
	color: var(--color-navy);
	text-decoration: underline;
	cursor: pointer;
}
/* Same author-vs-UA [hidden] override needed as .ccf-result above — this
   button's `hidden` attribute is toggled directly from JS. */
.ccf-done__toggle[hidden] { display: none; }
.ccf-done__toggle:hover,
.ccf-done__toggle:focus-visible {
	color: var(--color-teal);
}
.ccf-done__resend {
	max-width: 400px;
	margin: 18px auto 0;
	background: var(--color-bg-light);
	border-radius: 12px;
	padding: 18px 20px;
	text-align: start;
}
.ccf-done__resend-notice {
	margin: 0 0 12px;
	font-size: 13.5px;
	color: #a4362f;
}
.ccf-done__resend .wizard__field { margin-block-end: 12px; }
.ccf-done__resend-status {
	margin-block-start: 10px;
	font-size: 13px;
	color: var(--color-navy);
	min-height: 1.4em;
}

/* ==========================================================================
   Mobile (~390px and below)
   ========================================================================== */
@media (max-width: 600px) {
	.ccf-result { min-height: 420px; }
	.ccf-panel { padding: 22px 18px; }
	.ccf-panel__cta { font-size: 16px; }
	.ccf-processing { padding-block: 16px; }
}