.calculator-section {
  background: #111;
  color: #fff;
  padding: 50px;
  border-radius: 16px;
  max-width: 950px;
  margin: 0 auto;
}

.calc-title {
  text-align: center;
  color: #bfa14a;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Tabs styling */
.calc-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}

.calculator-section .tab-btn {
  background: transparent;
  border: 1px solid #bfa14a;
  color: #bfa14a;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ✅ Hover effect */
.calculator-section .tab-btn:hover {
  background: rgba(191, 161, 74, 0.2);
  color: #fff;
  box-shadow: 0 0 10px rgba(191, 161, 74, 0.6);
}

/* ✅ Active tab styling */
.calculator-section .tab-btn.active {
  background: #bfa14a;
  color: #000;
  box-shadow: 0 0 12px rgba(191, 161, 74, 0.8);
  transform: scale(1.05);
}


/* .calc-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}

.tab-btn {
  background: transparent;
  border: 1px solid #bfa14a;
  color: #bfa14a;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-btn.active {
  background: #bfa14a;
  color: #000;
} */

.calc-tab {
  display: none;
}
.calc-tab.active {
  display: block;
}

/* .calc-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  background: #1a1a1a;
  padding: 25px;
  border-radius: 12px;
}

.calc-inputs {
  flex: 1 1 45%;
} */

.calc-chart {
  flex: 1 1 45%;
  text-align: center;
}

/* New code starts 🎯 Results Layout - Results on Right Side, KPI Style */
.calc-container {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: 2fr 3fr;
    gap: 30px;
    background: #1a1a1a;
    padding: 25px;
    border-radius: 12px;
}

.calc-inputs {
    flex: 1;
}

.calc-charts {
    display: grid;
    grid-template-rows: auto auto;
    gap: 25px;
}
/* new code ends */

/* .calculator-section label {
  display: block;
  margin: 10px 0 5px;
} */

/* NEw code starts */
/* 🎯 Input Label with Tooltip */
.calculator-section label {
    display: flex;
    align-items: center;
    margin: 10px 0 5px;
}
/* New code ends */

/* ✅ Scoped input styles — now only affect calculators */
.calculator-section input {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: none;
  margin-bottom: 10px;
  background: #222;
  color: #fff;
}

.calculator-section input::placeholder {
  color: #777;
}

.calculator-section button {
  background: #bfa14a;
  border: none;
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  margin: 10px 5px 10px 0;
  cursor: pointer;
}

.calculator-section button:hover {
  background: #d4b24a;
}

.calculator-section .reset-btn {
  background: #333;
  color: #fff;
}

/* .result {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
} */
/* New code starts */
/* 🎯 Result Container on Right Side */
.result {
    grid-column: 2;
    grid-row: 1;
    background: rgba(47, 47, 79, 0.6);
    padding: 20px;
    border-radius: 8px;
    border-left: 2px solid #bfa14a;
    border-right: 2px solid #bfa14a;
    border-top: 2px solid #bfa14a;
    border-bottom: 2px solid #bfa14a;
}
/* NEw code ends */

canvas {
  /* Ensure canvases fill their containers and have a base height. Without
     an explicit height the canvas may report a clientHeight of zero, which
     prevents our charts from rendering. */
  width: 100%;
  max-width: 100%;
  height: 300px;
  margin: 0 auto;
}

.active-section {
  color: #fff;
  background: linear-gradient(90deg, #bfa14a 0%, #fff 100%);
}


/* --- Adaptive scroll offset so section headings are not hidden under fixed header --- */
:root {
  --header-offset: 80px; /* default fallback, overwritten by JS */
}

/* apply scroll margin to all sections with id (so in-page anchors honor header) */
section[id] {
  scroll-margin-top: var(--header-offset);
}

/* New code starts */
/* 🎯 Charts Container Below Results */
.chart-container {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 20px;
    background: rgba(47, 47, 79, 0.4);
    border-radius: 8px;
}

.chart-container canvas {
    max-width: 100%;
    height: 300px;
}

/* 🎯 Hover Tooltip Styling */
.tooltip-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #bfa14a;
    color: #000;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    margin-left: 5px;
    position: relative;
}

.tooltip-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid #bfa14a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 🎯 Mobile Responsive
   On narrower screens (1024px and below) stack the calculator inputs,
   results and charts vertically for better readability. Unlike prior
   versions of this stylesheet, we do not hide the chart canvases on
   mobile screens. Charts will remain visible as long as they have
   space to render (useful for tablets and larger phones). */
@media (max-width: 1024px) {
  .calc-container {
    grid-template-columns: 1fr;
  }

  .result {
    grid-column: 1;
    grid-row: auto;
  }

  .chart-container {
    grid-column: 1;
    grid-template-columns: 1fr;
  }
}
/* New code ends */