/* --- Professional Rooms Gallery Styling --- */
/* --- Global Aesthetic Overrides --- */
:root {
--gold: #c5a059;
    --primary-orange: #ff8c00;
    --dark: #1a1a1a;
    --dark-bg: #1a1a1a;
    --grey: #666666;
    --white: #ffffff;
    --text-muted: #888;
    --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.3s ease;
}

.rooms-page {
    background-color: #f9f9f7;
    font-family: 'Inter', sans-serif;
}

/* --- Hero Section Elevation (UPDATED) --- */
.rooms-hero {
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; 
    
    /* REMOVED: background, background-size, position, and repeat */
    
    clip-path: inset(0 0 5% 0);
    position: relative;
    overflow: hidden;
    
    /* REMOVED: animation (this should only live on the ::before element) */
}

/* This pseudo-element stays exactly as it is to handle the visual effects */
.rooms-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('../assets/Cover-Page/Cover-Photo-3.webp') center/cover no-repeat;
    z-index: -1;
    animation: heroZoom 15s infinite alternate ease-in-out;
}

/* --- Glassmorphism Text Container --- */
.hero-content {
    /* CHANGED: Light orange tint (255, 140, 0 is your primary orange) */
    background: rgba(255, 140, 0, 0.15); 
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 40px 60px;
    border-radius: 15px;
    
    /* CHANGED: Border now has a subtle orange highlight instead of white */
    border: 1px solid rgba(255, 255, 255, 0.25); 
    
    text-align: center;
    
    /* UPDATED: Shadow now has a slight warm tone to match */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); 
    
    animation: contentFadeUp 1.2s ease-out forwards;
    position: relative;
    z-index: 10;
}

.hero-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,140,0,0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes contentFadeUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    letter-spacing: -1px;
    font-weight: 400;
    color: #ffffff; /* Main text is white */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin: 0;
}

.hero-content h1 span {
    position: relative;
    display: inline-block;
    color: #ffffff;
}

/* The Thin Orange Underline */
.hero-content h1 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px; /* Adjust distance from text */
    width: 100%;
    height: 3px; /* Thickness of the line */
    
    border-radius: 2px;
    
    /* Reveal Animation: Lines slides in from the left */
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.5s; /* Wait for hero text to appear first */
}

