/* Mobile Categories and Match Filters Fix
 * This file ensures proper display on mobile devices
 * Load this after main CSS to override any cached styles
 */

/* Force display for categories wrapper on mobile */
@media screen and (max-width: 768px) {
    .categories-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 50px !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    .categories-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .category-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
    }
    
    .category-icon-wrapper,
    .category-icon,
    .category-name {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .category-name {
        display: block !important;
    }
    
    /* Match filters compact */
    .match-filters-compact {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
    }
    
    .match-filter-compact {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 !important;
    }
    
    .match-filter-compact i,
    .match-filter-compact span {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
    .categories-wrapper {
        padding: 8px 6px !important;
    }
    
    .match-filters-compact {
        padding: 4px !important;
    }
}

/* Very small devices */
@media screen and (max-width: 360px) {
    .categories-wrapper {
        padding: 6px 4px !important;
    }
    
    .match-filters-compact {
        padding: 3px !important;
    }
}