Popup Form with Trigger Delay

<div id="popupOverlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center">
  <div style="background:#fff;border-radius:12px;padding:30px;max-width:400px;width:90%;position:relative">
    <button onclick="closePopup()" style="position:absolute;top:10px;right:15px;border:none;font-size:22px;cursor:pointer;background:none">&times;</button>
    <h3>Get 20% Off!</h3>
    <p>Subscribe to our newsletter for exclusive deals.</p>
    <form onsubmit="submitPopup(event)">
      <input type="email" placeholder="Enter your email" required style="width:100%;padding:10px;margin:10px 0;border:1px solid #ddd;border-radius:6px">
      <button type="submit" style="width:100%;padding:12px;background:#6366f1;color:#fff;border:none;border-radius:6px;cursor:pointer">Subscribe</button>
    </form>
  </div>
</div>
<script>
function showPopup() {
  if (document.cookie.includes("popup_dismissed=true")) return;
  document.getElementById("popupOverlay").style.display = "flex";
}
function closePopup() {
  document.getElementById("popupOverlay").style.display = "none";
  document.cookie = "popup_dismissed=true;max-age=86400;path=/";
}
function submitPopup(e) { e.preventDefault(); closePopup(); }
setTimeout(showPopup, 5000);
document.getElementById("popupOverlay").addEventListener("click", function(e) {
  if (e.target === this) closePopup();
});
</script>