/*
 * Finobazaar loan calculators. Uses the theme's tokens when present, with
 * brand values as fallbacks, and the same form and table language as the
 * land calculators. The headline figure carries each result; the formula
 * with the numbers and the schedule sit underneath so every figure can be
 * checked. Principal = brand blue, interest = amber, always with labels.
 * Works without calculators.js.
 */
.fbcl {
	--fbcl-blue: var(--fb-brand-blue, #105de1);
	--fbcl-blue-dark: var(--fb-brand-blue-dark, #0848b8);
	--fbcl-surface: var(--fb-brand-blue-surface, #f3f7ff);
	--fbcl-ink: var(--fb-brand-black, #111);
	--fbcl-text: var(--fb-text, #202020);
	--fbcl-muted: var(--fb-text-2, #5f6368);
	--fbcl-line: var(--fb-border, #e3e8f0);
	--fbcl-warn: var(--fb-warn, #7f5200);
	--fbcl-warn-bg: var(--fb-warn-bg, #fdf0d2);
	--fbcl-err: var(--fb-error, #a12a2a);
	--fbcl-err-bg: var(--fb-error-bg, #fbeaea);
	--fbcl-principal: #105de1;
	--fbcl-interest: #d9822b;
	--fbcl-r: 12px;
	color: var(--fbcl-text);
	margin: 0 0 2rem;
	overflow-wrap: anywhere;
}
.fbcl h2 { color: var(--fbcl-ink); font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .75rem; }
.fbcl h3 { color: var(--fbcl-ink); font-size: 1.0625rem; line-height: 1.35; margin: 1.5rem 0 .5rem; }
.fbcl a:not(.fb-btn) { color: var(--fbcl-blue-dark); text-underline-offset: 2px; }
.fbcl a.fb-btn { text-decoration: none; }
.fbcl a:focus-visible, .fbcl button:focus-visible, .fbcl input:focus-visible, .fbcl select:focus-visible, .fbcl summary:focus-visible, .fbcl [tabindex]:focus-visible { outline: 3px solid var(--fbcl-blue); outline-offset: 2px; }
.fbcl-lead { font-size: 1.0625rem; margin: 0 0 1.25rem; max-width: 66ch; }
.fbcl-small, .fbcl-help { font-size: .875rem; color: var(--fbcl-muted); }
.fbcl-help { display: block; margin-top: .25rem; }
.fbcl-opt { font-weight: 400; color: var(--fbcl-muted); }
.fbcl a.fbcl-tap { display: inline-flex; align-items: center; min-height: 44px; }

/* Form */
.fbcl-form { background: var(--fbcl-surface); border: 1px solid var(--fbcl-line); border-radius: var(--fbcl-r); padding: 1rem; margin: 0 0 1.25rem; }
.fbcl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem 1rem; align-items: start; }
.fbcl-field { margin: 0 0 .75rem; }
.fbcl-field label, .fbcl-rows legend { display: block; font-weight: 600; color: var(--fbcl-ink); margin: 0 0 .3rem; }
.fbcl-field input, .fbcl-field select { min-height: 44px; padding: .5rem .75rem; border: 1px solid #c5ccd8; border-radius: 8px; background: #fff; font: inherit; width: 100%; max-width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.fbcl-pair { display: flex; gap: .5rem; }
.fbcl-pair input { flex: 1 1 auto; min-width: 0; }
.fbcl-pair select { flex: 0 0 auto; width: auto; }
.fbcl-rows { border: 0; padding: 0; margin: .25rem 0 .5rem; min-width: 0; }
.fbcl-rows legend { font-size: 1.0625rem; margin-bottom: .5rem; }
.fbcl-rowset { background: #fff; border: 1px solid var(--fbcl-line); border-radius: 10px; padding: .75rem 1rem .25rem; margin: 0 0 .75rem; }
.fbcl-rowset[hidden] { display: none; }
.fbcl-rowset__title { font-weight: 600; margin: 0 0 .5rem; color: var(--fbcl-ink); }
.fbcl-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: .5rem 0 0; }

/* Result */
.fbcl-result:empty { display: none; }
.fbcl-result:focus { outline: none; }
.fbcl-answer-box { border: 1px solid var(--fbcl-line); border-radius: var(--fbcl-r); padding: 1rem; margin: 0 0 1rem; background: #fff; }
.fbcl-answer { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 .75rem; font-variant-numeric: tabular-nums; }
.fbcl-answer span { color: var(--fbcl-muted); font-size: 1rem; }
.fbcl-answer strong { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.1; color: var(--fbcl-ink); letter-spacing: -.01em; }
.fbcl-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem 1.25rem; margin: 0; }
.fbcl-figure { border-top: 1px solid var(--fbcl-line); padding-top: .5rem; }
.fbcl-figure dt { font-size: .875rem; color: var(--fbcl-muted); }
.fbcl-figure dd { margin: .15rem 0 0; font-weight: 700; color: var(--fbcl-ink); font-variant-numeric: tabular-nums; font-size: 1.0625rem; }
.fbcl-formula { border-left: 3px solid var(--fbcl-blue); padding: .35rem 0 .35rem .75rem; margin: 0 0 1rem; color: var(--fbcl-text); font-variant-numeric: tabular-nums; }
.fbcl-steps ol { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.fbcl-steps li { margin: 0 0 .35rem; max-width: 75ch; font-variant-numeric: tabular-nums; }
.fbcl-excludes { font-size: .9375rem; margin: 0 0 1rem; max-width: 75ch; }
.fbcl-next { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: .25rem 0 1rem; }

/* Chart */
.fbcl-chart { margin: 0 0 1rem; }
.fbcl-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0 0 .5rem; padding: 0; font-variant-numeric: tabular-nums; }
.fbcl-legend li { display: flex; align-items: center; gap: .5rem; }
.fbcl-swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.fbcl-swatch--p { background: var(--fbcl-principal); }
.fbcl-swatch--i { background: var(--fbcl-interest); }
.fbcl-share { display: block; width: 100%; height: 28px; margin: 0 0 1rem; }
.fbcl-years { display: block; width: 100%; height: auto; max-height: 260px; }
.fbcl-c-p { fill: var(--fbcl-principal); }
.fbcl-c-i { fill: var(--fbcl-interest); }
.fbcl-grid { stroke: var(--fbcl-line); stroke-width: 1; }
.fbcl-axis { fill: var(--fbcl-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.fbcl-hit { fill: transparent; }
.fbcl-bar:hover .fbcl-hit { fill: rgba(16, 93, 225, .06); }
.fbcl-chart__sub { font-size: .875rem; color: var(--fbcl-muted); margin: 0 0 .25rem; }

/* Tables */
.fbcl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; }
.fbcl-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.fbcl-table caption { text-align: start; font-weight: 600; color: var(--fbcl-ink); padding: 0 0 .4rem; }
.fbcl-table th, .fbcl-table td { text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--fbcl-line); vertical-align: top; }
.fbcl-table thead th { font-size: .8125rem; color: var(--fbcl-muted); font-weight: 600; }
.fbcl-table tbody th { font-weight: 500; }
.fbcl-table td { color: var(--fbcl-ink); }
.fbcl-table .fbcl-num { text-align: end; white-space: nowrap; }
.fbcl-table tfoot th, .fbcl-table tfoot td { border-top: 2px solid var(--fbcl-ink); border-bottom: 0; font-weight: 700; }
.fbcl-table--compare td { font-weight: 600; }
.fbcl-table--compare th.is-best { color: var(--fbcl-ink); }
.fbcl-badge { display: block; font-size: .75rem; font-weight: 600; color: #0b6b3a; }
.fbcl-table--rows { font-size: .875rem; }
.fbcl-table--rows tr.has-extra th, .fbcl-table--rows tr.has-extra td { background: var(--fbcl-surface); }
.fbcl-details { border: 1px solid var(--fbcl-line); border-radius: 10px; margin: 0 0 .75rem; background: #fff; }
.fbcl-details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; padding: 0 1rem; color: var(--fbcl-blue-dark); }
.fbcl-details[open] > summary { border-bottom: 1px solid var(--fbcl-line); }
.fbcl-details .fbcl-scroll { margin: 0; padding: 0 .25rem; max-height: 70vh; overflow-y: auto; }
.fbcl-details thead th { position: sticky; top: 0; background: #fff; }

/* Notices */
.fbcl-notice { border-radius: var(--fbcl-r); padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid #cddcf8; background: var(--fbcl-surface); }
.fbcl-notice p { margin: 0 0 .4rem; max-width: 75ch; }
.fbcl-notice p:last-child { margin-bottom: 0; }
.fbcl-notice ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.fbcl-notice--error { background: var(--fbcl-err-bg); border-color: #efc4c4; color: var(--fbcl-err); }
.fbcl-notice--warn { background: var(--fbcl-warn-bg); border-color: #f0dca8; color: var(--fbcl-warn); }
.fbcl-disclaimer { border-top: 1px solid var(--fbcl-line); margin: 1.5rem 0 1rem; padding-top: .75rem; font-size: .875rem; color: var(--fbcl-muted); max-width: 72ch; }
.fbcl-disclaimer p { margin: 0 0 .4rem; }
.fbcl-about p, .fbcl-list li { max-width: 72ch; }
.fbcl-list { padding-inline-start: 1.1rem; }
.fbcl-list li { margin: 0 0 .4rem; }

/* Related and lists */
.fbcl-related { margin: 1rem 0 0; }
.fbcl-related__title { font-weight: 600; margin: 0 0 .25rem; }
.fbcl-related ul, .fbcl ul.fbcl-tools { list-style: none; margin: 0; padding: 0; }
.fbcl-related ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.fbcl-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.fbcl-tool { border: 1px solid var(--fbcl-line); border-radius: var(--fbcl-r); padding: 1rem; background: #fff; }
.fbcl-tool__link { font-weight: 700; font-size: 1.0625rem; display: inline-flex; min-height: 44px; align-items: center; }
.fbcl-tool p { margin: .25rem 0 0; color: var(--fbcl-muted); }
.fbcl--tools { margin: 1.5rem 0 2rem; }

@media (max-width: 640px) {
	.fbcl-form { padding: .85rem; }
	.fbcl-row { grid-template-columns: 1fr; gap: 0; }
	.fbcl-rowset { padding: .65rem .75rem .1rem; }
	.fbcl-figures { grid-template-columns: 1fr 1fr; gap: .6rem .9rem; }
	.fbcl-figure dd { font-size: 1rem; }
	.fbcl-table th, .fbcl-table td { padding: .45rem .4rem; }
}
@media (prefers-reduced-motion: reduce) { .fbcl * { scroll-behavior: auto !important; } }
@media (forced-colors: active) { .fbcl-c-p, .fbcl-c-i { fill: CanvasText; } .fbcl-c-i { fill-opacity: .5; } }
/* Theme spacing between blocks does not apply inside the calculators. */
.fbcl .fbcl-row > *, .fbcl .fbcl-form > * + *, .fbcl .fbcl-result > * + * { margin-top: 0; }
.fbcl table.fbcl-table { max-width: none; }
.fbcl .fb-btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; }
@media (max-width: 640px) { .fbcl-years .fbcl-axis { font-size: 20px; } }
.fbcl-rows__help { margin: 0 0 .6rem; max-width: 72ch; }
/* Tables keep words whole; the row heading never collapses. */
.fbcl .fbcl-table { overflow-wrap: normal; word-break: normal; }
.fbcl .fbcl-table tbody th[scope="row"] { min-width: 7.5rem; }
.fbcl .fbcl-table--sched tbody th[scope="row"] { min-width: 3rem; }
@media (max-width: 640px) {
	.fbcl .fbcl-table--compare .fbcl-num { white-space: normal; min-width: 5.5rem; }
	.fbcl .fbcl-table--compare tbody th[scope="row"] { min-width: 6rem; }
}