/* ==========================================================================
   Escape Finance Calculator — self-contained front-end styles.

   Everything is nested under .eti_fc_root so nothing leaks out and so page
   builder (Elementor etc.) global element selectors can't leak in. Brand
   tokens are defined inline below so the plugin has no runtime dependency
   on the Escape Trailer Design System plugin.
   ========================================================================== */

/* Tamworth Gothic — shipped with the plugin. WOFF2 is the primary; WOFF is
   a fallback for older browsers. font-display:swap means the calculator
   renders immediately in the next font in the stack (Oswald / Inter) and
   upgrades to Tamworth when the file finishes loading. */
@font-face {
	font-family: 'Tamworth Gothic';
	src: url('fonts/TamworthGothic.woff2') format('woff2'),
	     url('fonts/TamworthGothic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.eti_fc_root {
	/* ─── Brand tokens (self-contained, no external stylesheet required) ─── */
	--eti-fc-forest:      #39472F;
	--eti-fc-forest-deep: #2C3824;
	--eti-fc-cream:       #E4E1DA;
	--eti-fc-cream-soft:  #F6F2EA;
	--eti-fc-slate:       #4B6568;
	--eti-fc-mist:        #D9E7E8;
	--eti-fc-sand:        #D4CEC5;
	--eti-fc-white:       #FFFFFF;
	--eti-fc-grey-500:    #7D7D7D;
	--eti-fc-grey-700:    #484848;
	--eti-fc-red:         #C82127;
	--eti-fc-red-deep:    #9E1A1F;

	--eti-fc-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--eti-fc-font-display: 'Tamworth Gothic', 'Oswald', 'Inter', system-ui, sans-serif;

	--eti-fc-radius-sm: 12px;
	--eti-fc-radius-md: 25px;

	box-sizing: border-box;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	font-family: var(--eti-fc-font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--eti-fc-grey-700);
	text-align: left;
}

.eti_fc_root *,
.eti_fc_root *::before,
.eti_fc_root *::after {
	box-sizing: border-box;
}

/* Neutralise theme / page-builder global element overrides inside our scope. */
.eti_fc_root button,
.eti_fc_root input,
.eti_fc_root label {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}

/* Page builders like Elementor aggressively style h1–h6 globally, so zero out
   typography on headings inside our scope and let class rules repaint. */
.eti_fc_root h1,
.eti_fc_root h2,
.eti_fc_root h3,
.eti_fc_root h4,
.eti_fc_root h5,
.eti_fc_root h6 {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

/* ── Card ─────────────────────────────────────────── */
.eti_fc_card {
	background: var(--eti-fc-white);
	border-radius: var(--eti-fc-radius-sm);
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(57, 71, 47, 0.08), 0 1px 3px rgba(57, 71, 47, 0.06);
}

.eti_fc_card__header {
	background: var(--eti-fc-slate);
	color: var(--eti-fc-white);
	padding: 16px 20px;
}

.eti_fc_root .eti_fc_heading {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--eti-fc-font-sans) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	color: inherit;
}

.eti_fc_card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--eti-fc-white);
}

.eti_fc_card__footer {
	background: var(--eti-fc-slate);
	color: var(--eti-fc-white);
	padding: 18px 20px;
}

/* ── Fields ───────────────────────────────────────── */
.eti_fc_field {
	display: block;
}

.eti_fc_field--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.eti_fc_field__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--eti-fc-forest);
	margin-bottom: 6px;
	letter-spacing: 0.2px;
}

