.signage-container {
background: #000;
padding: 50px 20px;
border-radius: 10px;
text-align: center;
}

.preview-box {
margin-bottom: 30px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

#live-glow-text {
font-family: sans-serif;
font-size: 50px;
color: #fff;
text-transform: uppercase;
margin: 0;
/* High-intensity white LED glow */
text-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #fff;
}

.input-controls input {
padding: 12px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #444;
background: #222;
color: #fff;
width: 250px;
}

.input-controls button {
padding: 12px 25px;
font-size: 16px;
background: #fff;
color: #000;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin-left: 10px;
}

function updateSignPreview() {
// Get the input element and the display element
var input = document.getElementById(‘user-sign-input’);
var display = document.getElementById(‘live-glow-text’);

// If the user clears the box, show default text
if (input.value.trim() === “”) {
display.innerHTML = “YOUR TEXT”;
} else {
display.innerHTML = input.value;
}
}

function handlePurchase() {
var textValue = document.getElementById(‘user-sign-input’).value;
if (textValue.trim() === “”) {
alert(“Please enter text for your sign!”);
return;
}

// Replace 123 with your real WooCommerce Product ID
var productID = 123;
window.location.href = “/cart/?add-to-cart=” + productID + “&custom_text=” + encodeURIComponent(textValue);
}