/* ══════════════════════════════════════════════════════════════════════
   CalculatorNP — EMI Calculator  v1.0.0
   Same mobile-stability rules as SIP Calculator:
   ✓ font-size:16px on inputs     ✓ separate track div (no CSS-var repaint)
   ✓ requestAnimationFrame only   ✓ tabular-nums on all values
   ✓ touch-action:pan-x on sliders ✓ no nested scroll containers
   ✓ no backdrop-filter on mobile  ✓ table-layout:fixed on mobile
══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
.cnp-emi-wrap {
	--emi-accent:     #f59e0b;     /* amber — loan/EMI colour */
	--emi-accent-2:   #ef4444;     /* red — interest cost colour */
	--emi-principal:  #3b82f6;     /* blue — principal */
	--emi-total:      #8b5cf6;     /* purple — total payment */
	--emi-surface:    var(--calc-surface,       #ffffff);
	--emi-surf2:      var(--calc-surface-solid, #f8fafc);
	--emi-ink:        var(--calc-ink,           #1e293b);
	--emi-muted:      var(--calc-muted,         #64748b);
	--emi-border:     var(--calc-border,        rgba(148,163,184,.28));
	--emi-radius:     var(--calc-radius,        16px);
	--emi-radius-sm:  var(--calc-radius-sm,     10px);
	--emi-shadow:     var(--calc-shadow,        0 4px 24px rgba(0,0,0,.07));
	--emi-blur:       var(--calc-glass-blur,    14px);
	--emi-font:       var(--calc-font,          system-ui, -apple-system, sans-serif);

	font-family: var(--emi-font);
	color: var(--emi-ink);
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}
.cnp-emi-wrap *, .cnp-emi-wrap *::before, .cnp-emi-wrap *::after {
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.cnp-emi-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	margin-bottom: 1rem;
	border-radius: var(--emi-radius);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--emi-accent) 15%, transparent),
		color-mix(in srgb, var(--emi-accent-2) 10%, transparent));
	border: 1px solid color-mix(in srgb, var(--emi-accent) 22%, transparent);
	backdrop-filter: blur(var(--emi-blur));
	-webkit-backdrop-filter: blur(var(--emi-blur));
	position: relative;
	overflow: hidden;
}
.cnp-emi-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 70% at 85% 50%,
		color-mix(in srgb, var(--emi-accent-2) 8%, transparent), transparent);
	pointer-events: none;
}
.cnp-emi-hero__icon {
	flex-shrink: 0;
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--emi-accent), var(--emi-accent-2));
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--emi-accent) 40%, transparent);
	position: relative; z-index: 1;
}
.cnp-emi-hero__icon svg { width: 1.5rem; height: 1.5rem; }
.cnp-emi-hero__text { position: relative; z-index: 1; }
.cnp-emi-hero__title {
	margin: 0 0 .2rem;
	font-size: clamp(1.15rem, 4vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--emi-ink);
	letter-spacing: -.01em;
}
.cnp-emi-hero__sub {
	margin: 0;
	font-size: .85rem;
	color: var(--emi-muted);
	line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   LOAN TYPE PRESETS
══════════════════════════════════════════════════════ */
.cnp-emi-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	margin-bottom: 1.1rem;
}
@media (max-width: 480px) {
	.cnp-emi-presets { grid-template-columns: repeat(2, 1fr); }
}
.cnp-emi-preset {
	padding: .6rem .5rem;
	border-radius: var(--emi-radius-sm);
	border: 1.5px solid var(--emi-border);
	background: var(--emi-surface);
	font-family: var(--emi-font);
	font-size: .8rem;
	font-weight: 600;
	color: var(--emi-muted);
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
	min-height: 40px;
	line-height: 1.2;
}
.cnp-emi-preset.is-active {
	border-color: var(--emi-accent);
	color: var(--emi-accent);
	background: color-mix(in srgb, var(--emi-accent) 8%, var(--emi-surface));
	box-shadow: 0 2px 10px color-mix(in srgb, var(--emi-accent) 20%, transparent);
}
.cnp-emi-preset:hover:not(.is-active) {
	border-color: color-mix(in srgb, var(--emi-accent) 40%, var(--emi-border));
	color: var(--emi-ink);
}

