/**
 * Finance Navigator Pro Tools — front-end calculator stylesheet.
 *
 * Vanilla CSS, no framework dependency. Color/typography custom
 * properties are overridden per-site by an inline <style> block printed
 * by FNP\Assets\AssetManager from the plugin's Settings page; the
 * fallback values below only apply if that inline block is missing for
 * any reason.
 */

:root {
	--fnp-primary: #2563eb;
	--fnp-secondary: #16a34a;
	--fnp-button-color: #2563eb;
	--fnp-button-text-color: #ffffff;
	--fnp-button-radius: 10px;
	--fnp-font-family: inherit;
	--fnp-font-size: 16px;
	--fnp-border-color: #d1d5db;
	--fnp-bg: #ffffff;
	--fnp-error: #dc2626;
	--fnp-text: #1f2937;
	--fnp-muted: #6b7280;
}

.fnp-calculator {
	font-family: var( --fnp-font-family );
	font-size: var( --fnp-font-size );
	color: var( --fnp-text );
	background: var( --fnp-bg );
	border: 1px solid var( --fnp-border-color );
	border-radius: 14px;
	padding: 24px;
	max-width: 100%;
	box-sizing: border-box;
	line-height: 1.5;
	/*
	 * Hotfix (post-launch styling report): a card-level shadow plus the
	 * raised specificity added throughout this file below (selectors now
	 * chained under `.fnp-calculator` instead of standing alone) gives
	 * this block enough visual separation and selector weight to render
	 * consistently across themes that apply their own global `input`,
	 * `select`, and `button` styling — without changing any markup or
	 * any class name a calculator template already emits.
	 */
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 8px 24px rgba( 0, 0, 0, 0.06 );
}

.fnp-calculator *,
.fnp-calculator *::before,
.fnp-calculator *::after {
	box-sizing: inherit;
}

/*
 * Visual redesign (above-the-fold layout pass, modeled on the
 * calculator.net/cleartax mortgage calculator layouts): inputs in the
 * left column, live results + chart + CTA in the right column, so a
 * visitor sees results without scrolling. The markup wrapping this is
 * in templates/calculator-shell.php's `.fnp-calculator__layout`/`__col`
 * divs — every inner class name below it is unchanged from before this
 * redesign pass.
 */
.fnp-calculator__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 28px;
	align-items: start;
}

.fnp-calculator__col--results {
	/*
	 * Keeps results in view while a visitor scrolls a long left-hand
	 * form on a short viewport — belt-and-suspenders for the "don't
	 * have to scroll to see results" requirement, on top of the
	 * side-by-side layout itself.
	 */
	position: sticky;
	top: 16px;
	/*
	 * Visual redesign ("modern design" reference — bankrate.com's
	 * mortgage calculator): a plain white card with its own shadow reads
	 * as more modern than a tinted panel, and matches the reference's
	 * results column. The hero row directly below gets its own distinct
	 * shaded "stat box" treatment instead (see `.fnp-results__row:first-
	 * child`), the same way the reference layout sets its "MONTHLY
	 * PAYMENT" figure apart from the rest of the card.
	 */
	background: #fff;
	border: 1px solid var( --fnp-border-color );
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.03 ), 0 8px 20px rgba( 0, 0, 0, 0.05 );
}

