/* Add custom Js styles below */ 
document.addEventListener("DOMContentLoaded", function () {

    const headerRight = document.querySelector(".flex.items-center.justify-end");
    const mobileMenu = document.querySelector(".mobile-menu ul"); // ضع السلكتور الصح للبورجر

    function addDesktopLinks() {
        if (!headerRight) return;

        const existing = headerRight.querySelector(".new-header-buttons");
        if (existing) existing.remove();

        if (window.innerWidth > 768) {
            const newButtons = document.createElement("div");
            newButtons.className = "new-header-buttons";
            newButtons.innerHTML = `
                <a href="#hero" class="scroll-to-hero">الرئيسية</a>
                <a href="#packages-section">الباقات</a>
                <a href="/مميزاتنا">مميزاتنا</a>
                <a href="#contact" class="scroll-to-footer">تواصل</a>
                <button class="btn-primary scroll-to-form">⭐ احجزي استشارة الآن</button>
            `;
            headerRight.appendChild(newButtons);
        }
    }

    function addMobileLinks() {
        if (!mobileMenu) return;

        mobileMenu.querySelectorAll(".mobile-link-added").forEach(el => el.remove());

        if (window.innerWidth <= 768) {
            const links = `
                <li class="mobile-link-added"><a href="#hero" class="scroll-to-hero">الرئيسية</a></li>
                <li class="mobile-link-added"><a href="#packages-section">الباقات</a></li>
                <li class="mobile-link-added"><a href="/مميزاتنا">مميزاتنا</a></li>
                <li class="mobile-link-added"><a href="#contact" class="scroll-to-footer">تواصل</a></li>
                <li class="mobile-link-added"><button class="btn-primary scroll-to-form">⭐ احجزي استشارة الآن</button></li>
            `;
            mobileMenu.insertAdjacentHTML("beforeend", links);
        }
    }

    function handleResize() {
        addDesktopLinks();
        addMobileLinks();
    }

    handleResize();
    window.addEventListener("resize", handleResize);

    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("scroll-to-hero")) {
            e.preventDefault();
            document.getElementById("about-0")?.scrollIntoView({ behavior: "smooth" });
        }
        if (e.target.classList.contains("scroll-to-form")) {
            document.getElementById("idea")?.scrollIntoView({ behavior: "smooth" });
        }
    });

});

document.addEventListener("DOMContentLoaded", function() {
  const breadcrumbList = document.querySelector(".breadcrumbs ol");
  if (breadcrumbList) breadcrumbList.style.display = "none";

  const contentEntry = document.querySelector(".content-entry");
  const h1 = document.querySelector(".content h1"); 
  if (contentEntry && h1) {
    contentEntry.querySelectorAll("strong s, strong:first-child").forEach(el => el.remove());

    const img = contentEntry.querySelector("img");
    const paragraphs = Array.from(contentEntry.querySelectorAll("p")).filter(p => p.textContent.trim() !== "");

    const flexContainer = document.createElement("div");
    flexContainer.className = "package-flex";

    const imgCol = document.createElement("div");
    imgCol.className = "img-column";
    imgCol.appendChild(img);

    const textCol = document.createElement("div");
    textCol.className = "text-column";

    const newH1 = document.createElement("h1");
    newH1.textContent = h1.textContent;
    newH1.className = "package-title";
    textCol.appendChild(newH1);

    paragraphs.forEach(p => textCol.appendChild(p));

    const btn = document.createElement("button");
    btn.className = "btn-primary";
    btn.type = "button";
  btn.textContent = "💳 ادفعي رسوم الجدية (500 ريال)";
btn.onclick = function() {
  const checkoutUrl = "https://velunor-online.com/رسوم-جدّية-حجز-الباقة/p1361488091";
  window.open(checkoutUrl, "_blank"); // هيفتح صفحة الدفع في تاب جديد
};
    textCol.appendChild(btn);

    flexContainer.appendChild(imgCol);
    flexContainer.appendChild(textCol);

    contentEntry.innerHTML = "";
    contentEntry.appendChild(flexContainer);

    const style = document.createElement("style");
    style.textContent = `
      .package-flex {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 0; 
      }
      .img-column img {
        width: 100%;
        border-radius: 12px;
        object-fit: cover;
      }
      .text-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: flex-start; 
        align-items: flex-start;
      }
      .package-title {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        margin: 0;
      }
      .text-column p {
        color: #c2c7dd;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
      }
      .btn-primary {
        background: linear-gradient(135deg,#F2C751,#D4A02F);
        color:#1a1200; 
        border-radius:999px; 
        padding:9px 22px;
        font-size:14px; 
        font-weight:700; 
        border:none; 
        cursor:pointer;
        box-shadow:0 8px 25px rgba(0,0,0,0.45);
        display:inline-block; 
        margin-top:10px;
        transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
      }
      .btn-primary:hover {
        transform:translateY(-1px);
        box-shadow:0 12px 30px rgba(0,0,0,0.6);
        background:linear-gradient(135deg,#D4A02F,#F2C751);
      }
      @media (min-width: 1024px) {
        .package-flex {
          flex-direction: row-reverse; 
        }
        .img-column, .text-column {
          width: 50%;
        }
      }
    `;
    document.head.appendChild(style);

    h1.remove();
  }
});

