document.addEventListener('DOMContentLoaded', function () {

    const stepItems = document.querySelectorAll('.step-item');
    const stepContentPanels = document.querySelectorAll('.step-content-panel');

    if (stepItems.length > 0 && stepContentPanels.length > 0) {
        stepItems.forEach(step => {
            step.addEventListener('click', function () {
                const targetContentId = step.dataset.stepTarget;
                stepItems.forEach(s => s.classList.remove('active-step'));
                stepContentPanels.forEach(p => p.classList.remove('active-content')); 
                step.classList.add('active-step');
                const targetPanel = document.querySelector(targetContentId);
                if (targetPanel) {
                    targetPanel.classList.add('active-content');
                }
            });
        });

        const initialActiveStep = document.querySelector('.step-item.active-step');
        if (initialActiveStep) {
            const initialTargetContentId = initialActiveStep.dataset.stepTarget;
            const initialTargetPanel = document.querySelector(initialTargetContentId);
            if (initialTargetPanel && !initialTargetPanel.classList.contains('active-content')) {
                 stepContentPanels.forEach(p => p.classList.remove('active-content'));
                 initialTargetPanel.classList.add('active-content');
            }
        }
    };
});