/* ================= TRUE FIXED FLOATING NAVBAR ================= */
html{scroll-behavior:smooth;}
body {
  padding-top: 0;
}

/* offset content AFTER hero for fixed navbar */
section:not(#home) {
  scroll-margin-top: 7.5rem;
}


/* NAVBAR LOCK */
/* ===== BLACK GLASS NAVBAR (VISION STYLE) ===== */
#navbar{
  position: fixed !important;
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 96% !important;
  max-width: 1280px;

  /* TRUE BLACK GLASS */
  background: rgba(10, 10, 10, 0.55) !important;

  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px;

  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.4);

  z-index: 999999 !important;
}

/* ===== MOBILE MENU (NAVBAR DROPDOWN – SAME AS GROUPS) ===== */
#mobile-menu{
position: absolute !important;
top: 100% !important;
left: 0 !important;
width: 100% !important;

margin-top: 0.5rem !important;

background: rgba(10,10,10,0.92) !important;
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);

border: 1px solid rgba(255,255,255,0.12);
border-radius: 9999px;

box-shadow: 0 30px 80px rgba(0,0,0,0.55);

z-index: 999998 !important;
}



/* stop all scroll class effects */
#navbar.is-scrolled,
#navbar.top-0,
#navbar.top-4,
#navbar.w-\[96\%\],
#navbar.w-\[98\%\]{
  top:1rem!important;
  width:96%!important;
}

/* Remove extra hero spacing */
.hero-bg,#home{
  margin-top:0!important;
  padding-top:0!important;
}
.mt-0,.md\:mt-10{
  margin-top:0!important;
}

/* Tap safety */
button,a{-webkit-tap-highlight-color:transparent;}

/* HERO BACKGROUND IMAGE */
.hero-bg {
  background-image: url("images/hero.jpg"); /* change path if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===============================
 *   CHECK AVAILABILITY – LIGHT GLASS
 *   (Clean Hotel-Style Glass)
 *   =============================== */

.glass-widget {
  background: rgba(255, 255, 255, 0.15) !important;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.45);

  box-shadow:
  0 20px 45px rgba(0, 0, 0, 0.25),
  inset 0 1px 0 rgba(255, 255, 255, 0.9);

  padding: 1.25rem 1.5rem !important;
}

/* Header text */
.glass-widget p {
  color: #white !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  text-transform: uppercase;

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;

  text-shadow: none !important;
}


/* ===============================
 *   MOBILE MENU POLISH (PERFECTION)
 *   =============================== */

#mobile-menu {
transform-origin: top center;
animation: none;
}

/* When menu becomes visible */
#mobile-menu:not(.hidden) {
animation: menuDrop 180ms ease-out forwards;
}

@keyframes menuDrop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Tighten menu spacing */
#mobile-menu > div {
padding: 1rem !important;
}

/* Make it feel attached to navbar */
#mobile-menu {
margin-top: 0.35rem !important;
}