/* Debt Payoff Calculator styles. Scoped under .dpc-wrap to avoid theme clashes. */

.dpc-wrap {
	--dpc-accent: #0b7a4b;
	--dpc-bad: #c0392b;
	--dpc-border: #e2e6ea;
	--dpc-muted: #5b6770;
	--dpc-bg-soft: #f6f8fa;
	max-width: 640px;
	margin: 1.5em auto;
	padding: clamp(18px, 4vw, 32px);
	background: #fff;
	border: 1px solid var(--dpc-border);
	border-radius: 14px;
	box-shadow: 0 2px 18px rgba(20, 30, 40, 0.06);
	color: #1d2731;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.dpc-wrap *,
.dpc-wrap *::before,
.dpc-wrap *::after { box-sizing: border-box; }

.dpc-title {
	margin: 0 0 0.8em;
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 700;
}

/* ------------------------------ form ------------------------------ */

.dpc-field { margin-bottom: 1.1em; }

.dpc-field > label,
.dpc-mode legend {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
	font-size: 0.95em;
}

.dpc-input-money {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--dpc-border);
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.dpc-input-money:focus-within {
	border-color: var(--dpc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpc-accent) 18%, transparent);
}

.dpc-prefix,
.dpc-suffix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: var(--dpc-bg-soft);
	color: var(--dpc-muted);
	font-weight: 600;
	white-space: nowrap;
}

.dpc-input-money input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 12px 14px;
	font-size: 1em;
	background: transparent;
	color: inherit;
	-moz-appearance: textfield;
}
.dpc-input-money input::-webkit-outer-spin-button,
.dpc-input-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dpc-min-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.dpc-min-row select {
	flex: 1 1 160px;
	border: 1px solid var(--dpc-border);
	border-radius: 9px;
	padding: 12px 10px;
	font-size: 1em;
	background: #fff;
	color: inherit;
}
.dpc-min-row .dpc-input-money { flex: 1 1 120px; }

.dpc-help {
	margin: 0.45em 0 0;
	font-size: 0.82em;
	color: var(--dpc-muted);
}

/* --------------------------- mode picker -------------------------- */

.dpc-mode {
	border: 1px solid var(--dpc-border);
	border-radius: 11px;
	padding: 16px 16px 6px;
	margin: 0 0 1.2em;
}
.dpc-mode legend { padding: 0 6px; }

.dpc-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	margin-bottom: 0.7em;
	cursor: pointer;
}
.dpc-radio input { width: 18px; height: 18px; accent-color: var(--dpc-accent); margin: 0; }

