Custom Form Field Requirement Indicators & Character Counter Styling

add_action('wp_head', 'custom_field_requirement_styles');
function custom_field_requirement_styles() {
?>

/* 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) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}

<?php
}

add_action('wp_footer', 'custom_field_requirement_script');
function custom_field_requirement_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 
});
});

<?php
}