/* Add custom Js styles below */ 
document.addEventListener('DOMContentLoaded', function () {
  if (!document.body.classList.contains('index')) return;

  const overlay = `
    <div class="popup-overlay" style="
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
      z-index: 9999;
    ">
      <div class="popup-container" id="popupContainer" style="
        background: transparent; padding: 0; border-radius: 8px; text-align: center; position: relative;
      ">
        <button id="closeButton" style="
          position: absolute; top: -10px; right: -10px; background: #fff; border: none; border-radius: 50%;
          width: 30px; height: 30px; font-size: 20px; cursor: pointer; line-height: 0; box-shadow: 0 0 5px rgba(0,0,0,0.3);
        ">&times;</button>
        <a href="https://yashclub.com/%D8%A7%D8%B2%D9%8A%D8%A7%D8%A1-%D9%8A%D8%A7%D8%B4/c1772306495" style="display:inline-block;">
          <img src="https://cdn.salla.sa/form-builder/bqJsF8hjhRJGJAPrTYjNw2FSPb5lCOcJDz1NI2gu.png" 
               alt="Popup Image" 
               style="max-width: 90vw; max-height: 90vh; border-radius: 8px; cursor: pointer;">
        </a>
      </div>
    </div>
  `;

  document.body.insertAdjacentHTML("afterbegin", overlay);

  // إغلاق البوب أب
  document.getElementById('closeButton').addEventListener('click', function () {
    const overlay = document.querySelector('.popup-overlay');
    if (overlay) overlay.remove();
  });
});