/*
 * EMI calculator — loaded only on the page using page-templates/emi-calculator.php.
 *
 * Two panels side by side from 900px: the controls on the left in the page's
 * normal white card treatment, the answer on the right on navy. The result is
 * the only navy surface on the page, which is what makes it read as the output
 * rather than another input.
 *
 * Every colour comes from tokens.css. The accent is used for the interest arc
 * and the slider fill only — never for text on white, where cyan measures
 * 2.4:1 (BRAND-GUIDELINES §3.4).
 */

.smi-emi {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-4);
	align-items: start;
	margin-bottom: var(--smi-space-6);
}

@media (min-width: 900px) {
	.smi-emi {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		gap: var(--smi-space-5);
	}
}

/* =========================================================================
   Controls
   ========================================================================= */

.smi-emi__controls {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-5);
	padding: var(--smi-space-5);
	background-color: var(--smi-white);
	background-image: var(--smi-grad-card);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
}

.smi-emi__field {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-2);
}

.smi-emi__field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smi-space-3);
	flex-wrap: wrap;
}

.smi-emi__field-head label {
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-body);
	font-weight: 600;
	color: var(--smi-navy);
}

/* The number is the thing being adjusted, so it is set like a value, not like
   a form control: no heavy chrome, just a tinted well. */
.smi-emi__entry {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 6px 12px;
	background-color: var(--smi-surface);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-pill);
	transition:
		border-color var(--smi-duration) var(--smi-ease),
		box-shadow var(--smi-duration) var(--smi-ease);
}

.smi-emi__entry:focus-within {
	border-color: var(--smi-navy);
	box-shadow: 0 0 0 3px rgba(var(--smi-navy-rgb), .12);
}

.smi-emi__entry input {
	/* Rate ("18") and tenure ("30") are short; the amount has to hold
	   "50,00,00,000" at the top of the range without clipping. */
	inline-size: 5ch;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-body-lg);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--smi-navy);
	text-align: end;
}

.smi-emi__entry input[data-smi-emi-input="amount"] {
	inline-size: 12ch;
}

.smi-emi__entry input:focus {
	outline: none;
}

.smi-emi__prefix,
.smi-emi__suffix {
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-muted);
}

.smi-emi__prefix { order: -1; }

.smi-emi__scale {
	display: flex;
	justify-content: space-between;
	gap: var(--smi-space-2);
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--smi-muted);
	font-variant-numeric: tabular-nums;
}

/* The live value in words sits between the two end stops. */
.smi-emi__scale [data-smi-emi-words] {
	color: var(--smi-navy);
}

/* -- Range input ----------------------------------------------------------
   Track fill left of the thumb comes from --smi-range-fill, set by emi.js;
   no browser paints a progress fill on an <input type=range> by itself. */

.smi-emi__range {
	--smi-range-fill: 0%;
	inline-size: 100%;
	block-size: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.smi-emi__range::-webkit-slider-runnable-track {
	block-size: 6px;
	border-radius: var(--smi-radius-pill);
	background:
		linear-gradient(var(--smi-accent), var(--smi-accent)) 0 / var(--smi-range-fill) 100% no-repeat,
		var(--smi-border);
}

.smi-emi__range::-moz-range-track {
	block-size: 6px;
	border-radius: var(--smi-radius-pill);
	background:
		linear-gradient(var(--smi-accent), var(--smi-accent)) 0 / var(--smi-range-fill) 100% no-repeat,
		var(--smi-border);
}

.smi-emi__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: -7px;
	border: 3px solid var(--smi-white);
	border-radius: 50%;
	background-color: var(--smi-navy);
	box-shadow: var(--smi-shadow-md);
	transition: transform var(--smi-duration) var(--smi-ease-spring);
}

.smi-emi__range::-moz-range-thumb {
	inline-size: 14px;
	block-size: 14px;
	border: 3px solid var(--smi-white);
	border-radius: 50%;
	background-color: var(--smi-navy);
	box-shadow: var(--smi-shadow-md);
}

.smi-emi__range:hover::-webkit-slider-thumb,
.smi-emi__range:active::-webkit-slider-thumb {
	transform: scale(1.14);
}

.smi-emi__range:focus-visible {
	outline: none;
}

.smi-emi__range:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(var(--smi-accent-rgb), .45), var(--smi-shadow-md);
}

.smi-emi__range:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba(var(--smi-accent-rgb), .45), var(--smi-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.smi-emi__range:hover::-webkit-slider-thumb,
	.smi-emi__range:active::-webkit-slider-thumb {
		transform: none;
	}
}

.smi-emi__privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-emi__privacy svg {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: 3px;
	color: var(--smi-accent);
}

/* =========================================================================
   Result panel
   ========================================================================= */

.smi-emi__result {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-4);
	padding: var(--smi-space-5);
	background-color: var(--smi-navy);
	background-image: var(--smi-grad-navy);
	border-radius: var(--smi-radius-card);
	box-shadow: var(--smi-shadow-xl), var(--smi-edge-light-dark);
	color: var(--smi-white);
}

@media (min-width: 900px) {
	.smi-emi__result {
		position: sticky;
		inset-block-start: 96px;
	}
}

.smi-emi__headline {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block-end: var(--smi-space-4);
	border-block-end: 1px solid rgba(255, 255, 255, .14);
}

.smi-emi__headline-label {
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: var(--smi-track-label);
	text-transform: uppercase;
	color: var(--smi-accent);
}

.smi-emi__headline-value {
	font-family: var(--smi-font-head);
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--smi-white);
}

