/*!
 * Naija Money Guide News — safe-to-spend.css
 * Styles for the Safe-to-Spend Calculator page. Built entirely on the
 * theme's existing color/spacing variables (see assets/css/main.css) so it
 * looks like a native part of the site rather than a bolted-on tool.
 */

.nmg-sts-page { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }

.nmg-sts-hero { text-align: center; padding: 28px 0 24px; }
.nmg-sts-eyebrow {
	display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--nmg-accent); margin-bottom: 8px;
}
.nmg-sts-title { font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin: 0 0 10px; color: var(--nmg-black); }
.nmg-sts-subtitle { font-size: 1rem; color: var(--nmg-gray-600); line-height: 1.6; max-width: 560px; margin: 0 auto 14px; }
.nmg-sts-privacy {
	display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--nmg-gray-600);
	background: var(--nmg-gray-100); padding: 8px 14px; border-radius: 999px;
}

/* ============ FORM / STEPPER ============ */
.nmg-sts-form {
	background: var(--nmg-gray-100); border-radius: 12px; padding: 24px 20px;
	margin-bottom: 32px;
}
.nmg-sts-progress {
	height: 4px; background: var(--nmg-border); border-radius: 999px; margin-bottom: 20px; overflow: hidden;
}
.nmg-sts-progress-bar { height: 100%; background: var(--nmg-green); transition: width 200ms ease; }

.nmg-sts-step { margin-bottom: 0; }
.nmg-sts-form.is-mobile-stepper .nmg-sts-step.is-hidden { display: none; }
.nmg-sts-form:not(.is-mobile-stepper) .nmg-sts-step { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--nmg-border); }
.nmg-sts-form:not(.is-mobile-stepper) .nmg-sts-step:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.nmg-sts-step-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 16px; color: var(--nmg-black); }
.nmg-sts-step .nmg-field { margin-bottom: 16px; }
.nmg-sts-step .nmg-field:last-child { margin-bottom: 0; }

.nmg-sts-nav { display: flex; gap: 10px; margin-top: 20px; }
.nmg-sts-nav .nmg-btn { flex: 1; }

.nmg-sts-error { color: #b32d2e; font-size: 0.85rem; font-weight: 600; margin-top: 8px; }

/* ============ BILLS ============ */
.nmg-sts-bills-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.nmg-sts-bill-row {
	display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center;
	background: var(--nmg-white); padding: 10px; border-radius: var(--nmg-radius); border: 1px solid var(--nmg-border);
}
.nmg-sts-bill-row input {
	padding: 8px 10px; border: 1px solid var(--nmg-border); border-radius: 6px; font-size: 0.9rem; width: 100%;
}
.nmg-sts-bill-remove {
	background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--nmg-gray-600);
	width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}
