document.querySelectorAll('.star-rating').forEach(group => {
    const labels = [...group.querySelectorAll('label')];
    const refresh = () => {
        const checked = group.querySelector('input:checked');
        const value = checked ? Number(checked.value) : 0;
        labels.forEach((label, index) => label.classList.toggle('active', index < value));
    };
    group.addEventListener('change', refresh);
    labels.forEach((label, index) => {
        label.addEventListener('mouseenter', () => labels.forEach((l, i) => l.classList.toggle('hover', i <= index)));
        label.addEventListener('mouseleave', () => labels.forEach(l => l.classList.remove('hover')));
    });
    refresh();
});