/* ══════════════════════════════════════════════════════
   MAIN CARD
══════════════════════════════════════════════════════ */
.cnp-emi-card {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 1.75rem;
	background: var(--emi-surface);
	border-radius: var(--emi-radius);
	border: 1px solid var(--emi-border);
	box-shadow: var(--emi-shadow);
	padding: 1.75rem;
	backdrop-filter: blur(var(--emi-blur));
	-webkit-backdrop-filter: blur(var(--emi-blur));
}
@media (max-width: 680px) {
	.cnp-emi-card {
		grid-template-columns: 1fr;
		padding: 1.15rem 1rem;
		gap: 1.5rem;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* ══════════════════════════════════════════════════════
   INPUTS COLUMN
══════════════════════════════════════════════════════ */
.cnp-emi-inputs {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.cnp-emi-field {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.cnp-emi-label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .055em;
	text-transform: uppercase;
	color: var(--emi-muted);
}
.cnp-emi-field__hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: nowrap;
}

/* ── Number input box ── */
.cnp-emi-input-box {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--emi-border);
	border-radius: var(--emi-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	width: 130px;
	background: var(--emi-surf2);
	transition: border-color .18s, box-shadow .18s;
}
.cnp-emi-input-box:focus-within {
	border-color: var(--emi-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--emi-accent) 16%, transparent);
}
.cnp-emi-input-box__fix {
	display: flex;
	align-items: center;
	padding: 0 .5rem;
	font-size: .8rem;
	font-weight: 800;
	color: var(--emi-accent);
	background: color-mix(in srgb, var(--emi-accent) 10%, transparent);
	flex-shrink: 0;
	white-space: nowrap;
}
/* 16px prevents iOS Safari zoom-on-focus */
.cnp-emi-numfield {
	border: 0;
	outline: none;
	padding: .5rem .4rem;
	font-family: var(--emi-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--emi-ink);
	background: transparent;
	width: 0;
	flex: 1;
	min-width: 0;
	text-align: right;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
}
.cnp-emi-numfield::-webkit-outer-spin-button,
.cnp-emi-numfield::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Tenure row: input + unit toggle ── */
.cnp-emi-tenure-wrap {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
}
.cnp-emi-unit-toggle {
	display: flex;
	border: 1.5px solid var(--emi-border);
	border-radius: var(--emi-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}
.cnp-emi-unit-btn {
	padding: .5rem .55rem;
	border: 0;
	font-family: var(--emi-font);
	font-size: .78rem;
	font-weight: 700;
	color: var(--emi-muted);
	background: var(--emi-surf2);
	cursor: pointer;
	transition: background .14s, color .14s;
	min-height: 36px;
	line-height: 1;
}
.cnp-emi-unit-btn.is-active {
	background: var(--emi-accent);
	color: #fff;
}

/* ── Slider ── */
.cnp-emi-slider-row {
	position: relative;
	height: 28px;
	display: flex;
	align-items: center;
}
.cnp-emi-track {
	position: absolute;
	left: 0; right: 0;
	height: 5px;
	background: var(--emi-border);
	border-radius: 99px;
	pointer-events: none;
	overflow: hidden;
}
.cnp-emi-track__fill {
	height: 100%;
	background: linear-gradient(to right, var(--emi-accent), var(--emi-accent-2));
	border-radius: 99px;
	width: 33%;
}
.cnp-emi-slider {
	position: relative;
	z-index: 1;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 28px;
	background: transparent;
	outline: none;
	cursor: pointer;
	touch-action: pan-x;
}
.cnp-emi-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--emi-accent);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--emi-accent) 30%, transparent);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.cnp-emi-slider:active::-webkit-slider-thumb {
	transform: scale(1.18);
	box-shadow: 0 3px 14px color-mix(in srgb, var(--emi-accent) 45%, transparent);
}
.cnp-emi-slider::-moz-range-thumb {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--emi-accent);
	cursor: pointer;
}
.cnp-emi-slider::-moz-range-track { background: transparent; }
.cnp-emi-slider-ends {
	display: flex;
	justify-content: space-between;
	font-size: .7rem;
	color: var(--emi-muted);
	margin-top: -.1rem;
}

