/**
 * Sentio Mortgage Calculator — per-widget styles
 * Prefix: .sentio-mtg (collision-checked unique)
 */

.sentio-mtg {
	background: #fff;
	border: 1px solid #eee9f2;
	border-radius: 14px;
	padding: 24px;
	width: 100%;
}

.sentio-mtg__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ── Form ───────────────────────────────────────────────────── */
.sentio-mtg__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.sentio-mtg__field {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.sentio-mtg__label {
	color: #5a566b;
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	padding: 0;
}

.sentio-mtg__label-row {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.sentio-mtg__input-wrap {
	align-items: center;
	background: #faf8fc;
	border: 1px solid #e8e6ef;
	border-radius: 8px;
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	transition: border-color 0.2s ease;
}

.sentio-mtg__input-wrap:focus-within {
	border-color: #eb3480;
}

.sentio-mtg__symbol,
.sentio-mtg__unit {
	color: #8a8698;
	flex: 0 0 auto;
	font-size: 14px;
}

.sentio-mtg__input {
	appearance: textfield;
	-moz-appearance: textfield;
	background: transparent;
	border: 0;
	color: #1e1b2e;
	flex: 1 1 auto;
	font: inherit;
	font-size: 16px;
	min-width: 0;
	outline: none;
	padding: 0;
	width: 100%;
}

.sentio-mtg__input::-webkit-outer-spin-button,
.sentio-mtg__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sentio-mtg__hint {
	color: #8a8698;
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

/* ── Sliders ────────────────────────────────────────────────── */
.sentio-mtg__slider {
	--sentio-mtg-track: #ece8f2;
	--sentio-mtg-fill: #eb3480;
	--sentio-mtg-thumb: #eb3480;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
	display: block;
	height: 22px;
	margin-top: 8px;
	width: 100%;
}

.sentio-mtg__slider::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--sentio-mtg-fill) 0 var(--sentio-mtg-pct, 50%), var(--sentio-mtg-track) var(--sentio-mtg-pct, 50%) 100%);
	border-radius: 3px;
	height: 6px;
}

.sentio-mtg__slider::-moz-range-track {
	background: var(--sentio-mtg-track);
	border-radius: 3px;
	height: 6px;
}

.sentio-mtg__slider::-moz-range-progress {
	background: var(--sentio-mtg-fill);
	border-radius: 3px;
	height: 6px;
}

.sentio-mtg__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: var(--sentio-mtg-thumb);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(30, 27, 46, 0.3);
	height: 18px;
	margin-top: -6px;
	width: 18px;
}

.sentio-mtg__slider::-moz-range-thumb {
	background: var(--sentio-mtg-thumb);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(30, 27, 46, 0.3);
	height: 18px;
	width: 18px;
}

.sentio-mtg__slider:focus-visible {
	outline: 2px solid #eb3480;
	outline-offset: 4px;
}

/* ── Pills (term + mode) ────────────────────────────────────── */
.sentio-mtg__terms,
.sentio-mtg__modes {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sentio-mtg__pill {
	appearance: none;
	-webkit-appearance: none;
	background: #f4f2f8;
	border: 1px solid #e8e6ef;
	border-radius: 8px;
	color: #5a566b;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sentio-mtg__pill:hover {
	border-color: #eb3480;
	color: #eb3480;
}

.sentio-mtg__pill.is-active {
	background: #eb3480;
	border-color: #eb3480;
	color: #fff;
}

.sentio-mtg__pill:focus-visible {
	outline: 2px solid #eb3480;
	outline-offset: 2px;
}

.sentio-mtg__pill--mode {
	font-size: 12px;
	padding: 6px 10px;
}

.sentio-mtg__input--term {
	background: #faf8fc;
	border: 1px solid #e8e6ef;
	border-radius: 8px;
	max-width: 90px;
	padding: 8px 10px;
}

.sentio-mtg__input--term:focus-visible {
	border-color: #eb3480;
	outline: none;
}

/* ── Results ────────────────────────────────────────────────── */
.sentio-mtg__results {
	background: #faf8fc;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
}

.sentio-mtg__total-label {
	color: #8a8698;
	display: block;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sentio-mtg__total-row {
	align-items: baseline;
	display: flex;
	gap: 6px;
}

.sentio-mtg__total {
	color: #eb3480;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
}

.sentio-mtg__per {
	color: #8a8698;
	font-size: 16px;
}

/* ── Donut ──────────────────────────────────────────────────── */
.sentio-mtg__donut {
	--sentio-mtg-c-pi: #eb3480;
	--sentio-mtg-c-tax: #9333ea;
	--sentio-mtg-c-ins: #2563eb;
	--sentio-mtg-c-hoa: #f59e0b;
	--sentio-mtg-c-pmi: #6b7280;
	--sentio-mtg-thick: 26px;
	align-items: center;
	align-self: center;
	background: conic-gradient(
		var(--sentio-mtg-c-pi) 0 var(--sentio-mtg-s1, 100%),
		var(--sentio-mtg-c-tax) var(--sentio-mtg-s1, 100%) var(--sentio-mtg-s2, 100%),
		var(--sentio-mtg-c-ins) var(--sentio-mtg-s2, 100%) var(--sentio-mtg-s3, 100%),
		var(--sentio-mtg-c-hoa) var(--sentio-mtg-s3, 100%) var(--sentio-mtg-s4, 100%),
		var(--sentio-mtg-c-pmi) var(--sentio-mtg-s4, 100%) 100%
	);
	border-radius: 50%;
	display: flex;
	height: 180px;
	justify-content: center;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--sentio-mtg-thick)), #000 calc(100% - var(--sentio-mtg-thick) + 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--sentio-mtg-thick)), #000 calc(100% - var(--sentio-mtg-thick) + 1px));
	position: relative;
	width: 180px;
}