document.addEventListener("DOMContentLoaded", function () {
  const bannersSection = document.querySelector(".s-block--three-banners");
  
  if (bannersSection) {
    bannersSection.id = "features-section";

    const sectionHead = document.createElement("div");
    sectionHead.className = "section-head";
    sectionHead.innerHTML = `
      <div class="section-kicker">WHY VELUNOR</div>
      <h2 class="section-title">ليش  VeluNor هو شريكك التجاري الآمن؟</h2>
      <p class="section-sub">
        نشتغل كأننا فريق المشتريات الخاص فيك داخل الصين: نبحث، نتفاوض، نتابع، ونوثّق كل خطوة بالتفصيل.
      </p>
    `;
    bannersSection.prepend(sectionHead);

    const featureBtn = document.querySelector(".new-header-buttons a[href='/مميزاتنا']");
    if (featureBtn) {
      featureBtn.addEventListener("click", function(e) {
        e.preventDefault();
        document.getElementById("features-section").scrollIntoView({ behavior: "smooth" });
      });
    }
    const style = document.createElement("style");
    style.textContent = `
      /* SECTIONS */
      .section-head { text-align:center; margin-bottom:32px; color:#fff; }
      .section-kicker {
        color:#F2C751; 
        font-size:13px;
        letter-spacing:0.25em; 
        margin-bottom:6px;
      }
      .section-title { font-size:22px; margin:0 0 6px; }
      .section-sub { font-size:13px; color:#c2c7dd; max-width:520px; margin:0 auto; }
    `;
    document.head.appendChild(style);
  }
});


