/* =========================================
   MOBILE DESIGN OVERRIDES (APP FEEL)
   ========================================= */
@media (max-width: 991px) {

    /* 1. Global & Header Fixes */
    body { background-color: #f8f9fa; padding-bottom: 60px; /* Space for Bottom Nav */ width: 100%; }
    
    .page-content { 
        margin-top: 60px; /* Header Height */
        padding-top: 55px; /* Search Bar Space */
    }
    
    .desktop-header { display: none !important; }

    /* 2. Mobile App Header */
    .mobile-header {
        display: flex !important; align-items: center; justify-content: space-between;
        height: 60px; padding: 0 10px; background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05); z-index: 1030;
    }
    .mobile-header .logo-area-item img { height: 30px; width: auto; }

    /* 3. Search Bar (App Pill Style) */
    .mobile-header .search-area {
        position: absolute; top: 60px; left: 0; width: 100%;
        background: white; padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 1020;
    }
    .mobile-header .search-area input {
        border-radius: 20px; background-color: #f1f2f4;
        border: none; height: 40px; font-size: 14px;
    }

    /* 4. Carousel */
    #mainCarousel {
        margin-top: 50px; /* Push below search bar */
        border-radius: 0 0 15px 15px; overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .carousel-item { height: 200px; }
    .carousel-item img { height: 100%; object-fit: cover; }

    /* 5. App-Like Category Grid (Circles) */
    .app-category-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 5px;
    }
    .app-category-item {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        background: transparent;
    }
    .app-category-item .cat-image-wrapper {
        width: 70px; height: 70px; border-radius: 50%;
        overflow: hidden; border: 2px solid #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 8px;
        background-color: #fff;
    }
    .app-category-item img { width: 100%; height: 100%; object-fit: cover; }
    .app-category-item .cat-title {
        font-size: 12px; font-weight: 600; color: #444; line-height: 1.2;
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0;
    }

    /* 6. Sidebar Drawer Mobile Fix */
    .ab-sidebar { z-index: 2000; }
    .ab-sidebar-content { width: 85% !important; max-width: 300px; }

    /* 7. BOTTOM NAVIGATION BAR */
    .mobile-bottom-nav {
        display: flex !important; justify-content: space-around;
        position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
        background-color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1040; padding-top: 8px; border-top: 1px solid #f0f0f0;
    }
    
    .mobile-bottom-nav .nav-item {
        display: flex; flex-direction: column; align-items: center;
        color: #999; font-size: 10px; width: 33.33%; /* CHANGED TO 33% for 3 Items */ text-decoration: none;
    }
    
    .mobile-bottom-nav .nav-item i { font-size: 24px; margin-bottom: 2px; stroke-width: 1.5; }
    
    .mobile-bottom-nav .nav-item.active { color: #48a82c; font-weight: 700; }
    .mobile-bottom-nav .nav-item.active i { stroke-width: 2.5; }
}