/* Add custom Js styles below */ 
(function () {
  function createCartPopup() {
    const cartElement = document.querySelector(".cart");
    if (!cartElement) return;

    const popupOverlay = document.createElement("div");
    popupOverlay.className =
      "fixed inset-0 backdrop-blur-sm flex justify-center items-center z-50 px-4";
    popupOverlay.id = "cart-popup-overlay";

    popupOverlay.innerHTML =
      '<div class="bg-white rounded-lg shadow-xl border-2 border-primary ' +
      "p-4 sm:p-6 md:p-8 " +
      "w-full max-w-xs sm:max-w-sm md:max-w-md " +
      'flex flex-col justify-center relative">' +
      '<button class="absolute w-8 h-8 sm:w-10 sm:h-10 ' +
      "flex items-center justify-center bg-primary border border-primary " +
      "rounded-full text-primary-reverse shadow-lg hover:opacity-90 " +
      'transition font-bold text-lg sm:text-xl z-10" ' +
      'style="top:-16px; right:-16px;" ' +
      "onclick=\"document.getElementById('cart-popup-overlay').remove()\">" +
      "&times;" +
      "</button>" +
      '<div class="text-center py-12 flex flex-col items-center justify-center" style="padding-top: 3rem; padding-bottom: 3rem;">' +
      '<h2 class="font-bold text-base sm:text-lg md:text-2xl leading-relaxed" ' +
      'style="color:#d1af79;">' +
      "استشارة متخصصة وعينات معتمدة قبل الشراء." +
      "</h2>" +
      '<p class="mt-4 text-gray-700 text-sm sm:text-base md:text-lg">' +
      "احصل على استشارة متخصصة واطلب عينات معتمدة من محلات العماري قبل إتمام عملية الشراء لضمان الاختيار الأمثل" +
      "</p>" +
      "</div>" +
      '<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full">' +
      '<a href="https://salla.sa/alammaristores.com/product-%D8%A7%D8%B3%D8%AA%D8%B4%D8%A7%D8%B1%D9%87-%D9%85%D8%B9-%D8%A3%D8%B3%D8%AA%D8%A7%D8%B0-%D9%88%D9%84%D9%8A%D8%AF-%D8%A7%D9%84%D8%B9%D9%85%D8%A7%D8%B1%D9%8A-/p264985275" ' +
      'class="flex-1 bg-primary text-primary-reverse ' +
      "py-2 sm:py-3 px-4 sm:px-6 " +
      "rounded-lg font-bold text-sm sm:text-base " +
      'hover:opacity-90 transition text-center flex items-center justify-center">' +
      "الاستشارة" +
      "</a>" +
      '<a href="https://salla.sa/alammaristores.com/%D9%83%D8%AA%D8%A7%D9%84%D9%88%D8%AC%D8%A7%D8%AA-%D8%B9%D9%8A%D9%86%D8%A7%D8%AA/c2013726798" ' +
      'class="flex-1 bg-primary text-primary-reverse ' +
      "py-2 sm:py-3 px-4 sm:px-6 " +
      "rounded-lg font-bold text-sm sm:text-base " +
      'hover:opacity-90 transition text-center flex items-center justify-center">' +
      "الكتالوجات" +
      "</a>" +
      "</div>" +
      "</div>";

    popupOverlay.addEventListener("click", function (e) {
      if (e.target === popupOverlay) popupOverlay.remove();
    });

    document.body.appendChild(popupOverlay);
  }

  function initPopup() {
    if (document.querySelector(".cart")) {
      setTimeout(createCartPopup, 5000);
      return;
    }

    const observer = new MutationObserver((_, obs) => {
      if (document.querySelector(".cart")) {
        obs.disconnect();
        setTimeout(createCartPopup, 5000);
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });
  }

  initPopup();
})();