Voxel improve required fields

add_action('wp_head', 'custom_field_requirement_styles');
function custom_field_requirement_styles() {
    ?>
    <style>
        /* Style all required indicators first (excluding char counter) */
        .ts-form-group .is-required:not(.ts-char-counter),
        .ts-file-upload .is-required:not(.ts-char-counter),
        span.is-required:not(.ts-char-counter) {
            background-color: #8B0F0F1A !important;
            color: #8B0F0F !important;
            padding: 2px 10px !important;
            display: inline-block !important;
            border-radius: 4px !important;
        }

        /* Style character counter */
        .ts-char-counter {
            background-color: #0666351A !important;
            color: #066635 !important;
            padding: 2px 10px !important;
            display: inline-block !important;
            border-radius: 4px !important;
        }

        /* Hide only those marked as optional */
        .is-required[data-optional="true"]:not(.ts-char-counter) {
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
    </style>
    <?php
}

add_action('wp_footer', 'custom_field_requirement_script');
function custom_field_requirement_script() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        function handleRequirementLabels() {
            const requirementSpans = document.querySelectorAll('.is-required:not(.ts-char-counter)');
            requirementSpans.forEach(span => {
                if (span.textContent.includes('Optional')) {
                    span.setAttribute('data-optional', 'true');
                } else {
                    span.removeAttribute('data-optional');
                }
            });
        }

        // Initial call
        handleRequirementLabels();

        // Observer for dynamic content
        const observer = new MutationObserver(function(mutations) {
            handleRequirementLabels();
        });

        // Start observing
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
    </script>
    <?php
}