/* Mobile Applied Filters Styles */

/* Hide original applied filters on mobile/tablet */
@media (max-width: 1000px) {
    .applied-filters-container {
        display: none !important;
    }
}

/* Mobile Applied Filters - Now positioned above search, not fixed */
@media (max-width: 1000px) {
    .mobile-applied-filters-container {
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 15px;
        background-color: #fff;
        /* Removed fixed positioning - now scrolls naturally with content */
    }
    
    /* Mobile Applied Filters in Drawer */
    .drawer-body .mobile-applied-filters-container {
        padding: 10px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 0px;
        background-color: #fff;
    }
    
    .mobile-applied-filters-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .mobile-applied-filters-tags .filter-tag {
        display: inline-flex;
        align-items: center;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 16px;
        padding: 6px 12px;
        margin: 3px;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
        gap: 6px;
    }
    
    .mobile-applied-filters-tags .filter-tag:hover {
        background-color: #e9e9e9;
        border-color: #ccc;
    }
    
    .mobile-applied-filters-tags .filter-tag .remove {
        font-size: 16px;
        font-weight: bold;
        color: #666;
        margin-left: 4px;
    }
}

/* Hide mobile applied filters on desktop */
@media (min-width: 1001px) {
    .mobile-applied-filters-container {
        display: none !important;
    }
}

/* Ensure mobile applied filters show on all mobile devices including small phones */
@media (max-width: 455px) {
    .mobile-applied-filters-container {
        display: block !important;
    }
    
    .drawer-body .mobile-applied-filters-container {
        padding: 8px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 0px;
        background-color: #fff;
    }
    
    .mobile-applied-filters-tags .filter-tag {
        font-size: 12px;
        padding: 4px 8px;
        margin: 2px;
    }
}