/* ==========================================================================
   8thpaycommissionpensioncalculator.com — shared calculator stylesheet
   Used by: /retirement-date-calculator/
            /central-government-employees-pension-calculator/
            /pension-commutation-calculator/

   COLOUR MATCHING: if your homepage uses different brand colours, change
   ONLY the variables in :root below. Everything else inherits from them.
   ========================================================================== */

:root{
  --navy:        #0b1f3a;
  --navy-2:      #12304f;
  --navy-3:      #1c4470;
  --saffron:     #ff8f1f;
  --saffron-dk:  #e5730a;
  --green:       #0f8a4d;
  --green-lt:    #e8f6ee;
  --red:         #c0392b;
  --amber-bg:    #fff8e6;
  --amber-line:  #f0c14b;
  --ink:         #17212f;
  --muted:       #5b6b7f;
  --line:        #e3e9f0;
  --bg:          #f5f7fb;
  --card:        #ffffff;
  --radius:      14px;
  --shadow:      0 1px 2px rgba(11,31,58,.06), 0 8px 24px rgba(11,31,58,.07);
  --maxw:        1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.65;
}
img{max-width:100%;height:auto}
a{color:var(--navy-3);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--saffron);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:100;background:var(--navy);
  border-bottom:3px solid var(--saffron);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;max-width:var(--maxw);margin:0 auto}
