/* Mobile Sidebar Filter Fixes */

@media (max-width: 768px) {

    /* CRITICAL: Ensure sidebar is visible and on top */
    .filters-sidebar-wrapper {
        background: #fff !important;
        z-index: 9999 !important;
    }

    .filters-sidebar-wrapper.active {
        left: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .filters-sidebar {
        padding: 1.5rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* CRITICAL: Make ALL filter content visible */
    .filters-sidebar * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Make sure all text is visible */
    .filter-section,
    .sidebar-header,
    .filter-group {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .filter-section h3,
    .sidebar-header h2,
    .filter-group label {
        color: #333 !important;
        font-weight: 600 !important;
        display: block !important;
    }

    .filter-section {
        margin-bottom: 1.5rem !important;
    }

    .filter-section h3 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .filter-section h3 i {
        color: #c24242 !important;
    }

    /* Form controls visibility */
    .form-control,
    .filter-group select,
    .filter-group input {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        color: #333 !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        font-size: 0.938rem !important;
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Buttons in sidebar */
    .filter-section .btn,
    .filter-group .btn {
        background: linear-gradient(135deg, #c24242 0%, #8a2e2e 100%) !important;
        color: #fff !important;
        border: none !important;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        margin-top: 0.5rem !important;
        display: block !important;
        width: 100% !important;
    }

    /* Checkbox and radio styling */
    .filter-option {
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
    }

    .filter-option input[type="checkbox"],
    .filter-option input[type="radio"] {
        margin-right: 0.5rem !important;
        width: 18px !important;
        height: 18px !important;
    }

    .filter-option label {
        color: #555 !important;
        font-size: 0.938rem !important;
        cursor: pointer !important;
    }

    /* Sidebar close button must be visible */
    .sidebar-close-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: none !important;
        border: none !important;
        font-size: 1.5rem !important;
        color: #666 !important;
        cursor: pointer !important;
    }
}