/* Mobile Responsive Utilities for Filter System */

/* Touch-friendly button sizing */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile filter specific styles */
@media (max-width: 991.98px) {
    /* Hide desktop sidebar completely on mobile */
    .products-page .primary-sidebar {
        display: none !important;
    }
    
    /* Make main content full width on mobile */
    .products-page .col-lg-4-5 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Mobile filter button styling */
    .mobile-filter-container {
        padding: 0 15px;
        margin-bottom: 15px;
    }
    
    /* Adjust shop product filter for mobile */
    .shop-product-fillter {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .shop-product-fillter .totall-product {
        order: 1;
    }
    
    .shop-product-fillter .sort-by-product-area {
        order: 2;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    /* Active filters mobile styling */
    .active-filters {
        padding: 15px;
        margin-bottom: 15px !important;
    }
    
    .active-filters .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    .filter-tag {
        font-size: 13px !important;
        padding: 6px 12px !important;
        margin: 2px !important;
    }
    
    /* Product grid mobile optimization */
    .product-grid .col-lg-1-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 20px;
    }
    
    /* Pagination mobile styling */
    .pagination-area {
        padding: 0 15px;
        text-align: center;
    }
    
    .pagination-area nav {
        display: flex;
        justify-content: center;
    }
}

/* Extra small mobile devices */
@media (max-width: 575.98px) {
    .products-page .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .mobile-filter-container {
        padding: 0 10px;
    }
    
    .shop-product-fillter {
        padding: 10px;
    }
    
    .active-filters {
        padding: 10px;
    }
    
    /* Single column on very small screens */
    .product-grid .col-lg-1-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Smaller filter tags on tiny screens */
    .filter-tag {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}

/* Tablet specific adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mobile-filter-container {
        display: flex;
        justify-content: flex-start;
        padding: 0 20px;
    }
    
    .shop-product-fillter {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Three columns on tablet */
    .product-grid .col-lg-1-5 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

/* Desktop and larger - ensure desktop layout is preserved */
@media (min-width: 992px) {
    .mobile-filter-container {
        display: none !important;
    }
    
    .products-page .primary-sidebar {
        display: block !important;
    }
    
    .products-page .col-lg-4-5 {
        width: auto !important;
        flex: auto !important;
        max-width: none !important;
    }
}

/* Focus states for accessibility */
.mobile-filter-button:focus,
.filter-drawer-header .close-button:focus,
.category-item:focus {
    outline: 2px solid #be1e2e;
    outline-offset: 2px;
}

/* Smooth transitions for drawer */
.mobile-filter-drawer,
.mobile-filter-backdrop {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Prevent text selection on filter UI elements */
.mobile-filter-button,
.category-item,
.filter-drawer-header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Loading state styles */
.mobile-filter-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Animation for filter badge */
.filter-badge {
    animation: badge-pulse 1s ease-in-out;
}

@keyframes badge-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}