/* Center label sits outside the masked ring via an unmasked twin layer. */
.sentio-mtg__donut-center {
	color: #5a566b;
	font-size: 13px;
	position: absolute;
	text-align: center;
}

.sentio-mtg__dot {
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	height: 9px;
	margin-inline-end: 7px;
	width: 9px;
}

.sentio-mtg__dot--pi { background: var(--sentio-mtg-c-pi, #eb3480); }
.sentio-mtg__dot--tax { background: var(--sentio-mtg-c-tax, #9333ea); }
.sentio-mtg__dot--ins { background: var(--sentio-mtg-c-ins, #2563eb); }
.sentio-mtg__dot--hoa { background: var(--sentio-mtg-c-hoa, #f59e0b); }
.sentio-mtg__dot--pmi { background: var(--sentio-mtg-c-pmi, #6b7280); }

/* ── Rows ───────────────────────────────────────────────────── */
.sentio-mtg__rows,
.sentio-mtg__summary {
	display: flex;
	flex-direction: column;
}

.sentio-mtg__row {
	align-items: center;
	border-bottom: 1px solid #eee9f2;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 9px 0;
}

.sentio-mtg__row:last-child {
	border-bottom: 0;
}

.sentio-mtg__row[hidden] {
	display: none;
}

.sentio-mtg__row-label {
	align-items: center;
	color: #5a566b;
	display: inline-flex;
	font-size: 14px;
}

.sentio-mtg__row-value {
	color: #1e1b2e;
	font-size: 14px;
	font-weight: 700;
}

.sentio-mtg__row--summary .sentio-mtg__row-label {
	color: #8a8698;
}

/* ── Amortization ───────────────────────────────────────────── */
.sentio-mtg__amort-toggle {
	appearance: none;
	-webkit-appearance: none;
	align-items: center;
	background: transparent;
	border: 0;
	color: #eb3480;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	padding: 4px 0;
}

.sentio-mtg__amort-toggle:focus-visible {
	outline: 2px solid #eb3480;
	outline-offset: 2px;
}

.sentio-mtg__amort-chevron {
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	display: inline-block;
	height: 7px;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	width: 7px;
}

.sentio-mtg__amort-toggle[aria-expanded='true'] .sentio-mtg__amort-chevron {
	transform: rotate(225deg);
}

.sentio-mtg__amort {
	max-height: 320px;
	overflow: auto;
}

.sentio-mtg__amort table {
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}

.sentio-mtg__amort th,
.sentio-mtg__amort td {
	border-bottom: 1px solid #eee9f2;
	font-size: 13px;
	padding: 8px 10px;
	text-align: right;
}

.sentio-mtg__amort th:first-child,
.sentio-mtg__amort td:first-child {
	text-align: left;
}

.sentio-mtg__amort th {
	background: #f4f2f8;
	color: #5a566b;
	font-weight: 600;
	position: sticky;
	top: 0;
}

.sentio-mtg__amort td {
	color: #5a566b;
}

/* ── CTA + disclaimer ───────────────────────────────────────── */
.sentio-mtg__cta {
	align-self: flex-start;
	background: #eb3480;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 22px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.sentio-mtg__cta:focus-visible {
	outline: 2px solid #1e1b2e;
	outline-offset: 2px;
}

.sentio-mtg__disclaimer {
	color: #8a8698;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
}

/* ── SR announcer ───────────────────────────────────────────── */
.sentio-mtg__announce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ══ Layout: side-by-side ═══════════════════════════════════ */
.sentio-mtg--layout-side-by-side .sentio-mtg__inner {
	align-items: start;
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ══ Layout: compact ════════════════════════════════════════ */
.sentio-mtg--layout-compact .sentio-mtg {
	padding: 16px;
}

.sentio-mtg--layout-compact .sentio-mtg__form {
	gap: 10px;
}

.sentio-mtg--layout-compact .sentio-mtg__results {
	gap: 10px;
	padding: 14px;
}

.sentio-mtg--layout-compact .sentio-mtg__total {
	font-size: 28px;
}

.sentio-mtg--layout-compact .sentio-mtg__donut {
	height: 130px;
	width: 130px;
}

/* ── Small screens ──────────────────────────────────────────── */
@media (max-width: 767px) {
	.sentio-mtg--layout-side-by-side .sentio-mtg__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sentio-mtg__input-wrap,
	.sentio-mtg__pill,
	.sentio-mtg__cta,
	.sentio-mtg__amort-chevron {
		transition: none !important;
	}

	.sentio-mtg__cta:hover {
		transform: none !important;
	}
}