:root{
  /* Abi Saran Silks brand theme — magenta from the peacock mark, orange from the wordmark */
  --gold:#9b0038;         /* primary — rani pink / magenta 
  --gold:#C2185B;         /* primary — rani pink / magenta */
--gold-light: #f3cf80;  /* lighter pink — gradient highlight */
  --gold-deep:#6E1440;    /* deep plum — gradient shadow */
  --gold-bright:#E8631F;  /* orange accent — hovers, live numbers, bright text */
  --dark:#FFF8FB;         /* page background — soft white with a hint of pink */
  --dark-warm:#FCEBF2;    /* footer / sidebar background — a touch deeper pink */
  --dark-panel:#FBE4ED;   /* recessed panels (map box, etc.) */
  --white:#FFFFFF;
  --bg-light:#F8F8F8;
  --green:#1F8B44;
  --red:#C23B4A;
  --cream:#2A0E1B;        /* headings — near-black plum */
  --ink:#3D1B29;          /* body text */
  --muted:#8C6478;        /* secondary text */
  --muted-dim:#AC8B9B;    /* dim labels/timestamps */
  --line: rgba(194,24,91,0.16);
  --glass: rgba(194,24,91,0.035);
  --glass-strong: rgba(194,24,91,0.07);
  --card-shadow: 0 4px 24px rgba(194,24,91,0.08), 0 1px 2px rgba(43,10,20,0.04);
  --radius: 18px;
  --container: 1160px;
}

/* ============================================================
   Suvarna / Abi Saran Silks — Mobile Responsive Styles
   Breakpoints: 1200px (wide tablet) · 980px (tablet) ·
                768px (small tablet) · 560px (large phone) ·
                400px (small phone)
   All selectors below reference classes/inline patterns that
   actually appear in this project's PHP templates.
   ============================================================ */

/* ---------- 1200px : tighten outer gutters ---------- */
@media (max-width:1200px){
  .wrap{padding:0 20px;}
}
.num{
    font-size: 1.9rem;
    color: var(--gold-bright);
}

/* ---------- 980px : nav collapses to hamburger; two-column
   sections written with an inline grid-template-columns
   (index.php hero, buy/sell/gift/savings-plan pages) stack
   to a single column ---------- */
@media (max-width:980px){
 .navlinks{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:linear-gradient(180deg,#9b0038,#d40056);
    flex-direction:column;
    padding:0 22px;
    gap:16px;
    border-bottom:1px solid var(--line);

    display:flex;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .45s ease, opacity .35s ease, padding .35s ease;
}

.navlinks.open{
    max-height:450px; /* adjust based on menu height */
    opacity:1;
    padding:22px;
}
  .navlinks a{
    opacity:0;
    transform:translateX(-20px);
    transition:all .3s ease;
}

.navlinks.open a{
    opacity:1;
    transform:translateX(0);
}

.navlinks.open a:nth-child(1){transition-delay:.05s;}
.navlinks.open a:nth-child(2){transition-delay:.10s;}
.navlinks.open a:nth-child(3){transition-delay:.15s;}
.navlinks.open a:nth-child(4){transition-delay:.20s;}
.navlinks.open a:nth-child(5){transition-delay:.25s;}
.navlinks.open a:nth-child(6){transition-delay:.30s;}
.navlinks.open a:nth-child(7){transition-delay:.35s;}
  .navburger{display:flex;}
/* Animation */
.navburger.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.navburger.active span:nth-child(2){
    opacity:0;
}

.navburger.active span:nth-child(3){
    transform:translateY(-5px) rotate(-45deg);
}
  .grid-2, .grid-3, .grid-4{grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(194, 24, 91, 0.6);
    border-radius: 10px;
    padding: 10px;}
  .foot-grid{grid-template-columns:1fr 1fr;}

  /* Several pages (index.php hero, buy-gold, sell-gold, gift-gold,
     savings-plan) lay out with `style="grid-template-columns:..."`
     directly on the .wrap instead of a class — force those to stack. */
  .wrap[style*="grid-template-columns"]{grid-template-columns:1fr !important;}

  /* admin/reports.php writes its stat row as an inline
     repeat(4,1fr); override it the same way .admin-grid is. */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important;}
  .admin-grid{grid-template-columns:1fr 1fr;}

  .dash-shell{flex-direction:column;}
  .dash-side{width:100%;}
  .table-toolbar{flex-direction:column; align-items:flex-start;}
}

/* ---------- 768px : dial back internal spacing; make wide
   data tables scroll horizontally instead of squashing ---------- */
@media (max-width:768px){
  .auth-card{padding:28px 24px;}
  .panel{padding:10px;}
  .admin-content{padding:20px;}
  .admin-topbar{padding:16px 20px; flex-wrap:wrap; gap:10px;}
  h1{font-size:1.7rem !important;}

  /* Tables never reflow gracefully on narrow screens — let the card
     holding one scroll horizontally instead of crushing columns.
     (`:has` is supported by all current major browsers; the reduced
     font-size/padding below still helps degrade gracefully without it.) */
  .glass-card:has(.data-table){overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .data-table{min-width:640px;}
  .data-table th, .data-table td{padding:11px 12px; font-size:0.82rem;}

  /* contact.php's map panel is given an inline height:420px */
  [style*="height:420px"]{height:260px !important;}
}

/* ---------- 560px : phones ---------- */
@media (max-width:560px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .admin-grid{grid-template-columns:1fr;}
  section{padding:50px 0;}
  .page-hero{padding:40px 0 16px;}

  .pay-methods{gap:8px;}
  .pay-pill{flex:1 1 calc(50% - 8px); text-align:center;}

  .otp-inputs input{width:44px; height:48px; font-size:1.1rem;}
 .num{
        font-size: 1.35rem;
    }
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* ---------- 480px : buttons & big numeric type ---------- */
@media (max-width:480px){
  .btn{
      /*padding:11px 20px; */
  font-size:0.6rem;}
  .btn-sm{padding: 9px 14px;}
  .stat-card .v{font-size:0.9rem;}
  .result-box{flex-direction:column; align-items:flex-start; gap:10px;}
  .result-box .rv{font-size:1.2rem;}
   .num{
        font-size: 1.35rem;
    }
}

/* ---------- 400px : smallest phones ---------- */
@media (max-width:400px){
  .wrap{padding:0 16px;}
  .otp-inputs{gap:6px;}
  .otp-inputs input{width:38px; height:44px; font-size:1rem;}
  .pay-pill{flex:1 1 10%;
              font-size: 12px;
  }
  .brand{font-size:1.1rem;}
   .num{
        font-size: 1.35rem;
    }
    
}