document.addEventListener("DOMContentLoaded", function () {
    const sectionTitle = document.querySelector(".home-block-title h2");
    const container = document.querySelector(".home-block-title");
  const packagesSection = container.closest("section");
if (packagesSection) packagesSection.id = "packages-section";

    if (container && sectionTitle) {

        const kicker = document.createElement("span");
        kicker.className = "section-kicker";
        kicker.textContent = "PACKAGES";
        container.insertBefore(kicker, sectionTitle);

        sectionTitle.classList.add("section-title");

        const sub = document.createElement("p");
        sub.className = "section-sub";
        sub.textContent = "باقتان رئيسيتان تغطيان رحلتك التجارية، سواء حابة تزوري الصين بنفسك أو نوكلك بالكامل.";
        
        sectionTitle.insertAdjacentElement("afterend", sub);
    }
});
document.addEventListener("DOMContentLoaded", function () {
  const items = document.querySelectorAll(".auto-fit-grid > li");

  const packageData = [
    {
      label: "للي حاب يزور الصين بنفسه",
      title: "باقة الرحلة التجارية إلى الصين",
      desc: "إعداد خطة زيارة للمصانع والأسواق، استقبال من المطار، توفير مترجمة ومرافقة سعودية، تنظيم الاجتماعات التجارية، متابعة الطلبات حتى بعد العودة.",
      badge: "أجر يومي + نسبة من الفاتورة",
      linkText: "احجزي رحلتك الآن"
    },
    {
      label: "للي تبغى فريق يمثّلها بالكامل",
      title: "باقة الإشراف التجاري الكامل",
      desc: "كل ما في باقة الرحلة من بحث وتنسيق وزيارات، إضافة إلى متابعة التصنيع، مراجعة الجودة واستلام العينات وتصويرها، إرسال تقارير مصورة، متابعة التغليف والشحن حتى الاستلام النهائي في السعودية.",
      badge: "العمولة:نسبة من الفاتورة",
      linkText: "احصلي على عرض مخصص"
    },
      {
      label: "للمهتمين باكتشاف الصين وزيارة أشهر مدنها ومعالمها الثقافية والتجارية",
      title: "باقه الرحله السياحيه",
      desc: "نوفر لك تجربة سفر متكاملة… لا تحتاج فيها للتفكير أو التخطيط — فقط استمتع",
      badge: "باقة تنظيم وحجوزات  يتم الاتفاق عليها مسبقًا",
      linkText: "احصلي على عرض مخصص"
    },
      {
      label: "للراغبين بالحصول على تجهيز كامل وبأفضل جودة وسعر دون عناء البحث والمقارنة",
      title: "باقة تأثيث الفنادق والشقق والبيوت الخاصة – من الصين",
      desc: "زيارة مصانع الأثاث. تصوير العينات واعتمادها، متابعه  التصنيع، الشحن والتغليف، والإشراف على وصول الأثاث إلى باب مشروعك أو منزلك  داخل المملكة",
      badge: "نسبه من الفاتوره",
      linkText: "احصلي على عرض مخصص"
    }
  ];

  const ulParent = document.querySelector(".auto-fit-grid");
  if (ulParent) ulParent.style.display = "none";

  const gridContainer = document.createElement("div");
  gridContainer.className = "packages-grid";

  items.forEach((item, index) => {
    if (index < packageData.length) {
      const img = item.querySelector("img").cloneNode(true);
      const data = packageData[index];
      const url = item.querySelector("a").getAttribute("href"); // الرابط الأصلي

      const card = document.createElement("article");
      card.className = "package-card";

      card.addEventListener("click", () => {
        window.location.href = url;
      });

      const imgDiv = document.createElement("div");
      imgDiv.className = "package-image";
      imgDiv.appendChild(img);

      const bodyDiv = document.createElement("div");
      bodyDiv.className = "package-body";

      const label = document.createElement("div");
      label.className = "package-label";
      label.textContent = data.label;

      const title = document.createElement("div");
      title.className = "package-title";
      title.textContent = data.title;

      const desc = document.createElement("p");
      desc.className = "package-desc";
      desc.textContent = data.desc;

      const meta = document.createElement("div");
      meta.className = "package-meta";

      const badge = document.createElement("span");
      badge.className = "badge-commission";
      badge.textContent = data.badge;

      const linkDetails = document.createElement("span");
      linkDetails.className = "link-details";
      linkDetails.textContent = data.linkText;

      meta.append(badge, linkDetails);
      bodyDiv.append(label, title, desc, meta);
      card.append(imgDiv, bodyDiv);

      gridContainer.appendChild(card);
    } else {
      item.style.display = "none";
    }
  });

  if (ulParent) ulParent.parentNode.insertBefore(gridContainer, ulParent);

  const cta = document.createElement("div");
  cta.className = "cta-strip";
  cta.innerHTML = `
    <div>
      جاهزة تبدأين؟ <strong>أرسلي لنا فكرة مشروعك</strong> ونرشّح لك الباقة الأنسب ونرسل لك عرض مبدئي.
    </div>
    <button class="btn-primary" type="button"
            onclick="document.getElementById('idea').scrollIntoView({behavior:'smooth'})">
      <span class="icon">📑</span>
      <span>أرسلي طلبك الآن</span>
    </button>
  `;
  gridContainer.after(cta); 

  const style = document.createElement("style");
  style.textContent = `
    .packages-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:22px;
    }
    .package-card {
      position:relative;
      border-radius:18px;
      overflow:hidden;
      background:radial-gradient(circle at top,#27336f 0,#050a2b 50%,#030617 100%);
      border:1px solid rgba(242,199,81,0.4);
      box-shadow:0 20px 40px rgba(0,0,0,0.35);
      display:flex;
      flex-direction:column;
      min-height:260px;
      cursor:pointer;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .package-card:hover {
      transform:translateY(-3px);
      box-shadow:0 16px 30px rgba(0,0,0,0.55);
      border-color:#F2C751;
      background:radial-gradient(circle at top,#31407b 0,#050a2b 40%,#020414 100%);
    }
    .package-image { height:150px; overflow:hidden; }
    .package-image img {
      width:100%; height:100%; object-fit:cover;
      transform:scale(1.03);
      transition:transform .25s ease, opacity .25s ease;
      opacity:0.9;
    }
    .package-card:hover .package-image img {
      transform:scale(1.05); opacity:1;
    }
    .package-body {
      padding:14px 18px 16px;
      display:flex;
      flex-direction:column;
      gap:6px;
      flex:1;
    }
    .package-label { font-size:11px; color:#F2C751; opacity:0.9; }
    .package-title { 
      font-size:16px; 
      font-weight:700; 
      color:#fff; 
    }
    .package-desc { font-size:12px; color:#c2c7dd; line-height:1.7; }
    .package-meta {
      margin-top:10px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:12px;
      gap:10px;
      flex-wrap:wrap;
    }
    .badge-commission {
      padding:4px 10px;
      border-radius:999px;
      background:rgba(7,17,71,0.9);
      border:1px dashed rgba(242,199,81,0.8);
      color:#F2C751;
      white-space:nowrap;
    }
    .link-details {
      font-size:12px;
      color:#F2C751;
      display:inline-flex;
      align-items:center;
      gap:4px;
      transition:color .18s ease, transform .18s ease;
    }
    .link-details::after { content:"↗"; font-size:11px; }
    .package-card:hover .link-details {
      transform:translateX(-2px);
      color:#fff;
    }
    .cta-strip {
      margin-top:24px; 
      padding:18px 20px;
      border-radius:20px;
      border:1px solid rgba(242,199,81,0.5);
      background:linear-gradient(90deg,rgba(242,199,81,0.15),rgba(3,6,25,0.95));
      display:flex; 
      flex-wrap:wrap; 
      align-items:center;
      gap:14px; 
      justify-content:space-between; 
      font-size:13px;
      color: #fff;
    }
    .cta-strip strong { color:#F2C751; }
    @media (max-width:840px) { .packages-grid { grid-template-columns:minmax(0,1fr); } }
  `;
  document.head.appendChild(style);
});
document.addEventListener("DOMContentLoaded", function() {
  const footer = document.querySelector("footer.store-footer");
  if (!footer) return; 

footer.innerHTML = `
  <section class="contact-section" id="contact">
    <div class="container">
      <div class="contact-avatar">
        <img src="https://cdn.files.salla.network/homepage/859589415/474af0f6-978c-4fb6-a72d-c41ec82b4100.webp" alt="VeluNor">
      </div>
      <h2 class="section-title">@VeluNor</h2>
      <p class="section-sub">
        سعودية بالصين تتكلم لغتهم وتفهمك زين، توصلك لهدفك التجاري بخدمة راقية ومتابعة على أرض الواقع.
      </p>
      <div class="footer-badges flex justify-center items-center" style="margin-top:16px;">
  <salla-trust-badges class="s-trust-badges-wrapper"></salla-trust-badges>
</div>
      <p style="margin-top:12px;font-size:14px;color:#F2C751;">
        WeChat ID: <strong>VELUNOR</strong>
      </p>
      <div class="contact-links">
        <a class="contact-btn" href="https://linktr.ee/VeluNor" target="_blank"><span class="icon">📁</span>Linktree</a>
        <a class="contact-btn" href="https://wa.me/966551541104" target="_blank"><span class="icon">💬</span>WhatsApp</a>
        <a class="contact-btn" href="https://www.snapchat.com/add/velunor888" target="_blank"><span class="icon">👻</span>Snapchat</a>
        <a class="contact-btn" href="https://www.instagram.com/velunor888" target="_blank"><span class="icon">📸</span>Instagram</a>
        <a class="contact-btn" href="https://www.tiktok.com/@velunor888" target="_blank"><span class="icon">🎵</span>TikTok</a>
      </div>
      <p class="footer-rights">
        الحقوق محفوظة | 2025 
        <a href="https://salla.sa/VELUNOR" target="_blank">VELUNOR</a>
      </p>
    </div>
  </section>
`;


  const style = document.createElement("style");
  style.textContent = `
    .contact-section { padding: 70px 0 40px; background: #050b27; border-top: 1px solid rgba(242,199,81,0.25); text-align:center; }
    .contact-avatar { width:96px; height:96px; border-radius:999px; overflow:hidden; margin:0 auto 14px; border:2px solid rgba(242,199,81,0.8); }
    .contact-avatar img { width:100%; height:100%; object-fit:cover; }
    .contact-links { margin-top:24px; display:flex; flex-direction:column; gap:10px; align-items:center; }
    .contact-btn { width:min(420px,100%); padding:12px 16px; border-radius:10px; background:#1a1a4f; border:1px solid rgba(242,199,81,0.7); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
    .contact-btn .icon { font-size:18px; }
    .contact-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.6); background:#0f1a5a; border-color:#f2c751; }
    .footer-rights { color:#888; margin-top:30px; font-size:12px; }
    .footer-rights a { color:#F2C751; text-decoration:none; }
    .footer-rights a:hover { text-decoration:underline; }
  `;
  document.head.appendChild(style);
});

