/* --- 1. Global Variable Definitions (Root) --- */
:root {
    /* Light Mode Colors */
    --primary-color: #0d6efd;
    --nav-bg-scrolled: #2c3157;
    --body-bg: #f8f9fa;
    --text-main: #1a1d35;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --sun-color: #ffc107;
    --moon-color: #f1c40f;
    --summary-bg: #f8f9fa;
    --success-border: #198754;
}

/* --- 2. Applying Variables to Design --- */

body { 
    padding-top: 85px; 
    background-color: var(--body-bg); 
    color: var(--text-main);
    transition: all 0.3s ease;
}

/* Navbar Styling */
.navbar {
    position: fixed !important;
    top: 0; width: 100%; z-index: 1050;
    transition: all 0.4s ease;
    background-color: transparent;
}

.navbar.scrolled {
    background-color: var(--nav-bg-scrolled) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Theme Toggle Button and Icons */
#themeToggle {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50%; width: 40px; height: 40px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}

/* Sun Icon (Hidden in Light Mode) */
[data-bs-theme="light"] .sun-icon {
    display: none;
}

[data-bs-theme="light"] .moon-icon {
    display: block;
    color: var(--bg-body);
}

/* Form Inputs and Dropdowns (Fixing visibility issues) */
.form-control, .form-select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Fix for text disappearing inside Select Options */
.form-select option {
    background-color: var(--input-bg);
    color: var(--text-main);
}

/* Summary Box Styling */
.summary-box {
    background-color: var(--summary-bg) !important;
    color: var(--text-main) !important;
    border-left: 5px solid var(--success-border) !important;
    animation: fadeIn 0.5s ease-in-out;
}

.summary-box i {
    color: var(--primary-color) !important;
}

/* Booking Section Styling */
.Booking-section {
    min-height: 100vh;
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(200, 225, 255, 0.7)), 
                url('https://images.unsplash.com/photo-1571896349842-33c89424de2d?q=80&w=2000') fixed center/cover;
}

.booking-card {
    background: var(--card-bg);
    border-radius: 20px;
    border: none;
    color: var(--text-main);
}

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

/* --- Unified Mobile Menu Style (Rooms & Booking) --- */

@media (max-width: 991.98px) {
    .navbar-collapse {
        /* 1. Background and Box Styling */
        background-color: rgb(81, 81, 111); 
        border-radius: 20px;
        margin-top: 15px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        
        /* 2. Flexbox for perfect centering */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .navbar-nav {
        width: 100%;
        margin-bottom: 20px; /* Space before the theme icon */
    }

    .nav-item {
        width: 100%;
        padding: 8px 0;
    }

    .nav-link {
        font-weight: 600;
        font-size: 1.1rem;
        color: var(--bs-emphasis-color) !important;
    }

    /* 3. Theme Toggle Centering */
    #themeToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        margin: 0 auto; /* Center the circle itself */
    }
}

/* --- Enhanced Mobile Toggler Visibility --- */

/* 1. Style for Light Mode (Default) */
.navbar-toggler {
    /* Making the border darker and thicker for clarity */
    border: 2px solid rgba(0, 0, 0, 0.5) !important;
    padding: 0.4rem;
}

.navbar-toggler-icon {
    /* Using a high-contrast dark SVG for the hamburger lines */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Force hide on initial component load for mobile */
@media (max-width: 991.98px) {
    #navbarNav.show {
        display: none; /* Prevents it from appearing open on load */
    }
    
    /* Bootstrap handles display when toggled */
    #navbarNav.collapsing, #navbarNav.show {
        display: flex !important;
    }
}

/* --- Fix Mobile Menu Persistence (Pure CSS) --- */

@media (max-width: 991.98px) {
    /* Ensure the collapse is strictly hidden when not active */
    .navbar-collapse:not(.show) {
        display: none !important;
    }

    /* Force the menu to close during transition or page load */
    .collapsing {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }
}