/* ── Calculate Button ── */
.cnp-emi-calc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	padding: .9rem 1.5rem;
	border-radius: var(--emi-radius-sm);
	background: linear-gradient(135deg, var(--emi-accent), var(--emi-accent-2));
	color: #fff;
	font-family: var(--emi-font);
	font-size: 1rem;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--emi-accent) 35%, transparent);
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
	min-height: 48px;
	margin-top: .15rem;
}
.cnp-emi-calc-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--emi-accent) 42%, transparent);
}
.cnp-emi-calc-btn:active { transform: scale(.97); }

/* ══════════════════════════════════════════════════════
   RESULTS COLUMN
══════════════════════════════════════════════════════ */
.cnp-emi-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* ── Donut ── */
.cnp-emi-chart-area {
	position: relative;
	width: clamp(150px, 55%, 195px);
	flex-shrink: 0;
}
.cnp-emi-donut {
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
	display: block;
}
.cnp-emi-donut__bg              { stroke: var(--emi-border); }
.cnp-emi-donut__arc--interest   { stroke: var(--emi-accent-2); }
.cnp-emi-donut__arc--principal  { stroke: var(--emi-principal); }
.cnp-emi-donut__arc {
	transition: stroke-dasharray .55s cubic-bezier(.4,0,.2,1),
	            stroke-dashoffset .55s cubic-bezier(.4,0,.2,1);
}
.cnp-emi-donut-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
}
.cnp-emi-donut-center__lbl {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--emi-muted);
	line-height: 1;
	margin-bottom: .3rem;
}
.cnp-emi-donut-center__val {
	font-size: clamp(.85rem, 2.5vw, 1.15rem);
	font-weight: 800;
	color: var(--emi-ink);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

/* ── Tiles (4 for EMI) ── */
.cnp-emi-tiles {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.cnp-emi-tile {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .65rem .9rem;
	border-radius: var(--emi-radius-sm);
	border: 1px solid var(--emi-border);
	background: var(--emi-surf2);
}
.cnp-emi-tile__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.cnp-emi-tile--emi       .cnp-emi-tile__dot { background: var(--emi-accent);    }
.cnp-emi-tile--principal .cnp-emi-tile__dot { background: var(--emi-principal); }
.cnp-emi-tile--interest  .cnp-emi-tile__dot { background: var(--emi-accent-2);  }
.cnp-emi-tile--total     .cnp-emi-tile__dot { background: var(--emi-total);     }

.cnp-emi-tile__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	min-width: 0;
}
.cnp-emi-tile__lbl {
	font-size: .78rem;
	font-weight: 500;
	color: var(--emi-muted);
	flex-shrink: 0;
}
.cnp-emi-tile__val {
	font-size: .875rem;
	font-weight: 700;
	color: var(--emi-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
	min-width: 85px;
}
.cnp-emi-tile--emi      .cnp-emi-tile__val { color: var(--emi-accent);    }
.cnp-emi-tile--interest .cnp-emi-tile__val { color: var(--emi-accent-2);  }
.cnp-emi-tile--total    .cnp-emi-tile__val { color: var(--emi-total);     }

.cnp-emi-disclaimer {
	font-size: .72rem;
	color: var(--emi-muted);
	text-align: center;
	margin: 0;
	line-height: 1.55;
	padding: 0 .25rem;
}

/* ══════════════════════════════════════════════════════
   BREAKDOWN SECTION
══════════════════════════════════════════════════════ */
.cnp-emi-breakdown {
	margin-top: 1.25rem;
	border-radius: var(--emi-radius);
	border: 1px solid var(--emi-border);
	overflow: clip; /* clips border-radius without blocking child scroll */
	background: var(--emi-surface);
}
.cnp-emi-bk-toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	padding: .95rem 1.25rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--emi-font);
	font-size: .9rem;
	font-weight: 600;
	color: var(--emi-ink);
	text-align: left;
	min-height: 48px;
	transition: background .15s;
}
.cnp-emi-bk-toggle:hover {
	background: color-mix(in srgb, var(--emi-accent) 6%, var(--emi-surface));
}
.cnp-emi-chevron {
	margin-left: auto;
	flex-shrink: 0;
	transition: transform .25s ease;
}
.cnp-emi-bk-toggle[aria-expanded="true"] .cnp-emi-chevron { transform: rotate(180deg); }

.cnp-emi-bk-body { border-top: 1px solid var(--emi-border); }

