/* ==== Fee Page (scoped) ================================================== */

/* Global guards for this page */
body.page-fee { overflow-x: hidden; }
.page-fee main,
.page-fee .wrap,
.page-fee .glass { max-width: 100%; }

/* Hero */
.page-fee .hero { position: relative; overflow: hidden; }
.page-fee .hero .hero-content { max-width: 980px; margin: 0 auto; text-align: center; }
.page-fee .hero .vector { width: 100%; height: auto; display: block; }
.page-fee .hero h1 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.page-fee .hero .lead { opacity: .85; }

/* Hero pills + CTAs */
.page-fee .pill-toggle{
  display:inline-flex; gap:.25rem; padding:.25rem; border-radius:999px;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(26,32,44,.12); backdrop-filter:blur(6px);
}
.page-fee .pill-toggle button{
  border:0; border-radius:999px; padding:.55rem 1rem; cursor:pointer;
  background:transparent; color:var(--ink,#1A202C); font-weight:700;
}
.page-fee .pill-toggle button.is-active{
  background:var(--accent-base,#A2EBCC); color:#0b1f1b; box-shadow:0 10px 30px rgba(162,235,204,.35);
}
.page-fee .hero-cta{
  display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap;
  margin-top:1rem;
}

/* Glass & grid utilities */
.page-fee .section-title{ text-align:center; margin:3.25rem 0 1.25rem; }
.page-fee .glass{
  background:var(--glass-bg,rgba(255,255,255,.08));
  border-radius:16px; padding:1rem;
  box-shadow:0 1px 0 rgba(0,0,0,.06), inset 0 0 0 1px rgba(26,32,44,.12);
  backdrop-filter:blur(6px);
  max-width:100%; overflow:hidden;
  contain: layout paint inline-size; /* isolates width/paint so neighbors never shift */
}
.page-fee .grid{ display:grid; gap:1rem; min-width:0; }
.page-fee .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.page-fee .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-fee .glass:hover{
  transform:translateY(-2px); transition:.25s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 26px rgba(0,0,0,.12), 0 0 0 2px rgba(162,235,204,.15);
}

/* At-a-glance KPIs */
.page-fee .kpi{ text-align:center; padding:1.1rem; }
.page-fee .kpi .v{ font-size:clamp(1.4rem,2.2vw,2rem); font-weight:800; color:var(--accent-base,#A2EBCC); }
.page-fee .kpi .l{ opacity:.75; }

/* Tables */
.page-fee .table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }
.page-fee table{ width:100%; border-collapse:collapse; }
.page-fee th, .page-fee td{ text-align:left; padding:.75rem .8rem; white-space:nowrap; }
.page-fee thead th{
  font-weight:800; border-bottom:1px solid rgba(26,32,44,.12);
  position:sticky; top:0; background:rgba(255,255,255,.6); backdrop-filter:blur(4px);
}
.page-fee tbody tr{ border-bottom:1px dashed rgba(26,32,44,.12); }
.page-fee tbody tr:hover{ background:rgba(162,235,204,.06); }
.page-fee .hint{ font-size:.9rem; color:var(--muted,#718096); }
.page-fee .badge{
  display:inline-block; padding:.25rem .55rem; border-radius:999px; font-weight:700;
  background:rgba(162,235,204,.18); color:#0b1f1b; border:1px solid rgba(162,235,204,.45);
}

/* Estimator layout */
.page-fee .estimator{ display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; }
.page-fee .estimator .glass{ padding:1rem 1rem 1.1rem; }
.page-fee .estimator label{ font-weight:700; display:block; margin-top:.5rem; }
.page-fee .estimator input, .page-fee .estimator select{
  width:100%; margin-top:.35rem; padding:.65rem .7rem; border-radius:10px;
  border:1px solid rgba(26,32,44,.2); outline:0; transition:border-color .2s ease, box-shadow .2s ease;
}
/* Brand accent focus */
.page-fee .estimator input:focus, .page-fee .estimator select:focus{
  border-color:var(--accent-base,#A2EBCC);
  box-shadow:0 0 0 3px rgba(162,235,204,.35);
}
.page-fee .estimator .out{
  display:grid; place-items:center; text-align:center; min-height:180px;
  background:linear-gradient(180deg,rgba(162,235,204,.06),rgba(32,141,122,.04));
}
.page-fee .fee-big{ font-weight:800; font-size:clamp(2rem,4.5vw,3rem); color:var(--ink,#1A202C); }
.page-fee .fee-sub{ color:var(--muted,#718096); }

/* Estimator controls */
.page-fee .est-controls{
  margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center;
}
.page-fee .est-controls .btn{ min-width:160px; justify-content:center; }

/* =================== Responsive =================== */

/* Tablets & small laptops that were drifting (portrait iPad, Surface, folds) */
@media (max-width:920px){
  /* Collapse VIP to one column so width math is bulletproof */
  .page-fee #vip .grid.cols-2{ grid-template-columns:1fr; gap:.9rem; }
  /* Sticky headers + blur can add a fractional px — disable stickiness here */
  .page-fee thead th{ position: static; }
}

/* Tablets down */
@media (max-width:1024px){
  .page-fee .grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-fee .estimator{ grid-template-columns:1fr; }
}

/* Phones */
@media (max-width:640px){
  .page-fee .grid.cols-3, .page-fee .grid.cols-2{ grid-template-columns:1fr; }
  .page-fee thead th{ position:static; }
  .page-fee th, .page-fee td{ white-space:normal; }
  .page-fee .hero-cta .btn{ min-width:180px; }
  .page-fee .est-controls .btn{ flex:1 1 100%; min-width:0; }
  .page-fee .table-wrap{ margin:0 -.25rem; padding:0 .25rem; }

  /* VIP tidy */
  .page-fee #vip .glass{ padding:.9rem .85rem; border-radius:14px; }
  .page-fee #vip .glass *{ max-width:100%; }
  .page-fee #vip .glass h3{ font-size:1.02rem; margin-bottom:.4rem; }
  .page-fee #vip ul{ margin:.35rem 0 .5rem; padding-left:1.1rem; }
  .page-fee #vip li{ word-break:break-word; overflow-wrap:anywhere; line-height:1.35; }
}

/* Ultra-small devices (JioPhone 2 & peers: 240–280px) */
@media (max-width:280px){
  html, body{ width:100%; max-width:100%; overflow-x:hidden; }
  .sticky-top-wrapper, header, .marquee{ width:100%; overflow:hidden; }

  .page-fee .wrap{ padding-left:.6rem; padding-right:.6rem; }
  .page-fee .hero .hero-content{ padding-left:.55rem; padding-right:.55rem; }
  .page-fee .hero .hero-content h1{ font-size:1.35rem; line-height:1.15; }
  .page-fee .hero .lead{ font-size:.85rem; }
  .page-fee .hero-cta .btn{ flex:1 1 100%; min-width:0; }

  .page-fee .glass{ margin-inline:auto; }
  .page-fee .kpi .v{ font-size:1.25rem; }
  .page-fee .estimator .glass{ padding:.85rem; }

  /* VIP: extra-tight + safe table */
  .page-fee #vip .glass{ padding:.75rem .65rem; border-radius:12px; }
  .page-fee #vip .glass h3{ font-size:.98rem; }
  .page-fee #vip .glass .table-wrap{ overflow-x:auto; }
  .page-fee #vip .glass table{ display:block; width:100%; -webkit-overflow-scrolling:touch; }
  .page-fee #vip .glass thead th,
  .page-fee #vip .glass tbody td{ padding:.5rem .55rem; font-size:.82rem; white-space:normal; }

  #backToTop{ right:.35rem; bottom:.35rem; width:36px; height:36px; }
}

/* Exact 240–260px: extra nudge */
@media (max-width:260px){
  .page-fee .wrap{ padding-left:.5rem; padding-right:.5rem; }
}