/* Page Banner */
.page-banner {
  background: #e6f4fa;
  padding: 40px 0 36px;   /* ⬅️ smaller height */
  text-align: center;
  position: relative;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08); /* ⬅️ upward shadow */
}

.page-banner h1 {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
}

.page-banner p {
  font-size: 14px;
  color: #6b7280;
}

.page-banner a {
  color: var(--secondary-color);
  font-weight: 500;
}

.page-banner a:hover {
  color: var(--accent-color);
}
.ticks {
    position: relative;
    height: 24px;
    margin-top: 10px;
}

.ticks span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s ease;
}

/* Hover effect */
.ticks span:hover {
    color: var(--accent-color);
}

/* Active selected tick */
.ticks span.active {
    color: var(--accent-color);
    font-weight: 600;
}
/* ============================= */
/* STEP UP SUMMARY TABLE */
/* ============================= */

#summaryTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

#summaryTable thead {
    background: var(--secondary-color);
    color: #fff;
}

#summaryTable th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.2);
}

#summaryTable th:last-child {
    border-right: none;
}

#summaryTable td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

#summaryTable tbody tr {
    transition: all 0.3s ease;
}

#summaryTable tbody tr:nth-child(even) {
    background: #f8fafc;
}

#summaryTable tbody tr:hover {
    background: rgba(201,162,77,0.08);
}

#summaryTable td:first-child {
    font-weight: 600;
    color: var(--primary-color);
}
#summaryTable {
    border-radius: 10px;
    overflow: hidden;
}

/* ===============================
   COMMON PIE CHART SIZE FOR ALL CALCULATORS
=============================== */

#lumpsumChart,
#stepUpChart,
#crorepatiChart,
#sipChart,
#targetSipChart {
    max-width: 350px;
    max-height: 350px;
    margin: 0 auto;
    display: block;
}

/* Ensure consistency inside chart cards */
.chart-card canvas,
#lumpsumChart,
#stepUpChart,
#crorepatiChart,
#sipChart,
#targetSipChart {
    max-width: 350px !important;
    max-height: 350px !important;
}
.pie-chart-wrapper {
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin: 0 auto;
    position: relative;
}

/* ===============================
   SIP Growth Chart Layout Fix
   =============================== */

.growth-card {
    display: block !important;
}

.growth-chart-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
}

#growthChart {
    width: 100% !important;
    height: 100% !important;
}