.eti_fc_root .eti_fc_field__label--display {
	font-family: var(--eti-fc-font-display);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.eti_fc_hint {
	font-weight: 400;
	color: var(--eti-fc-grey-500);
	font-size: 13px;
	margin-left: 4px;
}

/* ── Trailer buttons ──────────────────────────────── */
.eti_fc_trailer_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eti_fc_root .eti_fc_trailer_btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	padding: 10px 16px;
	font-family: var(--eti-fc-font-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1;
	color: var(--eti-fc-forest);
	background: var(--eti-fc-cream-soft);
	border: 2px solid var(--eti-fc-sand);
	border-radius: var(--eti-fc-radius-sm);
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	white-space: nowrap;
}

.eti_fc_root .eti_fc_trailer_btn:hover {
	border-color: var(--eti-fc-red);
	background: var(--eti-fc-red);
	color: var(--eti-fc-cream);
}

.eti_fc_root .eti_fc_trailer_btn.eti_fc_is_active {
	background: var(--eti-fc-red);
	color: var(--eti-fc-cream);
	border-color: var(--eti-fc-red);
}

.eti_fc_root .eti_fc_trailer_btn:focus-visible {
	outline: 2px solid var(--eti-fc-red);
	outline-offset: 2px;
}

/* ── Range slider ─────────────────────────────────── */
.eti_fc_slider_wrap {
	padding: 0 12px;
	margin: 4px 0 8px;
}

.eti_fc_slider_track_area {
	position: relative;
	height: 72px;
	display: flex;
	align-items: center;
}

.eti_fc_slider_tiers {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 28px;
	display: flex;
	border-radius: 9999px;
	overflow: visible;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
	pointer-events: none;
}

.eti_fc_slider_tiers > .eti_fc_slider_tier:first-child { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
.eti_fc_slider_tiers > .eti_fc_slider_tier:last-child  { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }

.eti_fc_slider_tier {
	position: relative;
	height: 100%;
	transition: filter 200ms ease, box-shadow 200ms ease;
}

.eti_fc_slider_tier--good   { background: var(--eti-fc-cream-soft); }
.eti_fc_slider_tier--better { background: var(--eti-fc-mist); }
.eti_fc_slider_tier--best   { background: var(--eti-fc-slate); }

.eti_fc_slider_tier__label {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--eti-fc-grey-500);
	white-space: nowrap;
	opacity: 0.7;
	transition: color 200ms ease, opacity 200ms ease;
}

.eti_fc_slider_tier--best .eti_fc_slider_tier__label {
	color: var(--eti-fc-slate);
}

.eti_fc_slider_tiers[data-eti-fc-active-tier="good"]   .eti_fc_slider_tier--good,
.eti_fc_slider_tiers[data-eti-fc-active-tier="better"] .eti_fc_slider_tier--better,
.eti_fc_slider_tiers[data-eti-fc-active-tier="best"]   .eti_fc_slider_tier--best {
	filter: brightness(1.02) saturate(1.1);
	box-shadow: inset 0 0 0 2px var(--eti-fc-forest);
}

.eti_fc_slider_tiers[data-eti-fc-active-tier="good"]   .eti_fc_slider_tier--good   .eti_fc_slider_tier__label,
.eti_fc_slider_tiers[data-eti-fc-active-tier="better"] .eti_fc_slider_tier--better .eti_fc_slider_tier__label,
.eti_fc_slider_tiers[data-eti-fc-active-tier="best"]   .eti_fc_slider_tier--best   .eti_fc_slider_tier__label {
	color: var(--eti-fc-forest);
	opacity: 1;
}

/* Scoped under .eti_fc_root so the element reset above doesn't clobber the
   width/margin that keeps the thumb inset from the backdrop edges. */
.eti_fc_root .eti_fc_slider {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 2;
	width: calc(100% - 10px);
	margin: 0 5px;
	height: 32px;
	background: transparent;
	outline: none;
	accent-color: transparent;
	padding: 0;
	cursor: pointer;
}

.eti_fc_slider::-webkit-slider-runnable-track {
	height: 28px;
	background: transparent;
	border-radius: 9999px;
}

.eti_fc_slider::-moz-range-track {
	height: 28px;
	background: transparent;
	border-radius: 9999px;
}

.eti_fc_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--eti-fc-forest);
	border: 2px solid var(--eti-fc-white);
	box-shadow: 0 2px 6px rgba(57, 71, 47, 0.3);
	cursor: grab;
	transition: transform 120ms ease;
}

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

.eti_fc_slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--eti-fc-forest);
	border: 2px solid var(--eti-fc-white);
	box-shadow: 0 2px 6px rgba(57, 71, 47, 0.3);
	cursor: grab;
}

.eti_fc_slider:focus-visible {
	outline: 2px solid var(--eti-fc-slate);
	outline-offset: 4px;
}

/* ── Breakdown rows ─────────────────────────────── */
.eti_fc_breakdown {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eti_fc_breakdown__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-variant-numeric: tabular-nums;
}

.eti_fc_breakdown__label {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--eti-fc-forest);
	letter-spacing: 0.2px;
}

.eti_fc_breakdown__op {
	display: inline-block;
	width: 14px;
	text-align: center;
	color: var(--eti-fc-grey-500);
	font-weight: 600;
	margin-right: 2px;
}

.eti_fc_breakdown__value {
	font-size: 16px;
	font-weight: 500;
	color: var(--eti-fc-grey-700);
	white-space: nowrap;
}

.eti_fc_breakdown__row--add      .eti_fc_breakdown__op { color: var(--eti-fc-forest); }
.eti_fc_breakdown__row--subtract .eti_fc_breakdown__op { color: var(--eti-fc-slate); }

/* Shared "milestone" treatment — Base price, Total purchase price,
   Total price for financing. Down payment stays in the default row style. */
