* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: ‘Segoe UI’, Arial, sans-serif;
background: #f4f6fb;
color: #1a1a2e;
font-size: 15px;
line-height: 1.6;
}

.calc-wrapper {
max-width: 720px;
margin: 0 auto;
padding: 16px;
}

/* HEADER */
.calc-header {
background: linear-gradient(135deg, #0a2540 0%, #1a56db 100%);
border-radius: 10px 10px 0 0;
padding: 22px 20px 18px;
text-align: center;
color: #fff;
}
.calc-header h1 {
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.2px;
}
.calc-header p {
font-size: 0.82em;
opacity: 0.85;
margin-top: 5px;
}
.badge-row {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.badge {
background: rgba(255,255,255,0.18);
border-radius: 20px;
padding: 3px 11px;
font-size: 0.75em;
font-weight: 600;
color: #fff;
}

/* MAIN CARD */
.calc-card {
background: #fff;
border: 1px solid #dde3f0;
border-top: none;
border-radius: 0 0 10px 10px;
padding: 20px;
}

/* TAB SWITCHER */
.tab-row {
display: flex;
border: 1.5px solid #1a56db;
border-radius: 7px;
overflow: hidden;
margin-bottom: 20px;
}
.tab-btn {
flex: 1;
padding: 9px 6px;
font-size: 0.82em;
font-weight: 600;
border: none;
cursor: pointer;
background: #fff;
color: #1a56db;
transition: all 0.18s;
text-align: center;
}
.tab-btn.active {
background: #1a56db;
color: #fff;
}
.tab-btn:not(:last-child) {
border-right: 1.5px solid #1a56db;
}

/* FORM */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-size: 0.85em;
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.form-group select,
.form-group input[type=”number”] {
width: 100%;
padding: 10px 12px;
border: 1.5px solid #ccd6f0;
border-radius: 7px;
font-size: 0.95em;
color: #1a1a2e;
background: #f8f9ff;
outline: none;
transition: border 0.15s;
appearance: none;
-webkit-appearance: none;
}
.form-group select:focus,
.form-group input:focus {
border-color: #1a56db;
background: #fff;
}

/* CITY SEARCH */
.city-search-wrap { position: relative; }
.city-search-wrap input[type=”text”] {
width: 100%;
padding: 10px 12px;
border: 1.5px solid #ccd6f0;
border-radius: 7px;
font-size: 0.95em;
color: #1a1a2e;
background: #f8f9ff;
outline: none;
}
.city-search-wrap input[type=”text”]:focus { border-color: #1a56db; }
.city-dropdown {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
background: #fff;
border: 1.5px solid #1a56db;
border-top: none;
border-radius: 0 0 7px 7px;
max-height: 180px;
overflow-y: auto;
z-index: 10;
box-shadow: 0 4px 12px rgba(26,86,219,0.1);
}
.city-option {
padding: 9px 13px;
cursor: pointer;
font-size: 0.9em;
display: flex;
justify-content: space-between;
align-items: center;
}
.city-option:hover { background: #eef3ff; }
.city-class-tag {
font-size: 0.75em;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
}
.tag-x { background: #ffeaea; color: #c0392b; }
.tag-y { background: #fff3e0; color: #e67e22; }
.tag-z { background: #e8f5e9; color: #27ae60; }

/* SLIDER */
.slider-wrap { padding: 4px 0; }
.fitment-slider {
width: 100%;
accent-color: #1a56db;
height: 6px;
cursor: pointer;
}
.slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.75em;
color: #666;
margin-top: 4px;
}
.fitment-display {
text-align: center;
font-size: 1.2em;
font-weight: 700;
color: #1a56db;
margin: 6px 0 2px;
}

/* CALCULATE BUTTON */
.calc-btn {
width: 100%;
padding: 13px;
background: #1a56db;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 700;
cursor: pointer;
margin-top: 6px;
transition: background 0.15s;
letter-spacing: 0.3px;
}
.calc-btn:hover { background: #1340b0; }

/* RESULTS */
.result-box {
display: none;
margin-top: 20px;
border-radius: 9px;
overflow: hidden;
border: 1.5px solid #dde3f0;
}
.result-header {
background: #0a2540;
color: #fff;
padding: 12px 16px;
font-weight: 700;
font-size: 0.9em;
display: flex;
align-items: center;
gap: 8px;
}
.result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.result-item {
padding: 13px 16px;
border-bottom: 1px solid #eef0f8;
border-right: 1px solid #eef0f8;
}
.result-item:nth-child(even) { border-right: none; }
.result-item:last-child, .result-item:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
.result-label {
font-size: 0.75em;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.result-value {
font-size: 1.05em;
font-weight: 700;
color: #0a2540;
margin-top: 3px;
}
.result-value.highlight { color: #1a56db; font-size: 1.15em; }
.result-value.green { color: #27ae60; }

/* 8TH CPC COMPARISON TABLE */
.compare-box {
display: none;
margin-top: 18px;
border-radius: 9px;
overflow: hidden;
border: 1.5px solid #dde3f0;
}
.compare-header {
background: #1a56db;
color: #fff;
padding: 11px 16px;
font-weight: 700;
font-size: 0.88em;
}
table.compare-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85em;
}
.compare-table th {
background: #eef3ff;
padding: 9px 12px;
text-align: center;
font-weight: 700;
color: #0a2540;
border-bottom: 1px solid #dde3f0;
}
.compare-table td {
padding: 9px 12px;
text-align: center;
border-bottom: 1px solid #f0f2fa;
color: #333;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: #f8f9ff; }
.compare-table td.green { color: #27ae60; font-weight: 700; }
.compare-table td.blue { color: #1a56db; font-weight: 700; }

/* INFO NOTE */
.info-note {
background: #fffbea;
border-left: 3px solid #f0c040;
padding: 10px 13px;
border-radius: 0 7px 7px 0;
font-size: 0.8em;
color: #555;
margin-top: 16px;
line-height: 1.5;
}

/* ERROR */
.error-msg {
color: #c0392b;
font-size: 0.82em;
margin-top: 5px;
display: none;
}

/* DISCLAIMER */
.disclaimer {
font-size: 0.75em;
color: #888;
text-align: center;
margin-top: 16px;
line-height: 1.5;
padding: 0 4px;
}

/* CITY CLASS INFO */
.city-class-result {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.82em;
font-weight: 700;
display: none;
}

@media (max-width: 480px) {
.calc-header h1 { font-size: 1.1em; }
.result-grid { grid-template-columns: 1fr; }
.result-item { border-right: none !important; }
.result-item:last-child { border-bottom: none; }
.tab-btn { font-size: 0.75em; padding: 8px 4px; }
.compare-table th, .compare-table td { padding: 7px 8px; font-size: 0.8em; }
}

// ============ CITY DATABASE ============
const CITIES = [
// X Class
{name:”Delhi”,class:”X”},{name:”New Delhi”,class:”X”},{name:”Mumbai”,class:”X”},
{name:”Bengaluru”,class:”X”},{name:”Bangalore”,class:”X”},{name:”Chennai”,class:”X”},
{name:”Hyderabad”,class:”X”},{name:”Kolkata”,class:”X”},{name:”Pune”,class:”X”},
{name:”Ahmedabad”,class:”X”},
// Y Class
{name:”Agra”,class:”Y”},{name:”Ajmer”,class:”Y”},{name:”Aligarh”,class:”Y”},
{name:”Allahabad”,class:”Y”},{name:”Prayagraj”,class:”Y”},{name:”Amritsar”,class:”Y”},
{name:”Aurangabad”,class:”Y”},{name:”Bhopal”,class:”Y”},{name:”Chandigarh”,class:”Y”},
{name:”Coimbatore”,class:”Y”},{name:”Cuttack”,class:”Y”},{name:”Dehradun”,class:”Y”},
{name:”Dhanbad”,class:”Y”},{name:”Durgapur”,class:”Y”},{name:”Faridabad”,class:”Y”},
{name:”Ghaziabad”,class:”Y”},{name:”Gorakhpur”,class:”Y”},{name:”Gulbarga”,class:”Y”},
{name:”Guwahati”,class:”Y”},{name:”Gwalior”,class:”Y”},{name:”Hubli”,class:”Y”},
{name:”Indore”,class:”Y”},{name:”Jabalpur”,class:”Y”},{name:”Jaipur”,class:”Y”},
{name:”Jalandhar”,class:”Y”},{name:”Jammu”,class:”Y”},{name:”Jamshedpur”,class:”Y”},
{name:”Jodhpur”,class:”Y”},{name:”Kanpur”,class:”Y”},{name:”Kochi”,class:”Y”},
{name:”Lucknow”,class:”Y”},{name:”Ludhiana”,class:”Y”},{name:”Madurai”,class:”Y”},
{name:”Mangalore”,class:”Y”},{name:”Meerut”,class:”Y”},{name:”Mysore”,class:”Y”},
{name:”Nagpur”,class:”Y”},{name:”Nasik”,class:”Y”},{name:”Nashik”,class:”Y”},
{name:”Noida”,class:”Y”},{name:”Patna”,class:”Y”},{name:”Raipur”,class:”Y”},
{name:”Rajkot”,class:”Y”},{name:”Ranchi”,class:”Y”},{name:”Salem”,class:”Y”},
{name:”Shimla”,class:”Y”},{name:”Siliguri”,class:”Y”},{name:”Solapur”,class:”Y”},
{name:”Srinagar”,class:”Y”},{name:”Surat”,class:”Y”},{name:”Thiruvananthapuram”,class:”Y”},
{name:”Tiruchirappalli”,class:”Y”},{name:”Tiruppur”,class:”Y”},{name:”Udaipur”,class:”Y”},
{name:”Vadodara”,class:”Y”},{name:”Varanasi”,class:”Y”},{name:”Vijayawada”,class:”Y”},
{name:”Visakhapatnam”,class:”Y”},{name:”Warangal”,class:”Y”},{name:”Dharmshala”,class:”Y”},
{name:”Mandi”,class:”Y”},{name:”Kangra”,class:”Y”},
// Z Class
{name:”Kullu”,class:”Z”},{name:”Manali”,class:”Z”},{name:”Hamirpur”,class:”Z”},
{name:”Bilaspur”,class:”Z”},{name:”Chamba”,class:”Z”},{name:”Kinnaur”,class:”Z”},
{name:”Lahaul”,class:”Z”},{name:”Spiti”,class:”Z”},{name:”Sirmaur”,class:”Z”},
{name:”Solan”,class:”Z”},{name:”Una”,class:”Z”},{name:”Nahan”,class:”Z”},
{name:”अन्य शहर”,class:”Z”}
];

const HRA_RATES = {X:{base:0.24,current:0.30},Y:{base:0.16,current:0.20},Z:{base:0.08,current:0.10}};
const MIN_FLOOR = {X:5400,Y:3600,Z:1800};
const FITMENT_SCENARIOS = [
{label:”Conservative (1.83x)”, factor:1.83},
{label:”Consensus (1.92x)”, factor:1.92},
{label:”2.0x”, factor:2.0},
{label:”2.57x (High)”, factor:2.57},
{label:”NC-JCM Demand (2.86x)”, factor:2.86}
];

// ============ TAB SWITCHER ============
function switchTab(tab) {
[‘current’,’8thcpc’,’compare’].forEach(t => {
document.getElementById(‘tab-‘+t).style.display = t===tab?’block’:’none’;
});
document.querySelectorAll(‘.tab-btn’).forEach((b,i) => {
b.classList.toggle(‘active’, [‘current’,’8thcpc’,’compare’][i]===tab);
});
}

// ============ CITY SEARCH ============
function filterCities(suffix) {
const q = document.getElementById(‘city-search-‘+suffix).value.toLowerCase();
const dd = document.getElementById(‘dropdown-‘+suffix);
dd.innerHTML = ”;
if (!q) { dd.style.display=’none’; return; }
const filtered = CITIES.filter(c => c.name.toLowerCase().includes(q)).slice(0,12);
if (!filtered.length) { dd.style.display=’none’; return; }
filtered.forEach(c => {
const div = document.createElement(‘div’);
div.className = ‘city-option’;
div.innerHTML = `${c.name}${c.class}`;
div.onclick = () => selectCity(c, suffix);
dd.appendChild(div);
});
dd.style.display=’block’;
}
function showDropdown(suffix) {
if (document.getElementById(‘city-search-‘+suffix).value) filterCities(suffix);
}
function selectCity(c, suffix) {
document.getElementById(‘city-search-‘+suffix).value = c.name;
document.getElementById(‘city-class-‘+suffix).value = c.class;
document.getElementById(‘dropdown-‘+suffix).style.display=’none’;
const show = document.getElementById(‘class-show-‘+suffix);
show.textContent = `${c.name} → ${c.class} Class City`;
show.style.display = ‘inline-flex’;
show.style.background = c.class===’X’?’#ffeaea’:c.class===’Y’?’#fff3e0′:’#e8f5e9′;
show.style.color = c.class===’X’?’#c0392b’:c.class===’Y’?’#e67e22′:’#27ae60′;
}
document.addEventListener(‘click’, e => {
[‘curr’].forEach(s => {
const dd = document.getElementById(‘dropdown-‘+s);
if (dd && !dd.contains(e.target) && e.target.id!==’city-search-‘+s) dd.style.display=’none’;
});
});

// ============ FORMAT ============
function fmt(n) {
return ‘₹’ + Math.round(n).toLocaleString(‘en-IN’);
}

// ============ CALC CURRENT HRA ============
function calcCurrent() {
const basic = parseFloat(document.getElementById(‘basic-curr’).value);
const cityClass = document.getElementById(‘city-class-curr’).value;
const errEl = document.getElementById(‘err-curr’);

if (!basic || basic 250000) {
errEl.style.display = ‘block’;
document.getElementById(‘result-curr’).style.display = ‘none’;
return;
}
if (!cityClass) {
alert(‘कृपया पहले City चुनें।’); return;
}
errEl.style.display = ‘none’;

const rate = HRA_RATES[cityClass].current;
const rawHRA = basic * rate;
const floor = MIN_FLOOR[cityClass];
const hra = Math.max(rawHRA, floor);
const da = basic * 0.60;
const gross = basic + da + hra;

document.getElementById(‘r-basic-curr’).textContent = fmt(basic);
document.getElementById(‘r-class-curr’).textContent = cityClass + ‘ Class’;
document.getElementById(‘r-rate-curr’).textContent = (rate*100) + ‘%’;
document.getElementById(‘r-da-curr’).textContent = fmt(da) + ‘ (60%)’;
document.getElementById(‘r-hra-curr’).textContent = fmt(hra);
document.getElementById(‘r-floor-curr’).textContent = fmt(floor) + ‘ (Min)’;
document.getElementById(‘r-annual-curr’).textContent = fmt(hra*12) + ‘ / वर्ष’;
document.getElementById(‘r-gross-curr’).textContent = fmt(gross) + ‘ / माह’;

document.getElementById(‘result-curr’).style.display = ‘block’;
document.getElementById(‘note-curr’).style.display = ‘block’;
}

// ============ FITMENT SLIDER ============
function updateFitment() {
const val = parseFloat(document.getElementById(‘fitment-slider’).value);
document.getElementById(‘fitment-val’).textContent = val.toFixed(2) + ‘x’;
}

// ============ CALC 8TH CPC HRA ============
function calc8thCPC() {
const basic = parseFloat(document.getElementById(‘basic-8th’).value);
const cityClass = document.getElementById(‘class-8th’).value;
const fitment = parseFloat(document.getElementById(‘fitment-slider’).value);
const rateType = document.getElementById(‘hra-rate-8th’).value;
const errEl = document.getElementById(‘err-8th’);

if (!basic || basic 250000) {
errEl.style.display = ‘block’; return;
}
if (!cityClass) { alert(‘कृपया City Class चुनें।’); return; }
errEl.style.display = ‘none’;

const rateMap = {
‘current’:{X:0.30,Y:0.20,Z:0.10},
‘base’:{X:0.24,Y:0.16,Z:0.08},
‘revised’:{X:0.36,Y:0.24,Z:0.12},
‘higher’:{X:0.40,Y:0.35,Z:0.30}
};
const newRate = rateMap[rateType][cityClass];
const oldRate = HRA_RATES[cityClass].current;

const newBasic = basic * fitment;
const oldHRA = Math.max(basic * oldRate, MIN_FLOOR[cityClass]);
const newHRA = Math.max(newBasic * newRate, MIN_FLOOR[cityClass]);
const increase = newHRA – oldHRA;
const pctIncrease = ((newHRA – oldHRA) / oldHRA * 100).toFixed(1);

const rateLabels = {
‘current’:’30%/20%/10% (Current)’,
‘base’:’24%/16%/8% (Base Reset)’,
‘revised’:’36%/24%/12% (Union Demand)’,
‘higher’:’40%/35%/30% (High Demand)’
};

document.getElementById(‘r8-basic-curr’).textContent = fmt(basic);
document.getElementById(‘r8-basic-new’).textContent = fmt(newBasic);
document.getElementById(‘r8-fitment’).textContent = fitment.toFixed(2) + ‘x’;
document.getElementById(‘r8-rate’).textContent = (newRate*100).toFixed(0) + ‘% (‘ + cityClass + ‘)’;
document.getElementById(‘r8-hra-old’).textContent = fmt(oldHRA);
document.getElementById(‘r8-hra-new’).textContent = fmt(newHRA);
document.getElementById(‘r8-increase’).textContent = fmt(increase) + ‘ (+’ + pctIncrease + ‘%)’;
document.getElementById(‘r8-annual’).textContent = fmt(newHRA*12) + ‘ / वर्ष’;

document.getElementById(‘result-8th’).style.display = ‘block’;
document.getElementById(‘note-8th’).style.display = ‘block’;
}

// ============ COMPARE ALL FITMENTS ============
function calcCompare() {
const basic = parseFloat(document.getElementById(‘basic-cmp’).value);
const cityClass = document.getElementById(‘class-cmp’).value;
const errEl = document.getElementById(‘err-cmp’);

if (!basic || basic 250000) {
errEl.style.display = ‘block’; return;
}
if (!cityClass) { alert(‘कृपया City Class चुनें।’); return; }
errEl.style.display = ‘none’;

const oldRate = HRA_RATES[cityClass].current;
const baseRate = HRA_RATES[cityClass].base;
const floor = MIN_FLOOR[cityClass];
const currentHRA = Math.max(basic * oldRate, floor);

const tbody = document.getElementById(‘cmp-tbody’);
tbody.innerHTML = ”;

// Current row
const currRow = document.createElement(‘tr’);
currRow.innerHTML = `

`;
tbody.appendChild(currRow);

FITMENT_SCENARIOS.forEach(s => {
const newBasic = basic * s.factor;
const newHRA = Math.max(newBasic * baseRate, floor);
const inc = newHRA – currentHRA;
const pct = ((inc/currentHRA)*100).toFixed(1);
const row = document.createElement(‘tr’);
row.innerHTML = `

`;
tbody.appendChild(row);
});

document.getElementById(‘result-cmp’).style.display = ‘block’;
document.getElementById(‘note-cmp’).style.display = ‘block’;
}