@keyframes underlineReveal {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Adjusted Animation to keep the "Fit" while zooming */
@keyframes heroZoom {
    from { 
        transform: scale(1); /* Starts at natural "cover" fit */
    }
    to { 
        transform: scale(1.1); /* Subtle zoom in without breaking the layout */
    }
}

.hero-content .subtitle {
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 0.8rem;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Gallery Grid */
.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 40px;
}

.category-header {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.accent-line {
    width: 50px;
    height: 2px;
    background: var(--primary-orange);
}

.rooms-gallery-grid {
display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
    align-items: stretch; /* CHANGED: Forces cards in the same row to be equal height */
}

.room-gallery-card {
cursor: pointer;
    background: #fff;
    padding: 15px; 
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* ADDED: Ensures the card expands to match the tallest card */
}

.gallery-image-wrapper {
position: relative;
    width: 100%;
    /* This creates a consistent 4:3 or 16:9 box that NEVER changes size */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #1a1a1a; /* Placeholder color while loading */
    border-radius: 2px;
}

.gallery-image-wrapper img {
width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the box without stretching */
    display: block;
    transition: transform 1.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.gallery-overlay {
position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(30, 30, 30, 0.4); /* Dark gray, matching the card overlay request */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Smooth fade in */
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 2;
}

.room-gallery-card:hover .gallery-overlay { opacity: 1; }

/* Add this if you don't already have it in style.css */
.btn-reserve {
    background-color: var(--primary-orange, #ff8c00);
    color: white !important;
    padding: 10px 25px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.btn-reserve:hover {
    background-color: #e07b00; /* Slightly darker orange */
}

.view-details {
color: #fff;
    border: 1px solid #fff;
    padding: 12px 25px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* 1. Target the room-brief specifically to kill the orange */
.gallery-info .room-brief {
    color: #555555 !important; /* A sophisticated dark grey */
    transition: color 0.3s ease;
    margin-bottom: 8px;
}

/* 2. Target the Price specifically */
.gallery-info .price {
    color:var(--primary-orange); /* Deep black/charcoal for the price */
    font-weight: 600;
    letter-spacing: 1px;
}

/* 3. Luxury Hover Effect */
.room-gallery-card:hover .room-brief,
.room-gallery-card:hover h3 {
    color: #555555 !important; /* Your signature gold */
}

.gallery-info {
padding: 25px 0 0 0;
    display: flex; /* CHANGED: Was previously set to 'block' */
    flex-direction: column;
    flex-grow: 1; /* ADDED: Tells this section to fill all remaining space */
}

.gallery-info h3 {
margin: 0;
margin-top: 20px;
font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    letter-spacing: 1px;
    white-space: nowrap; /* Prevents text from wrapping and pushing price down */
    color: var(--dark);
    text-transform: uppercase;
}

.room-brief {
font-family: 'Inter', sans-serif;
    font-style: italic;
    color: black;
    font-size: 0.95rem;
    line-height: 1.8;
    flex-grow: 1; /* ADDED: Expands to push the element below it (the price) to the very bottom */
    margin-bottom: 15px;
}

.price {
font-family: 'Inter', sans-serif;
    color: var(--primary-orange) !important;
    font-size: 0.85rem;
    letter-spacing: 2px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 0 !important; /* CHANGED: Removed the hardcoded top margin so flexbox can handle the spacing */
}

.gallery-info p {
margin: 8px 0 0 0;
    font-size: 1rem;
    color: var(--primary-orange);
    font-weight: 700;
    letter-spacing: 1px;
}

/* LIGHTBOX SYSTEM */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    z-index: 3000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.4s ease;
}

.lightbox-wrapper {
display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 1100px;
    background: white;
    /* This ensures it stays on screen and scrolls if the text is long */
    max-height: 90vh; 
    overflow-y: auto; 
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}


.close-lightbox {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 9000;
    transition: all 0.3s ease;
}

/* --- 4. PREVENT OVERLAP --- */
.lightbox-main-view {
display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Ensure the container height matches the image or is flexible */
    min-height: 400px; 
    background: #ffffff !important; /* Forces a solid white background */
    border-top: none !important;    /* Removes any top border gradients */
    border-bottom: none !important; /* Removes any bottom border gradients */
    padding: 0 !important;          /* Removes spacing that might show the background */
    overflow: hidden;
}

    #lightbox-img {
width: 100%;
    height: 100%;
    /* 'cover' will fill the entire white area. 
       Use 'contain' only if you want to see the whole photo with bars. */
    object-fit: cover; 
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px; /* Optional: adds a soft professional touch */
    margin: 0 !important;
}


/* --- Clean Lightbox Caption --- */
.lightbox-caption {
    padding: 35px 40px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative; /* Essential for counter positioning */
}

.caption-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertical alignment for title and button */
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 5px;
}

#lightbox-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #1a1a1a;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Amenities & Counter Alignment --- */
.caption-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Keeps counter at bottom right */
    min-height: 100px; /* Ensures space for the list */
}

.caption-left {
    min-width: 180px;
}

.caption-left h2 {
    color: #1a1a1a;
    font-family: 'Playfair Display', serif;
    letter-spacing: 1px;
    font-size: 1.1rem;
    margin: 0;
    text-transform: uppercase;
}

.caption-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

#lightbox-desc {
    white-space: pre-line; /* This makes the \n create actual line breaks in the browser */
    line-height: 1.8;
    text-align: left; /* Bullets look best left-aligned */
    display: inline-block; /* Helps with centering if needed */
}
.close-lightbox:hover { 
background: rgba(255, 140, 0, 0.2); /* Subtle orange tint on hover */
    color: #ffffff;
    transform: rotate(90deg) scale(1.1);
    border-color: var(--primary-orange);
 }


/* Specific targeting for the room description */
.room-brief {
    color: #666666; /* Example: A soft grey for readability */
    font-size: 0.95rem; /* Optional: adjust size to maintain elegance */
    line-height: 1.6;   /* Optional: adds breathing room between lines */
}

/* If you want to use a gold accent to match the "The Glend" branding */
.room-gallery-card:hover .room-brief {
    transition: color 0.3s ease;
}

/* --- Navigation & Close --- */
.nav-btn {
position: absolute;
    top: 50%;
    transform: translateY(-50%);
/* Luxury Glass Effect: Light & Sophisticated */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #ffffff !important;

    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 8000;

    /* Smooth transition for all properties */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    
    /* Initial subtle shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; }

/* --- 2. The Hover Glow --- */
.nav-btn:hover {
    /* Transitions to your luxury gold or orange */
    background: var(--gold, #c5a059); 
    border-color: #ffffff;
    
    /* Scale up and add a glow */
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.4);
}

/* --- 3. Active (Click) State --- */
.nav-btn:active {
    transform: translateY(-50%) scale(0.95);
    background: #1a1a1a; /* Darker pulse when clicked */
}

/* --- Progress Bar (Optional Tweak) --- */
.lightbox-progress-container {
    background-color: rgba(0,0,0,0.05); /* Lighter track */
}

/* Add this to style the image container itself */
.image-stage {
display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5000;
    /* Remove the white background and hard shadow that causes the "frame" effect */
    background: transparent !important;
    box-shadow: none !important; 
    width: 100%;
}

.prev { left: 0; }
.next { right: 0; }

.image-counter {
font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #ccc; /* Subtle gray */
    font-size: 0.9rem;
    letter-spacing: 3px;
    padding-bottom: 5px;
}

.amenities-row {
display: flex;
    flex-direction: column;
    gap: 8px;
}

.amenities-row span {
    margin-right: 15px;
    font-size: 0.90rem;
    color: var(--grey);
    font-weight: 500;
    display: inline-block; /* Ensures the bullet and text stay together */
}

/* --- Master Book Now Button --- */
.btn-book-now {
    display: inline-block;
    background: var(--primary-orange) !important;
    color: var(--white) !important;
    padding: 14px 30px; 
    font-size: 0.85rem; 
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: var(--transition-fast);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-book-now:hover {
    background: var(--dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* --- Progress Bar --- */
.lightbox-progress-bar {
    height: 3px;
    background: var(--primary-orange);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
}

/* Ensure the image doesn't "jump" when changing */
#lightbox-img {
    width: 100%;
    height: 400px;
    /* Limit height to 60% of the screen so the text stays visible below it */
    max-height: 60vh; 
    background-color: #f9f9f9;
    display: block;
    object-fit: cover; /* This is the key: it fills the space without white bars */
    object-position: center; /* Keeps the middle of the room in view */
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- The Main Stage (Image Area) --- */
.lightbox-main-view {
position: relative;
background: #fff;
    overflow: hidden;
    display: block;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.premier-king-text-container {
    padding-top: 20px; /* Gives the text some breathing room now that the bar is gone */
}

/* Add to rooms.css */
.rooms-intro {
    text-align: center;
    padding: 100px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.intro-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    line-height: 1.4;
    color: #333;
}

.divider-gold {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 30px auto;
}

/* --- Shrinking Navbar Logic (UPDATED) --- */
.rooms-nav {
height: 100px;
    background: rgba(255, 255, 255, 0.8); /* CHANGED: Solid white from the start */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* ADDED: Soft shadow for depth since it's now solid */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(15px); /* Keeps the premium feel when scrolling over content */
}

/* State when scrolling down */
.rooms-nav.shrunk {
 height: 70px;
    background: rgba(255, 255, 255, 0.98); /* Slightly more opaque on scroll */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Deeper shadow on scroll */
}

.rooms-nav.shrunk .logo img {
    height: 45px; /* Logo shrinks too */
}

/* --- Desktop Link Aesthetics --- */
@media (min-width: 769px) {
    .nav-links {
        display: flex;
        gap: 35px;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .nav-links li a {
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem; /* Small & sophisticated */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px; /* This creates the "luxury" airy feel */
        color: var(--dark);
        text-decoration: none;
        transition: var(--transition-fast);
    }

    .nav-links li a:hover {
        color: var(--primary-orange);
    }
}

/* --- Reveal Animation Styles --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Adding staggered delay for grid items */
.rooms-gallery-grid .room-gallery-card:nth-child(2) {
    transition-delay: 0.2s;
}

/* --- Aesthetic Touches --- */
.hero-content h1 {
    overflow: hidden; /* For a reveal effect on the text itself */
}

.hero-content h1 span {
    display: inline-block;
    animation: sideSlide 1.5s ease-out;
}

@keyframes sideSlide {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Image Parallax-like effect on hover */
.gallery-image-wrapper img {
width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* REMOVED: Initial tiny rotate */
    
    /* UPDATED: A slower, more luxurious transition curve */
    transition: transform 1.5s cubic-bezier(0.2, 1, 0.3, 1), 
                filter 0.5s ease;
    
    backface-visibility: hidden; /* Fixes potential rendering blur in Chrome/Safari */
}

.room-gallery-card:hover img {
/* UPDATED: Simple, graceful 8% zoom */
    transform: scale(1.08);
    
    /* Subtle brightness dip to make the white text pop */
    filter: brightness(0.9);
}

/* Lightbox Animation */
.lightbox {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Back to Top Button Styling --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #ff8c00; /* Use your primary orange variable if available */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 4000; /* Ensure it is above the new Lightbox (which is 3000) */
    
    /* Initially Hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* This class is toggled by your JS on scroll */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
 background-color: #333;
    transform: translateY(-5px);
}

.back-to-top svg {
stroke: white;
}

.back-to-top:hover svg {
    transform: translateY(-2px); /* Slight arrow bounce on hover */
}

/* Common Styles */
.btn-scroll-top, .btn-messenger {
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 1. Scroll Up Button */
.btn-scroll-top {
    width: 45px;
    height: 45px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--dark);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.btn-scroll-top svg { width: 20px; height: 20px; }

.btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-scroll-top:hover {
    background: var(--dark);
    color: var(--white);
}

/* 2. Messenger Button */
.btn-messenger {
    background: var(--primary-orange);
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 50px; /* Pill shape is friendlier for chat */
    gap: 10px;
}

.btn-messenger svg { width: 22px; height: 22px; }

.messenger-text {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Reveal text when guest hovers OR on mobile it stays visible */
.btn-messenger:hover .messenger-text {
    max-width: 120px;
}

.btn-messenger:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.4);
}

/* --- 10. Main Footer (White Theme) --- */
.main-footer {
    background-color: var(--white);
    color: var(--dark);
    padding: 80px 8% 30px;
    border-top: 1px solid #f0f0f0;
    margin-top: 100px;
}

.footer-grid {
    display: grid;
    /* Adjusted to 4 columns: Brand, Contact, Social, and Map gets the most space */
    grid-template-columns: 1.2fr 1fr 1fr 1.5fr; 
    gap: 40px;
    margin-bottom: 60px;
    align-items: start;
}

/* Brand Section & Logo */
.footer-brand .footer-logo {
    height: 100px;
    width: auto;
    filter: saturate(1.1);
    transition: var(--transition-smooth);
    margin-bottom: 20px;
}

.footer-brand .footer-logo:hover {
    transform: translateY(-3px);
    filter: saturate(1.3) drop-shadow(0 5px 15px rgba(255, 107, 0, 0.15));
}

.footer-brand p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.2px;
    max-width: 280px; /* Prevents text from stretching too wide */
}

/* Headings (Unified style for all sections) */
.footer-contact h4, 
.footer-social h4, 
.footer-map h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    font-weight: 700;
    margin-bottom: 25px;
    font-family: 'Inter', sans-serif;
}

/* Contact List */
.footer-contact ul { list-style: none; padding: 0; }

.footer-contact li {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.footer-contact li a, 
.footer-contact li p {
    color: #444;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition-fast);
}

.footer-contact li a:hover {
    color: var(--primary-orange);
}

.footer-contact svg {
    min-width: 18px;
    width: 18px;
    height: 18px;
    color: var(--primary-orange);
}

/* --- Footer Social Links --- */
.social-list {
    list-style: none;
    padding: 0;
}

.social-list li {
    margin-bottom: 15px;
}

.social-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #555; /* Changed from #bbb to #555 for visibility on white bg */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.social-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.social-list a:hover {
    color: var(--primary-orange);
    transform: translateX(5px);
}

/* Map Container */
.map-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    filter: grayscale(0.2);
    transition: all 0.5s ease;
    height: 180px; /* Adjusted height for 4-column layout */
    width: 100%;
}

.map-container:hover {
    filter: grayscale(0);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.8rem;
    color: #999;
}

/* --- Responsive Footer --- */
@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2x2 Grid for Tablets */
        gap: 40px;
    }
}

/* --- Hamburger Styling --- */
.hamburger {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    z-index: 1001;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background-color: #1a1a1a;
    transition: all 0.3s ease;
    border-radius: 2px;
}

    /* Transform Hamburger to 'X' when active */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }


/* Class to hide the loader via JS */
#loading-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.lightbox-caption {
    padding: 30px 40px;
    background: #ffffff;
    /* Ensure it doesn't shrink to zero height */
    flex-shrink: 0; 
}

    .caption-header {
        flex-direction: column;
        align-items: flex-start;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    #lightbox-title {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    /* 4. Fix Amenities and Counter Alignment */
    .caption-footer {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        gap: 15px;
    }

    .amenities-row {
        width: 100%;
        border-top: 1px solid #eee;
        padding-top: 15px;
        gap: 6px;
    }

    .amenities-row span {
        font-size: 0.85rem;
        display: block; /* Each amenity gets its own line */
        margin-bottom: 4px;
        color: #444;
    }

    /* 5. Counter and Button Positioning */
    .image-counter {
display: block;
        position: absolute;
        bottom: 10px;
        right: 15px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        z-index: 10;
    }

/* ==========================================================================
   Responsive Overrides for Mobile & Tablet
   ========================================================================== */

/* --- 1. Tablet & Large Phones (Max 992px) --- */
@media (max-width: 992px) {
    .rooms-hero { height: 60vh; }
    .hero-content h1 { font-size: 2.8rem; }
    .hero-content { padding: 30px 40px; }
}

/* --- 2. Standard Mobile & iPhone 14 Pro Max (Max 768px) --- */
@media (max-width: 768px) {
    /* Navbar & Hero */
    .rooms-nav { padding: 0 5%; height: 80px; }
    .hero-content h1 { font-size: 2.2rem; }
    
    /* Gallery Grid: Switch to 1 Column */
    .rooms-gallery-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .gallery-container { padding: 60px 20px; }

    /* --- LIGHTBOX CENTERED ALIGNMENT FIX --- */
    .lightbox-wrapper {
        width: 95%;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .lightbox-caption {
        padding: 30px 20px;
        text-align: center; /* Centers all inline-block text labels */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers the button and amenities list */
    }

    .caption-header {
        flex-direction: column;
        align-items: center; /* Centers Room Name */
        border-bottom: none;
        padding-bottom: 10px;
        width: 100%;
    }

    #lightbox-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
        text-align: center;
    }

    /* Amenities & Labels Centering */
    .caption-footer {
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: auto;
        gap: 20px;
    }

    .amenities-row {
        align-items: center; /* Centers bullet points */
        border-top: 1px solid #eee;
        padding-top: 20px;
        width: 100%;
    }

    .amenities-row span {
        margin: 0;
        text-align: center;
    }

    /* Button Centering Fix */
    .btn-book-now {
        width: 100%;
        max-width: 320px; /* Looks better on larger iPhones */
        margin: 0 auto;
    }

    /* Image Counter Centering */
    .image-counter {
        text-align: center;
        margin-top: 15px;
        position: static; /* Remove absolute positioning if it was interfering */
    }

    /* Nav Buttons: Make them thumb-friendly but slightly smaller */
    .nav-btn {
        width: 45px;
        height: 45px;
        top: 40%;
    }

        .footer-grid {
        grid-template-columns: 1fr; /* Single column for Mobile */
        text-align: center;
        gap: 50px;
    }
    
    .footer-brand p, 
    .footer-contact li, 
    .social-list li a {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }
    
    .footer-brand .footer-logo {
        margin: 0 auto 20px;
    }

    .footer-brand p {
        max-width: 100%;
    }

        .hamburger {
        display: flex; /* Show the hamburger */
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Start off-screen */
        width: 100%;
        height: 100vh;
        background: white;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        
    }

        /* 2. Adjust the Image Area */
    .lightbox-main-view {
        height: 35vh; /* Smaller height for small phones */
min-height: 250px;
        padding: 0;
        cursor: grab;
    }

    #lightbox-img {
        height: 100%;
        width: 100%;
        object-fit: contain; 
    }

    .nav-links.active {
        right: 0; /* Slide in */
    }

    /* 1. Target the list items, but NOT the very last one */
    .nav-links li:not(:last-child)::after {
        content: "✦";
        display: block; /* Puts the symbol on its own line between links */
        color: var(--gold, #c5a059); /* Uses your luxury gold */
        font-size: 1rem;
        margin-top: 20px; /* Space above the star */
        margin-bottom: 10px; /* Adjusts the gap for the next link */
        opacity: 0.6;
        text-align: center;
        font-family: serif; /* Ensures the symbol looks elegant */
    }

    /* 2. Optional: Adjust the link spacing to accommodate the star */
    .nav-links li a {
        display: inline-block;
        padding: 10px 0;
    }
}

/* --- 3. Extra Small Devices (Max 480px) --- */
@media (max-width: 480px) {
    .hero-content { padding: 20px; border-radius: 10px; }
    .hero-content h1 { font-size: 1.8rem; }
}
    .hero-content .subtitle { letter-spacing: 4px; font-size: 0.7rem; }

    #lightbox-img {
        max-height: 50vh; /* Give more room for text content */
    }

    .close-lightbox {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }