.elementor-646 .elementor-element.elementor-element-0a05a3f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-646 .elementor-element.elementor-element-31aed94{--display:flex;--min-height:100px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-646 .elementor-element.elementor-element-0b65aa1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-646 .elementor-element.elementor-element-b96f8a3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-646 .elementor-element.elementor-element-73f1a19{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-646 .elementor-element.elementor-element-9c98ebd .elementor-button{background-color:var( --e-global-color-secondary );}/* Start custom CSS for container, class: .elementor-element-0b65aa1 */<script>
document.addEventListener("DOMContentLoaded", function() {
    // 1. Target the text inside the gift card
    const cardAmountDisplay = document.querySelector(".sg-amount");

    // 2. Target the buttons based on the classes we just added
    const btn50 = document.querySelector(".btn-50");
    const btn100 = document.querySelector(".btn-100");
    const customInput = document.querySelector(".custom-amount-input");

    // 3. Change text to £50 when the £50 button is clicked
    if (btn50) {
        btn50.addEventListener("click", function(e) {
            cardAmountDisplay.textContent = "£50";
        });
    }

    // 4. Change text to £100 when the £100 button is clicked
    if (btn100) {
        btn100.addEventListener("click", function(e) {
            cardAmountDisplay.textContent = "£100";
        });
    }

    // 5. Update text dynamically as they type in a custom amount (if applicable)
    if (customInput) {
        customInput.addEventListener("input", function(e) {
            // Strip out any letters/symbols the user might type by mistake, keeping only numbers
            let val = e.target.value.replace(/[^0-9.]/g, ''); 
            
            // If the field is empty, show £0, otherwise show the typed amount
            cardAmountDisplay.textContent = val ? "£" + val : "£0";
        });
    }
});
</script>/* End custom CSS */