/* EMI Calculator Pro — all rules scoped under .emic so nothing leaks into the theme

   NOTE: font sizes are in px, not rem. rem is always relative to the site's
   root <html> font-size — not to this calculator's own container — so if a
   theme sets html { font-size: 62.5%; } (a common trick for 10px-based rem
   math) or any other non-16px root, every rem value here would silently
   shrink regardless of what the number says. px keeps this calculator's
   type at its intended size no matter what the theme does to the root. */

.emic {
	--emic-blue: #05549d;
	--emic-blue-dark: #043f75;
	--emic-gold: #eda01d;
	--emic-ink: #1f2937;
	--emic-muted: #8a94a3;
	--emic-faint: #97a1af;
	--emic-line: #d7dce2;
	--emic-track: #e9ebee;
	--emic-highlight-bg: #eaf2fa;
	--emic-card-bg: #ffffff;
	--emic-radius: 14px;
	--emic-font: inherit;

	box-sizing: border-box;
	max-width: 1140px;
	margin: 0 auto;
	padding-bottom: 12px;
	color: var(--emic-ink);
	font-family: var(--emic-font);
	font-size: 16px;
	line-height: 1.5;
	/* Many themes force -webkit-font-smoothing:antialiased on body, which thins
	   strokes on macOS and reads as soft. Subpixel rendering is the sharpest
	   default; set --emic-smoothing:antialiased to match a theme that uses it. */
	-webkit-font-smoothing: var(--emic-smoothing, subpixel-antialiased);
	-moz-osx-font-smoothing: var(--emic-smoothing-moz, auto);
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

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

.emic .emic-config { display: none; }

.emic-heading {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.emic-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.emic-card {
	background: var(--emic-card-bg);
	border: 1px solid var(--emic-line);
	border-top: 3px solid var(--emic-blue);
	border-radius: var(--emic-radius);
	padding: 24px 26px 26px;
	box-shadow: 0 2px 10px rgba(20, 30, 50, .05);
}

.emic-card--results { border-top-color: var(--emic-gold); }

.emic-card-title {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--emic-ink);
}

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

.emic-field { margin-bottom: 20px; }
.emic-field--last { margin-bottom: 4px; }

.emic-field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: nowrap;
}

.emic-field-label {
	font-size: 16px;
	font-weight: 700;
	color: var(--emic-ink);
	white-space: nowrap;
}

.emic-sublabel {
	display: inline-block;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--emic-blue);
	background: rgba(5, 84, 157, .09);
	padding: 2px 7px;
	border-radius: 4px;
	margin-left: 4px;
	vertical-align: middle;
}

.emic-input-box {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--emic-line);
	border-radius: 6px;
	padding: 7px 12px;
	min-width: 132px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.emic-input-box:focus-within {
	border-color: var(--emic-blue);
	box-shadow: 0 0 0 3px rgba(5, 84, 157, .12);
}

.emic-input-box--static { cursor: default; }

/* Value-then-suffix layout (e.g. "19.9 %"): the value is the first child, so
   it already gets margin-left:0 from the rule below — stated explicitly here
   so the pairing isn't accidental. */
.emic-input-box--suffix .emic-value { margin-left: 0; }

.emic .emic-prefix,
.emic .emic-suffix {
	color: var(--emic-muted);
	font-size: 16px;
	font-weight: 600;
	flex-shrink: 0;
}

.emic .emic-suffix { margin-left: 6px; }

.emic .emic-value {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	outline: none;
	background: transparent;
	padding: 0;
	margin: 0 0 0 6px;
	width: 100%;
	min-width: 0;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: #000;
	text-align: right;
	box-shadow: none;
	border-radius: 0;
	cursor: text;
}

.emic-input-box > .emic-value:first-child { margin-left: 0; }

.emic .emic-value--static { color: var(--emic-ink); cursor: default; }
.emic .emic-value.is-invalid { color: #d94f4f; }

.emic .emic-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 4px;
	margin: 14px 0 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--emic-track);
	outline: none;
	cursor: pointer;
	touch-action: pan-y;
}

.emic .emic-range::-webkit-slider-runnable-track {
	background: var(--emic-track);
	height: 4px;
	border-radius: 2px;
}

.emic .emic-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--emic-blue);
	box-shadow: none;
	cursor: grab;
	margin-top: -6px;
	transition: transform .12s ease;
}

.emic .emic-range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }

.emic .emic-range::-moz-range-track {
	height: 4px;
	background: var(--emic-track);
	border-radius: 2px;
}

.emic .emic-range::-moz-range-thumb {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--emic-blue);
	box-shadow: none;
	cursor: grab;
}

.emic .emic-range:focus-visible { box-shadow: 0 0 0 4px rgba(5, 84, 157, .16); border-radius: 2px; }

.emic-card--results .emic-range::-webkit-slider-thumb,
.emic-card--results .emic-range::-moz-range-thumb { border-color: var(--emic-gold); }

.emic-scale {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--emic-muted);
}

/* ---------- Results ---------- */

