/* ==========================================================
   HOTEL PREM VRINDAVAN — Custom Styles
   (Supplements Tailwind CDN utility classes)

   v2 — Modernized pass:
   - Generous, consistent rounding scale (radius tokens)
   - Layered, color-tinted shadows instead of flat grey
   - Real glassmorphism (backdrop-blur) on header, booking bar,
     floating buttons, mobile nav, lightbox
   - Softer motion curves, slightly larger hover lifts
   ========================================================== */

:root {
    --primary: #5A1F2B;
    --primary-dark: #351018;
    --accent: #C99A45;
    --cream: #F8F3E8;
    --bg: #FCFAF5;
    --dark: #181515;
    --muted: #746B65;

    /* ---- Radius scale (new) ---- */
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-pill: 999px;

    /* ---- Tinted shadow scale (new) ---- */
    --shadow-sm: 0 8px 24px -12px rgba(53, 16, 24, 0.28);
    --shadow-md: 0 20px 45px -18px rgba(53, 16, 24, 0.32);
    --shadow-lg: 0 30px 70px -24px rgba(53, 16, 24, 0.38);
    --shadow-gold: 0 14px 34px -14px rgba(201, 154, 69, 0.45);

    /* ---- Glass surfaces (new) ---- */
    --glass-light: rgba(252, 250, 245, 0.72);
    --glass-dark: rgba(53, 16, 24, 0.55);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---------------- Navbar ---------------- */
#site-header {
    background: transparent;
    transition: background .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
#site-header.scrolled {
    background: var(--glass-light);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid rgba(201, 154, 69, 0.15);
}
#site-header .nav-title { color: #FCFAF5; transition: color .4s ease; }
#site-header.scrolled .nav-title { color: var(--primary-dark); }
#site-header .nav-link { color: rgba(252,250,245,0.85); transition: color .3s ease; position: relative; }
#site-header.scrolled .nav-link { color: var(--dark); }
#site-header .nav-link:hover, #site-header .nav-link.nav-active { color: var(--accent); }
#site-header .nav-link.nav-active::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; border-radius: var(--r-pill); background: var(--accent);
}
#site-header .nav-icon-link { color: rgba(252,250,245,0.9); }
#site-header.scrolled .nav-icon-link { color: var(--primary-dark); }
#site-header .mobile-menu-icon { color: #FCFAF5; }
#site-header.scrolled .mobile-menu-icon { color: var(--primary-dark); }

/* pages with non-transparent hero (interior pages) keep header solid+glassy from the start */
body.solid-header #site-header {
    background: var(--glass-light);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid rgba(201, 154, 69, 0.15);
}
body.solid-header #site-header .nav-title,
body.solid-header #site-header .nav-icon-link,
body.solid-header #site-header .mobile-menu-icon { color: var(--primary-dark); }
body.solid-header #site-header .nav-link { color: var(--dark); }

.mobile-nav-link { padding: .6rem 0; opacity: .92; transition: opacity .25s ease, transform .25s ease; }
.mobile-nav-link:hover { color: var(--accent); transform: translateX(4px); }

/* ---------------- Buttons ---------------- */
.btn-accent {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--primary-dark);
    font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .82rem;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .9rem 1.9rem; border-radius: var(--r-pill);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-gold);
}
.btn-accent:hover { background: transparent; color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(248,243,232,.06); color: var(--cream); border: 1px solid rgba(248,243,232,.4);
    font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .82rem;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .9rem 1.9rem; border-radius: var(--r-pill);
    backdrop-filter: blur(6px);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.btn-outline:hover { background: rgba(248,243,232,.16); transform: translateY(-2px); }

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--cream);
    font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .82rem;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .9rem 1.9rem; border-radius: var(--r-pill);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------------- Footer ---------------- */
.footer-link { transition: color .25s ease; }
.footer-link:hover { color: var(--accent); }
.footer-social {
    width: 40px; height: 40px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(248,243,232,.2); color: var(--cream);
    background: rgba(248,243,232,.05);
    transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.footer-social:hover { background: var(--accent); border-color: var(--accent); color: var(--primary-dark); transform: translateY(-3px); }

/* ---------------- Floating buttons ---------------- */
.float-btn {
    width: 56px; height: 56px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.float-btn:hover { transform: scale(1.1) translateY(-2px); }

.mobile-cta-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: .7rem 0; color: var(--cream); font-family: 'Manrope', sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .03em;
}

/* mobile sticky nav gets a glass treatment + floating rounded bar */
.mobile-sticky-nav {
    background: var(--glass-dark);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -14px 40px -20px rgba(0,0,0,.5);
}

/* ---------------- Section utilities ---------------- */
.eyebrow {
    font-family: 'Manrope', sans-serif; letter-spacing: .22em; text-transform: uppercase;
    font-size: .72rem; color: var(--accent); font-weight: 600;
}
.section-divider {
    width: 70px; height: 2px; border-radius: var(--r-pill); background: var(--accent); margin: 1rem auto;
}
.card-elevated {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* ---------------- Reveal-on-scroll ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Gallery lightbox ---------------- */
#lightbox {
    position: fixed; inset: 0; background: rgba(24,21,21,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 100; display: none; align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }

/* ---------------- Room / experience card zoom ---------------- */
.zoom-img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.zoom-wrap { border-radius: var(--r-md); }
.zoom-wrap:hover .zoom-img { transform: scale(1.08); }

/* ---------------- Testimonial stars ---------------- */
.star-filled { color: var(--accent); }

/* ---------------- Room cards ---------------- */
.room-card {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.room-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---------------- Filter pills (gallery + rooms) ---------------- */
.filter-pill {
    border-radius: var(--r-pill);
    transition: all .25s ease;
}
.active-filter { background: var(--primary); color: var(--cream) !important; border-color: var(--primary) !important; box-shadow: var(--shadow-sm); }

/* ---------------- Booking search bar (glass card) ---------------- */
.booking-bar {
    border-radius: var(--r-lg);
    background: var(--glass-light);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,.5);
}

/* ---------------- Generic media rounding ---------------- */
img { border-radius: inherit; }

/* ---------------- Scrollbar (optional refinement) ---------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: var(--r-pill); }