document.addEventListener("DOMContentLoaded", function() {
  const aboutSection = document.getElementById("about-0");
  if (!aboutSection) return;

  const oldImg = aboutSection.querySelector("img")?.src || "";

  aboutSection.innerHTML = `
    <div class="container hero-grid">

      <div class="hero-visual">
        <div class="hero-card">
          <img src="${oldImg}" alt="ELUNOR card">
          <div class="hero-card-overlay"></div>
          <div class="hero-card-footer">
            <div>
              <div style="font-size:13px;font-weight:600;color:#f7f7f7">
                إشراف كامل على طلباتك من الصين
              </div>
              <div style="font-size:11px;color:#c2c7dd;">
                مصانع موثوقة · تقارير · تفاوض · شحن
                ووصول حتى باب بيتك
              </div>
            </div>
            <div class="hero-chip">أكثر من ٣ باقات تناسب مشروعك التجاري</div>
          </div>
        </div>

        <div class="hero-floating">
          <span class="icon">👩‍💼</span>
          <span>فريق نسائي سعودي محترف يعمل من داخل الصين</span>
        </div>
      </div>

      <div>
        <div class="hero-kicker">فريق نسائي سعودي يعمل من داخل الصين</div>

        <h1 class="hero-title">
             <span class="highlight">يدير عملك من الصين ويوصل بضاعتك لحد باب بيتك</span>
        </h1>

        <p class="hero-text">
          نبحث لك عن أفضل المصانع، ننسّق زياراتك واجتماعاتك، نشرف على توقيع العقود،
          نتابع الإنتاج والجودة والتغليف والشحن، ونوصل لك بضاعتك لباب بيتك بثقة ووضوح كامل.
        </p>

        <div class="hero-extra">
          ✦ فريق نسائي محترف مسجّل رسميًا في السعودية والصين<br>
          رقم السجل التجاري:  91440100MAK25U2T4E
        </div>

        <div class="hero-actions">
          <button class="btn-primary" type="button"
                  onclick="document.getElementById('packages-section').scrollIntoView({behavior:'smooth'})">
            <span class="icon">📦</span>
            <span>تصفّح باقات الخدمات</span>
          </button>
          <button class="btn-secondary" type="button"
                  onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">
            <span>تواصلي معنا الآن</span>
            <span>💬</span>
          </button>
        </div>

        <div class="hero-meta">
          <span><span class="dot"></span> تقارير مصورة لكل المراحل</span>
          <span><span class="dot"></span> فريق سعودي + شركاء داخل الصين</span>
          <span><span class="dot"></span> عقود رسمية وحفظ كامل لحقوقك</span>
        </div>
      </div>

    </div>
  `;

  const style = document.createElement("style");
  style.textContent = `
    #about-0 { background-color: #0A1440 !important; }
    .hero { padding:60px 0 80px; }
    .hero-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center; }
    .hero-kicker { font-size:14px; color:#F2C751; letter-spacing:0.15em; margin-bottom:10px; }
    .hero-title { font-size:clamp(26px,4vw,34px); line-height:1.7; font-weight:800; margin:0 0 16px; color:#f7f7f7; }
    .hero-title .highlight { color: #F2C751; }
    .hero-text { font-size:14px; color: #c2c7dd; max-width:480px; margin-bottom:18px; }
    .hero-extra { font-size:12px; color: #c2c7dd; margin-bottom:18px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
    .btn-primary { background: #F2C751; color: #0A1440); border-radius:999px; padding:9px 22px; font-size:14px; font-weight:700; border:none; cursor:pointer; }
    .btn-secondary { background: #050b2a; color:#F2C751; border-radius:999px; padding:9px 22px; font-size:14px; font-weight:700; border:none; cursor:pointer; }
    .hero-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:#c2c7dd; }
    .hero-meta .dot { background: #F2C751; }
    .hero-visual { position:relative; isolation:isolate; }
    .hero-card { position:relative; border-radius:26px; overflow:hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.35); border:1px solid rgba(242,199,81,0.45); background:radial-gradient(circle at top, #0A1440 0, #050b2a) 40%, #04081d 100%); }
    .hero-card img { width:100%; height:260px; object-fit:cover; opacity:.78; transition:transform .25s ease; }
    .hero-card:hover img { transform:scale(1.03); }
    .hero-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,6,25,0.05) 0, rgba(3,6,25,0.95) 75%); }
    .hero-card-footer { position:absolute; inset-inline:0; bottom:0; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; font-size:13px; }
    .hero-chip { padding:6px 12px; border-radius:999px; font-size:11px; background:rgba(4,10,52,0.9); border:1px solid rgba(242,199,81,0.6); color:#F2C751; }
    .hero-floating { position:absolute; left:-10px; top:-16px; padding:10px 16px; border-radius:999px; background:#fff; color:#111; font-size:11px; box-shadow:0 18px 30px rgba(0,0,0,0.45); display:flex; align-items:center; gap:8px; }
    .hero-floating .icon { font-size:16px; }

    @media (max-width:840px) {
      .hero { padding-top:40px; }
      .hero-grid { grid-template-columns:minmax(0,1fr); }
      .hero-visual { order:-1; margin-bottom:22px; }
    }
    .hero-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:#c2c7dd; }
  .hero-meta span { display:inline-flex; align-items:center; gap:6px; }
  .hero-meta .dot { width:6px; height:6px; border-radius:999px; background:#F2C751; }
   .btn-secondary:hover {
      transform:translateY(-1px);
      box-shadow:0 10px 26px rgba(0,0,0,0.55);
      background:rgba(242,199,81,0.08);
      color:#fff; border-color:#D4A02F;
    }
  `;
  document.head.appendChild(style);
});
document.addEventListener("DOMContentLoaded", function() {
  const formSection = document.createElement("section");
  formSection.className = "form-section";
  formSection.id = "idea";

  formSection.innerHTML = `
    <div class="container">
      <div class="form-card">
        <h2 class="form-title">أرسلي لنا فكرة مشروعك</h2>
        <form id="contactForm">
          <div class="form-grid">
            <div>
              <div class="form-label">الاسم الكامل</div>
              <input id="fullName" class="form-control" type="text" placeholder="مثال: نورة عبد الله" required>
            </div>
            <div>
              <div class="form-label">نوع النشاط التجاري</div>
              <input id="businessType" class="form-control" type="text" placeholder="مثال: ملابس نسائية / أدوات منزلية" required>
            </div>
            <div>
              <div class="form-label">الخدمة المطلوبة</div>
              <input id="serviceType" class="form-control" type="text" placeholder="مثال: رحلة تجارية / إشراف كامل" required>
            </div>
            <div>
              <div class="form-label">تفاصيل مختصرة عن الطلب</div>
              <textarea id="details" class="form-control" placeholder="اكتبي أي تفاصيل إضافية نحتاج نعرفها عن مشروعك..." required></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button class="form-submit" type="submit">
              إرسال الطلب عبر واتساب 📩
            </button>
          </div>
        </form>
      </div>
    </div>
  `;

  const footer = document.querySelector("footer") || document.body;
  footer.parentNode.insertBefore(formSection, footer);

  const style = document.createElement("style");
  style.textContent = `
    .form-section { padding:120px 0 40px; background-color:#0A1440; }
    .form-card {
      border-radius:28px;
      border:1px solid rgba(242,199,81,0.7);
      background:radial-gradient(circle at top,#131e54 0,#050821 50%,#02040f 100%);
      padding:30px 26px 28px;
      box-shadow:0 8px 24px rgba(0,0,0,0.4);
      max-width:900px;
      margin:0 auto;
    }
    .form-title { font-size:22px; text-align:center; margin-bottom:26px; font-weight:700; color:#F2C751; }
    .form-grid { display:flex; flex-direction:column; gap:18px; }
    .form-label { font-size:14px; margin-bottom:4px; color:#f7f7f7; }
    .form-control {
      width:100%; padding:13px 14px; border-radius:14px;
      border:1px solid rgba(242,199,81,0.6);
      background:#050821; color:#fff; font-family:inherit; font-size:14px;
    }
    .form-control::placeholder { color:#777f99; }
    textarea.form-control { min-height:130px; resize:vertical; }
    .form-actions { display:flex; justify-content:flex-start; margin-top:16px; }
    .form-submit {
      background:#F2C751; color:#111;
      border:none; border-radius:999px;
      padding:12px 28px; font-weight:700; cursor:pointer;
      font-size:14px;
    }
    .form-submit:hover { filter:brightness(1.1); }
  `;
  document.head.appendChild(style);

  const contactForm = document.getElementById("contactForm");
  contactForm.addEventListener("submit", function(e) {
    e.preventDefault();
    const name    = document.getElementById("fullName").value;
    const biz     = document.getElementById("businessType").value;
    const service = document.getElementById("serviceType").value;
    const details = document.getElementById("details").value;

    const msg = `
🔔 طلب جديد من الموقع

👤 الاسم: ${name}
🛍 النشاط التجاري: ${biz}
📌 الخدمة المطلوبة: ${service}
📝 تفاصيل الطلب:
${details}

-------------------------
📩 تم الإرسال من موقع ELUNOR
`;
    const phone = "966551541104";
    const url = "https://wa.me/" + phone + "?text=" + encodeURIComponent(msg);
    window.open(url, "_blank");
  });
});