@charset "UTF-8";
:root { --primary: #1882ff; --orange: #ff6d00; --dark: #0b132b; --white: #fff; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; transition: 0.3s; }

/* Top Bar */
.top-bar { background: var(--dark); color: #fff; padding: 10px 0; font-size: 13px; }
.top-bar-flex { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.top-auth a { color: #fff; font-weight: 500; }

/* Header */
.main-header { background: #fff; height: 80px; display: flex; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.logo img { height: 45px; display: block; }

.nav-list { display: flex; }
.nav-list li { margin: 0 15px; }
.nav-list li a { color: #333; font-weight: 500; font-size: 15px; }
.nav-list li a:hover { color: var(--primary); }

.header-right { display: flex; align-items: center; gap: 20px; }
.btn-bookings { background: var(--primary); color: #fff; padding: 10px 25px; border-radius: 30px; font-weight: 600; }

/* Mobile Menu Button */
.mobile-toggle { font-size: 22px; cursor: pointer; color: #333; display: none; }

/* Sidebar Design (Fixed) */
.mobile-sidebar { 
    position: fixed; top: 0; right: -300px; 
    width: 280px; height: 100vh; 
    background: #fff; z-index: 2000; 
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    padding: 30px 20px; display: flex; flex-direction: column; 
}
.mobile-sidebar.active { right: 0; }

.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.logo-sidebar { font-size: 22px; font-weight: bold; color: var(--dark); }
.logo-sidebar span { color: var(--primary); }
.close-sidebar { font-size: 24px; cursor: pointer; color: #333; }

.mobile-nav li { margin-bottom: 25px; }
.mobile-nav li a { color: #333; font-size: 17px; font-weight: 500; display: flex; align-items: center; gap: 15px; }
.mobile-nav li a i { color: var(--primary); width: 25px; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.btn-login { text-align: center; padding: 12px; border: 1px solid var(--primary); border-radius: 8px; color: var(--primary); font-weight: 600; }
.btn-register { text-align: center; padding: 12px; background: var(--primary); border-radius: 8px; color: #fff; font-weight: 600; }

.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; z-index: 1500; backdrop-filter: blur(3px); }
.sidebar-overlay.active { display: block; }

/* Responsive */
@media (max-width: 992px) {
    .desktop-only, .desktop-nav { display: none; }
    .mobile-toggle { display: block; }
}