<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        function filterExperiences() {
            const searchText = $('#searchInput').val().toLowerCase();
            const showOnlyFree = $('#freeOnlyCheckbox').is(':checked');

            $('.experience-card').each(function() {
                const name = $(this).data('name');
                const isFree = $(this).data('free') === true || $(this).data('free') === 'true';

                const matchesSearch = name.includes(searchText);
                const matchesFree = !showOnlyFree || isFree;

                if (matchesSearch && matchesFree) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        $('#searchInput').on('input', filterExperiences);
        $('#freeOnlyCheckbox').on('change', filterExperiences);

        $('#searchInput').on('focus input', function() {
            const $box = $(this).closest('.search-box');
            if ($(this).val().trim() !== '') {
                $box.addClass('focused');
            } else {
                $box.removeClass('focused');
            }
        });

        $('#searchInput').on('blur', function() {
            const $box = $(this).closest('.search-box');
            if ($(this).val().trim() === '') {
                $box.removeClass('focused');
            }
        });
    });
</script>