/**
 * NAVBAR MOBILE ENHANCED UI
 * ==========================
 * Modern, polished navbar design for mobile view only
 * Improves appearance on all pages including category pages
 * MOBILE ONLY - No desktop changes
 */

/* Apply ONLY on mobile (max-width: 768px) */
@media (max-width: 768px) {

    /* ============================================
       NAVBAR CONTAINER - Enhanced Background
       ============================================ */

    .navbar {
        backdrop-filter: blur(20px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1),
            0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* ============================================
       NAV CONTAINER - Better Spacing
       ============================================ */

    .nav-container {
        padding: 10px 14px !important;
        gap: 10px !important;
    }

    /* ============================================
       TOP ROW (Logo) - Enhanced
       ============================================ */

    .nav-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0;
    }

    .nav-logo {
        /* font-size: 24px !important; REMOVED - using base 24px */
        font-weight: 900 !important;
        letter-spacing: -0.5px !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
        transition: transform 0.3s ease, filter 0.3s ease !important;
    }

    .nav-logo:active {
        transform: scale(0.97);
    }

    /* ============================================
       NAVIGATION TABS - Modern Redesign
       ============================================ */

    .nav-tabs {
        width: 100%;
        margin: 0 !important;
        padding: 8px 6px !important;
        gap: 6px !important;
        justify-content: space-between;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* ============================================
       TAB ITEMS - Enhanced Design
       ============================================ */

    .nav-tabs li {
        flex: 1;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-tabs li a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 11px 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative;
        overflow: hidden;
        letter-spacing: 0.2px;
        line-height: 1.2;
        min-height: 42px;

        /* Enhanced shadow for depth */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* Shine effect on tap */
    .nav-tabs li a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        transition: left 0.5s;
    }

    .nav-tabs li a:active::before {
        left: 100%;
    }

    /* Active state enhancement */
    .nav-tabs li a:active {
        transform: scale(0.96);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* ============================================
       ACTIVE TAB - Enhanced Indicator
       ============================================ */

    .nav-tabs a.active {
        font-weight: 700 !important;
        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35),
            0 2px 8px rgba(124, 58, 237, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        position: relative;
    }

    /* Bottom indicator line for active tab */
    .nav-tabs a.active::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
        height: 2px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    /* ============================================
       RESPONSIVE - Extra Small Screens
       ============================================ */

    @media (max-width: 480px) {
        .nav-container {
            padding: 8px 10px !important;
            gap: 8px !important;
        }

        /* .nav-logo font-size removed - keep 24px */

        .nav-tabs {
            padding: 6px 4px !important;
            gap: 4px !important;
            border-radius: 12px !important;
        }

        .nav-tabs li a {
            padding: 9px 6px !important;
            font-size: 12px !important;
            border-radius: 8px !important;
            min-height: 38px;
        }

        .nav-tabs a.active::after {
            width: 25%;
            height: 1.5px;
        }
    }

    /* ============================================
       EXTRA SMALL - Compact Mode
       ============================================ */

    @media (max-width: 360px) {
        /* .nav-logo font-size removed - keep 24px */

        .nav-tabs {
            padding: 5px 3px !important;
            gap: 3px !important;
        }

        .nav-tabs li a {
            padding: 8px 4px !important;
            font-size: 11px !important;
            min-height: 36px;
        }
    }

    /* ============================================
       SMOOTH ANIMATIONS
       ============================================ */

    .navbar,
    .nav-container,
    .nav-logo,
    .nav-tabs,
    .nav-tabs li a {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* ============================================
       ACCESSIBILITY - Touch Targets
       ============================================ */

    .nav-tabs li a {
        /* Ensure minimum 44x44 touch target */
        min-width: 44px;
        min-height: 44px;
    }

    @media (max-width: 360px) {
        .nav-tabs li a {
            min-width: 40px;
            min-height: 40px;
        }
    }
}

/* ============================================
   LANDSCAPE MODE - Optimize for horizontal space
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .nav-container {
        padding: 6px 12px !important;
        gap: 6px !important;
    }

    /* .nav-logo font-size removed - keep 24px */

    .nav-tabs {
        padding: 5px 8px !important;
    }

    .nav-tabs li a {
        padding: 8px 12px !important;
        min-height: 36px;
    }
}