/* Mobile responsive styles for Filter & Search section */

@media (max-width: 767px) {
    /* Make filter sections more compact */
    .card-title {
        font-size: 1.1rem;
    }
    
    h6 {
        font-size: 0.9rem;
    }
    /* Button text for filter buttons on mobile */
    .btn-group .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.9rem;
    }
    
    .btn-group .btn-sm {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    /* Hide button text on very small screens, show only icons */
    @media (max-width: 400px) {
        .btn-group .btn i + span {
            display: none;
        }
        
        .btn-group .btn {
            padding: 0.375rem 0.5rem;
        }
    }
    
    /* Filter by level adjustments */
    .btn-group [data-level="advanced"] i:nth-child(2) {
        display: none; /* Hide the second star icon on small screens */
    }
    
    /* Sort buttons - truncate text for better fit on mobile */
    .btn-group [data-sort="duration-asc"],
    .btn-group [data-sort="duration-desc"] {
        max-width: 38%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .btn-group [data-sort="default"] {
        max-width: 24%;
    }
    
    /* Space between button groups */
    .row + .row {
        margin-top: 0.5rem;
    }
    
    /* Ensure buttons are evenly sized and properly spaced */
    .btn-group .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Make the search input take up appropriate space */
    .input-group {
        flex-wrap: nowrap;
    }
}

/* Additional adjustments for very small screens */
@media (max-width: 375px) {
    .card-body {
        padding: 1rem 0.75rem;
    }
}