/* =========================================================
   Groww-style calculator component  (SIP / EMI / etc.)
   Pairs with style.v4.css tokens (green primary, navy ink)
   ========================================================= */
.calc-wrap{max-width:920px;margin:0 auto;padding:34px 20px 10px}
.calc-title{font-size:clamp(24px,4vw,32px);letter-spacing:-.03em;margin-bottom:22px}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 34px rgba(16,24,40,.05);padding:30px 32px}
/* SIP / Lumpsum toggle */
.calc-tabs{display:inline-flex;gap:6px;background:#f2f4f6;border-radius:999px;padding:5px;margin-bottom:26px}
.calc-tabs button{padding:8px 20px;border-radius:999px;font-weight:700;font-size:14px;color:var(--tx3);transition:.15s}
.calc-tabs button.on{background:#e3f9f1;color:#00a179;box-shadow:0 1px 2px rgba(0,179,134,.14)}
/* two-column: controls | chart */
.calc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media(max-width:780px){.calc-grid{grid-template-columns:1fr;gap:28px}}
/* one slider row */
.calc-row{margin-bottom:30px}
.calc-row:last-child{margin-bottom:6px}
.calc-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.calc-row-top label{font-size:15px;font-weight:600;color:var(--tx2)}
.chip{display:inline-flex;align-items:center;gap:3px;background:#e6f7f1;border:1px solid #cdeee1;border-radius:8px;padding:7px 12px;min-width:104px;max-width:100%;justify-content:flex-end;box-sizing:border-box}
.chip .pre{color:#00a179;font-weight:700;font-size:14px;flex:0 0 auto}
.chip .suf{color:#00a179;font-weight:700;font-size:12px;margin-left:1px;flex:0 0 auto}
/* ch units track the font's own digit width, so this scales with font-size
   instead of clipping at a fixed px value. 10ch comfortably fits an 8-digit
   rupee amount (the calculators' sliders top out around 2,00,00,000) with a
   little breathing room; the narrower .wide variant is for 1-3 digit
   percentage/year fields (rate, tenure) that never need that much space.
   The native number-input spin buttons are suppressed: Chrome reserves
   their width outside the box's own content width, which was clipping the
   leading digit of 8-digit values even with room to spare on paper. */
.chip input{border:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0;
  width:10ch;min-width:0;max-width:100%;text-align:right;
  color:#00916f;font-weight:800;font-size:16px;font-family:inherit;
  -moz-appearance:textfield;appearance:textfield}
.chip input::-webkit-outer-spin-button,.chip input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chip input:focus{outline:none;box-shadow:none!important}
.chip.wide input{width:4ch}
/* range slider — grey track, green fill, big white thumb */
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 30%,#e7eaee 30%,#e7eaee 100%);cursor:pointer;padding:0;border:none}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:1px solid #e2e6ea;box-shadow:0 2px 6px rgba(16,24,40,.18);cursor:pointer;margin-top:0}
input[type=range].rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid #e2e6ea;box-shadow:0 2px 6px rgba(16,24,40,.18);cursor:pointer}
/* donut + legend */
.donut-col{display:flex;flex-direction:column;align-items:center;gap:16px}
.legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2);font-weight:600}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.donut{position:relative;width:210px;height:210px}
.donut svg{transform:rotate(-90deg)}
/* results */
.calc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:26px;flex-wrap:wrap}
.res{flex:1;min-width:240px}
.res .r{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.res .r:last-child{border-bottom:none}
.res .r .k{color:var(--tx3);font-size:14px}
.res .r .v{font-weight:800;font-size:16px;color:var(--tx)}
.res .r.total .k{color:var(--tx);font-weight:700}
.res .r.total .v{font-size:20px}
.calc-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.calc-note{color:var(--tx3);font-size:12.5px;margin-top:14px}
.calc-seo{max-width:920px;margin:34px auto 0;padding:0 20px}
.calc-seo h2{font-size:22px;margin:26px 0 10px;letter-spacing:-.02em}
.calc-seo p{color:var(--tx2);margin:0 0 12px;font-size:15px}
.calc-seo .formula{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--tx);font-weight:600}
.calc-seo table{width:100%;border-collapse:collapse;margin:6px 0 8px}
.calc-seo td{border:1px solid var(--line);padding:11px 14px;font-size:14px;color:var(--tx2)}
.calc-seo td:first-child{width:64px;font-weight:800;color:var(--tx);background:var(--bg2)}

/* GST rate pill buttons */
.rate-btn{padding:10px 20px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-weight:700;font-size:14px;color:var(--tx2);transition:.15s}
.rate-btn:hover{border-color:var(--accent)}
.rate-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* accordion rows used by Income Tax calculator */
.acc{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.acc-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--tx)}
.acc-h .car{transition:transform .2s;color:var(--tx3)}
.acc.open .acc-h .car{transform:rotate(180deg)}
.acc-b{max-height:0;overflow:hidden;transition:max-height .2s ease}
.acc.open .acc-b{max-height:600px}
.acc-b-in{padding:0 16px 16px}
.acc-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.acc-field label{font-size:13.5px;color:var(--tx2)}
.acc-field input,.acc-field select{max-width:160px}

/* ---- calculator visual upgrade: icon header + richer results ---- */
.calc-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.calc-ico{width:52px;height:52px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:linear-gradient(135deg,#e9fbf4,#eef1ff);box-shadow:inset 0 0 0 1px rgba(0,179,134,.12)}
.calc-head-tx .calc-title{margin:0;font-size:clamp(21px,3.4vw,27px)}
.calc-head-tx .calc-sub{color:var(--tx3);font-size:13.5px;margin-top:2px}
.calc-card{position:relative;overflow:hidden}
.calc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#00d09c,#5367ff)}
/* results block: total row gets a soft highlighted chip instead of a plain line */
.res{background:var(--bg2);border-radius:14px;padding:6px 16px}
.res .r{border-bottom-color:var(--line2)}
.res .r.total{background:#e9fbf4;margin:6px -16px -6px;padding:14px 16px;border-radius:0 0 14px 14px;border-bottom:none}
.res .r.total .k{color:#00593f}
.res .r.total .v{color:#00593f}
/* GST rate buttons: add a little chip icon feel */
#rateBtns{background:var(--bg2);padding:6px;border-radius:14px}
.rate-btn{background:transparent;border:none}
.rate-btn.on{box-shadow:0 2px 8px rgba(0,179,134,.28)}