/* 
   Hotel Website Design System 
   Theme: Green & White (Nature/Luxury)
*/

:root {
    --primary-color: #2E5D4B; /* Deep Forest Green */
    --accent-color: #5C8D75; /* Soft Sage Green */
    --text-color: #333;
    --bg-color: #F9FBF9; /* Very light green tint / White */
    --white: #fff;
    --transition-speed: 0.3s;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    
    /* Bootstrap Overrides */
    --bs-primary: #2E5D4B; /* Force Bootstrap Primary to Green */
    --bs-success: #2E5D4B;
    --bs-body-font-family: 'Inter', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- iOS / Mobile Resets & Best Practices --- */
html {
    -webkit-text-size-adjust: 100%;
    /* Prevent font zooming on orientation change */
}

input,
textarea,
select,
button,
label {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* Remove iOS rounded corners */
    font-family: inherit; /* Prevent iOS system font injection */
    font-size: 1rem; /* Prevent auto-zoom on focus (needs 16px min) */
    color: inherit;
}

/* Specific Select Reset */
select {
    background-image: none; /* Remove default arrow */
}

/* Remove tap highlight */
a, button, .btn, input, select, textarea, div {
    -webkit-tap-highlight-color: transparent;
}

/* Disable Apple's auto-formatting of phone numbers/emails */
a[href^="tel"], 
a[href^="mailto"] {
    color: inherit; 
    text-decoration: none; 
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* --- Components --- */

.container {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--accent-color);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.btn:hover {
    background-color: transparent;
    color: var(--accent-color);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

/* --- Navigation --- */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: var(--primary-color); /* Transparent by default */
    transition: background-color var(--transition-speed), padding 0.3s;
}

.navbar.scrolled {
    background-color: var(--primary-color); /* Solid background when scrolled */
    padding: 15px 5%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 15px;
}

.nav-links a {
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    background-color: var(--primary-color); /* Green background box */
    padding: 10px 20px; /* Padding for box */
    border-radius: 5px; /* Rounded corners */
}

.nav-links a:hover {
    background-color: var(--accent-color); /* Lighter green on hover */
    transform: translateY(-2px);
}

/* .nav-links a:hover, .nav-links a.active {
    color: var(--accent-color);
} */

/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 7px; /* Position slightly above other menu items */
}

.dropdown .dropbtn {
    background-color: var(--primary-color); /* Green background box */
    padding: 13px 20px; /* Padding for box */
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    top: 100%;
    left: 0;
    padding: 10px 0;
    text-align: left;
}

.dropdown-content a {
    color: var(--text-color) !important; /* Override navbar white color */
    padding: 12px 16px;
    display: block;
    text-transform: none; /* Reset uppercase if inherited */
    background-color: transparent !important; /* Remove green box in dropdown */
    border-radius: 0 !important;
}

.dropdown-content a:hover {
    background-color: #f1f1f1 !important;
    color: var(--primary-color) !important;
    transform: none !important;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: var(--accent-color); /* Lighter green on hover */
    transform: translateY(-2px);
}

.mobile-menu-btn {
    display: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Responsive Navbar */
@media (max-width: 900px) {
    .navbar {
        padding: 15px 20px;
        background-color: var(--primary-color); /* Always solid on mobile */
    }

    .mobile-menu-btn {
        display: block; /* Show hamburger */
        z-index: 1001; /* Above menu */
    }

    .nav-links {
        position: fixed;
        top: 60px; /* Below navbar height */
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 0;
        transform: translateY(-150%);
        transition: transform 0.4s ease-in-out;
        z-index: 999;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        max-height: 80vh;
        overflow-y: auto;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background-color: transparent; /* Remove box style */
        border-radius: 0;
    }

    .nav-links a:hover {
        background-color: rgba(255,255,255,0.1);
        transform: none;
    }

    /* Dropdown in Mobile */
    .dropdown {
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    .dropdown .dropbtn {
        display: block;
        width: 100%;
        background-color: transparent;
        padding: 15px;
        border-radius: 0;
        color: var(--white);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .dropdown .dropbtn:hover {
        background-color: rgba(255,255,255,0.1);
        transform: none;
    }

    .dropdown-content {
        position: static;
        display: none; /* Keep hidden until hover/click - simpler for now to just show on hover or maybe CSS hover works on mobile tap often */
        width: 100%;
        background-color: rgba(0,0,0,0.1); /* Slightly darker */
        box-shadow: none;
    }
    
    .dropdown.active .dropdown-content {
        display: block; /* Show only on click via JS */
    }

    .dropdown-content a {
        color: var(--white) !important;
        background-color: transparent !important;
        padding-left: 20px; /* Indent */
    }
    
    .dropdown-content a:hover {
        background-color: rgba(255,255,255,0.05) !important;
        color: var(--accent-color) !important;
    }
}

/* --- Hero Section --- */

.hero {
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(asset/Hotel\ Uptown\ banner\ 1.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: 80px 20px 0 20px; /* Added top padding to account for fixed navbar */
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--white);
    animation: fadeInUp 1s ease-out;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1s ease-out 0.3s backwards;
}

.hero-content .btn {
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

/* --- Section Styles --- */

section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-title p {
    color: #666;
    max-width: 500px;
    margin: 0 auto;
}

/* --- Our Hotels Preview --- */

.hotels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.hotel-card {
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform var(--transition-speed);
    overflow: hidden;
}

.hotel-card:hover {
    transform: translateY(-10px);
}

.hotel-image {
    height: 250px;
    overflow: hidden;
}

.hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.hotel-card:hover .hotel-image img {
    transform: scale(1.1);
}

.hotel-info {
    padding: 30px;
    text-align: center;
}

.hotel-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.hotel-info p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.hotel-info .price {
    display: block;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* --- Check Availability Bar --- */

/* --- Check Availability Bar (Widget Style) --- */

.check-availability {
    background: transparent;
    margin-top: -50px; /* Overlap hero */
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}

.search-widget {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Spacing between pods */
    align-items: center;
    background: transparent;
    box-shadow: none;
}

.search-pod {
    background: var(--white);
    padding: 15px 20px;
    border-radius: 5px;
    flex: 1;
    min-width: 200px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80px;
    transition: transform 0.2s;
}

.search-pod:hover {
    transform: translateY(-2px);
}

.search-pod label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    color: #888;
}

.search-pod input,
.search-pod select {
    width: 100%;
    padding: 5px 0;
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    background: transparent;
    outline: none;
    cursor: pointer;
}

.search-btn-container {
    height: 80px;
    display: flex;
    align-items: center;
}

.search-btn {
    background-color: var(--accent-color); /* Bright Green as per image request */
    color: var(--white);
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0 40px;
    height: 100%;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.search-btn:hover {
    background-color: var(--white);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}



/* --- Custom Search Widget (No Bootstrap Grid) --- */
.custom-search-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

/* Custom Search Widget Positioning Fix */
.custom-search-item {
    box-sizing: border-box;
    /* Ensure relative positioning for dropdown anchoring */
    position: relative; 
}

/* Flex sizing mimicking cols */
.item-large {
    flex: 0 0 24%; /* Approx col-3 */
    width: 24%;
}
.item-small {
    flex: 0 0 16%; /* Approx col-2 */
    width: 16%;
}
.item-btn {
    flex: 0 0 16%;
    width: 16%;
}

.custom-pod {
    background: var(--white);
    padding: 12px 18px;
    border-radius: 6px;
    height: 100%;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* ... existing code ... */

/* Child Age Grid Styles */
.child-ages-container {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.child-ages-container.active {
    display: block;
}

.child-age-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.child-age-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #c00; /* Red border as per request/image */
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    background-color: #fff;
    cursor: pointer;
}

.child-age-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.2);
}


.custom-pod:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.pod-flex {
    flex-direction: row;
    align-items: center;
}

.icon-wrapper {
    margin-right: 12px;
    color: #ccc;
    font-size: 1.2rem;
    display: flex; /* Ensure icon centers */
}


/* Input constraints to prevent overflow */
.input-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Fix date icon overflowing */
    position: relative;
    max-width: 100%;
}

.custom-input::-webkit-calendar-picker-indicator {
    /* Optional: can hide default icon if we have our own, or just let it be. 
       If hiding: display: none; - but user might want the picker trigger.
       Let's just ensure it fits. */
    cursor: pointer;
}

.custom-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #aaa;
    margin-bottom: 2px;
    display: block;
    white-space: nowrap; 
}

.guest-display-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Guest Popup Styles */
.guest-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 350px; /* Wider for better layout */
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 20px;
    z-index: 1000;
    margin-top: 10px;
    border: 1px solid #eee;
}

.guest-popup.active {
    display: block;
}

.guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.guest-label span {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 2px;
}

.guest-counter {
    display: flex;
    align-items: center;
    gap: 15px;
}

.counter-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 5px; /* Square with slight radius like Booking */
    border: 1px solid #ccc;
    background: #fff;
    color: var(--primary-color);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.counter-circle-btn:hover {
    border-color: var(--primary-color);
    background-color: rgb(235, 250, 240);
}

.counter-value {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* Custom Inputs - Removing default styles */
.custom-input, 
.custom-select-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    background: transparent;
    font-family: inherit;
    min-width: 0; /* Flexbox fix */
}

/* Fix for mobile date picker interaction */
.custom-input[type="date"] {
    position: relative;
    z-index: 2; /* Ensure it is above underlying elements */
    min-height: 44px; /* Apple Human Interface Guidelines for touch targets */
    background: transparent; /* Keep transparent but clickable */
}

.custom-label {
    position: relative;
    z-index: 3; /* Label also high so click passes through via 'for' attribute or directly */
    cursor: pointer;
}

.input-wrapper {
    position: relative; /* Context for z-index */
    z-index: 1;
}

.custom-input::placeholder {
    color: #444;
    font-weight: 500;
}

/* Custom Search Button */
.custom-search-btn {
    width: 100%;
    height: 100%;
    min-height: 72px;
    background-color: #5C8D75; /* Using theme green */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.3s;
}

.custom-search-btn:hover {
    background-color: #2E5D4B; /* Darker green on hover */
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    /* Tablet: Stack layout to rows or 2-col grids if needed, currently stacking horizontal works for tablet? 
       Actually user wanted horizontal on tablet. Let's keep it row based but maybe wider?
       If space is tight, we might wrap. */
    .item-large, .item-small, .item-btn {
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Guest Popup Customizations */
#guest-popup {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    display: none; /* Hidden by default */
}

/* Active state for JS toggle */
#guest-popup.active {
    display: block !important;
}

/* Circular Counter Buttons (Cyan Outline matching image) */
.counter-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #4cc4c0; /* Cyan color */
    color: #4cc4c0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.counter-circle-btn:hover {
    background: #4cc4c0;
    color: #fff;
}

/* Radio button customization if needed */
.form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

/* Responsive */
@media (max-width: 991px) {
    .search-widget-container {
        margin-top: -30px;
        padding: 0 15px;
    }
}

/* --- Room Types Section --- */

.room-card {
    display: flex;
    background: var(--white);
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    max-width: 96%; /* Reduced width */
    margin-left: auto;
    margin-right: auto;
}

.room-card:hover {
    transform: translateY(-5px);
}

.room-image {
    flex: 1;
    min-width: 300px;
}

.room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-details {
    flex: 1.2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Pins content to left and makes button fit content */
}

.room-details h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.room-details .price {
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 20px;
    display: block;
}

.room-details p {
    color: #666;
    margin-bottom: 25px;
}

.amenities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.amenities-list li {
    font-size: 0.9rem;
    color: #555;
    display: flex;
    align-items: center;
}

.amenities-list li i {
    color: var(--accent-color);
    margin-right: 8px;
}

@media (max-width: 900px) {
    .room-card {
        flex-direction: column;
    }
    
    .room-image {
        height: 250px;
    }
}


/* --- Features/Why Choose Us & Core Values --- */

.features {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 100px 0; /* More spacing */
}

.features h2 {
    color: var(--white);
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers items in the row */
    gap: 40px;
    text-align: center;
}

.feature-item {
    flex: 1;
    min-width: 250px;
    max-width: 350px; /* Prevents them from getting too wide */
    padding: 20px;
    transition: transform 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item i {
    font-size: 3rem; /* Larger icons */
    color: var(--accent-color);
    margin-bottom: 25px;
    display: inline-block;
}

.feature-item h4 {
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.feature-item p {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.7;
}


/* --- Reviews Slider --- */

.reviews-section {
    background-color: #f9f9f9;
    padding: 80px 0;
    text-align: center;
    overflow: hidden; /* Hide overflow */
}

.review-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 0 40px; /* Space for arrows */
}

.review-card {
    display: none; /* Hidden by default */
    padding: 40px;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 8px;
    animation: fadeEffect 1s; /* Fading effect */
}

.review-card.active {
    display: block;
}

.review-content {
    font-style: italic;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 25px;
    position: relative;
}

.review-content::before {
    content: "\201C";
    font-family: serif;
    font-size: 4rem;
    color: var(--accent-color);
    position: absolute;
    top: -30px;
    left: -20px;
    opacity: 0.2;
}

.review-author h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.review-author span {
    color: #888;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10;
}

.slider-btn:hover {
    color: var(--accent-color);
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* Dots */
.dot-container {
    text-align: center;
    margin-top: 20px;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot.active, .dot:hover {
    background-color: var(--accent-color);
}

@keyframes fadeEffect {
    from {opacity: 0.4}
    to {opacity: 1}
}

/* --- Footer Enhanced --- */

footer {
    background-color: #111;
    color: var(--white);
    padding: 80px 0 30px;
    text-align: left; /* Changed from center */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 40px;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #aaa;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-col p {
    color: #aaa;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.social-links a {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--accent-color);
}

.copyright {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
}

/* --- Booking Modal --- */

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: var(--white);
    margin: 5% auto;
    padding: 40px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    animation: slideDown 0.4s;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    transition: color 0.3s;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.modal h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

@media (max-width: 600px) {
    .modal-form-grid {
        grid-template-columns: 1fr;
    }
    .form-group.full-width {
        grid-column: span 1;
    }
}

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

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


/* --- Hotel Top Section Layout --- */

.hotel-header-layout {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    padding-top: 20px; /* Ensure content doesn't hide behind navbar */
}

.gallery-section {
    flex: 2;
}

.sidebar-section {
    flex: 1;
    min-width: 300px;
}

.hotel-title-block {
    margin-bottom: 20px;
}

.hotel-title-block h1 {
    font-size: 2.2rem;
    margin-bottom: 5px;
}

.hotel-title-block p { 
    color: #666;
    font-size: 1rem;
}

/* --- Mosaic Gallery --- */

.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 10px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item.main-img {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.gallery-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.gallery-item:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.gallery-item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.gallery-item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.more-photos-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 900px) {
    .hotel-header-layout {
        flex-direction: column;
    }
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 150px;
    }
    .gallery-item.main-img {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .gallery-item:nth-child(2), .gallery-item:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }
    .gallery-item:nth-child(4), .gallery-item:nth-child(5) {
        display: none;
    }
}

/* --- Sidebar Widgets --- */

.sidebar-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.review-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.review-score {
    background: var(--primary-color);
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Square with slight radius like Booking.com */
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px; 
    border-bottom-right-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
}

.review-text h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.review-text span {
    font-size: 0.85rem;
    color: #666;
}

.sidebar-highlights h5 {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* --- Sidebar Review Slider --- */

.sidebar-review-slider {
    position: relative;
    overflow: hidden;
    min-height: 140px; /* Reserve space */
    margin-top: 15px;
}

.review-slide {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.review-slide.active {
    display: block;
}

.review-slide p {
    font-style: italic;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.review-author {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
    display: block;
    text-align: right;
}

.review-nav {
    display: flex;
    justify-content: flex-end;
    gap: 15px; /* Increased gap */
    margin-top: 20px; /* Increased margin */
    padding-top: 15px; /* Increased padding */
    border-top: 1px solid #eee;
}

.slider-btn {
    margin-top: 50px;
    background: none;
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.slider-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.booking-widget-small h3 {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-bottom: 5px;
}

.booking-widget-small .price-sub {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 20px;
    display: block;
}

/* --- Lightbox Gallery --- */

/* --- Lightbox Gallery (Booking.com Style) --- */

/* --- Lightbox Gallery (Booking.com Style) --- */

.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Dark Backdrop */
    /* JS sets display: block, so we center children via positioning or flex if we change JS. 
       We will use absolute centering for the card since JS sets block. */
}

.lightbox-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1300px;
    height: 90vh; /* Spaces on all sides */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lightbox-header {
    background: #fff;
    z-index: 10;
    padding: 15px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lightbox-title h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.lightbox-title p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.lightbox-actions .btn {
    padding: 10px 25px;
    font-size: 0.9rem;
    border-radius: 6px;
}

.close-lightbox {
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    margin-left: 20px;
    transition: color 0.2s;
    line-height: 1; /* Fix alignment */
}

.close-lightbox:hover {
    color: var(--accent-color);
}

.lightbox-container {
    display: flex;
    flex: 1; /* Take remaining height of card */
    overflow: hidden; /* Contain scrollbars */
}


/* Sidebar Navigation */
.lightbox-nav {
    width: 280px;
    background: #fdfdfd;
    border-right: 1px solid #eee;
    overflow-y: auto;
    padding: 20px;
}

.lightbox-nav h3 {
    font-size: 1rem;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.nav-category {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.nav-category:hover, .nav-category.active {
    background: #f0f7f4; /* Light green tint */
}

.nav-category.active .cat-name {
    color: var(--primary-color);
    font-weight: 700;
}

.cat-thumb {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
}

.cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-name {
    font-size: 0.95rem;
    color: #333;
}

/* Main Gallery Grid */
.lightbox-main {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background-color: #fff;
}

.gallery-section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.lightbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Masonry-ish */
    gap: 15px;
}

.grid-item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    height: 220px; /* Fixed height for uniformity */
}

.grid-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 900px) {
    .lightbox-container {
        flex-direction: column;
    }
    
    /* Hide specific location text on mobile */
    #lb-hotel-location {
        display: none;
    }

    .lightbox-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        display: block; /* Stack h3 and container vertical */
        padding: 10px;
    }

    /* Target the container we added in JS for scrolling */
    #lb-nav-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 15px; /* Spacing between items */
        padding-bottom: 5px; /* Space for scrollbar */
        -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
    }

    .nav-category {
        margin-right: 0; /* Gap handles spacing now */
        margin-bottom: 0;
        min-width: 150px;
        flex: 0 0 auto; /* Prevent shrinking */
    }

    .lightbox-nav h3 {
        margin-bottom: 10px; /* Space between title and scroll list */
        font-size: 0.9rem;
    }

    .lightbox-main {
        padding: 15px;
    }
    .lightbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Booking.com style review score badge */
.score-badge {
    background-color: var(--primary-color);
    color: white;
    padding: 8px;
    border-radius: 5px 5px 5px 0;
    font-weight: bold;
    display: inline-block;
}

/* --- Floating Call-to-Action Buttons --- */

.cta-buttons {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.cta-call {
    left: 20px;
}

.cta-whatsapp {
    right: 20px;
}

.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    color: var(--white);
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-btn:hover::before {
    width: 100%;
    height: 100%;
}

.cta-btn:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.cta-btn:active {
    transform: scale(1.05);
}

.cta-call .cta-btn {
    background: linear-gradient(135deg, #2E5D4B 0%, #5C8D75 100%);
    animation: pulse-call 2s infinite;
}

.cta-call .cta-btn:hover {
    background: linear-gradient(135deg, #5C8D75 0%, #2E5D4B 100%);
}

.cta-whatsapp .cta-btn {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    animation: pulse-whatsapp 2s infinite;
}

.cta-whatsapp .cta-btn:hover {
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
}

@keyframes pulse-call {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(46, 93, 75, 0.4), 0 0 0 0 rgba(92, 141, 117, 0.7);
    }
    50% {
        box-shadow: 0 6px 20px rgba(46, 93, 75, 0.4), 0 0 0 15px rgba(92, 141, 117, 0);
    }
}

@keyframes pulse-whatsapp {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    50% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
    }
}

.cta-btn i {
    position: relative;
    z-index: 1;
    transition: transform 0.3s;
}

.cta-btn:hover i {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .cta-call {
        left: 10px;
    }
    
    .cta-whatsapp {
        right: 10px;
    }
    
    .cta-btn {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .cta-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}