/* ============================================
   COMPACT NAVBAR FOR SMALL MOBILE SCREENS
   - Sticky navbar at top of page (pushes content)
   - Navbar visible by default
   - Content never hides under navbar
   - Reduces navbar height for mobile
   - Only applies to screens ≤576px
   ============================================ */

/* Fixed header for DESKTOP screens */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9990 !important;
    transition: transform 0.3s ease !important;
}

/* Default: Hide mobile notification link, show desktop dropdown */
.notification-action-mobile {
    display: none !important;
}

.notification-action-desktop {
    display: flex !important;
}

/* Add padding to body to account for fixed header */
body {
    padding-top: 160px !important;
}

@media (max-width: 768px) {
    body {
        padding-top: 140px !important;
    }
}

/* Mobile-specific navbar - Fixed at top for all pages */
@media (max-width: 576px) {
    /* Add padding to body for fixed header */
    body {
        padding-top: 140px !important;
    }
    
    /* Header is FIXED at top - always visible */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9990 !important;
        transform: none !important;
        background: var(--card-bg, #fff) !important;
        transition: none !important;
    }
    
    /* When user scrolls down and clicks, show FIXED navbar overlay */
    .header.navbar-fixed-mode {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9995 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
        animation: slideDownNavbar 0.3s ease !important;
    }
    
    @keyframes slideDownNavbar {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Hide toggle indicator - not needed anymore */
    .navbar-toggle-indicator {
        display: none !important;
    }
}

@media (max-width: 576px) {
    /* Hide Room View button from navbar on mobile */
    .nav-room-view-desktop {
        display: none !important;
    }

    /* Hide Customer Support button from navbar on mobile */
    .nav-contact-desktop {
        display: none !important;
    }
    
    /* Show mobile notification link, hide desktop dropdown */
    .notification-action-mobile {
        display: flex !important;
    }
    
    .notification-action-desktop {
        display: none !important;
    }

    /* Reduce header-top padding */
    .header-top {
        padding: 0.5vh 0 !important;
        font-size: 1.4vh !important;
    }
    
    .header-top .container {
        padding: 0 2vw !important;
    }
    
    .header-top-left {
        display: none !important;
    }
    
    .header-top-right {
        gap: 1.5vw !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
    
    .header-top-right a,
    .header-top-right button {
        font-size: 1.3vh !important;
        gap: 0.8vw !important;
    }
    
    .header-top-right i {
        font-size: 1.2vh !important;
    }
    
    /* Auth Buttons - Compact for Mobile */
    .btn-login,
    .btn-register {
        padding: 0.6vh 2vw !important;
        font-size: 1.3vh !important;
        border-radius: 3vw !important;
    }
    
    .btn-logout {
        padding: 0.6vh 2vw !important;
        font-size: 1.3vh !important;
        border-radius: 3vw !important;
    }
    
    .auth-user-link {
        padding: 0.5vh 1.5vw !important;
        font-size: 1.3vh !important;
        border-radius: 2.5vw !important;
    }
    
    /* Reduce header-main padding */
    .header-main {
        padding: 1vh 0 !important;
    }
    
    .header-main .container {
        gap: 2vw !important;
        padding: 0 2vw !important;
    }
    
    /* Compact logo */
    .logo {
        gap: 1.5vw !important;
    }
    
    .logo-icon {
        width: 8vw !important;
        height: 8vw !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 2vh !important;
        border-radius: 1.5vw !important;
    }
    
    .logo-text {
        font-size: 2vh !important;
    }
    
    .logo-img {
        max-height: 4vh !important;
    }
    
    /* Compact search bar */
    .search-bar {
        margin-top: 1vh !important;
    }
    
    .search-input {
        padding: 1vh 2.5vw !important;
        font-size: 1.6vh !important;
    }
    
    .search-btn {
        padding: 1vh 3vw !important;
        font-size: 1.6vh !important;
    }
    
    /* Compact header actions */
    .header-actions {
        gap: 2vw !important;
    }
    
    .header-action {
        width: 9vw !important;
        height: 9vw !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 2vh !important;
    }
    
    .cart-count,
    .notif-count,
    .action-badge {
        width: 4vw !important;
        height: 4vw !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 1.2vh !important;
        top: -0.5vh !important;
        right: -0.5vw !important;
    }
    
    /* Compact navigation - REMOVE WHITE SPACE */
    .nav-main {
        padding: 0.8vh 0 !important;
        margin: 0 !important;
    }
    
    .nav-main .container {
        padding: 0 2vw !important;
        gap: 2vw !important;
        flex-wrap: nowrap !important;
    }
    
    /* Categories button - compact */
    .nav-categories {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-categories-btn {
        padding: 1vh 2.5vw !important;
        font-size: 1.6vh !important;
        gap: 1.5vw !important;
        white-space: nowrap !important;
    }
    
    /* Nav menu - remove white space */
    .nav-menu {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.5vw !important;
    }
    
    .nav-menu li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-menu a {
        padding: 1vh 2vw !important;
        font-size: 1.5vh !important;
        white-space: nowrap !important;
    }
    
    /* Nav right actions - hide on mobile to save space */
    .nav-right-actions {
        display: none !important;
    }
    
    /* Reduce container padding */
    .header .container {
        padding: 0 2vw !important;
    }
    
    /* Mobile menu button compact */
    .mobile-menu-btn {
        width: 9vw !important;
        height: 9vw !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 2vh !important;
    }
    
    /* Remove extra margins and line-height */
    .header * {
        line-height: 1.2 !important;
    }
    
    /* Remove ALL extra spacing in header */
    .header {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .header-top,
    .header-main,
    .nav-main {
        margin: 0 !important;
    }
    
    /* Categories dropdown - compact */
    .nav-categories-dropdown {
        max-height: 50vh !important;
        overflow-y: auto !important;
    }
    
    .nav-categories-dropdown a {
        padding: 1.2vh 3vw !important;
        font-size: 1.6vh !important;
    }
    
    /* Compact nav-contact support button */
    .nav-contact {
        padding: 0.8vh 2vw !important;
        gap: 1vw !important;
        font-size: 1.4vh !important;
    }
    
    .nav-contact i {
        font-size: 1.8vh !important;
    }
    
    .nav-contact span {
        font-size: 1.3vh !important;
    }
    
    .nav-contact strong {
        font-size: 1.4vh !important;
    }
}

/* Extra small mobile screens - 400px */
@media (max-width: 400px) {
    .header-top {
        padding: 0.4vh 0 !important;
        font-size: 1.2vh !important;
    }
    
    .header-main {
        padding: 0.8vh 0 !important;
    }
    
    .header-main .container {
        gap: 1.5vw !important;
    }
    
    .logo-icon {
        width: 7vw !important;
        height: 7vw !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 1.8vh !important;
    }
    
    .logo-text {
        font-size: 1.8vh !important;
    }
    
    .logo-img {
        max-height: 3.5vh !important;
    }
    
    .search-input {
        padding: 0.8vh 2vw !important;
        font-size: 1.5vh !important;
    }
    
    .search-btn {
        padding: 0.8vh 2.5vw !important;
        font-size: 1.5vh !important;
    }
    
    .header-action {
        width: 8vw !important;
        height: 8vw !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 1.8vh !important;
    }
    
    .header .container {
        padding: 0 1.5vw !important;
    }
    
    .nav-main {
        padding: 0.6vh 0 !important;
    }
    
    .nav-categories-btn {
        padding: 0.8vh 2vw !important;
        font-size: 1.5vh !important;
        gap: 1vw !important;
    }
    
    .nav-menu a {
        padding: 0.8vh 1.5vw !important;
        font-size: 1.4vh !important;
    }
    
    /* Auth buttons */
    .btn-login,
    .btn-register {
        padding: 0.5vh 1.5vw !important;
        font-size: 1.2vh !important;
    }
    
    .btn-logout {
        padding: 0.5vh 1.5vw !important;
        font-size: 1.2vh !important;
    }
    
    .auth-user-link {
        padding: 0.4vh 1.2vw !important;
        font-size: 1.2vh !important;
    }
    
    .mobile-menu-btn {
        width: 8vw !important;
        height: 8vw !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 1.8vh !important;
    }
}

/* Tiny screens - 340px */
@media (max-width: 340px) {
    .header-top {
        padding: 0.3vh 0 !important;
        font-size: 1.1vh !important;
    }
    
    .header-top .container {
        padding: 0 1vw !important;
    }
    
    .header-top-right {
        gap: 1vw !important;
    }
    
    .header-main {
        padding: 0.6vh 0 !important;
    }
    
    .header-main .container {
        gap: 1vw !important;
        padding: 0 1vw !important;
    }
    
    .logo {
        gap: 1vw !important;
    }
    
    .logo-icon {
        width: 6vw !important;
        height: 6vw !important;
        min-width: 22px !important;
        min-height: 22px !important;
        font-size: 1.5vh !important;
        border-radius: 1vw !important;
    }
    
    .logo-text {
        font-size: 1.6vh !important;
    }
    
    .logo-img {
        max-height: 3vh !important;
    }
    
    .search-bar {
        margin-top: 0.6vh !important;
    }
    
    .search-input {
        padding: 0.6vh 1.5vw !important;
        font-size: 1.4vh !important;
    }
    
    .search-btn {
        padding: 0.6vh 2vw !important;
        font-size: 1.4vh !important;
    }
    
    .header-actions {
        gap: 1.5vw !important;
    }
    
    .header-action {
        width: 7vw !important;
        height: 7vw !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 1.6vh !important;
    }
    
    .cart-count,
    .notif-count,
    .action-badge {
        width: 3.5vw !important;
        height: 3.5vw !important;
        min-width: 14px !important;
        min-height: 14px !important;
        font-size: 1vh !important;
    }
    
    .nav-main {
        padding: 0.5vh 0 !important;
    }
    
    .nav-main .container {
        padding: 0 1vw !important;
        gap: 1vw !important;
    }
    
    .nav-categories-btn {
        padding: 0.6vh 1.5vw !important;
        font-size: 1.3vh !important;
        gap: 0.8vw !important;
    }
    
    .nav-menu {
        gap: 0.3vw !important;
    }
    
    .nav-menu a {
        padding: 0.6vh 1vw !important;
        font-size: 1.3vh !important;
    }
    
    .btn-login,
    .btn-register {
        padding: 0.4vh 1.2vw !important;
        font-size: 1.1vh !important;
        border-radius: 2vw !important;
    }
    
    .btn-logout {
        padding: 0.4vh 1.2vw !important;
        font-size: 1.1vh !important;
    }
    
    .auth-user-link {
        padding: 0.3vh 1vw !important;
        font-size: 1.1vh !important;
    }
    
    .mobile-menu-btn {
        width: 7vw !important;
        height: 7vw !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 1.6vh !important;
    }
    
    .nav-categories-dropdown a {
        padding: 1vh 2vw !important;
        font-size: 1.4vh !important;
    }
}