.brand{color:#fff;font-weight:700;font-size:1.02rem;letter-spacing:.2px;white-space:nowrap}
.brand:hover{text-decoration:none;color:#fff}
.brand span{color:var(--saffron)}
.nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{color:#cfe0f0;font-size:.88rem;padding:7px 11px;border-radius:8px;display:block}
.nav ul a:hover{background:var(--navy-2);color:#fff;text-decoration:none}
.nav ul a.on{background:var(--saffron);color:#fff;font-weight:600}
.nav-toggle{display:none;background:none;border:1px solid #3c5b7d;color:#fff;border-radius:8px;padding:6px 10px;font-size:1.1rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);color:#fff;padding:34px 0 30px}
.badge{
  display:inline-block;background:rgba(255,143,31,.16);border:1px solid rgba(255,143,31,.5);
  color:#ffd7a8;font-size:.78rem;font-weight:600;padding:5px 13px;border-radius:999px;margin-bottom:14px;
}
.hero h1{margin:0 0 12px;font-size:2.15rem;line-height:1.22;font-weight:800;letter-spacing:-.4px}
.hero h1 em{font-style:normal;color:var(--saffron)}
.hero p.lede{margin:0;max-width:820px;color:#c8d9ea;font-size:1.03rem}
.hero p.lede strong{color:#fff}
.breadcrumb{font-size:.8rem;color:#8fb0cd;margin-bottom:10px}
.breadcrumb a{color:#8fb0cd}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:10px 16px;min-width:118px}
.stat b{display:block;font-size:1.22rem;color:var(--saffron);line-height:1.2}
.stat span{font-size:.75rem;color:#b5cade;text-transform:uppercase;letter-spacing:.4px}

/* ---------- sections ---------- */
section{padding:34px 0}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--saffron-dk);background:#fff2e2;padding:4px 11px;border-radius:6px;margin-bottom:10px;
}
h2{font-size:1.62rem;line-height:1.3;margin:0 0 14px;font-weight:700;letter-spacing:-.3px}
h3{font-size:1.16rem;margin:24px 0 9px;font-weight:700}
h4{font-size:1rem;margin:18px 0 6px;font-weight:700}
p{margin:0 0 13px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin-bottom:7px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card + .card{margin-top:18px}

/* ---------- calculator layout ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-head{background:var(--navy);color:#fff;padding:13px 18px;font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:9px}
.panel-body{padding:18px}
.panel.results{position:sticky;top:82px}
.panel.results .panel-head{background:var(--green)}

/* ---------- form ---------- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
label.lbl{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--navy)}
.hint{font-size:.79rem;color:var(--muted);margin-top:5px;line-height:1.5}
input[type=text],input[type=number],input[type=date],select{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus{outline:none;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(255,143,31,.15)}
.rupee{position:relative}
.rupee input{padding-left:31px}
.rupee::before{content:"₹";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

input[type=range]{width:100%;accent-color:var(--saffron);height:26px}
.range-val{float:right;font-weight:700;color:var(--saffron-dk)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  flex:1 1 auto;min-width:88px;text-align:center;padding:9px 10px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer;font-size:.87rem;font-weight:600;transition:all .15s;
}
.chip small{display:block;font-weight:500;font-size:.71rem;color:var(--muted);margin-top:1px}
.chip:hover{border-color:var(--saffron)}
.chip.on{background:var(--saffron);border-color:var(--saffron);color:#fff}
.chip.on small{color:#fff3e4}

.btn{
  display:inline-block;width:100%;padding:13px;border:none;border-radius:10px;background:var(--saffron);
  color:#fff;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;
}
.btn:hover{background:var(--saffron-dk)}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);margin-top:9px}
.btn.ghost:hover{background:var(--bg)}

/* ---------- results ---------- */
.empty{text-align:center;padding:36px 14px;color:var(--muted)}
.empty .ico{font-size:2.4rem;display:block;margin-bottom:8px}
.empty h3{margin:0 0 5px;color:var(--navy)}

.headline{
  background:linear-gradient(135deg,var(--green) 0%,#0a6b3c 100%);color:#fff;
  border-radius:12px;padding:19px;text-align:center;margin-bottom:16px;
}
.headline .cap{font-size:.8rem;text-transform:uppercase;letter-spacing:.7px;color:#c6ecd8}
.headline .big{font-size:2.05rem;font-weight:800;line-height:1.15;margin:4px 0 3px;word-break:break-word}
.headline .sub{font-size:.86rem;color:#d7f2e4}

.group{margin-bottom:15px}
.group h4{
  margin:0 0 7px;font-size:.79rem;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:5px;font-weight:700;
}
.row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.93rem;border-bottom:1px dashed #eef2f7}
.row:last-child{border-bottom:none}
.row span{color:var(--muted)}
.row b{color:var(--ink);text-align:right;white-space:nowrap}
.row.total{background:#f3f8f5;margin:6px -8px 0;padding:9px 8px;border-radius:8px;border:none}
.row.total span{color:var(--navy);font-weight:700}
.row.total b{color:var(--green);font-size:1.06rem}

/* ---------- notes / callouts ---------- */
.note{border-radius:11px;padding:14px 16px;font-size:.9rem;margin:16px 0}
.note p:last-child{margin-bottom:0}
.note b{display:block;margin-bottom:4px}
.note.warn{background:var(--amber-bg);border:1px solid var(--amber-line)}
.note.info{background:#eef5fc;border:1px solid #c6dcf0}
.note.ok{background:var(--green-lt);border:1px solid #b6e0c8}

.formula{
  background:var(--navy);color:#dbe8f5;border-radius:11px;padding:16px 18px;
  font-family:"Consolas",ui-monospace,Menlo,monospace;font-size:.9rem;line-height:1.85;overflow-x:auto;
}
.formula b{color:var(--saffron);font-family:inherit}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--navy);color:#fff;font-weight:600;font-size:.83rem;white-space:nowrap;position:sticky;top:0}
td{white-space:nowrap}
td:first-child{font-weight:600}
tbody tr:nth-child(even){background:#fafbfd}
tbody tr:hover{background:#fff6ec}
tr.hl{background:#fff2e2 !important;font-weight:600}
caption{caption-side:bottom;padding:9px 4px;font-size:.8rem;color:var(--muted);text-align:left}

/* ---------- FAQ ---------- */
details.faq{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;overflow:hidden}
details.faq summary{
  padding:14px 17px;font-weight:600;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:12px;align-items:flex-start;font-size:.97rem;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--saffron);font-size:1.35rem;line-height:1;font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq[open] summary{background:#fafbfd;border-bottom:1px solid var(--line)}
details.faq .ans{padding:14px 17px;font-size:.94rem;color:#33445c}
details.faq .ans p:last-child{margin-bottom:0}

/* ---------- related links ---------- */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.rel a{
  display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--saffron);
  border-radius:11px;padding:15px 17px;box-shadow:var(--shadow);color:var(--ink);
}
.rel a:hover{text-decoration:none;transform:translateY(-2px);transition:transform .15s}
.rel b{display:block;color:var(--navy);margin-bottom:3px;font-size:1rem}
.rel span{font-size:.86rem;color:var(--muted)}

/* ---------- TOC ---------- */
.toc{background:#fff;border:1px solid var(--line);border-radius:11px;padding:16px 20px;margin-bottom:22px}
.toc b{display:block;margin-bottom:8px;color:var(--navy)}
.toc ul{columns:2;column-gap:26px;list-style:none;padding:0;margin:0}
.toc li{margin-bottom:5px;font-size:.9rem}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:#a9c2d8;padding:30px 0 22px;margin-top:34px;font-size:.88rem}
.site-foot a{color:#cfe0f0}
.foot-links{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0 0 16px}
.foot-links a{padding:5px 11px;background:var(--navy-2);border-radius:7px;display:block;font-size:.85rem}
.foot-links a:hover{background:var(--navy-3);text-decoration:none}
.disc{border-top:1px solid #24405e;padding-top:15px;font-size:.81rem;line-height:1.65;color:#8fa8bf}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .calc{grid-template-columns:1fr}
  .panel.results{position:static}
  .hero h1{font-size:1.68rem}
  h2{font-size:1.38rem}
  .toc ul{columns:1}
}
@media (max-width:720px){
  .nav{flex-wrap:wrap;padding:9px 14px}
  .nav-toggle{display:block}
  .nav ul{display:none;width:100%;flex-direction:column;gap:2px;padding-top:8px}
  .nav ul.open{display:flex}
  .nav ul a{padding:9px 11px}
  .two{grid-template-columns:1fr}
  .stat{flex:1 1 calc(50% - 10px);min-width:0}
  .headline .big{font-size:1.72rem}
}
@media print{
  .site-head,.site-foot,.btn,.nav,.toc{display:none}
  body{background:#fff}
  .panel{box-shadow:none;border:1px solid #999}
}