.emic-card--results {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.emic-card--results .emic-card-title { text-align: left; }

.emic-result-spacer { flex: 1; }

.emic-chart {
	width: 155px;
	max-width: 100%;
	margin: 4px auto 0;
}

.emic-donut {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
}

.emic-arc { fill: none; stroke-width: 26; shape-rendering: geometricPrecision; }
.emic-arc--track { stroke: #eef1f6; }
.emic-arc--principal { stroke: var(--emic-blue); }
.emic-arc--interest { stroke: var(--emic-gold); }

.emic-arc--principal,
.emic-arc--interest {
	transition: stroke-dasharray .4s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .4s cubic-bezier(.4, 0, .2, 1);
}

.emic-legend {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin: 14px 0 18px;
	font-size: 15px;
	color: var(--emic-muted);
}

.emic-legend-item { display: inline-flex; align-items: center; gap: 7px; }

.emic-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.emic-dot--principal { background: var(--emic-blue); }
.emic-dot--interest { background: var(--emic-gold); }

.emic-breakdown { text-align: left; }

.emic-breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 15px;
	color: var(--emic-muted);
	padding: 12px 0;
	border-bottom: 1px dashed var(--emic-line);
}

.emic-breakdown-row:last-child { border-bottom: none; }

.emic-breakdown-row strong {
	color: var(--emic-ink);
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.emic-highlight {
	background: var(--emic-highlight-bg);
	border-radius: 10px;
	text-align: center;
	padding: 18px 16px 20px;
	margin-top: 18px;
}

.emic-highlight-label {
	font-size: 17px;
	font-weight: 600;
	color: var(--emic-blue);
	margin-bottom: 6px;
}

.emic-highlight-value {
	font-size: clamp(33.6px, 5.5vw, 41.6px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--emic-blue);
}

.emic .emic-cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 16px 0 0;
	padding: 11px 24px;
	background: var(--emic-blue);
	color: #fff;
	font-family: var(--emic-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.emic .emic-cta:hover { background: var(--emic-blue-dark); }
.emic .emic-cta:active { transform: translateY(1px); }
.emic .emic-cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(5, 84, 157, .25);
}

.emic-disclaimer {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	margin: 22px 0 6px !important;
	padding: 0;
	font-size: 11.5px !important;
	line-height: 1.6 !important;
	text-align: center !important;
	color: var(--emic-muted) !important;
	text-wrap: pretty;
}

.emic-disclaimer strong {
	font-weight: 700 !important;
	color: var(--emic-ink) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
	.emic-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 480px) {
	.emic-card { padding: 18px 16px; }
	.emic-field-head { flex-wrap: wrap; gap: 8px; }
	.emic-field-label { font-size: 14px; white-space: normal; line-height: 1.3; }
	.emic-sublabel { font-size: 10px; padding: 1px 5px; margin-left: 4px; }
	.emic-input-box { min-width: 92px; padding: 4px 8px; }
	.emic .emic-value { font-size: 15px; }
	.emic .emic-prefix, .emic .emic-suffix { font-size: 14px; }
	.emic-disclaimer { text-align: left !important; margin-top: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.emic * { transition: none !important; animation: none !important; }
}

@media print {
	.emic-card { box-shadow: none; }
	.emic .emic-range { display: none; }
}

/* ============================================================
   Quick reference — [emi_quick_reference]
   ============================================================ */

.emiq {
	--emic-blue: #05549d;
	--emic-blue-soft: #2f76ba;
	--emic-ink: #1f2937;
	--emic-muted: #8a94a3;
	--emic-line: #d7dce2;
	--emic-band: #f7f9fc;
	--emic-font: inherit;

	box-sizing: border-box;
	font-family: var(--emic-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--emic-ink);
	background: var(--emic-band);
	padding: 44px 20px 48px;
	/* Many themes force -webkit-font-smoothing:antialiased on body, which thins
	   strokes on macOS and reads as soft. Subpixel rendering is the sharpest
	   default; set --emic-smoothing:antialiased to match a theme that uses it. */
	-webkit-font-smoothing: var(--emic-smoothing, subpixel-antialiased);
	-moz-osx-font-smoothing: var(--emic-smoothing-moz, auto);
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.emiq--plain { background: none; padding: 8px 0 12px; }

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

.emiq-inner {
	max-width: 1040px;
	margin: 0 auto;
	text-align: center;
}

.emiq-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--emic-blue);
}

.emiq-title {
	margin: 0 0 26px;
	font-size: clamp(24.8px, 4.2vw, 33.6px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.025em;
	color: var(--emic-ink);
}

/* Tabs */

.emiq-tabs-wrap {
	margin-bottom: 26px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.emiq-tabs-wrap::-webkit-scrollbar { display: none; }

.emiq-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border-radius: 10px;
	background: #eceff4;
	max-width: 100%;
}

.emiq .emiq-tab {
	flex: 1 0 auto;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 9px 30px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--emic-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.emiq .emiq-tab:hover { color: var(--emic-ink); }

.emiq .emiq-tab.is-active {
	background: #fff;
	color: var(--emic-ink);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(20, 27, 45, .12);
}

.emiq .emiq-tab:focus-visible {
	outline: 2px solid var(--emic-blue);
	outline-offset: -2px;
}

/* Cards */

.emiq-panel[hidden] { display: none; }

.emiq-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.emiq-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--emic-line);
	border-radius: 10px;
	padding: 18px 14px 20px;
	box-shadow: 0 1px 2px rgba(20, 27, 45, .04);
}

.emiq-card-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--emic-blue);
}

.emiq-card-rate {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--emic-blue-soft);
}

.emiq-card-emi {
	margin-top: 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--emic-ink);
}

.emiq-card-note {
	margin-top: 4px;
	font-size: 12px;
	color: var(--emic-muted);
}

@media (max-width: 820px) {
	.emiq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.emiq .emiq-tab { padding: 9px 20px; }
}

@media (max-width: 460px) {
	.emiq { padding: 32px 16px 36px; }
	.emiq-cards { grid-template-columns: 1fr; }
	.emiq-tabs { width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
	.emiq * { transition: none !important; }
}