.nmg-sts-bill-remove:hover { background: var(--nmg-gray-200); color: #b32d2e; }

/* ============ ESSENTIALS ============ */
.nmg-sts-essentials-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

/* ============ RESULTS ============ */
.nmg-sts-results {
	background: var(--nmg-white); border: 1px solid var(--nmg-border); border-radius: 14px;
	padding: 28px 20px; margin-bottom: 32px;
}
.nmg-sts-result-main { text-align: center; padding: 8px 0 20px; }
.nmg-sts-result-label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nmg-gray-600); margin-bottom: 6px; }
.nmg-sts-result-amount { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.nmg-sts-result-caption { display: block; font-size: 0.9rem; color: var(--nmg-gray-600); margin-top: 4px; }

.nmg-sts-result-main[data-sts-status="positive"] .nmg-sts-result-amount { color: var(--nmg-green); }
.nmg-sts-result-main[data-sts-status="neutral"] .nmg-sts-result-amount { color: var(--nmg-black); }
.nmg-sts-result-main[data-sts-status="negative"] .nmg-sts-result-amount { color: #b32d2e; }

.nmg-sts-status-message { text-align: center; font-weight: 600; margin: 0 0 20px; }

.nmg-sts-breakdown { border-top: 1px solid var(--nmg-border); padding-top: 14px; }
.nmg-sts-breakdown-row {
	display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.92rem;
	border-bottom: 1px solid var(--nmg-gray-200);
}
.nmg-sts-breakdown-row:last-child { border-bottom: none; }
.nmg-sts-breakdown-row span { color: var(--nmg-gray-600); }
.nmg-sts-breakdown-total { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--nmg-border); margin-top: 4px; padding-top: 12px; }
.nmg-sts-breakdown-total span { color: var(--nmg-black); }

.nmg-sts-excluded-note { font-size: 0.82rem; color: var(--nmg-gray-600); margin-top: 14px; padding: 10px 12px; background: var(--nmg-gray-100); border-radius: var(--nmg-radius); }

.nmg-sts-warnings { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.nmg-sts-warning { margin: 0; padding: 10px 12px; border-radius: var(--nmg-radius); font-size: 0.88rem; font-weight: 600; }
.nmg-sts-warning-negative { background: #fdecea; color: #8a1f1f; }
.nmg-sts-warning-neutral { background: #fff6e0; color: #6b5100; }
.nmg-sts-warning-tip { background: var(--nmg-gray-100); color: var(--nmg-black); font-weight: 500; }

/* ============ CAN I AFFORD THIS? ============ */
.nmg-sts-afford { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nmg-border); }
.nmg-sts-section-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; color: var(--nmg-black); }
.nmg-sts-afford-result { margin-top: 14px; padding: 14px; border-radius: var(--nmg-radius); }
.nmg-sts-afford-result[data-sts-afford-status="green"] { background: #eaf7ee; }
.nmg-sts-afford-result[data-sts-afford-status="yellow"] { background: #fff6e0; }
.nmg-sts-afford-result[data-sts-afford-status="red"] { background: #fdecea; }
.nmg-sts-afford-result p { font-weight: 600; margin: 0 0 10px; }

/* ============ TIMELINE ============ */
.nmg-sts-timeline-wrap { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nmg-border); }
.nmg-sts-timeline { display: flex; flex-direction: column; }
.nmg-sts-timeline-item {
	display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center;
	padding: 10px 0; border-left: 2px solid var(--nmg-border); padding-left: 14px; position: relative;
}
.nmg-sts-timeline-item::before {
	content: ""; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px;
	border-radius: 50%; background: var(--nmg-gray-400);
}
.nmg-sts-timeline-item.is-balance::before { background: var(--nmg-black); }
.nmg-sts-timeline-item.is-payday::before { background: var(--nmg-green); }
.nmg-sts-timeline-date { font-size: 0.78rem; color: var(--nmg-gray-600); }
.nmg-sts-timeline-label { font-weight: 600; }
.nmg-sts-timeline-amount { font-weight: 700; text-align: right; }
.nmg-sts-timeline-item.is-payday .nmg-sts-timeline-amount { color: var(--nmg-green); }

.nmg-sts-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.nmg-sts-actions .nmg-btn { flex: 1 1 auto; min-width: 140px; }

/* ============ SEO ARTICLE / FAQ ============ */
.nmg-sts-article { margin-bottom: 32px; line-height: 1.7; }
.nmg-sts-article h2 { font-size: 1.3rem; margin: 28px 0 10px; color: var(--nmg-black); }
.nmg-sts-article h3 { font-size: 1.05rem; margin: 18px 0 8px; color: var(--nmg-black); }
.nmg-sts-article p { color: var(--nmg-gray-800); margin: 0 0 12px; }

.nmg-sts-faq { margin-bottom: 32px; }
.nmg-sts-faq h2 { font-size: 1.3rem; margin: 0 0 16px; }
.nmg-sts-faq-item { border-bottom: 1px solid var(--nmg-border); padding: 14px 0; }
.nmg-sts-faq-item summary { font-weight: 700; cursor: pointer; color: var(--nmg-black); }
.nmg-sts-faq-item p { margin: 10px 0 0; color: var(--nmg-gray-600); line-height: 1.6; }

/* ============ RESPONSIVE ============ */
@media (min-width: 768px) {
	.nmg-sts-page { max-width: 800px; }
	.nmg-sts-bill-row { grid-template-columns: 2fr 1fr 1fr auto; }
	.nmg-sts-title { font-size: 2.1rem; }
	.nmg-sts-result-amount { font-size: 3.2rem; }
	.nmg-sts-actions .nmg-btn { flex: 0 1 auto; }
}

/* ============ PRINT ============ */
@media print {
	.nmg-site-header, .nmg-mobile-bottom-nav, .nmg-whatsapp-floating,
	.nmg-whatsapp-popup, .nmg-ad-slot, .nmg-footer, .nmg-sts-form,
	.nmg-sts-actions, .nmg-sts-afford, .nmg-breadcrumbs { display: none !important; }
	.nmg-sts-results { border: none; padding: 0; }
	.nmg-sts-page { max-width: 100%; }
}