.smi-emi__split {
	display: flex;
	align-items: center;
	gap: var(--smi-space-4);
	flex-wrap: wrap;
}

/* -- Donut ---------------------------------------------------------------- */

.smi-emi__donut {
	position: relative;
	flex: none;
	inline-size: 132px;
	block-size: 132px;
}

.smi-emi__donut svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.smi-emi__donut circle {
	fill: none;
	stroke-width: 3.6;
}

.smi-emi__donut-track {
	stroke: rgba(255, 255, 255, .18);
}

.smi-emi__donut-arc {
	stroke: var(--smi-accent);
	stroke-linecap: round;
	transition: stroke-dasharray var(--smi-duration-mid) var(--smi-ease);
}

@media (prefers-reduced-motion: reduce) {
	.smi-emi__donut-arc {
		transition: none;
	}
}

.smi-emi__donut-centre {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-h4);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--smi-white);
}

.smi-emi__donut-centre small {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* -- Legend --------------------------------------------------------------- */

.smi-emi__legend {
	flex: 1 1 12rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.smi-emi__legend-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--smi-space-3);
	padding-block: 7px;
	border-block-end: 1px solid rgba(255, 255, 255, .10);
}

.smi-emi__legend-row dt {
	position: relative;
	padding-inline-start: 15px;
	font-size: var(--smi-text-small);
	color: rgba(255, 255, 255, .74);
}

/* Swatches tie each row to the donut without a separate legend key. */
.smi-emi__legend-row dt::before {
	content: "";
	position: absolute;
	inset-block-start: .45em;
	inset-inline-start: 0;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 2px;
}

.smi-emi__legend-row--principal dt::before { background-color: rgba(255, 255, 255, .45); }
.smi-emi__legend-row--interest dt::before  { background-color: var(--smi-accent); }
.smi-emi__legend-row--total dt::before     { background-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }

.smi-emi__legend-row dd {
	margin: 0;
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-body);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--smi-white);
	white-space: nowrap;
}

.smi-emi__legend-row--total {
	border-block-end: 0;
}

.smi-emi__legend-row--total dd {
	font-size: var(--smi-text-body-lg);
}

.smi-emi__note {
	margin: 0;
	font-size: var(--smi-text-small);
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

.smi-emi__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smi-space-2);
}

/* =========================================================================
   Year-by-year schedule
   ========================================================================= */

.smi-emi__schedule {
	margin-block-end: 0;
}

.smi-emi__schedule-head {
	margin-block-end: var(--smi-space-3);
}

.smi-emi__schedule-head h2 {
	font-size: var(--smi-text-h3);
	margin: 0 0 4px;
}

.smi-emi__schedule-head p {
	margin: 0;
	color: var(--smi-muted);
}

/* The table is the one thing here that can outgrow a phone; it scrolls in its
   own container so the page body never does. */
.smi-emi__table-wrap {
	overflow-x: auto;
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
	background-color: var(--smi-white);
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
}

.smi-emi__table {
	inline-size: 100%;
	min-inline-size: 34rem;
	border-collapse: collapse;
	font-size: var(--smi-text-small);
}

.smi-emi__table th,
.smi-emi__table td {
	padding: 11px var(--smi-space-3);
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.smi-emi__table thead th {
	position: sticky;
	inset-block-start: 0;
	background-color: var(--smi-surface);
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: var(--smi-track-label);
	text-transform: uppercase;
	color: var(--smi-muted);
	border-block-end: 1px solid var(--smi-border);
}

.smi-emi__table th:first-child,
.smi-emi__table td:first-child {
	text-align: start;
}

.smi-emi__table tbody th {
	font-weight: 600;
	color: var(--smi-navy);
}

.smi-emi__table tbody tr + tr th,
.smi-emi__table tbody tr + tr td {
	border-block-start: 1px solid var(--smi-border);
}

.smi-emi__table tbody tr:hover th,
.smi-emi__table tbody tr:hover td {
	background-color: var(--smi-surface);
}

.smi-emi__table-bar-col {
	inline-size: 30%;
	min-inline-size: 9rem;
}

.smi-emi__table td.smi-emi__table-bar-col {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
}

.smi-emi__bar {
	flex: 1;
	block-size: 6px;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-border);
	overflow: hidden;
}

.smi-emi__bar-fill {
	display: block;
	block-size: 100%;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-accent);
}

.smi-emi__bar-pct {
	inline-size: 3.2rem;
	text-align: end;
	color: var(--smi-muted);
	font-weight: 600;
}

/* The explainer section this styled was removed; the disclaimer that replaced
   it needs no trailing margin — main.wrap owns the gap to the footer. */
.smi-emi__disclaimer {
	margin-block: var(--smi-space-4) 0;
}

/* =========================================================================
   Floating WhatsApp button vs the sliders
   =========================================================================
   The site-wide WhatsApp FAB is fixed bottom-right at 56px. These sliders run
   the full width of the panel, so on a phone the FAB sits over the right end
   of the track and swallows the touch — the loan amount, rate and tenure
   cannot be dragged to their maximum.

   This page already offers WhatsApp as a real CTA in the result panel ("Ask
   about a property"), so the floating duplicate is not carrying anything the
   visitor loses. Hidden below 1024px, where the collision happens; on desktop
   the FAB clears the panel and stays.

   This file is enqueued only on the EMI template, so no other page is
   affected. */

@media (max-width: 1023px) {
	.smi-whatsapp-float {
		display: none;
	}
}