/* Mortgage Calculator Pro — styles */
.mcp-calculator {
	--mcp-navy: #1B4B78;
	--mcp-navy-dark: #143a5f;
	--mcp-text: #1f2937;
	--mcp-muted: #6b7280;
	--mcp-border: #e5e7eb;
	--mcp-bg-track: #eef1f4;

	--mcp-c-principal: #1B4B78;
	--mcp-c-extra: #8FC1E8;
	--mcp-c-insurance: #6FCF97;
	--mcp-c-tax: #F26D82;
	--mcp-c-hoa: #EAC868;
	--mcp-c-pmi: #6C5CE0;
	--mcp-c-interest: #F2994A;
	--mcp-c-balance: #8FC1E8;
	--mcp-c-downpayment: #B0B8C1;

	font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--mcp-text);
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
	overflow-x: hidden;
}
.mcp-calculator *,
.mcp-calculator *::before,
.mcp-calculator *::after {
	box-sizing: border-box;
	min-width: 0;
}
.mcp-calculator img,
.mcp-calculator svg { max-width: 100%; }

.mcp-header {
	margin-bottom: 28px;
}
.mcp-title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--mcp-navy);
	margin: 0 0 8px;
	text-transform: uppercase;
	line-height: 1.15;
}
.mcp-subtitle {
	color: var(--mcp-muted);
	font-size: 16px;
	margin: 0;
}

.mcp-section-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--mcp-navy);
	text-transform: uppercase;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mcp-border);
}
.mcp-section-spaced { margin-top: 36px; }

.mcp-grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;
	align-items: start;
	width: 100%;
}

/* ---------- LEFT: INPUTS ---------- */
.mcp-col-inputs { position: sticky; top: 16px; min-width: 0; }
.mcp-col { min-width: 0; }

.mcp-field { margin-bottom: 20px; }
.mcp-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-text);
	margin-bottom: 6px;
}

.mcp-input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--mcp-border);
	background: transparent;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	color: var(--mcp-text);
	padding: 6px 2px;
	outline: none;
}
.mcp-input:focus { border-color: var(--mcp-navy); }

.mcp-dollar-input, .mcp-date-input {
	display: flex;
	align-items: center;
	gap: 4px;
	border-bottom: 1px solid var(--mcp-border);
}
.mcp-dollar-input .mcp-input, .mcp-date-input .mcp-input { border-bottom: none; }
.mcp-prefix { font-weight: 700; color: var(--mcp-navy); font-size: 16px; flex-shrink: 0; }
.mcp-date-input { justify-content: space-between; }
.mcp-date-input .mcp-input { width: 100%; }
.mcp-cal-icon { font-size: 15px; opacity: 0.6; flex-shrink: 0; }

.mcp-slider {
	width: 100%;
	margin-top: 14px;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 4px;
	background: var(--mcp-bg-track);
	outline: none;
	touch-action: pan-y;
}
.mcp-slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--mcp-navy) 0%, var(--mcp-navy) var(--mcp-fill, 17%), var(--mcp-bg-track) var(--mcp-fill, 17%));
}
.mcp-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--mcp-navy);
	margin-top: -8px;
	cursor: pointer;
}
.mcp-slider::-moz-range-track {
	height: 4px;
	border-radius: 4px;
	background: var(--mcp-bg-track);
}
.mcp-slider::-moz-range-progress {
	height: 4px;
	border-radius: 4px;
	background: var(--mcp-navy);
}
.mcp-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--mcp-navy);
	cursor: pointer;
}

.mcp-input-toggle-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--mcp-border); flex-wrap: nowrap; }
.mcp-toggle-input { flex: 1; min-width: 0; }
.mcp-toggle-input .mcp-input { border-bottom: none; }
.mcp-unit-static { padding: 6px 2px; font-weight: 700; color: var(--mcp-navy); flex-shrink: 0; }

.mcp-unit-toggle, .mcp-freq-toggle {
	display: flex;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--mcp-navy);
	flex-shrink: 0;
}
.mcp-unit-btn, .mcp-freq-btn {
	border: none;
	background: #fff;
	color: var(--mcp-navy);
	font-weight: 700;
	font-family: inherit;
	font-size: 13px;
	padding: 6px 12px;
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.mcp-unit-btn + .mcp-unit-btn { border-left: 1px solid var(--mcp-navy); }
.mcp-unit-btn.is-active, .mcp-freq-btn.is-active { background: var(--mcp-navy); color: #fff; }

.mcp-freq-toggle { width: 100%; }
.mcp-freq-btn { flex: 1; padding: 10px 8px; font-size: 14px; }
.mcp-freq-btn + .mcp-freq-btn { border-left: 1px solid var(--mcp-navy); }

.mcp-unit-toggle-mini .mcp-unit-btn { padding: 4px 8px; font-size: 11px; }

.mcp-add-extra-toggle, .mcp-add-extra-link, .mcp-remove-extra {
	background: none;
	border: none;
	color: var(--mcp-navy);
	font-weight: 700;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	padding: 8px 0;
	text-align: left;
}
.mcp-add-extra-link { text-transform: none; margin: 4px 0 18px; display: block; }
.mcp-plus { margin-right: 4px; }

.mcp-extra-panel {
	margin-top: 12px;
	padding: 18px;
	background: #fafbfc;
	border: 1px solid var(--mcp-border);
	border-radius: 8px;
	width: 100%;
}
.mcp-extra-title {
	text-align: center;
	color: var(--mcp-navy);
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 800;
	margin: 0 0 16px;
}
.mcp-arrow { display: block; }
.mcp-remove-extra { display: block; margin: 8px auto 0; text-align: center; }

/* ---------- RIGHT: RESULTS ---------- */
.mcp-monthly-headline { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 32px; }
.mcp-monthly-amount { font-size: 44px; font-weight: 800; color: var(--mcp-text); word-break: break-word; }
.mcp-dollar-sign { color: var(--mcp-navy); margin-right: 4px; }
.mcp-monthly-label { color: var(--mcp-muted); font-size: 15px; }

.mcp-breakdown-grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 16px;
	width: 100%;
}

.mcp-donut-wrap { position: relative; text-align: center; width: 100%; }
.mcp-donut { width: 100%; max-width: 320px; height: auto; }
.mcp-donut-center {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	width: 70%;
}
.mcp-donut-amount { font-size: 22px; font-weight: 800; }
.mcp-donut-amount span:first-child { color: var(--mcp-navy); }
.mcp-donut-label { font-size: 12px; color: var(--mcp-muted); margin-top: 2px; }

.mcp-legend {
	list-style: none;
	margin: 18px auto 0;
	padding: 14px;
	background: #f7f8fa;
	border-radius: 8px;
	text-align: left;
	font-size: 13px;
	display: inline-block;
	max-width: 100%;
}
.mcp-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.mcp-legend .mcp-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.mcp-customize-title { font-size: 22px; border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }

.mcp-customize-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mcp-border);
	flex-wrap: wrap;
}
.mcp-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.mcp-customize-label { flex: 1; font-weight: 600; font-size: 14.5px; min-width: 140px; }
.mcp-customize-value { font-weight: 700; margin-left: auto; }
.mcp-plus-sign { color: var(--mcp-muted); font-weight: 700; width: 12px; text-align: center; flex-shrink: 0; }

