/* ============================================================
   GOKARNESHWAR — LIQUID GLASS SYSTEM v2
   ============================================================ */

/* ─── CORE KEYFRAME ─── */
@keyframes glassShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ============================================================
   1. NAVIGATION BAR
   Transparent on load. JS sets background on scroll.
   backdrop-filter always active for the blur effect.
   ============================================================ */
#mainNav {
  backdrop-filter: blur(28px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.06);
}

/* ============================================================
   2. LIQUID GLASS — BASE CLASS
   ============================================================ */
.liquid-glass,
.frosted-glass {
  background: rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(26px) saturate(170%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.08) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.22) !important;
  border-left:   1px solid rgba(255, 255, 255, 0.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-right:  1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    inset 0  1.5px 0   rgba(255, 255, 255, 0.20),
    inset 0 -1px   0   rgba(0,   0,   0,   0.14),
    inset 1.5px 0  0   rgba(255, 255, 255, 0.10),
    0  8px 32px        rgba(0,   0,   0,   0.30),
    0  2px  8px        rgba(0,   0,   0,   0.20) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.liquid-glass::before,
.frosted-glass::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.03) 55%, transparent 100%) !important;
  border-radius: 20px 20px 60% 60% / 20px 20px 28px 28px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.liquid-glass::after,
.frosted-glass::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 38%, rgba(201,162,39,0.035) 68%, rgba(255,255,255,0.05) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.liquid-glass > *,
.frosted-glass > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   3. GOLD TINT VARIANT
   ============================================================ */
.liquid-glass-gold {
  background: rgba(201, 162, 39, 0.07) !important;
  backdrop-filter: blur(26px) saturate(190%) brightness(1.10) !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.10) !important;
  border-top:    1px solid rgba(201, 162, 39, 0.32) !important;
  border-left:   1px solid rgba(201, 162, 39, 0.22) !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.08) !important;
  border-right:  1px solid rgba(201, 162, 39, 0.08) !important;
  box-shadow:
    inset 0  1.5px 0  rgba(245, 230, 176, 0.28),
    inset 0 -1px   0  rgba(0,   0,   0,   0.18),
    0  8px 32px       rgba(0,   0,   0,   0.30),
    0  0   42px       rgba(201, 162, 39, 0.07) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.liquid-glass-gold::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(245,230,176,0.14) 0%, transparent 100%);
  border-radius: 20px 20px 60% 60% / 20px 20px 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.liquid-glass-gold > * { position: relative; z-index: 1; }

/* ============================================================
   4. PACKAGE CARDS
   ============================================================ */
.pkg-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.18) !important;
  border-left:   1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-right:  1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.16),
    0 6px 28px rgba(0,0,0,0.28) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
.pkg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius: 24px 24px 60% 60% / 24px 24px 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.pkg-card > * { position: relative; z-index: 1; }
.pkg-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),
    0 40px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(201,162,39,0.28) !important;
  border-top-color:   rgba(201, 162, 39, 0.45) !important;
  border-left-color:  rgba(201, 162, 39, 0.30) !important;
}

/* ============================================================
   5. STAT CARDS
   ============================================================ */
.stat-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.16) !important;
  border-left:   1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-right:  1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.15),
    0 4px 20px rgba(0,0,0,0.25) !important;
  border-radius: 14px !important;
  position: relative !important;
  overflow: hidden !important;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card:hover {
  background: rgba(201, 162, 39, 0.06) !important;
  border-top-color:  rgba(201, 162, 39, 0.30) !important;
  border-left-color: rgba(201, 162, 39, 0.20) !important;
}

/* ============================================================
   6. SLIDE TAG (hero badge)
   ============================================================ */
.slide-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 18px rgba(0,0,0,0.22) !important;
  border-radius: 100px !important;
  position: relative !important;
  overflow: hidden !important;
}
.slide-tag::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, transparent 100%);
  border-radius: 100px;
  pointer-events: none;
  z-index: 0;
}
.slide-tag > * { position: relative; z-index: 1; }

/* ============================================================
   7. VERTICAL CARD CAROUSEL (.vcard)
   ============================================================ */
