//------------------------------------------
// whatsApp button



document.addEventListener("DOMContentLoaded", function () {
  // إنشاء الزر العائم
  let whatsappWrapper = document.createElement("div");
  whatsappWrapper.className = "whatsapp-float";

  whatsappWrapper.innerHTML = `
    <a href="https://wa.me/966537759221" target="_blank" class="whatsapp-link">
      <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="واتساب" />
      <span class="whatsapp-text">تواصل معنا</span>
    </a>
  `;

  // إضافة الزر إلى الصفحة
  document.body.appendChild(whatsappWrapper);

  // إضافة تنسيقات CSS
  let style = document.createElement("style");
  style.textContent = `
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      font-family: 'Tahoma', sans-serif;
      direction: rtl;
    }

    .whatsapp-link {
      display: flex;
      align-items: center;
      background-color: #25d366;
      padding: 10px 16px;
      border-radius: 50px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
    }

    .whatsapp-link:hover {
      background-color: #1ebc59;
      transform: scale(1.05);
    }

    .whatsapp-link img {
      width: 28px;
      height: 28px;
      margin-left: 8px;
    }

    .whatsapp-text {
      color: white;
      font-size: 15px;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      .whatsapp-link {
        padding: 10px 14px;
        border-radius: 50px;
      }

      .whatsapp-text {
        font-size: 14px;
        display: inline;
      }

      .whatsapp-link img {
        width: 26px;
        height: 26px;
        margin-left: 6px;
      }
    }

    @media (max-width: 480px) {
      .whatsapp-link {
        padding: 10px 12px;
      }

      .whatsapp-text {
        font-size: 13px;
      }

      .whatsapp-link img {
        width: 24px;
        height: 24px;
        margin-left: 6px;
      }
    }
  `;
  document.head.appendChild(style);
});