/* ============================================================
   TAX CALCULATOR PAGE — tax-calculator.css
   Colors match main site: Deep Emerald + Gold (style.css tokens)
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tc-page {
  font-family: 'Inter', sans-serif;
  background: var(--off-white, #FAFAF7);
  color: var(--text-heading, #0F172A);
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ── Layout container ─────────────────────────────────────── */
.tc-layout {
  max-width: 1300px; width: 100%;
  margin: 0 auto; padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 28px;
  align-items: start;
}
.tc-form-col { display: flex; flex-direction: column; gap: 20px; }
.tc-result-col { position: sticky; top: 80px; }

/* ── HEADER ────────────────────────────────────────────────── */
.tc-header {
  background: var(--primary-dark, #022C22);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 20px rgba(2,44,34,.3);
}
.tc-header-inner {
  max-width: 1300px; width: 100%; margin: 0 auto;
  padding: 0 32px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.tc-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.tc-logo-text { display: flex; flex-direction: column; }
.tc-logo-name {
  font-family: 'Raleway', sans-serif;
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.1;
}
.tc-logo-tag {
  font-size: 10.5px; color: rgba(255,255,255,.55); font-weight: 500; letter-spacing: .02em;
}
.tc-header-actions { display: flex; align-items: center; gap: 20px; }
.tc-hdr-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7);
  text-decoration: none; transition: color .2s;
}
.tc-hdr-link:hover { color: var(--gold-vivid, #FBBF24); }
.tc-hdr-wa { color: var(--whatsapp, #25D366); }
.tc-hdr-wa:hover { color: #22c55e; }
.tc-back-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-full, 9999px);
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85);
  text-decoration: none; transition: all .2s; cursor: pointer;
}
.tc-back-btn:hover {
  background: var(--gold, #D97706);
  border-color: var(--gold, #D97706);
  color: #fff;
}

/* ── HERO ──────────────────────────────────────────────────── */
.tc-hero {
  background: var(--grad-hero, linear-gradient(135deg, #022C22 0%, #064E3B 55%, #065F46 100%));
  padding: 52px 32px 0;
  position: relative; overflow: hidden; text-align: center;
}
.tc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 65% 40%, rgba(5,150,105,.18) 0%, transparent 65%);
  pointer-events: none;
}
.tc-hero-inner { position: relative; z-index: 1; }
.tc-hero-badges {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.tc-hbadge {
  display: inline-block; padding: 4px 14px; border-radius: var(--r-full, 9999px);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold, #D97706); color: #fff;
}
.tc-hbadge-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.80);
}
.tc-hero-title {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(28px, 5vw, 50px); font-weight: 900;
  color: #fff; margin-bottom: 12px; line-height: 1.1;
}
.tc-hero-sub {
  font-size: 15.5px; color: rgba(255,255,255,.75);
  margin-bottom: 32px; line-height: 1.6;
}
.tc-hero-wave { margin-top: 8px; line-height: 0; }
.tc-hero-wave svg { width: 100%; display: block; }

/* ── MAIN ──────────────────────────────────────────────────── */
.tc-main { flex: 1; padding-bottom: 60px; }

/* Tabs bar */
.tc-tabs-bar {
  background: #fff;
  border-bottom: 2px solid var(--border, #D1FAE5);
  position: sticky; top: 60px; z-index: 99;
  box-shadow: 0 2px 12px rgba(6,78,59,.06);
}
.tc-embed .tc-tabs-bar { top: 0; }
.tc-tabs-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 32px;
  display: flex; gap: 0;
}
.tc-mtab {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 28px; border: none; background: transparent;
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 700;
  color: var(--text-muted, #9CA3AF); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.tc-mtab:hover { color: var(--primary, #064E3B); }
.tc-mtab.active { color: var(--accent, #059669); border-bottom-color: var(--accent, #059669); }

.tc-panel { padding: 32px 0; }

/* Reset bar */
.tc-reset-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-radius: var(--r-lg, 12px);
  background: #fff; border: 1.5px solid var(--border, #D1FAE5);
  font-size: 12.5px; color: var(--text-muted, #9CA3AF);
}
.tc-reset-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-full, 9999px);
  border: 1.5px solid var(--border-mid, #A7F3D0);
  background: var(--light-bg, #F0FDF4);
  font-size: 12px; font-weight: 600; color: var(--accent, #059669);
  cursor: pointer; transition: all .2s;
}
.tc-reset-btn:hover { background: var(--accent, #059669); color: #fff; border-color: var(--accent, #059669); }

/* ── GROUPS ────────────────────────────────────────────────── */
.tc-group {
  background: #fff; border-radius: var(--r-xl, 16px);
  border: 1.5px solid var(--border, #D1FAE5);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(6,78,59,.08));
  overflow: hidden;
}
.tc-ghd {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  background: linear-gradient(90deg, var(--light-bg, #F0FDF4), var(--cream, #FDF8F0));
  border-bottom: 1.5px solid var(--border, #D1FAE5);
  font-size: 14.5px; font-weight: 700; color: var(--primary, #064E3B);
}
.tc-gicon {
  width: 32px; height: 32px; border-radius: var(--r-md, 8px);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
}
.tc-gicon-blue   { background: var(--accent, #059669); }
.tc-gicon-violet { background: var(--icon-1, #7C3AED); }
.tc-gicon-gold   { background: var(--gold, #D97706); }
.tc-gtitle { font-size: 14.5px; }
.tc-gnote { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.tc-old-chip {
  margin-left: auto;
  background: var(--gold-pale, #FFFBEB); color: #92400e;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: var(--r-full, 9999px);
}
.tc-gbody { padding: 22px 20px; }

/* Fields */
.tc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tc-row2:last-child { margin-bottom: 0; }
.tc-field { display: flex; flex-direction: column; gap: 5px; }
.tc-field-full { grid-column: 1 / -1; }
.tc-lbl {
  font-size: 12.5px; font-weight: 700; color: var(--primary, #064E3B);
  display: flex; flex-direction: column; gap: 3px;
}
.tc-hint { font-weight: 400; font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.tc-cap-tag {
  display: inline-block; width: fit-content;
  background: var(--light-bg, #F0FDF4); color: var(--accent, #059669);
  font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-full, 9999px);
}

/* Number input */
.tc-ibox {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border, #D1FAE5); border-radius: var(--r-lg, 12px);
  overflow: hidden; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.tc-ibox:focus-within {
  border-color: var(--accent, #059669);
  box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
.tc-pre {
  padding: 0 12px; flex-shrink: 0;
  font-size: 14px; font-weight: 700; color: var(--accent, #059669);
  background: var(--light-bg, #F0FDF4);
  border-right: 1.5px solid var(--border, #D1FAE5);
  display: flex; align-items: center;
}
.tc-num {
  flex: 1; border: none; outline: none;
  padding: 10px 12px; font-size: 14px; color: var(--text-heading, #0F172A);
  background: transparent; font-family: 'Inter', sans-serif;
}
.tc-num::-webkit-outer-spin-button,
.tc-num::-webkit-inner-spin-button { -webkit-appearance: none; }
.tc-rate-tag {
  display: flex; align-items: center;
  padding: 0 10px; flex-shrink: 0;
  font-size: 11px; font-weight: 800; color: #dc2626;
  background: #fef2f2; border-left: 1.5px solid var(--border, #D1FAE5);
}
.tc-rate-green { color: var(--accent, #059669); background: var(--light-bg, #F0FDF4); }
.tc-rate-gray  { color: var(--text-muted); background: var(--off-white, #FAFAF7); }
.tc-sel {
  width: 100%; border: 1.5px solid var(--border, #D1FAE5); border-radius: var(--r-lg, 12px);
  padding: 10px 14px; height: 44px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-heading);
  background: #fff; cursor: pointer; outline: none; transition: border-color .2s;
}
.tc-sel:focus { border-color: var(--accent, #059669); }

/* Sub-section headers */
.tc-subsec {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 14px; padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--border-mid, #A7F3D0);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent, #059669);
}
.tc-subsec-icon { font-size: 16px; }
.tc-subsec-note { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; text-transform: none; }
.tc-ded-section-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--icon-1, #7C3AED);
  margin: 18px 0 12px;
}

/* Info banner */
.tc-info-banner {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--light-bg, #F0FDF4);
  border: 1px solid var(--border-mid, #A7F3D0);
  border-radius: var(--r-lg, 12px); padding: 10px 14px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--primary-mid, #065F46); line-height: 1.5;
}

/* ── REGIME TOGGLE ─────────────────────────────────────────── */
.tc-regime-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.tc-rbtn {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border-radius: var(--r-xl, 16px);
  border: 2px solid var(--border, #D1FAE5); background: #fff;
  cursor: pointer; text-align: left; transition: all .22s ease;
}
.tc-rbtn-top { display: flex; align-items: center; gap: 8px; }
.tc-rbtn-top strong { font-size: 14.5px; color: var(--primary, #064E3B); }
.tc-rbtn-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--r-full, 9999px);
  background: var(--off-white, #FAFAF7); color: var(--text-muted);
}
.tc-rbtn-badge-green { background: var(--light-bg, #F0FDF4); color: var(--accent, #059669); }
.tc-rbtn-desc { font-size: 12px; color: var(--text-body, #374151); line-height: 1.5; }
.tc-rbtn-slabs { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.tc-rbtn.active {
  border-color: var(--accent, #059669); background: var(--light-bg, #F0FDF4);
  box-shadow: 0 4px 16px rgba(5,150,105,.12);
}
.tc-rbtn.active .tc-rbtn-top strong { color: var(--accent, #059669); }
.tc-rbtn.active .tc-rbtn-slabs { color: var(--accent, #059669); }

/* ── BUSINESS REGIME CARDS ─────────────────────────────────── */
.tc-regime-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tc-rcard-opt {
  display: flex; gap: 10px; padding: 14px 16px;
  border-radius: var(--r-xl, 16px); border: 2px solid var(--border, #D1FAE5);
  background: #fff; cursor: pointer; transition: all .2s;
}
.tc-rcard-opt input[type="radio"] { margin-top: 4px; flex-shrink: 0; accent-color: var(--accent, #059669); }
.tc-rco-body { display: flex; flex-direction: column; gap: 2px; }
.tc-rco-body strong { font-size: 13.5px; color: var(--primary, #064E3B); }
.tc-rco-body span { font-size: 12px; color: var(--text-body); }
.tc-rco-note { font-size: 11px !important; color: var(--text-muted) !important; }
.tc-rcard-opt:has(input:checked) { border-color: var(--accent, #059669); background: var(--light-bg, #F0FDF4); }
.tc-llp-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--gold-pale, #FFFBEB); border: 1px solid #fde68a;
  border-radius: var(--r-lg, 12px); padding: 10px 14px;
  font-size: 12.5px; color: #92400e; line-height: 1.5;
}

/* ── RESULT CARD ───────────────────────────────────────────── */
.tc-rcard {
  background: #fff; border-radius: var(--r-2xl, 24px);
  border: 1.5px solid var(--border, #D1FAE5);
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(6,78,59,.12));
  overflow: hidden;
}
.tc-empty {
  padding: 52px 32px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.tc-empty-icon { color: var(--border-mid, #A7F3D0); margin-bottom: 4px; }
.tc-empty p { font-size: 14.5px; color: var(--text-muted); line-height: 1.65; max-width: 260px; }
.tc-empty-tips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 100%; max-width: 240px; }
.tc-empty-tip {
  background: var(--light-bg, #F0FDF4); border-radius: var(--r-md, 8px);
  padding: 7px 12px; font-size: 12px; color: var(--primary-mid, #065F46); text-align: left;
}
.tc-prop-notice {
  padding: 40px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.tc-prop-notice h3 { font-family: 'Raleway', sans-serif; font-size: 20px; color: var(--gold, #D97706); }
.tc-prop-notice p { font-size: 14px; color: var(--text-body); line-height: 1.65; max-width: 300px; }
.tc-switch-btn {
  padding: 10px 22px; border-radius: var(--r-lg, 12px);
  background: var(--gold, #D97706); color: #fff; border: none;
  font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .2s;
}
.tc-switch-btn:hover { background: #b45309; }
.tc-rbody { padding: 28px 24px; }

/* ── GAUGE ─────────────────────────────────────────────────── */
.tc-gauge-section {
  display: flex; align-items: center; gap: 20px; margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, var(--light-bg, #F0FDF4), var(--cream, #FDF8F0));
  border-radius: var(--r-xl, 16px);
  border: 1px solid var(--border, #D1FAE5);
}
.tc-gauge-wrap { position: relative; flex-shrink: 0; }
.tc-gauge-svg { width: 140px; height: 140px; display: block; }
.tc-gauge-track { fill: none; stroke: var(--border, #D1FAE5); stroke-width: 14; }
.tc-gauge-ring {
  fill: none; stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 402.1; stroke-dashoffset: 402.1;
  transform: rotate(-90deg); transform-origin: 80px 80px;
  transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);
}
.tc-gauge-ctr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tc-gauge-pct {
  font-family: 'Raleway', sans-serif;
  font-size: 26px; font-weight: 900; color: var(--primary, #064E3B); line-height: 1;
}
.tc-gauge-sub { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.tc-gauge-meta { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tc-gm-row { display: flex; flex-direction: column; gap: 2px; }
.tc-gm-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tc-gm-val { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 900; color: var(--primary, #064E3B); }
.tc-gm-tax   { color: var(--error, #DC2626); }
.tc-gm-green { color: var(--accent, #059669); }

/* ── BREAKDOWN ─────────────────────────────────────────────── */
.tc-section-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 10px;
}
.tc-breakdown { margin-bottom: 20px; }
.tc-brow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--light-bg, #F0FDF4);
  font-size: 13px; color: var(--text-body);
}
.tc-brow:last-child { border-bottom: none; }
.tc-brow-ind { padding-left: 16px; font-size: 12px; color: var(--text-muted); }
.tc-brow-val { font-weight: 600; color: var(--primary, #064E3B); }
.tc-brow-total {
  border-top: 2px solid var(--accent, #059669); border-bottom: none;
  margin-top: 6px; padding-top: 12px;
  font-weight: 700; font-size: 14px; color: var(--primary, #064E3B);
}
.tc-brow-total .tc-brow-val { color: var(--accent, #059669); font-size: 17px; }
.tc-rebate-note {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--light-bg, #F0FDF4); color: var(--primary-mid, #065F46);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-md, 8px); margin: 8px 0;
}

/* ── REGIME COMPARISON ─────────────────────────────────────── */
.tc-comp-section { margin-bottom: 20px; }
.tc-comp-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--r-lg, 12px); overflow: hidden;
  border: 1px solid var(--border, #D1FAE5);
}
.tc-comp-table th {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  padding: 9px 12px; background: var(--off-white, #FAFAF7); text-align: left;
}
.tc-comp-table td { font-size: 13px; padding: 9px 12px; border-top: 1px solid var(--light-bg, #F0FDF4); }
.tc-comp-win { background: var(--light-bg, #F0FDF4); font-weight: 700; color: var(--accent, #059669); }
.tc-comp-save-row { text-align: center; font-weight: 700; color: var(--accent, #059669); background: var(--light-bg, #F0FDF4); }
.tc-comp-badge {
  display: inline-block;
  background: var(--accent, #059669); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--r-full, 9999px); margin-left: 6px;
}

/* ── ADVANCE TAX ───────────────────────────────────────────── */
.tc-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.tc-adv-card {
  background: var(--light-bg, #F0FDF4); border-radius: var(--r-lg, 12px);
  border: 1.5px solid var(--border, #D1FAE5); padding: 14px;
}
.tc-adv-date { font-size: 13px; font-weight: 700; color: var(--primary, #064E3B); margin-bottom: 4px; }
.tc-adv-pct { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.tc-adv-amt { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 900; color: var(--gold, #D97706); }

/* ── RESULT FOOTER ─────────────────────────────────────────── */
.tc-result-footer { margin-top: 20px; }
.tc-disclaimer-sm { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.tc-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: var(--r-lg, 12px);
  background: var(--grad-green, linear-gradient(135deg, #064E3B, #059669));
  color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.tc-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-green, 0 8px 30px rgba(5,150,105,.30));
}

/* ── FOOTER ────────────────────────────────────────────────── */
.tc-footer {
  background: var(--primary-dark, #022C22); color: rgba(255,255,255,.7);
  padding: 32px 0;
}
.tc-footer-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 32px;
  display: flex; gap: 40px; align-items: flex-start;
}
.tc-footer-logo {
  font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800;
  color: #fff; text-decoration: none; display: block; margin-bottom: 6px;
}
.tc-footer-left p { font-size: 12px; opacity: .65; }
.tc-footer-right { flex: 1; }
.tc-footer-disc { font-size: 12px; line-height: 1.65; margin-bottom: 10px; opacity: .7; }
.tc-footer-right p:last-child { font-size: 12px; opacity: .45; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tc-layout { grid-template-columns: 1fr; }
  .tc-result-col { position: static; }
  .tc-rcard { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .tc-layout { padding: 0 16px; }
  .tc-row2 { grid-template-columns: 1fr; }
  .tc-regime-pair { grid-template-columns: 1fr; }
  .tc-regime-cards-grid { grid-template-columns: 1fr; }
  .tc-adv-grid { grid-template-columns: 1fr; }
  .tc-header-inner { padding: 0 16px; }
  .tc-hdr-link:not(.tc-hdr-wa):not(.tc-back-btn) { display: none; }
  .tc-hero { padding: 32px 16px 0; }
  .tc-hero-title { font-size: 26px; }
  .tc-gauge-section { flex-direction: column; text-align: center; }
  .tc-gauge-meta { align-items: center; }
  .tc-tabs-inner { padding: 0 16px; }
  .tc-footer-inner { flex-direction: column; gap: 20px; padding: 0 16px; }
}
@media (max-width: 480px) {
  .tc-mtab { padding: 13px 14px; font-size: 13px; }
  .tc-gbody { padding: 16px 14px; }
}