.cnp-emi-bk-tabs {
	display: flex;
	border-bottom: 1px solid var(--emi-border);
	padding: 0 1rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.cnp-emi-bk-tabs::-webkit-scrollbar { display: none; }
.cnp-emi-bk-tab {
	padding: .65rem 1rem;
	border: 0;
	border-bottom: 2.5px solid transparent;
	background: transparent;
	font-family: var(--emi-font);
	font-size: .82rem;
	font-weight: 600;
	color: var(--emi-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
	min-height: 44px;
}
.cnp-emi-bk-tab.is-active {
	color: var(--emi-accent);
	border-bottom-color: var(--emi-accent);
}

/* Table — NO internal scroll container (page scroll handles it) */
.cnp-emi-table-scroll {
	overflow-x: visible;
	width: 100%;
}
.cnp-emi-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .8375rem;
}
.cnp-emi-table thead { position: sticky; top: 0; z-index: 2; }
.cnp-emi-table thead tr {
	background: color-mix(in srgb, var(--emi-accent) 8%, var(--emi-surf2));
}
.cnp-emi-table th {
	padding: .65rem .85rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--emi-muted);
	text-align: right;
	border-bottom: 1px solid var(--emi-border);
	white-space: nowrap;
}
.cnp-emi-table th:first-child { text-align: left; }
.cnp-emi-table td {
	padding: .6rem .85rem;
	text-align: right;
	color: var(--emi-ink);
	border-bottom: 1px solid color-mix(in srgb, var(--emi-border) 50%, transparent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cnp-emi-table td:first-child { text-align: left; font-weight: 600; }
.cnp-emi-table tbody tr:last-child td { border-bottom: 0; }
.cnp-emi-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--emi-surf2) 55%, transparent);
}
.cnp-emi-table tbody tr:hover {
	background: color-mix(in srgb, var(--emi-accent) 6%, var(--emi-surface));
}
.cnp-emi-table .td-principal { color: var(--emi-principal); font-weight: 600; }
.cnp-emi-table .td-interest  { color: var(--emi-accent-2);  font-weight: 600; }
.cnp-emi-table .td-balance   { color: var(--emi-ink);       font-weight: 500; }

/* ── Mobile: table-layout:fixed — all 5 columns fit ── */
@media (max-width: 680px) {
	.cnp-emi-table {
		table-layout: fixed;
		width: 100%;
	}
	.cnp-emi-table th,
	.cnp-emi-table td {
		padding: .5rem .3rem;
		font-size: .75rem;
		white-space: nowrap;
	}
	.cnp-emi-table th:first-child,
	.cnp-emi-table td:first-child {
		padding-left: .6rem;
		width: 18%;
	}
	.cnp-emi-table th:not(:first-child),
	.cnp-emi-table td:not(:first-child) {
		width: 20.5%;
	}
	.cnp-emi-table th:last-child,
	.cnp-emi-table td:last-child { padding-right: .6rem; }
}

/* ══════════════════════════════════════════════════════
   SEO CONTENT
══════════════════════════════════════════════════════ */
.cnp-emi-seo {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--emi-border);
}
.cnp-emi-seo h3 { font-size: 1rem; font-weight: 700; color: var(--emi-ink); margin: 0 0 .5rem; }
.cnp-emi-seo p  { font-size: .875rem; color: var(--emi-muted); line-height: 1.65; margin: 0 0 1.25rem; }

/* ══════════════════════════════════════════════════════
   POP ANIMATION (rAF-driven, no forced reflow)
══════════════════════════════════════════════════════ */
@keyframes cnp-emi-pop {
	0%   { opacity: .6; transform: scale(.94); }
	65%  { transform: scale(1.03); }
	100% { opacity: 1;  transform: scale(1);  }
}
.cnp-emi-tile__val.popped,
.cnp-emi-donut-center__val.popped {
	animation: cnp-emi-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* ══════════════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════════════ */
[data-theme="dark"] .cnp-emi-wrap,
.dark .cnp-emi-wrap {
	--emi-surface: #1e293b;
	--emi-surf2:   #0f172a;
	--emi-ink:     #f1f5f9;
	--emi-muted:   #94a3b8;
	--emi-border:  rgba(255,255,255,.09);
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.cnp-emi-donut__arc, .cnp-emi-track__fill,
	.cnp-emi-calc-btn, .cnp-emi-tile__val,
	.cnp-emi-donut-center__val { transition: none !important; animation: none !important; }
}