/* QuickCalcMoney — custom styles layered on top of Tailwind CDN */
:root {
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --accent: #10b981;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #ffffff;
  --bg: #f8fafc;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------- Cards & layout ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 8px 28px rgba(79, 70, 229, .12);
}

/* Sticky output panel (desktop). On mobile the results column sits first and
   its summary strip sticks to the top so the answer is always on screen. */
.calc-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
/* Mobile: the results wrapper dissolves so the summary strip becomes a direct grid child and
   stays pinned under the header for the whole page while the user edits inputs. */
.calc-results { display: contents; }
.summary-strip { order: -2; }
.calc-inputs { order: -1; }
.calc-details { order: 0; }
@media (min-width: 1024px) {
  .calc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .calc-results {
    display: block; position: sticky; top: 4.75rem;
    max-height: calc(100vh - 5.5rem); overflow-y: auto; padding: 2px; scrollbar-width: thin;
  }
  .summary-strip, .calc-inputs, .calc-details { order: 0; }
  .calc-details { margin-top: 1rem; }
}
.summary-strip {
  position: sticky; top: 3.75rem; z-index: 30;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff; border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(79, 70, 229, .28);
}
@media (min-width: 1024px) { .summary-strip { position: static; } }

.chart-box { position: relative; height: 260px; width: 100%; }
@media (min-width: 640px) { .chart-box { height: 300px; } }

/* ---------- Inputs ---------- */
.field-label { display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .35rem; }
.field-hint { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .affix {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  padding: 0 .75rem; font-size: .875rem; color: var(--muted); pointer-events: none;
}
.input-wrap .affix.left { left: 0; }
.input-wrap .affix.right { right: 0; }
.input-wrap input.has-left { padding-left: 1.75rem; }
.input-wrap input.has-right { padding-right: 2.25rem; }

.fc-input, .fc-select {
  width: 100%; background: #fff; border: 1px solid #cbd5e1; border-radius: .6rem;
  padding: .6rem .75rem; font-size: .95rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.fc-input:focus, .fc-select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.fc-input.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
/* Hide number spinners — sliders do that job */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Range slider ---------- */
input[type=range].fc-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: .85rem 0 .25rem;
  border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--brand) 0%, var(--brand) var(--fill, 50%), #e2e8f0 var(--fill, 50%), #e2e8f0 100%);
}
input[type=range].fc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
  transition: transform .12s ease;
}
input[type=range].fc-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range].fc-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--brand);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
input[type=range].fc-range::-moz-range-track { background: transparent; height: 6px; }
input[type=range].fc-range:focus-visible { outline-offset: 6px; }

/* Segmented toggle */
.seg { display: inline-flex; background: #eef2ff; border-radius: .7rem; padding: 3px; gap: 2px; }
.seg button {
  padding: .45rem .9rem; font-size: .85rem; font-weight: 600; color: #4338ca; border-radius: .55rem;
  transition: background .15s, color .15s;
}
.seg button[aria-pressed=true] { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }

/* ---------- Result metrics ---------- */
.metric { padding: .75rem .9rem; border-radius: .8rem; background: #f1f5f9; }
.metric .m-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.metric .m-value { font-size: 1.2rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric.good .m-value { color: #047857; }
.metric.bad .m-value { color: #b91c1c; }
.big-number { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.data-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.data-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: .5rem; border-bottom: 1px solid #f1f5f9; font-variant-numeric: tabular-nums; }
.data-table td:not(:first-child), .data-table th:not(:first-child) { text-align: right; }

.error-banner {
  display: none; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  border-radius: .7rem; padding: .6rem .85rem; font-size: .85rem;
}
.error-banner.show { display: block; }

/* ---------- Affiliate banner ---------- */
.affiliate {
  position: relative; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-radius: 1rem; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, #059669, #0d9488 55%, #0891b2);
  box-shadow: 0 8px 24px rgba(5, 150, 105, .25);
}
.affiliate.alt { background: linear-gradient(120deg, #4338ca, #6d28d9 60%, #a21caf); box-shadow: 0 8px 24px rgba(67, 56, 202, .25); }
.affiliate .tag {
  position: absolute; top: .45rem; right: .7rem; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .75;
}
.affiliate .cta {
  background: #fff; color: #065f46; font-weight: 700; font-size: .875rem; padding: .55rem 1rem;
  border-radius: .65rem; white-space: nowrap; transition: transform .15s;
}
.affiliate.alt .cta { color: #4338ca; }
.affiliate .cta:hover { transform: translateY(-1px); }

/* ---------- Carousel ---------- */
.carousel {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: 0 0 min(78%, 280px); }

/* ---------- FAQ accordion ---------- */
.faq-item { border: 1px solid var(--line); border-radius: .8rem; background: #fff; overflow: hidden; }
.faq-item + .faq-item { margin-top: .6rem; }
.prose-seo .faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1rem; text-align: left; font-weight: 600; color: var(--ink);
}
.faq-q .chev { transition: transform .2s ease; flex-shrink: 0; }
.faq-q[aria-expanded=true] .chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-a > div { overflow: hidden; }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a p { padding: 0 1rem 1rem; color: #475569; line-height: 1.65; }

/* ---------- SEO prose ---------- */
.prose-seo h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 .75rem; letter-spacing: -.01em; }
.prose-seo h3 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose-seo p { color: #475569; line-height: 1.75; margin-bottom: 1rem; }
.prose-seo ul, .prose-seo ol { color: #475569; line-height: 1.75; margin: 0 0 1rem 1.25rem; }
.prose-seo ul { list-style: disc; }
.prose-seo ol { list-style: decimal; }
.prose-seo .formula {
  background: #eef2ff; border-left: 4px solid var(--brand); padding: .85rem 1rem; border-radius: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; color: #312e81; margin: 0 0 1rem; overflow-x: auto;
}
.prose-seo .example { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 1rem 1.15rem; border-radius: .8rem; margin-bottom: 1rem; }
.prose-seo .example ol { margin-bottom: 0; }

/* ---------- Search dropdown ---------- */
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 60; background: #fff;
  border: 1px solid var(--line); border-radius: .9rem; box-shadow: 0 16px 40px rgba(15, 23, 42, .15);
  max-height: 340px; overflow-y: auto; text-align: left;
}
.search-results a { display: flex; gap: .75rem; padding: .7rem .9rem; align-items: center; color: var(--ink); }
.search-results a:hover, .search-results a.active { background: #eef2ff; }
.search-results .empty { padding: .9rem; color: var(--muted); font-size: .9rem; }

/* ---------- Debt rows ---------- */
.debt-row { border: 1px solid var(--line); border-radius: .8rem; padding: .85rem; background: #fcfcfd; }
.debt-row + .debt-row { margin-top: .7rem; }

/* ---------- Hero ---------- */
.hero-bg {
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(124, 58, 237, .35), transparent 60%),
    radial-gradient(700px 380px at 5% 0%, rgba(16, 185, 129, .25), transparent 60%),
    linear-gradient(160deg, #1e1b4b, #312e81 60%, #1e3a8a);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  header, footer, .affiliate, .carousel-section, .no-print { display: none !important; }
  .calc-results { position: static; }
}