/* Add custom Js styles below */ 
<!-- بوّب أب خصم 15% لأول طلب -->
<div id="myPopupOverlay">
  <div id="myPopup">
    <h2>خصم 15% لأول طلب 🎁</h2>
    <p>استخدمي الكود <strong>NEW15</strong> عند الدفع</p>
    <button id="closePopup">حسناً</button>
  </div>
</div>

<style>
#myPopupOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#myPopup {
  background: white;
  padding: 20px;
  max-width: 90%;
  width: 320px;
  border-radius: 8px;
  text-align: center;
  font-family: sans-serif;
}
#myPopup button {
  margin-top: 15px;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<script>
window.addEventListener('load', function() {
  setTimeout(function() {
    document.getElementById('myPopupOverlay').style.display = 'flex';
  }, 5000);
});
document.getElementById('closePopup').addEventListener('click', function(){
  document.getElementById('myPopupOverlay').style.display = 'none';
});
</script>