.eti_fc_breakdown__row--milestone .eti_fc_breakdown__label,
.eti_fc_breakdown__row--milestone .eti_fc_breakdown__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--eti-fc-forest);
	letter-spacing: 0.2px;
}

.eti_fc_breakdown__sep {
	margin: 0 6px;
	color: var(--eti-fc-sand);
	font-weight: 500;
}

/* Separator borders above subtotal / final-financing rows. */
.eti_fc_breakdown__row--total,
.eti_fc_breakdown__row--result {
	padding-top: 10px;
	border-top: 1px solid var(--eti-fc-cream);
}

/* Hint toggled by JS — shown only when multiple rate groups are available. */
.eti_fc_rate_switch_hint {
	display: none;
}

.eti_fc_rate_switch_hint.eti_fc_is_visible {
	display: inline;
}

/* ── Promo discount slider (compact, sits under the Promo row) ─── */
.eti_fc_promo_slider_wrap {
	margin: 2px 0 6px;
	padding: 0 4px;
}

.eti_fc_root .eti_fc_promo_slider {
	-webkit-appearance: none;
	appearance: none;
	width: calc(100% - 14px);
	margin: 0 7px;
	height: 18px;
	background: transparent;
	outline: none;
	accent-color: transparent;
	padding: 0;
	cursor: pointer;
}

.eti_fc_promo_slider::-webkit-slider-runnable-track {
	height: 6px;
	background: var(--eti-fc-cream);
	border-radius: 9999px;
}

.eti_fc_promo_slider::-moz-range-track {
	height: 6px;
	background: var(--eti-fc-cream);
	border-radius: 9999px;
}

.eti_fc_promo_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--eti-fc-slate);
	border: 2px solid var(--eti-fc-white);
	box-shadow: 0 1px 3px rgba(75, 101, 104, 0.25);
	cursor: grab;
}

.eti_fc_promo_slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--eti-fc-slate);
	border: 2px solid var(--eti-fc-white);
	box-shadow: 0 1px 3px rgba(75, 101, 104, 0.25);
	cursor: grab;
}

.eti_fc_promo_slider:focus-visible {
	outline: 2px solid var(--eti-fc-slate);
	outline-offset: 3px;
}

/* ── Pill pickers (rate + term) ────────────────────── */
.eti_fc_pill_picker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 32px;
}

.eti_fc_root .eti_fc_pill {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 8px 18px;
	min-width: 48px;
	line-height: 1.2;
	color: var(--eti-fc-forest);
	background: var(--eti-fc-cream-soft);
	border: 2px solid var(--eti-fc-sand);
	border-radius: 9999px;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.eti_fc_root .eti_fc_pill:hover {
	border-color: var(--eti-fc-forest);
	background: var(--eti-fc-mist);
}

.eti_fc_root .eti_fc_pill.eti_fc_is_active {
	background: var(--eti-fc-forest);
	color: var(--eti-fc-cream);
	border-color: var(--eti-fc-forest);
}

.eti_fc_root .eti_fc_pill:focus-visible {
	outline: 2px solid var(--eti-fc-slate);
	outline-offset: 2px;
}

/* ── Flash animation for bracket/tier change ──────── */
@keyframes eti_fc_flash {
	0%   { background-color: rgba(75, 101, 104, 0.0); }
	15%  { background-color: rgba(75, 101, 104, 0.18); }
	100% { background-color: rgba(75, 101, 104, 0.0); }
}

.eti_fc_is_flashing {
	animation: eti_fc_flash 900ms ease-out 1;
	border-radius: 6px;
}

/* ── Payment hero ─────────────────────────────────── */
.eti_fc_payment_label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: none;
	margin-bottom: 4px;
	color: inherit;
	opacity: 0.92;
}

.eti_fc_payment_amount {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--eti-fc-font-sans);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1;
	color: inherit;
}

.eti_fc_payment_amount__symbol {
	font-size: 28px;
	font-weight: 500;
	opacity: 0.9;
}

.eti_fc_payment_amount__currency {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.8px;
	opacity: 0.85;
	margin-left: 4px;
	align-self: center;
}

/* ── Disclaimers ──────────────────────────────────── */
.eti_fc_disclaimers {
	list-style: none;
	padding: 0;
	margin: 16px 4px 0;
	font-size: 13px;
	color: var(--eti-fc-grey-500);
}

.eti_fc_disclaimers li {
	padding: 3px 0;
	line-height: 1.5;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
	.eti_fc_field--row {
		grid-template-columns: 1fr;
	}
	.eti_fc_payment_amount {
		font-size: 38px;
	}
	.eti_fc_root .eti_fc_trailer_btn {
		padding: 9px 12px;
		font-size: 16px;
		min-width: 56px;
	}
}