/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}

/* ================= THEME ================= */
:root{
  --topH:34px;
  --headH:76px;

  --topbar-bg: linear-gradient(90deg,#d5b15a,#c79a41,#b8892f,#c79a41,#d5b15a);
  --nav-bg: linear-gradient(180deg,#1b1b1b 0%, #111111 55%, #0b0b0b 100%);
  --nav-glow: rgba(213,177,90,.16);

  --gold:#c79a41;
  --gold-2:#ead08a;
  --text:#f3efe6;
  --muted:#d2c2a2;

  --border: rgba(199,154,65,.22);
  --shadow: rgba(0,0,0,.55);
}

body{padding-top:calc(var(--topH) + var(--headH));}

/* ================= TOP HEADER ================= */
.top-header{
  position:fixed;top:0;left:0;width:100%;
  z-index:10010;
  background:var(--topbar-bg);
  color:#151515;
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,.20);
  transform:translateY(0);
  transition:transform .28s ease;
}
.top-header-wrap{
  max-width:1200px;margin:auto;
  padding:6px 16px;
  display:flex;justify-content:space-between;gap:12px;
  align-items:center;

}
.top-header a{
  color:#151515;text-decoration:none;font-weight:800;
}
.top-header a:hover{color:#000;text-decoration:underline;}

.top-trust{
  font-size:16px;          /* was effectively ~13px */
  line-height:1.6;
  font-weight:600;
  letter-spacing:0.2px;
}


/* ================= HEADER ================= */
.site-header{
  position:fixed;top:var(--topH);left:0;width:100%;
  height:var(--headH);
  z-index:10009;
  background:
    radial-gradient(750px 140px at 50% -35%, var(--nav-glow), transparent 70%),
    var(--nav-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px var(--shadow);
  transition:top .28s ease;
}

/* ================= WRAP / GRID ================= */
.header-wrap{
  max-width:1400px;margin:auto;
  height:var(--headH);
  padding:0 18px;
}

.header-3col{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
}

/* ================= BRAND ================= */
.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
  min-width:220px;
}
.brand img{
  width:54px;height:54px;border-radius:50%;
  background:#0f0f0f;
  border:1px solid rgba(199,154,65,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  object-fit:contain;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{
  color:var(--text);
  font-weight:950;
  font-size:18px;
  letter-spacing:.2px;
}
.brand-sub{
  color:rgba(210,194,162,.95);
  font-size:13px;
  font-weight:600;
  margin-top:2px;
}

/* ================= CENTER PILL NAV ================= */
.nav-pill{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 22px;
  border-radius:999px;
  background:rgba(30,30,30,.55);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.nav-pill a,
.nav-pill .dropdown-toggle{
  background:none;border:none;
  color:var(--text);
  font-size:15px;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  opacity:.96;
  transition:.25s ease;
}
.nav-pill a:hover,
.nav-pill .dropdown-toggle:hover{
  color:var(--gold-2);
  opacity:1;
}

/* ================= DROPDOWN (desktop hover) ================= */
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;top:110%;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#1a1a1a,#0c0c0c);
  border-radius:16px;
  padding:18px;
  opacity:0;visibility:hidden;
  transition:.25s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  border:1px solid rgba(199,154,65,.22);
  z-index:10020;
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;}
.dropdown-grid{display:grid;gap:10px;}
.states-grid{grid-template-columns:repeat(5,1fr);width:760px;}
.pooja-list{width:280px;}
.dropdown-grid a{
  color:var(--muted);
  padding:10px 14px;border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition:.2s ease;
}
.dropdown-grid a:hover{
  background:rgba(199,154,65,.14);
  color:var(--gold-2);
  transform:translateY(-1px);
}

/* ================= RIGHT ACTIONS ================= */
.actions-right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative; /* for mobile burger absolute */
}

/* Call pill */
.btn-call{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  text-decoration:none;
  font-weight:950;
  box-shadow:0 14px 30px rgba(0,0,0,.38);
  transition:.2s ease;
}
.btn-call:hover{
  transform:translateY(-1px);
  border-color:rgba(234,208,138,.35);
  color:var(--gold-2);
}

/* Book now */
.btn-book{
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#f1dd9b 0%, #d5b15a 45%, #c79a41 100%);
  color:#141414 !important;
  font-weight:950;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  text-decoration:none;
  transition:.2s ease;
  white-space:nowrap;
}
.btn-book:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}

/* ================= BURGER (DESKTOP OFF) ================= */
/* ✅ IMPORTANT: burger hidden on desktop */
.burger{display:none;}

/* ================= MOBILE MENU (hidden desktop) ================= */
.nav-mobile{display:none;}

/* ================= SCROLL HIDE TOP HEADER ================= */
body.top-hidden{--topH:0px;}
body.top-hidden .top-header{transform:translateY(-110%);}

/* ================= MOBILE FIXES ================= */
@media (max-width:900px){
  :root{--topH:56px;--headH:64px;}

  .top-header-wrap{
    flex-direction:row;
    align-items:center;
    gap:10px;
  }

  /* mobile layout: brand + actions */
  .header-3col{
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }

  .nav-pill{display:none;}
  .btn-call{display:none;}
  .brand-sub{display:none;}

  /* ✅ Burger ONLY on mobile */
  .burger{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.45);
    border:1px solid rgba(234,208,138,.45);
    border-radius:14px;

    width:42px;
    height:42px;
    cursor:pointer;
    padding:0;

    /* place at far right */
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:10050;

    box-shadow:0 14px 30px rgba(0,0,0,.38);
  }

  .burger span{
    display:block;
    width:22px;
    height:2.5px;
    margin:3px 0;
    background:#ead08a;
    border-radius:2px;
    opacity:1;
  }

  /* space so book now won't overlap burger */
  .actions-right{padding-right:52px;}

  .btn-book{
    padding:9px 14px;
    font-size:14px;
  }

  /* ================= MOBILE MENU ================= */
  .nav-mobile{
    display:flex;
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    height:100vh;
    background:linear-gradient(180deg,#1a1a1a,#0c0c0c);
    flex-direction:column;
    padding: calc(var(--topH) + 86px) 24px 26px;
    gap:18px;
    transition:left .35s ease;
    z-index:10005;
    overflow-y:auto;
    border-right:1px solid rgba(199,154,65,.18);
  }
  .nav-mobile.active{left:0;}

  .nav-mobile a,
  .nav-mobile button{
    color:var(--text);
    font-weight:900;
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-size:16px;
  }
  .nav-mobile a:hover,
  .nav-mobile button:hover{color:var(--gold-2);}

  .mobile-close{
    position:fixed;
    top:14px;
    right:14px;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(199,154,65,.35);
    background:rgba(20,20,20,.75);
    display:grid;
    place-items:center;
    color:var(--gold-2);
    cursor:pointer;
    z-index:10006;
    box-shadow:0 14px 34px rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:.25s ease;
  }
  .nav-mobile.active .mobile-close{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  /* ✅ MOBILE DROPDOWN FIX:
     On mobile we hide dropdown-menu by default,
     and show ONLY when JS adds .active */
  .nav-mobile .dropdown{position:static;}

  .nav-mobile .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;             /* hidden by default */
    padding:12px;
    margin-top:8px;
    border-radius:14px;
    border:1px solid rgba(199,154,65,.22);
    box-shadow:none;
  }

  /* ✅ this is what your JS toggles */
  .nav-mobile .dropdown-menu.active{
    display:block !important;
  }

  .nav-mobile .states-grid{grid-template-columns:repeat(2,1fr);width:100%;}
  .nav-mobile .pooja-list{width:100%;}
}