@media ( max-width: 760px ) {
	/*
	 * Bug fix (post-launch report, "on mobile it should show the entire
	 * calculator on the same screen" — reference: cleartax.in mobile
	 * layout). A literal zero-scroll guarantee isn't realistic with this
	 * many fields plus results plus a chart plus a CTA on a phone
	 * viewport, but the rules below compact spacing, type size, and the
	 * chart aggressively to get as close to the reference's tight,
	 * single-screen feel as the content allows, without removing or
	 * hiding any field/result.
	 */
	.fnp-calculator {
		padding: 14px;
	}

	.fnp-calculator__layout {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.fnp-calculator__col--results {
		position: static;
		padding: 12px;
	}

	.fnp-calculator__header {
		margin-bottom: 10px;
	}

	.fnp-calculator__title {
		font-size: 1.25em;
	}

	.fnp-calculator__form {
		gap: 8px;
		margin-bottom: 10px;
	}

	.fnp-results__row:first-child dd {
		font-size: 1.6em;
	}

	/*
	 * 1.0.9 bug fix (live mobile report: chart bleeding off the right
	 * edge of the screen, requiring horizontal scroll to see the rest of
	 * it). Root cause: this rule and the later, unconditional
	 * `.fnp-calculator__chart` rule (now also home to the chart/
	 * amortization tabs) share the exact same specificity (one class) —
	 * per the CSS cascade, when two rules tie on specificity, the one
	 * that appears *later in the file* wins, regardless of which is
	 * inside a media query. Because that unconditional rule (max-width:
	 * 100%, height: 260px) is declared further down this file than this
	 * @media block, it was silently overriding this rule's max-width:
	 * 220px/height: 220px on every phone-width viewport — so the chart
	 * sized itself at the full (260px-tall, 100%-wide) desktop dimensions
	 * inside a column far too narrow for it, with `responsive: true`
	 * making it overflow horizontally instead of shrinking. Chaining
	 * under `.fnp-calculator` raises this rule to two classes of
	 * specificity, so it now reliably wins regardless of source order —
	 * the same fix pattern already used throughout this file for other
	 * theme/cascade conflicts.
	 */
	.fnp-calculator .fnp-calculator__chart {
		margin-top: 12px;
		max-width: 100%;
		width: 220px;
		height: 220px;
		margin-left: auto;
		margin-right: auto;
	}

	.fnp-cta {
		margin-top: 14px;
		padding: 12px;
	}

	.fnp-calculator__footer,
	.fnp-calculator__disclaimer {
		margin-top: 8px;
	}

	/*
	 * Bug fix (post-launch report, "the alignment of the field boxes is
	 * not in line" — traced to the flex layout this replaces: with
	 * `flex-wrap: wrap` and a content-sized label column, a long label
	 * like "Annual Home Insurance" wrapped its own row onto two lines
	 * while every shorter-labeled row stayed on one, so each row's input
	 * box started at a different horizontal position). CSS Grid with a
	 * fixed column template fixes this structurally rather than
	 * cosmetically: every `.fnp-field` row — regardless of its label's
	 * length — shares the exact same two-column template, so column 2
	 * (the input) starts at the same pixel offset on every row, every
	 * time, by construction. Labels that are too long to fit column 1
	 * simply wrap *within* that column (grid columns don't reflow the
	 * way flex children can) instead of pushing the input out of line.
	 *
	 * AbstractField::wrap() always places exactly one direct-child
	 * input/select/wrapper between the label and the error paragraph,
	 * regardless of field type — that's what lets these few generic
	 * selectors cover NumberField, CurrencyField, PercentageField,
	 * DropdownField, DateField, and SliderField alike without touching
	 * any of their render() methods.
	 */
	.fnp-field:not( .fnp-field--checkbox ):not( .fnp-field--radio ) {
		display: grid;
		grid-template-columns: 1fr minmax( 120px, 52% );
		column-gap: 10px;
		row-gap: 2px;
		align-items: center;
	}

	.fnp-field:not( .fnp-field--checkbox ):not( .fnp-field--radio ) > .fnp-field__label {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		margin: 0;
		font-size: 0.85em;
	}

	.fnp-field:not( .fnp-field--checkbox ):not( .fnp-field--radio ) > input,
	.fnp-field:not( .fnp-field--checkbox ):not( .fnp-field--radio ) > select,
	.fnp-field:not( .fnp-field--checkbox ):not( .fnp-field--radio ) > .fnp-field__adorned,
	.fnp-field:not( .fnp-field--checkbox ):not( .fnp-field--radio ) > .fnp-field__slider-wrap {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.fnp-field > .fnp-field__error {
		grid-column: 1 / -1;
		margin: 0;
	}

	.fnp-field__slider-wrap {
		gap: 6px;
	}

	.fnp-calculator .fnp-field__input:not( [type="radio"] ):not( [type="checkbox"] ),
	.fnp-calculator .fnp-field select {
		padding: 7px 9px;
		font-size: 0.9em;
	}

	.fnp-calculator .fnp-field__adorned .fnp-field__input {
		padding: 7px 9px 7px 0;
	}

	.fnp-calculator .fnp-field__adorned--suffix .fnp-field__input {
		padding: 7px 0 7px 9px;
	}
}

.fnp-calculator__header {
	margin-bottom: 20px;
}

.fnp-calculator__title {
	margin: 0 0 4px;
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --fnp-text );
}

.fnp-calculator__description {
	margin: 0;
	color: var( --fnp-muted );
}

.fnp-calculator__errors {
	color: var( --fnp-error );
	margin-bottom: 12px;
	min-height: 1.2em;
}

/*
 * Bug fix (mobile report, "remove unwanted space above the calculator"):
 * this status paragraph reserves height for a validation message even
 * when there isn't one, on every page load — collapsing it to 0 while
 * it's empty removes that permanently-reserved gap; it springs back to
 * its normal size the moment fnp-core.js actually puts an error message
 * in it.
 */
.fnp-calculator__errors:empty {
	margin-bottom: 0;
	min-height: 0;
}

/*
 * Bug fix (mobile report, "remove unwanted space above the calculator"):
 * WordPress's wpautop() runs on the raw "[fnp_mortgage]" shortcode text
 * before the shortcode is expanded, so on many themes/page builders the
 * calculator's markup ends up sitting just after an empty `<p></p>`
 * that wpautop generated around the original shortcode tag — and a bare
 * paragraph carries the browser's default ~1em top/bottom margin. This
 * neutralizes that margin specifically on a paragraph that wraps the
 * calculator, without needing to alter how the shortcode is rendered.
 */
p:has( > .fnp-calculator ) {
	margin: 0;
}

.fnp-calculator__form {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px;
	margin-bottom: 20px;
}

.fnp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fnp-field--checkbox,
.fnp-field--radio-group {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.fnp-field__label {
	font-weight: 600;
	font-size: 0.9em;
}

/*
 * Hotfix (post-launch styling report): these field selectors are now
 * chained under `.fnp-calculator` (every field already renders inside
 * that wrapper — see templates/calculator-shell.php — so no markup
 * changed) purely to raise their specificity above a theme's own
 * global `input`/`select` styling, which is the most common reason a
 * calculator's fields look unstyled or inconsistent on a live theme.
 * `appearance: none` additionally stops a theme or browser's native
 * control chrome (e.g. a default select arrow/inset shadow) from
 * showing through underneath these rules.
 */
/*
 * Bug fix (live bug report: HELOC "Repayment Type" and Down Payment
 * "Down Payment Entered As" rendering as an unselectable solid bar with
 * both option labels floating below it, unclickable). Root cause:
 * RadioField::render() gives every `<input type="radio">` the same base
 * `.fnp-field__input` class every text/number/date input also carries
 * (see AbstractField/RadioField) — so this rule, written only with
 * single-line text-style inputs in mind, was also matching each radio
 * button and stripping its native circular appearance (`appearance:
 * none`) while forcing `width: 100%`, which blew each ~13px circle up
 * into a full-width rectangle. `:not([type="radio"]):not([type="checkbox"])`
 * excludes those input types here; they get their own properly-sized,
 * properly-visible styling below instead (`.fnp-field__input--radio`).
 */
.fnp-calculator .fnp-field__input:not( [type="radio"] ):not( [type="checkbox"] ),
.fnp-calculator .fnp-field select,
.fnp-calculator .fnp-field input[type="text"],
.fnp-calculator .fnp-field input[type="number"],
.fnp-calculator .fnp-field input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 12px;
	border: 1px solid var( --fnp-border-color );
	border-radius: 8px;
	font-size: 1em;
	width: 100%;
	background: #fff;
	color: var( --fnp-text );
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Dedicated radio-group styling (see bug-fix note above) — gives
 * RadioField a normal-sized, visible, clickable circular control instead
 * of relying on the generic text-input rule it was incorrectly inheriting
 * from. `accent-color` matches the plugin's primary color, the same
 * color used for the slider fill/thumb and focus rings elsewhere, so it
 * looks consistent with the rest of the form.
 */
.fnp-calculator .fnp-field__radio-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.fnp-calculator .fnp-field__radio-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.fnp-calculator .fnp-field__input--radio {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var( --fnp-primary );
	cursor: pointer;
}

.fnp-calculator .fnp-field__radio-option label {
	cursor: pointer;
	font-weight: 400;
}

.fnp-calculator .fnp-field__input--radio:focus-visible {
	outline: 2px solid var( --fnp-primary );
	outline-offset: 2px;
}

/*
 * Visual redesign: SliderField now renders a range input paired with an
 * editable number "value box" (see SliderField's docblock) instead of
 * the old read-only <output> readout — styled here to look like a
 * single combined control, matching the slider-plus-box inputs used by
 * the reference calculator layouts.
 */
.fnp-field__slider-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

/*
 * Bug fix (post-launch report, "black dot before Interest Rate/Loan
 * Term" — persisted across four prior rounds of raising this rule's
 * specificity, `!important`-hardening it, and an inline `style`
 * attribute on the input). Whatever is overriding `appearance: none` on
 * this live site clearly isn't a normal specificity/`!important` fight,
 * so this no longer tries to win that fight at all: the range input is
 * made fully transparent (`opacity: 0`) and stacked (via `z-index`)
 * directly on top of a purely decorative track/fill/thumb — see
 * `.fnp-field__slider-track` and friends below, painted from the
 * `data-fnp-slider-*` divs SliderField::render() now emits, and kept in
 * sync with the input's value by fnp-core.js's updateSliderVisual().
 * `opacity` hides an element's *entire* rendered box, including any
 * native control chrome, as one compositing step — there is no
 * selector/specificity/`!important` fight to lose, because nothing
 * about this rule depends on `appearance` being honored by the browser
 * at all. The input keeps receiving every click/drag/keyboard
 * interaction exactly as a normal range input would; only its own paint
 * is invisible.
 */
.fnp-calculator .fnp-field input[type="range"].fnp-field__input--slider {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	opacity: 0;
	cursor: pointer;
}

.fnp-field__slider-control {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 18px;
}

.fnp-field__slider-track {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 50%;
	height: 6px;
	transform: translateY( -50% );
	background: var( --fnp-border-color );
	border-radius: 999px;
	/* Purely decorative — the real (invisible) input above it is always
	   what receives pointer/keyboard interaction. */
	pointer-events: none;
}

.fnp-field__slider-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: var( --fnp-primary );
	border-radius: 999px;
	pointer-events: none;
}

.fnp-field__slider-thumb {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	transform: translateY( -50% );
	border-radius: 50%;
	background: var( --fnp-primary );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
	pointer-events: none;
	/*
	 * 1.0.8 premium polish pass: a slight grow-on-interaction (matches the
	 * "live", tactile feel of the reference finance-site sliders) layered
	 * on top of the thumb's existing position/box-shadow rules — additive
	 * only, nothing above this changed.
	 */
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Visible focus ring on the decorative thumb when the real (invisible)
   range input underneath it has keyboard focus. */
.fnp-calculator .fnp-field input[type="range"].fnp-field__input--slider:focus-visible ~ .fnp-field__slider-track .fnp-field__slider-thumb {
	outline: 2px solid var( --fnp-primary );
	outline-offset: 2px;
}

.fnp-calculator .fnp-field input[type="range"].fnp-field__input--slider:hover ~ .fnp-field__slider-track .fnp-field__slider-thumb {
	transform: translateY( -50% ) scale( 1.12 );
}

.fnp-calculator .fnp-field input[type="range"].fnp-field__input--slider:active ~ .fnp-field__slider-track .fnp-field__slider-thumb {
	transform: translateY( -50% ) scale( 1.18 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
}

.fnp-calculator .fnp-field__input--slider-value {
	flex: 0 0 auto;
	width: 84px;
	text-align: right;
	/*
	 * Visual polish: matches the ~36px tall pill height of every other
	 * input (10px vertical padding + 1em text) so this box doesn't look
	 * short/disconnected next to the slider track and the other fields.
	 */
	padding: 10px 8px;
}

/*
 * Bug fix (post-launch report, "alignment is not proper of the boxes"):
 * CurrencyField/PercentageField wrap their input in this div (one
 * `.fnp-field__adornment` span + one `<input>`), but no rule made the
 * wrapper a flex container — the span (inline) and the `width: 100%`
 * input each took their own line instead of sitting side-by-side, which
 * is what put the "$" above the box instead of inside it. The wrapper
 * now owns the visual border/background and the input sits flush inside
 * it with no border of its own, so the symbol and the field render as
 * one control.
 */
.fnp-calculator .fnp-field__adorned {
	display: flex;
	align-items: stretch;
	border: 1px solid var( --fnp-border-color );
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fnp-calculator .fnp-field__adorned .fnp-field__adornment {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0 4px 0 12px;
	color: var( --fnp-muted );
	font-size: 1em;
	white-space: nowrap;
}

.fnp-calculator .fnp-field__adorned--suffix .fnp-field__adornment {
	padding: 0 12px 0 4px;
}

.fnp-calculator .fnp-field__adorned .fnp-field__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 10px 12px 10px 0;
}

.fnp-calculator .fnp-field__adorned--suffix .fnp-field__input {
	padding: 10px 0 10px 12px;
}

.fnp-calculator .fnp-field__adorned:focus-within {
	border-color: var( --fnp-primary );
	box-shadow: 0 0 0 1px var( --fnp-primary );
}

.fnp-calculator .fnp-field__adorned .fnp-field__input:focus {
	outline: none;
	border-color: transparent;
}

/*
 * Visual polish: a subtle hover state on every field (including the
 * adorned wrapper) gives the form a bit more life/interactivity instead
 * of every box looking static until clicked.
 */
.fnp-calculator .fnp-field__input:hover,
.fnp-calculator .fnp-field select:hover,
.fnp-calculator .fnp-field__adorned:hover {
	border-color: color-mix( in srgb, var( --fnp-primary ) 40%, var( --fnp-border-color ) );
}

.fnp-calculator .fnp-field__input:focus,
.fnp-calculator .fnp-field select:focus,
.fnp-calculator .fnp-field input:focus {
	outline: 2px solid var( --fnp-primary );
	outline-offset: 1px;
	border-color: var( --fnp-primary );
}

.fnp-field__input--error {
	border-color: var( --fnp-error );
}

.fnp-field__error {
	color: var( --fnp-error );
	font-size: 0.85em;
	min-height: 1em;
}

/*
 * 1.0.8 visual redesign ("Tooltip Improvements" — bankrate.com-style
 * popover that fades in on hover/focus, never overflows the viewport).
 * `.fnp-field__tooltip-wrap` is the positioning context the bubble
 * anchors to; `.fnp-field__tooltip` is now a real <button> (see
 * AbstractField::wrap()) rather than a plain icon span.
 */
.fnp-field__tooltip-wrap {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.fnp-field__tooltip {
	appearance: none;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	color: var( --fnp-muted );
	font-size: 0.95em;
	line-height: 1;
	cursor: help;
	border-radius: 50%;
}

.fnp-field__tooltip:hover,
.fnp-field__tooltip:focus-visible {
	color: var( --fnp-primary );
}

.fnp-field__tooltip:focus-visible {
	outline: 2px solid var( --fnp-primary );
	outline-offset: 2px;
}

/*
 * The bubble itself: left-anchored (not centered) to the trigger icon so
 * it can never run past the right edge of a narrow viewport, and its
 * `max-width` is clamped against `100vw` as a pure-CSS overflow guard —
 * no JS measurement/repositioning needed (user requirement: avoid
 * unnecessary JS). Hidden by default via opacity/visibility (not
 * `display`) so the opacity transition can actually animate; shown on
 * `:hover`/`:focus-within` (desktop hover, keyboard focus) or `.is-open`
 * (fnp-core.js's bindTooltips(), for tap-to-toggle on touch devices,
 * which have no real `:hover`).
 */
.fnp-field__tooltip-bubble {
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 0;
	z-index: 20;
	width: max-content;
	max-width: min( 260px, calc( 100vw - 48px ) );
	padding: 8px 12px;
	background: var( --fnp-surface, #fff );
	color: var( --fnp-text );
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	border: 1px solid var( --fnp-border-color );
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 4px );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.fnp-field__tooltip-wrap:hover .fnp-field__tooltip-bubble,
.fnp-field__tooltip-wrap:focus-within .fnp-field__tooltip-bubble,
.fnp-field__tooltip-wrap.is-open .fnp-field__tooltip-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.fnp-calculator__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

/*
 * Hotfix (post-launch styling report): chained under `.fnp-calculator`
 * (same reasoning as the field selectors above) so a theme's own
 * global `button` styling can't flatten these into a plain unstyled
 * button; `appearance: none` removes native button chrome the same way.
 *
 * Visual redesign (above-the-fold layout pass): restyled from solid
 * filled buttons to a quieter outline/"ghost" look. These are utility
 * actions (Reset/Copy/Print/Export/Share), not the calculator's primary
 * call-to-action — the reference layouts keep that visual weight for
 * the affiliate CTA button instead (see `.fnp-cta a` below), so these
 * are deliberately de-emphasized rather than competing with it.
 */
.fnp-calculator .fnp-calculator__actions button {
	-webkit-appearance: none;
	appearance: none;
	background: color-mix( in srgb, var( --fnp-text ) 3%, transparent );
	color: var( --fnp-text );
	border: 1px solid var( --fnp-border-color );
	border-radius: var( --fnp-button-radius );
	padding: 8px 14px;
	font-size: 0.85em;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	/*
	 * Bug fix (post-launch report, "make buttons better" — screenshot
	 * showed widely letter-spaced, all-caps button labels): the theme's
	 * own global button styling sets `text-transform: uppercase` and a
	 * wide `letter-spacing`, and nothing here was overriding it. These
	 * two lines are the actual fix; the rest of this rule is unchanged.
	 */
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease, background 0.15s ease;
}

.fnp-calculator .fnp-calculator__actions button:hover {
	background: color-mix( in srgb, var( --fnp-text ) 6%, transparent );
}

.fnp-calculator .fnp-calculator__actions button:active {
	transform: translateY( 1px );
}

.fnp-calculator .fnp-calculator__actions button:focus-visible {
	outline: 2px solid var( --fnp-text );
	outline-offset: 2px;
}

.fnp-calculator .fnp-calculator__actions button[hidden] {
	display: none;
}

.fnp-calculator__results {
	/*
	 * Visual redesign: the top border/padding this rule used to add is
	 * now redundant — `.fnp-calculator__col--results` (its new parent
	 * panel, see above) already supplies its own border and padding.
	 */
}

.fnp-results__list {
	display: grid;
	gap: 8px;
	margin: 0;
}

.fnp-results__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	/* Visual redesign (bankrate.com reference): solid hairline reads as a
	   cleaner, more "modern finance app" divider than the prior dashed
	   rule; subtler than the border color itself via color-mix() so it
	   doesn't compete with the bordered hero row below. */
	border-bottom: 1px solid color-mix( in srgb, var( --fnp-border-color ) 70%, transparent );
}

.fnp-results__row dt {
	color: var( --fnp-muted );
	font-weight: 400;
}

.fnp-results__row dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

/*
 * Visual redesign ("modern design" reference, bankrate.com-style legend
 * dots): purely decorative — cycles through the same color palette
 * fnp-charts.js hands its doughnut/pie slices (see that file's
 * colorForIndex()), so the results list reads as the chart's legend
 * now that Chart.js's own built-in legend is off by default. It does
 * not assert a guaranteed one-to-one mapping between a given results
 * row and a given chart slice — a calculator's results list and its
 * chart data are independent by design (see AbstractChart's docblock)
 * — it only keeps the two visually related. fnp-core.js only emits
 * this span when a chart is actually present for this calculator.
 */
.fnp-results__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: middle;
}

/*
 * Visual redesign (above-the-fold layout pass): the first row in the
 * results list gets a "hero" treatment — a large highlighted number,
 * the same big-headline-stat look the reference calculator layouts use
 * (e.g. "Monthly Pay" on calculator.net, the EMI figure on cleartax).
 * fnp-core.js's renderResults() preserves the order calculate() returns
 * its results in, and MortgageCalculator::calculate() (this redesign
 * pass) deliberately lists `total_monthly_payment` first for exactly
 * this reason. Any future calculator can opt into the same treatment
 * just by ordering its own calculate() return array the same way — no
 * markup or JS change needed.
 */
/*
 * Visual redesign ("modern design" reference, bankrate.com's "MONTHLY
 * PAYMENT" stat box): the hero row now reads as its own distinct
 * shaded, rounded card instead of just a bigger line in the list,
 * matching the reference layout's treatment of its headline figure.
 * The neutral tint is mixed from `--fnp-text` rather than
 * `--fnp-primary` so it stays a quiet neutral background regardless of
 * what accent color a site has configured.
 */
.fnp-results__row:first-child {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 16px 18px;
	margin-bottom: 16px;
	border: 1px solid var( --fnp-border-color );
	/*
	 * 1.0.8 premium polish pass: a colored accent edge (using the site's
	 * own configured primary color, so this stays on-brand per site
	 * rather than a hardcoded hue) gives the hero stat its own visual
	 * identity beyond the plain neutral tint, without altering the
	 * existing border/background/radius this rule already set.
	 */
	border-left: 4px solid var( --fnp-primary );
	border-radius: 10px;
	background: color-mix( in srgb, var( --fnp-text ) 4%, #fff );
}

.fnp-results__row:first-child dt {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fnp-results__row:first-child dd {
	font-size: 2em;
	font-weight: 800;
	color: var( --fnp-primary );
	letter-spacing: -0.01em;
}

/*
 * Bug fix (post-launch report, "where is the chart, I can't see it on
 * the page"): this container had no explicit `height`, and
 * fnp-charts.js's defaultOptions() sets both `responsive: true` and
 * `maintainAspectRatio: false` on every chart — a well-known Chart.js
 * pairing that makes the canvas size itself to its *parent's* height.
 * With no height set here, that's circular (the parent has no height of
 * its own to give), and the canvas can render at an effectively zero
 * visible height even though the chart instance itself constructs
 * successfully and no error is thrown anywhere. Giving the container an
 * explicit height breaks the circularity. `position: relative` is what
 * Chart.js's own docs call for when `maintainAspectRatio: false` is
 * used, so the canvas's absolute-positioned internal sizing resolves
 * against this element rather than the next positioned ancestor up the
 * tree.
 */
.fnp-calculator__chart {
	position: relative;
	margin-top: 20px;
	max-width: 100%;
	height: 260px;
}

/*
 * 1.0.8 visual redesign (user-supplied bankrate.com reference
 * screenshot): a "Chart / Amortization" tab bar, rendered above
 * `.fnp-calculator__chart` only for calculators with `$has_chart` true
 * (see calculator-shell.php and fnp-core.js's bindChartTabs()). Replaces
 * the chart's own `margin-top: 20px` above as the column's top spacing
 * in that case — see `.fnp-calculator__panel .fnp-calculator__chart`
 * below, which zeroes it out so the tab bar's own spacing isn't doubled.
 */
.fnp-calculator__tabs {
	display: flex;
	gap: 4px;
	margin-top: 20px;
	border-bottom: 1px solid var( --fnp-border-color );
}

.fnp-calculator .fnp-calculator__tab {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin: 0;
	padding: 10px 4px;
	font: inherit;
	font-weight: 600;
	font-size: 0.92em;
	color: var( --fnp-muted );
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fnp-calculator__tab + .fnp-calculator__tab {
	margin-left: 18px;
}

.fnp-calculator .fnp-calculator__tab:hover {
	color: var( --fnp-text );
}

.fnp-calculator .fnp-calculator__tab.is-active {
	color: var( --fnp-primary );
	border-bottom-color: var( --fnp-primary );
}

.fnp-calculator .fnp-calculator__tab:focus-visible {
	outline: 2px solid var( --fnp-primary );
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * 1.0.8 accessibility pass: the tabpanels themselves are now
 * keyboard-focusable (`tabindex="0"`, see calculator-shell.php) per the
 * WAI-ARIA Tabs Pattern, since the chart panel's canvas has no other
 * focusable content — give that focus state a visible ring like every
 * other focusable element in this file already has, instead of the
 * browser's inconsistent default outline.
 */
.fnp-calculator .fnp-calculator__panel:focus-visible {
	outline: 2px solid var( --fnp-primary );
	outline-offset: 2px;
	border-radius: 6px;
}

.fnp-calculator__panel .fnp-calculator__chart {
	margin-top: 16px;
}

.fnp-calculator__panel .fnp-calculator__schedule {
	/*
	 * 1.0.9 bug fix (live report: "keep some spacing between the tab
	 * section and the heading" — the Amortization tab's heading was
	 * sitting flush against the tab bar's bottom border). This was
	 * zeroed out entirely rather than reduced when the schedule moved
	 * into the tab panel; restoring real (if smaller than the
	 * standalone-table 24px) breathing room fixes that without
	 * reintroducing the old double-spacing `.fnp-calculator__tabs`
	 * already accounts for via its own `margin-top`.
	 */
	margin-top: 18px;
}

/*
 * Visual redesign (bankrate.com mortgage-calculator reference): an
 * explicit legend list under the chart, built by fnp-charts.js's
 * renderLegend() from the same labels/colors driving the doughnut
 * itself. This is distinct from (and in addition to) `.fnp-results__dot`
 * on the results rows above — Bankrate's reference shows both a chart
 * legend and colored result rows, so this plugin now does too.
 */
.fnp-chart-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85em;
	color: var( --fnp-muted );
}

.fnp-chart-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fnp-chart-legend__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

/*
 * New feature (user request, "Add chart, Amortization, schedule" —
 * bankrate.com reference): a visible year-by-year payment breakdown
 * table. The underlying data (`results._schedule`) was already computed
 * by every loan-type calculator that calls
 * FinanceMath::amortization_schedule() and already shipped to the
 * front end for CSV/PDF export — this is purely a new front-end
 * renderer (fnp-core.js's renderSchedule()) for data that already
 * existed, no PHP/REST change required. Generic by name/markup (not
 * mortgage-specific) so any future calculator that sets `_schedule`
 * gets this table for free.
 */
.fnp-calculator__schedule {
	margin-top: 24px;
}

.fnp-calculator__schedule-title {
	margin: 0 0 10px;
	font-size: 1.05em;
	font-weight: 700;
}

.fnp-calculator__schedule-scroll {
	overflow-x: auto;
	border: 1px solid var( --fnp-border-color );
	border-radius: 10px;
}

.fnp-schedule-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	white-space: nowrap;
}

.fnp-schedule-table th,
.fnp-schedule-table td {
	padding: 8px 12px;
	text-align: right;
	border-bottom: 1px solid var( --fnp-border-color );
}

.fnp-schedule-table th:first-child,
.fnp-schedule-table td:first-child {
	text-align: left;
}

.fnp-schedule-table thead th {
	background: color-mix( in srgb, var( --fnp-text ) 4%, #fff );
	font-weight: 700;
	color: var( --fnp-muted );
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
}

/*
 * 1.0.8 premium polish pass: faint zebra striping makes a long
 * year-by-year schedule easier to scan row-to-row — common in the
 * reference finance sites' own amortization tables. Placed before the
 * existing `:hover` rule below (same selector specificity) so a hovered
 * row's highlight still visibly wins over the stripe on the cascade.
 */
.fnp-schedule-table tbody tr:nth-child( even ) {
	background: color-mix( in srgb, var( --fnp-text ) 2%, #fff );
}

.fnp-schedule-table tbody tr:hover {
	background: color-mix( in srgb, var( --fnp-text ) 3%, #fff );
}

.fnp-schedule-table tbody tr:last-child th,
.fnp-schedule-table tbody tr:last-child td {
	border-bottom: none;
}

.fnp-calculator--loading {
	opacity: 0.65;
	pointer-events: none;
}

.fnp-cta {
	margin-top: 20px;
	padding: 16px;
	border-radius: 6px;
	background: color-mix( in srgb, var( --fnp-primary ) 8%, transparent );
	border: 1px solid var( --fnp-primary );
	text-align: center;
}

.fnp-cta__text {
	margin: 0 0 10px;
}

/*
 * Visual redesign (above-the-fold layout pass): full-width and larger
 * so this remains the calculator's single most visually prominent
 * action — the utility buttons above were intentionally de-emphasized
 * (see `.fnp-calculator__actions button` above) to make room for this.
 */
.fnp-cta a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var( --fnp-button-color );
	color: var( --fnp-button-text-color );
	border-radius: var( --fnp-button-radius );
	padding: 14px 20px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05em;
	text-align: center;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 );
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.fnp-cta a:hover {
	filter: brightness( 0.94 );
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.16 );
	/* 1.0.8 premium polish pass: a 1px lift on hover, additive to the
	   existing brightness/shadow hover treatment above. */
	transform: translateY( -1px );
}

.fnp-cta a:active {
	transform: translateY( 0 );
}

.fnp-calculator__footer {
	margin-top: 16px;
	font-size: 0.8em;
	color: var( --fnp-muted );
}

.fnp-calculator__disclaimer {
	margin-top: 8px;
	font-size: 0.75em;
	color: var( --fnp-muted );
}

@media ( max-width: 480px ) {
	.fnp-calculator {
		padding: 12px;
		/*
		 * Bug fix (mobile single-screen report): reserves room at the
		 * bottom of the card so the fixed CTA bar below never overlaps
		 * the last field/result.
		 */
		padding-bottom: 76px;
	}

	/*
	 * Bug fix (mobile single-screen report): five full-width stacked
	 * buttons (the old `flex-direction: column` + `width: 100%` rule)
	 * cost roughly 200px of vertical space on a phone — the opposite of
	 * "fits on one screen." Wrapping them as a compact row instead saves
	 * that space; nothing about what the buttons do has changed.
	 */
	.fnp-calculator__actions {
		flex-wrap: wrap;
		gap: 5px;
		margin-bottom: 14px;
	}

	/*
	 * Bug fix ("make the buttons smaller" — mobile report): shrunk
	 * further from the 1.0.4 pass (7px/8px padding, 0.78em font) to
	 * free up more vertical/horizontal room toward the "fits on one
	 * screen" goal. Still five buttons with full labels (no markup
	 * change), just visually lighter.
	 */
	.fnp-calculator .fnp-calculator__actions button {
		flex: 1 1 auto;
		padding: 6px 6px;
		font-size: 0.7em;
	}

	.fnp-results__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.fnp-results__row dd {
		text-align: left;
	}

	/*
	 * Visual redesign follow-up (mobile reference: cleartax.in's pinned
	 * bottom CTA bar). Fixes the primary CTA to the bottom of the
	 * viewport on phones instead of letting it sit wherever the results
	 * column happens to end, matching the supplied reference screenshot.
	 * The padding-bottom added to `.fnp-calculator` above keeps this bar
	 * from covering the card's own content.
	 */
	.fnp-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		margin: 0;
		border-radius: 0;
		border-width: 1px 0 0;
		box-shadow: 0 -2px 8px rgba( 0, 0, 0, 0.1 );
	}

	.fnp-cta__text {
		display: none;
	}

	.fnp-cta a {
		padding: 12px 16px;
	}
}

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

/*
 * Bug fix (post-launch report: "it prints entire page" / "why are there
 * 3 pages"). The first attempt at this fix used `visibility: hidden` on
 * `body *` + `visibility: visible` + `position: absolute` on
 * `.fnp-calculator`. That hides everything else from *view* but doesn't
 * remove it from the page's *layout* — a hidden header/sidebar/footer
 * still occupies its full height, so the browser still paginates as if
 * all of that space were there, producing extra blank pages around the
 * (absolutely-positioned, now-overlapping) calculator. That's exactly
 * the "3 pages" symptom.
 *
 * This version uses `:has()` to actually remove everything outside the
 * calculator's own ancestor chain from the layout (`display: none`,
 * which DOES collapse height), at every level of the page — not just
 * direct children of body — without needing to know the active theme's
 * markup structure. `:not(:has(.fnp-calculator))` keeps any element that
 * contains the calculator (so the chain down to it stays visible);
 * `:not(.fnp-calculator):not(.fnp-calculator *)` excludes the calculator
 * itself and everything inside it from being touched by this rule at
 * all (its own internal layout, set elsewhere in this file, is
 * untouched). Requires `:has()` support (Chrome/Edge/Safari/Firefox all
 * ship it as of 2023–2024); on an older print engine this rule simply
 * doesn't match and printing falls back to the previous (whole-page)
 * behavior rather than breaking anything.
 */
@media print {
	.fnp-calculator__actions,
	.fnp-cta {
		display: none !important;
	}

	body *:not( :has( .fnp-calculator ) ):not( .fnp-calculator ):not( .fnp-calculator * ) {
		display: none !important;
	}

	.fnp-calculator {
		box-shadow: none;
		border: none;
	}

	.fnp-calculator__col--results {
		position: static;
	}
}