.mcp-mini-input-group { display: flex; align-items: center; gap: 6px; border: 1px solid var(--mcp-border); border-radius: 4px; padding: 2px 8px; flex-shrink: 0; margin-left: auto; }
.mcp-input-mini { width: 46px; border: none; text-align: right; font-size: 14px; font-family: inherit; }
.mcp-prefix-mini { font-size: 13px; }

.mcp-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--mcp-navy);
	color: #fff;
	border-radius: 8px;
	font-weight: 800;
	flex-wrap: wrap;
	gap: 8px;
}
.mcp-total-value { font-size: 18px; }

.mcp-totals-list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.mcp-totals-row { display: grid; grid-template-columns: 190px 1fr 130px; align-items: center; gap: 16px; }
.mcp-totals-row .mcp-totals-name { font-weight: 600; font-size: 14.5px; }
.mcp-totals-row .mcp-totals-bar-track { background: #f1f2f4; border-radius: 4px; height: 12px; overflow: hidden; }
.mcp-totals-row .mcp-totals-bar-fill { height: 100%; border-radius: 4px; }
.mcp-totals-row .mcp-totals-value { text-align: right; font-weight: 700; color: var(--mcp-navy); }

.mcp-chart-wrap { width: 100%; max-width: 100%; }
.mcp-amort-chart { width: 100%; height: auto; display: block; }

.mcp-payoff-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 30px;
	margin-top: 24px;
	align-items: start;
	width: 100%;
}
.mcp-payoff-label { font-weight: 700; color: var(--mcp-navy); text-transform: uppercase; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcp-payoff-date { font-size: 34px; font-weight: 800; }
.mcp-year-select { border: 1px solid var(--mcp-border); border-radius: 4px; padding: 3px 6px; font-weight: 700; font-family: inherit; color: var(--mcp-navy); text-transform: none; max-width: 100%; }
.mcp-asof-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14.5px; font-weight: 600; flex-wrap: wrap; }
.mcp-asof-value { margin-left: auto; font-weight: 700; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
	.mcp-grid { grid-template-columns: 1fr; gap: 32px; }
	.mcp-col-inputs { position: static; }
	.mcp-breakdown-grid { grid-template-columns: 1fr; gap: 28px; }
	.mcp-donut-wrap { max-width: 340px; margin: 0 auto; }
	.mcp-payoff-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.mcp-calculator { padding: 0 4px; }
	.mcp-title { font-size: 30px; }
	.mcp-monthly-amount { font-size: 36px; }
	.mcp-section-title { font-size: 21px; margin-bottom: 14px; }
	.mcp-section-spaced { margin-top: 28px; }
	.mcp-totals-row { grid-template-columns: 1fr; row-gap: 8px; }
	.mcp-totals-row .mcp-totals-value { text-align: left; }
	.mcp-customize-label { font-size: 14px; min-width: 100%; }
	.mcp-customize-value { margin-left: 24px; }
	.mcp-mini-input-group { margin-left: 24px; }
	.mcp-customize-row { padding: 12px 0; }
	.mcp-payoff-date { font-size: 28px; }
}

@media (max-width: 480px) {
	.mcp-title { font-size: 24px; letter-spacing: 0.2px; }
	.mcp-subtitle { font-size: 14px; }
	.mcp-monthly-amount { font-size: 30px; }
	.mcp-monthly-headline { gap: 10px; margin-bottom: 24px; }
	.mcp-section-title { font-size: 18px; }
	.mcp-field { margin-bottom: 16px; }
	.mcp-input, .mcp-prefix { font-size: 15px; }
	.mcp-unit-btn { padding: 6px 9px; font-size: 12px; }
	.mcp-freq-btn { padding: 9px 6px; font-size: 13px; }
	.mcp-donut-wrap { max-width: 260px; }
	.mcp-legend { padding: 10px; font-size: 12px; }
	.mcp-extra-panel { padding: 14px; }
	.mcp-total-row { padding: 12px; }
	.mcp-total-value { font-size: 16px; }
	.mcp-payoff-date { font-size: 24px; }
	.mcp-asof-row { font-size: 13.5px; }
	.mcp-customize-label { font-size: 13px; }
}