jQuery(document).ready(function($){
    console.log('Custom details page script loaded');
    const btnPrice = $('input[name="zoddak-btn-price-color"]');
    const pricePreview = $('#pricePreview');
    const btnStage = $('input[name="zoddak-btn-stage-color"]');
    const stagePreview = $('#stagePreview');
    const bgFeatures = $('input[name="zoddak-icons-color"]');
    const featuresPreview = $('.icon-circle');
    const txtFeatures = $('input[name="zoddak-icons-txt-color"]');
    const ftTxtPreview = $('.ft-text');

    btnPrice.wpColorPicker({
        change:function(e,ui){
            const color = ui.color.toString();
            pricePreview.css('background-color', color);
        }
    })
    btnStage.wpColorPicker({
        change:function(e,ui){
            const color = ui.color.toString();
            stagePreview.css('background-color', color);
        }
    })
    txtFeatures.wpColorPicker({
        change:function(e,ui){
            const color = ui.color.toString();
            ftTxtPreview.css('color', color);
        }
    })
    bgFeatures.wpColorPicker({
        change:function(e,ui){
            const color = ui.color.toString();
            featuresPreview.css('background-color', color);
        }
    })
})