.dpc-mode-input {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -0.2em 0 1em 28px;
	flex-wrap: wrap;
}
.dpc-mode-input .dpc-input-money { flex: 0 1 180px; }
.dpc-mode-input .dpc-date-fields {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.dpc-date-fields input {
	border: 1px solid var(--dpc-border);
	border-radius: 9px;
	padding: 11px 12px;
	font-size: 1em;
	background: transparent;
	color: inherit;
}
#dpc-target-month { width: 5.5em; }
#dpc-target-year { width: 6.5em; }
.dpc-date-sep { color: var(--dpc-muted); font-weight: 600; }
.dpc-mode-hint { color: var(--dpc-muted); font-size: 0.9em; }

/* ----------------------------- button ----------------------------- */

.dpc-submit {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 10px;
	background: var(--dpc-accent);
	color: #fff;
	font-size: 1.05em;
	font-weight: 700;
	padding: 14px 18px;
	cursor: pointer;
	transition: filter 0.15s, transform 0.05s;
}
.dpc-submit:hover { filter: brightness(1.07); }
.dpc-submit:active { transform: translateY(1px); }

.dpc-error {
	margin: 0.9em 0 0;
	color: var(--dpc-bad);
	font-weight: 600;
}

/* ----------------------------- results ---------------------------- */

.dpc-results { margin-top: 1.6em; }

.dpc-results-title {
	margin: 0 0 0.7em;
	font-size: 1.2em;
	font-weight: 700;
}

.dpc-save {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: color-mix(in srgb, var(--dpc-accent) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--dpc-accent) 35%, #fff);
	border-radius: 11px;
	padding: 16px 18px;
	margin-bottom: 1.1em;
}
.dpc-save-amt {
	font-size: 1.9em;
	font-weight: 800;
	color: var(--dpc-accent);
	line-height: 1.1;
}
.dpc-save-lbl { color: #243; font-weight: 600; }

.dpc-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 1.1em;
}
.dpc-stat {
	background: var(--dpc-bg-soft);
	border: 1px solid var(--dpc-border);
	border-radius: 11px;
	padding: 14px;
}
.dpc-stat-val { font-size: 1.25em; font-weight: 700; line-height: 1.2; }
.dpc-stat-lbl { font-size: 0.82em; color: var(--dpc-muted); margin-top: 3px; }
.dpc-stat.dpc-good .dpc-stat-val { color: var(--dpc-accent); }
.dpc-stat.dpc-bad .dpc-stat-val { color: var(--dpc-bad); }

.dpc-insight {
	background: #fffaf0;
	border-left: 4px solid #e6a700;
	padding: 12px 14px;
	border-radius: 6px;
	margin: 0 0 1em;
	font-size: 0.95em;
}
.dpc-warn {
	background: color-mix(in srgb, var(--dpc-bad) 8%, #fff);
	border-left: 4px solid var(--dpc-bad);
	padding: 12px 14px;
	border-radius: 6px;
	margin: 0 0 1em;
	font-size: 0.95em;
}

/* --------------------------- comparison --------------------------- */

.dpc-table-scroll { overflow-x: auto; }

.dpc-compare {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5em;
	font-size: 0.95em;
}
.dpc-compare th,
.dpc-compare td {
	text-align: left;
	padding: 11px 12px;
	border-bottom: 1px solid var(--dpc-border);
}
.dpc-compare thead th {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--dpc-muted);
	border-bottom: 2px solid var(--dpc-border);
}
.dpc-compare td:first-child { font-weight: 600; }
.dpc-compare-grid td:not(:first-child) { text-align: right; }
.dpc-compare-grid th:not(:first-child) { text-align: right; }
.dpc-row-min { background: color-mix(in srgb, var(--dpc-bad) 6%, #fff); }
.dpc-row-good td strong { color: var(--dpc-accent); }

.dpc-disclaimer {
	margin: 1.5em 0 0;
	font-size: 0.78em;
	color: var(--dpc-muted);
	line-height: 1.45;
}

/* ---------------------------- responsive -------------------------- */

@media (max-width: 480px) {
	.dpc-stats { grid-template-columns: 1fr; }

	/* Stack comparison grid into cards on narrow screens. */
	.dpc-compare-grid thead { display: none; }
	.dpc-compare-grid,
	.dpc-compare-grid tbody,
	.dpc-compare-grid tr,
	.dpc-compare-grid td { display: block; width: 100%; }
	.dpc-compare-grid tr {
		border: 1px solid var(--dpc-border);
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 6px 4px;
	}
	.dpc-compare-grid td {
		border: 0;
		display: flex;
		justify-content: space-between;
		text-align: right;
		padding: 7px 12px;
	}
	.dpc-compare-grid td::before {
		content: attr(data-l);
		font-weight: 600;
		color: var(--dpc-muted);
		text-align: left;
		margin-right: 12px;
	}
}

/* Fallback for browsers without color-mix support. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.dpc-save { background: #eaf6ef; border-color: #bfe3cf; }
	.dpc-input-money:focus-within { box-shadow: 0 0 0 3px rgba(11, 122, 75, 0.18); }
	.dpc-warn { background: #fdecea; }
	.dpc-row-min { background: #fdecea; }
}