.vcard {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.18) !important;
  border-left:   1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-right:  1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.15) !important;
}
.vcard:hover {
  border-top-color:  rgba(201,162,39,0.40) !important;
  border-left-color: rgba(201,162,39,0.25) !important;
}

/* ============================================================
   8. POSTER CARDS
   ============================================================ */
.poster-card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.18) !important;
  border-left:   1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-right:  1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.16),
    0 6px 28px rgba(0,0,0,0.30) !important;
}
.poster-card:hover {
  border-top-color:  rgba(201,162,39,0.48) !important;
  border-left-color: rgba(201,162,39,0.30) !important;
}

/* ============================================================
   9. SLIDER ARROWS
   ============================================================ */
.slider-arrow {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
}
.slider-arrow:hover {
  background: rgba(201, 162, 39, 0.12) !important;
  border-top-color: rgba(201,162,39,0.50) !important;
}

/* ============================================================
   10. CAROUSEL BUTTONS
   ============================================================ */
#carouselUp, #carouselDown {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

/* ============================================================
   11. EXPERIENCE CARDS
   ============================================================ */
#experiences .group {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.14) !important;
  border-left:   1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-right:  1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
}
#experiences .group::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
#experiences .group > * { position: relative; z-index: 1; }
#experiences .group:hover {
  background: rgba(201,162,39,0.055) !important;
  border-top-color: rgba(201,162,39,0.30) !important;
}

/* ============================================================
   12. BOOKING CONTACT TILES
   ============================================================ */
#booking a.flex.items-center.gap-4,
#booking div.flex.items-center.gap-4 {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-top:    1px solid rgba(255,255,255,0.16) !important;
  border-left:   1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-right:  1px solid rgba(255,255,255,0.04) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ============================================================
   13. BOOKING FORM CARD
   ============================================================ */
#booking form#emailBookingForm {
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
}
#booking .rounded-2xl {
  border-top:    1px solid rgba(255,255,255,0.18) !important;
  border-left:   1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-right:  1px solid rgba(255,255,255,0.05) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    0 12px 48px rgba(0,0,0,0.35) !important;
}

/* ============================================================
   14. REVIEW CARDS
   ============================================================ */
.rv-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
  border-top:    1px solid rgba(255,255,255,0.16) !important;
  border-left:   1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-right:  1px solid rgba(255,255,255,0.04) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.14),
    0 4px 20px rgba(0,0,0,0.22) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
}
.rv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.rv-card > * { position: relative; z-index: 1; }
.rv-card:hover {
  border-top-color:  rgba(201,162,39,0.30) !important;
  border-left-color: rgba(201,162,39,0.20) !important;
  background: rgba(255,255,255,0.055) !important;
}

/* ============================================================
   15. MOBILE MENU BACKDROP
   ============================================================ */
#mobileMenu {
  background: rgba(8, 17, 26, 0.65) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}

/* ============================================================
   16. LOGIN MODAL
   ============================================================ */
#loginModalBox {
  background: rgba(18, 26, 36, 0.72) !important;
  backdrop-filter: blur(36px) saturate(175%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(36px) saturate(175%) brightness(1.06) !important;
  border-top:    1px solid rgba(255,255,255,0.20) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-right:  1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    0 24px 80px rgba(0,0,0,0.60) !important;
}

/* ============================================================
   17. ABOUT SECTION FLOAT BADGE
   ============================================================ */
.float-badge {
  background: rgba(8, 17, 26, 0.52) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-top:    1px solid rgba(255,255,255,0.20) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-right:  1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    0 8px 32px rgba(0,0,0,0.40) !important;
  border-radius: 16px !important;
}

/* ============================================================
   18. PATAL LEGEND CARDS
   ============================================================ */
#patal .border {
  backdrop-filter: blur(20px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.10) !important;
}

/* ============================================================
   19. NAV DROPDOWN
   ============================================================ */
#navDropdownMenu {
  background: rgba(14, 22, 32, 0.80) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 16px 48px rgba(0,0,0,0.50) !important;
  border-radius: 16px !important;
}