(function () {
  if (document.getElementById("help-bubble")) return;

  // إنشاء الزر
  var helpBtn = document.createElement("div");
  helpBtn.id = "help-bubble";
  helpBtn.innerHTML = "💡 روابط الدورة ؟";

  // إنشاء الرسالة
  var helpMsg = document.createElement("div");
  helpMsg.id = "help-msg";
  helpMsg.innerHTML = `
    📌 بعد الاشتراك بالدورة، ستجد روابط قناة الدورة واستبيان البيانات الرسمي داخل صفحة حسابي > الطلبات  اضغط على رقم الطلب ستظهر لك صفحه استبيان وقناه الدورة  أو في بريدك الإلكتروني الوارد او غير الهام . <br><br>
    <a href="https://sciencesedu.com/orders" target="_blank" style="color:#904DDF; text-decoration: underline; font-weight: bold;">
      📥 انقر هنا للتوجه إلى صفحة الطلبات
    </a>
  `;

  // التنسيقات العامة
  Object.assign(helpBtn.style, {
    position: "fixed",
    backgroundColor: "#904DDF",
    color: "#fff",
    padding: "8px 14px",
    borderRadius: "20px",
    fontSize: "13px",
    fontFamily: "Arial, sans-serif",
    cursor: "pointer",
    zIndex: "9999",
    boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
    transition: "all 0.3s ease"
  });

  Object.assign(helpMsg.style, {
    display: "none",
    position: "fixed",
    backgroundColor: "#fff",
    color: "#000",
    padding: "12px 16px",
    borderRadius: "10px",
    fontSize: "13px",
    fontFamily: "Arial, sans-serif",
    zIndex: "9999",
    boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
    maxWidth: "250px",
    lineHeight: "1.5"
  });

  // تحديد الموقع حسب حجم الشاشة
  function positionElements() {
    if (window.innerWidth <= 768) {
      // شاشة جوال
      helpBtn.style.top = "120px";
      helpBtn.style.right = "300px";
      helpMsg.style.top = "100px";
      helpMsg.style.right = "20px";
    } else {
      // شاشة لابتوب
      helpBtn.style.top = "140px";
      helpBtn.style.right = "1070px";
      helpMsg.style.top = "140px";
      helpMsg.style.right = "800px";
    }
  }

  // نفّذ أول مرة، وتابع تغيّر حجم الشاشة
  positionElements();
  window.addEventListener("resize", positionElements);

  helpBtn.onclick = function () {
    helpMsg.style.display = helpMsg.style.display === "none" ? "block" : "none";
  };

  document.body.appendChild(helpBtn);
  document.body.appendChild(helpMsg);
})();