(() => {
  // ====== إعداد الـ CSS عبر إنشاء عنصر <style> ======
  const css = `
  :root{
    --cp: var(--color-primary, #0d47a1);
    --cs: var(--color-secondary, #ff7a00);
    --bg: rgba(255,255,255,0.85);
    --glass: rgba(255,255,255,0.06);
  }

  /* Main button (عن المتجر) */
  .as-main-btn{
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: linear-gradient(135deg,var(--cp),var(--cs));
    color: #fff;
    padding: 6px 10px;
    border-radius: 0 6px 10px 0;
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 6px 20px rgba(11,22,40,0.25);
    z-index: 200000;
    display:flex;
    align-items:center;
    gap:10px;
    transition: transform .28s ease, opacity .28s ease;
    will-change: transform;
  }
  .as-main-btn .dot {
    width:10px;height:10px;border-radius:50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 12px rgba(255,255,255,0.6);
    animation: as-pulse 2.6s infinite;
  }
  @keyframes as-pulse { 0%{transform:scale(.9);opacity:.7}50%{transform:scale(1.15);opacity:1}100%{transform:scale(.9);opacity:.7} }

  /* Sidebar */
  .as-sidebar {
    position: fixed;
    top: 0;
    left: -380px;
    width: 380px;
    height: 100%;
    padding: 22px;
    box-sizing: border-box;
    z-index: 200001;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.95));
    box-shadow: 8px 0 40px rgba(6,15,30,0.28);
    border-radius: 0 14px 14px 0;
    overflow-y: auto;
    transition: left .45s cubic-bezier(.2,.9,.3,1);
    font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  .as-sidebar.open { left: 0; }

  .as-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .as-title {
    font-size:20px;
    color: var(--cp);
    font-weight:800;
  }
  .as-sub {
    font-size:13px;color:#555;
  }
  .as-close-sidebar {
    background:transparent;border:none;font-size:18px;color:var(--cp);cursor:pointer;padding:8px;border-radius:8px;
  }
  .as-close-sidebar:hover{ background: rgba(0,0,0,0.03); }

  /* Button list */
  .as-btn-list{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
  .as-item-btn{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    background: linear-gradient(90deg, rgba(13,71,161,0.06), rgba(255,122,0,0.04));
    border: 1px solid rgba(13,71,161,0.06);
    padding:12px 14px; border-radius:10px; cursor:pointer;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
  }
  .as-item-btn:hover{ transform: translateX(6px); box-shadow: 0 8px 28px rgba(5,20,40,0.08); background: linear-gradient(90deg, rgba(13,71,161,0.09), rgba(255,122,0,0.06)); }
  .as-item-btn .left{ display:flex; gap:12px; align-items:center; }
  .as-item-btn .icon{
    width:44px;height:44px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;color:#fff;font-weight:700;
    background: linear-gradient(135deg,var(--cp),var(--cs));
    box-shadow: 0 6px 18px rgba(13,71,161,0.12);
  }
  .as-item-btn .label{ text-align:right; }
  .as-item-btn .label .title{ font-weight:700; color:#222; font-size:15px; }
  .as-item-btn .label .desc{ font-size:12px; color:#666; margin-top:3px; max-width:220px; }

  /* Overlay for popups (with blur) */
  .as-overlay {
    position: fixed; inset:0;
    background: rgba(6,18,35,0.46);
    backdrop-filter: blur(6px) saturate(1.05);
    z-index: 200050;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition: opacity .28s ease;
  }
  .as-overlay.active{ opacity:1; pointer-events:auto; }

  /* Popup card */
  .as-popup {
    width: min(980px, 92%);
    max-width: 980px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 22px 60px rgba(6,18,35,0.45);
    transform: translateY(18px) scale(.96);
    opacity:0;
    transition: all .33s cubic-bezier(.2,.9,.3,1);
    max-height: 86vh;
    overflow:auto;
    position: relative;
  }
  .as-popup.active{ transform: translateY(0) scale(1); opacity:1; }

  .as-popup .as-popup-head {
    display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px;
  }
  .as-popup h3 { margin:0; color:var(--cp); font-size:20px; }
  .as-popup .as-close { background:transparent; border:none; font-size:20px; cursor:pointer; color:#444; padding:6px; border-radius:8px;}
  .as-popup .as-close:hover{ background:rgba(0,0,0,0.03); }

  /* Content layout: left image/info + right detailed content */
  .as-flex {
    display:flex; gap:18px; align-items:flex-start;
  }
  .as-left {
    width: 280px; min-width:220px;
    border-radius:10px;
    padding:14px;
    background: linear-gradient(180deg, rgba(13,71,161,0.06), rgba(255,122,0,0.03));
    box-shadow: inset 0 6px 18px rgba(13,71,161,0.03);
    text-align:center;
  }
  .as-left h4{ margin:8px 0; color:var(--cp); font-size:16px; }
  .as-left p{ font-size:13px;color:#444; line-height:1.5; }

  .as-right { flex:1; background: transparent; padding:6px 2px; }

  /* FAQ styling */
  .as-faq-item { margin-bottom:12px; padding:12px; border-radius:10px; background:#fff; border:1px solid #f0f0f0; box-shadow: 0 6px 18px rgba(9,20,40,0.03); }
  .as-faq-item b{ display:block; margin-bottom:6px; color:#222; }

  /* Reviews list */
  .as-reviews { display:flex; flex-direction:column; gap:10px; }
  .as-review-card { padding:12px; border-radius:10px; background:linear-gradient(180deg,#fff,#fbfbfb); border:1px solid #eee; }
  .as-review-card strong{ color:var(--cp); display:block; margin-bottom:6px; }

  /* Review form */
  .as-form { display:flex; gap:10px; flex-direction:column; margin-top:10px; }
  .as-input, .as-textarea { padding:10px; border-radius:8px; border:1px solid #e3e3e3; font-size:14px; }
  .as-submit { align-self:flex-start; padding:10px 14px; border-radius:8px; border:none; background:linear-gradient(90deg,var(--cp),var(--cs)); color:#fff; cursor:pointer; font-weight:700; }

  /* responsive tweaks */
  @media (max-width:900px){
    .as-flex{ flex-direction:column; }
    .as-left{ width:100%; }
    .as-popup{ width:94%; padding:18px; }
  }
  `;
  const styleTag = document.createElement('style');
  styleTag.textContent = css;
  document.head.appendChild(styleTag);

  // ====== إنشاء عناصر DOM عن طريق JS ======
  // Main button
  const btn = document.createElement('button');
  btn.className = 'as-main-btn';
  btn.innerHTML = `<span class="dot"></span><span style="font-weight:800"></span>`;
  document.body.appendChild(btn);

  // Sidebar
  const sidebar = document.createElement('aside');
  sidebar.className = 'as-sidebar';
  sidebar.innerHTML = `
    <div class="as-header">
      <div>
        <div class="as-title">معلومات المتجر</div>
        <div class="as-sub">كل ما تريد معرفته عن خدمتنا ومنتجاتنا</div>
      </div>
      <button class="as-close-sidebar" title="إغلاق القائمة">✖</button>
    </div>
    <div class="as-btn-list" role="menu"></div>
    <div style="margin-top:18px;font-size:13px;color:#666;line-height:1.5">
      <div style="font-weight:700;color:var(--cp);margin-bottom:6px">فقط من داخل المتجر</div>
      <div>اضغط على أي قسم للاطلاع على التفاصيل الكاملة، أو تواصل معنا مباشرة.</div>
    </div>
  `;
  document.body.appendChild(sidebar);

  const list = sidebar.querySelector('.as-btn-list');
  const closeSidebarBtn = sidebar.querySelector('.as-close-sidebar');

  // تعريف الأقسام والمحتويات المفصّلة (محتوى طويل ومشبّع لكل نافذة)
  const sections = [
    {
      id: 'about',
      icon: '👥',
      title: 'من نحن',
      left: `<h4>نظرة سريعة</h4><p>متجر إلكتروني موثوق يقدم منتجات مُختارة بعناية من موردين معتمدين. نؤمن بتجربة شراء بسيطة، آمنة، وسريعة.</p>`,
      right: `
        <h4>مهمتنا</h4>
        <p>تقديم منتجات عالية الجودة بخدمة تفوق توقعات العميل — بدءًا من اختيار المنتج، فحص الجودة، وصولًا لخدمة ما بعد البيع.</p>
        <h4>قيمنا</h4>
        <ul>
          <li>الشفافية مع العميل</li>
          <li>الجودة أولًا</li>
          <li>الالتزام بالتوصيل</li>
        </ul>
      `
    },
    {
      id: 'why',
      icon: '🏆',
      title: 'لماذا متجرنا',
      left: `<h4>لماذا نختلف</h4><p>نشتري كميات محددة ونتفاوض على أفضل أسعار لنقدم قيمة حقيقية للعميل.</p>`,
      right: `
        <p><strong>✔️ ضمان الجودة:</strong> كل منتج يمر بعمليات فحص صارمة قبل الشحن.</p>
        <p><strong>✔️ توصيل موثوق:</strong> شراكاتنا مع شركات الشحن تضمن سرعة وتتبع واضح.</p>
        <p><strong>✔️ خدمة عملاء:</strong> دعم سريع خلال ساعات العمل، وحلول فورية للمشكلات.</p>
        <p><strong>✔️ سياسة عادلة:</strong> استبدال واسترجاع واضح وسلس.</p>
      `
    },
    {
      id: 'policy',
      icon: '📜',
      title: 'سياسة الاستبدال والاسترجاع',
      left: `<h4>سياستنا</h4><p>نضمن رضا العميل عبر سياسات مرنة وواضحة.</p>`,
      right: `
        <p>1) يحق للعميل استبدال أو استرجاع المنتج خلال <strong>14 يومًا</strong> من تاريخ الاستلام، شرط أن يكون المنتج في حالته الأصلية والتغليف سليمًا.</p>
        <p>2) يُرفق بإيصال الشراء أو رقم الطلب عند التواصل للدعم.</p>
        <p>3) في حالة العيب المصنعي: التبديل أو الاسترجاع مجاني وتتحمل الشركة تكاليف الشحن.</p>
        <p>4) المنتجات المخصصة أو ذات الاستخدام الحياتي قد تكون غير قابلة للاسترجاع — راجع وصف كل منتج.</p>
      `
    },
    {
      id: 'faq',
      icon: '❓',
      title: 'الأسئلة الشائعة',
      left: `<h4>أسئلة مهمة</h4><p>إجابات مركزة وسريعة على أهم ما يسأل عنه العملاء.</p>`,
      right: `
        <div class="as-faq-item"><b>كيف أطلب؟</b><div>اختر المنتج، أضفه إلى السلة، وأكمل بيانات الشحن والدفع.</div></div>
        <div class="as-faq-item"><b>ما طرق الدفع؟</b><div>نقبل: بطاقات الائتمان، الدفع عند الاستلام، ومحافظ إلكترونية.</div></div>
        <div class="as-faq-item"><b>كيف أتابع شحنتي؟</b><div>نوفر رقم تتبع فور شحن الطلب عبر رسالة و/أو البريد الإلكتروني.</div></div>
        <div class="as-faq-item"><b>هل توجد ضمانات؟</b><div>نقدم ضمانًا على عيوب التصنيع حسب وصف المنتج والفئة.</div></div>
        <div class="as-faq-item"><b>هل توجد خصومات للطلبات الكبيرة؟</b><div>نعم — تواصل مع فريق المبيعات للحصول على عروض الشركات والطلبات الكبيرة.</div></div>
        <div class="as-faq-item"><b>ماذا أفعل لو وصلتني قطعة تالفة؟</b><div>تواصل فورًا مع خدمة العملاء، وسنوجهك لخطوات الاسترجاع أو الاستبدال.</div></div>
      `
    },
    {
      id: 'reviews',
      icon: '⭐',
      title: 'آراء العملاء',
      left: `<h4>تجارب حقيقية</h4><p>تعرف على آراء المشترين، وشارك رأيك بكل سهولة.</p>`,
      right: `
        <div class="as-reviews" id="asReviewsList">
          <div class="as-review-card"><strong>محمود</strong><div>خدمة ممتازة، توصيل سريع، والمنتج مطابق للوصف.</div></div>
          <div class="as-review-card"><strong>سارة</strong><div>جودة التغليف وأسلوب التعامل كان رائعًا، شكرًا لكم.</div></div>
        </div>

        <div style="margin-top:12px">
          <label style="font-weight:700;color:#333">أضف رأيك</label>
          <div class="as-form">
            <input class="as-input" id="asReviewName" placeholder="اسمك (مطلوب)">
            <textarea class="as-textarea" id="asReviewText" rows="4" placeholder="شاركنا رأيك والتجربة (مطلوب)"></textarea>
            <button class="as-submit" id="asSubmitReview">أضف رأيك</button>
            <div id="asReviewMsg" style="font-size:13px;color:#777"></div>
          </div>
        </div>
      `
    },
    {
      id: 'contact',
      icon: '📞',
      title: 'تواصل معنا',
      left: `<h4>نحن هنا للمساعدة</h4><p>خدمة عملاء متاحة للرد على استفساراتك.</p>`,
      right: `
        <p><strong>واتساب:</strong> <a href="https://wa.me/201015155948" target="_blank">01015155948</a></p>
        <p><strong>البريد الإلكتروني:</strong> support@yourstore.com</p>
        <p><strong>أوقات العمل:</strong> 9ص - 9م (مواعيد الدعم)؛ دعم طارئ متوفر 24/7 عبر الواتساب.</p>
      `
    },
    {
      id: 'more',
      icon: '💡',
      title: 'اعرف أكثر',
      left: `<h4>معلومات إضافية</h4><p>عروض حصرية ونشرة بريدية للحصول على خصم فوري.</p>`,
      right: `
        <p>انضم لنشرة البريد ليصلك أحدث العروض والمنتجات الحصرية مباشرةً على بريدك.</p>
        <p><strong>مزايا المشتركين:</strong></p>
        <ul>
          <li>خصومات حصرية</li>
          <li>تنبيهات عن المنتجات الجديدة</li>
          <li>هدايا وخصومات ميلاد</li>
        </ul>
        <p style="margin-top:10px"><em>للاشتراك، استخدم زر التواصل أو اترك بريدك عند فريق الدعم.</em></p>
      `
    }
  ];

  // إنشاء أزرار القائمة (قائمة عمودية)
  sections.forEach(s => {
    const item = document.createElement('div');
    item.className = 'as-item-btn';
    item.setAttribute('data-id', s.id);
    item.innerHTML = `
      <div class="left">
        <div class="icon">${s.icon}</div>
        <div class="label">
          <div class="title">${s.title}</div>
          <div class="desc">${(s.title === 'الأسئلة الشائعة') ? 'إجابات مُفصّلة ومباشرة' : (s.title === 'آراء العملاء' ? 'شاهد وشارك آراء العملاء' : 'اضغط للاطلاع على التفاصيل')}</div>
        </div>
      </div>
      <div style="min-width:18px;color:#999;font-size:18px">›</div>
    `;
    list.appendChild(item);
  });

  // Overlay + popup container (reuse same overlay & popup container for all sections)
  const overlay = document.createElement('div');
  overlay.className = 'as-overlay';
  const popup = document.createElement('div');
  popup.className = 'as-popup';
  overlay.appendChild(popup);
  document.body.appendChild(overlay);

  // Helpers: open/close sidebar
  function openSidebar(){
    sidebar.classList.add('open');
    btn.style.opacity = '0';
    setTimeout(()=> btn.style.display = 'none', 300);
  }
  function closeSidebar(){
    sidebar.classList.remove('open');
    btn.style.display = 'flex';
    setTimeout(()=> btn.style.opacity = '1', 20);
  }

  btn.addEventListener('click', openSidebar);
  closeSidebarBtn.addEventListener('click', closeSidebar);

  // Click on sidebar item => open corresponding popup
  list.addEventListener('click', (e) => {
    const el = e.target.closest('.as-item-btn');
    if(!el) return;
    const id = el.getAttribute('data-id');
    const sec = sections.find(x=>x.id===id);
    if(!sec) return;

    // build popup content (left + right)
    popup.innerHTML = `
      <div class="as-popup-head">
        <div>
          <h3>${sec.title}</h3>
          <div style="color:#666;font-size:13px;margin-top:6px">${sec.title === 'الأسئلة الشائعة' ? 'إجابات شاملة على أسئلة العملاء الشائعة' : 'معلومات مفصلة وموثوقة'}</div>
        </div>
        <div>
          <button class="as-close" title="إغلاق">✖</button>
        </div>
      </div>
      <div class="as-flex">
        <div class="as-left">
          ${sec.left}
        </div>
        <div class="as-right">
          ${sec.right}
        </div>
      </div>
    `;
    // show overlay & popup
    overlay.classList.add('active');
    setTimeout(()=> popup.classList.add('active'), 40);

    // close handlers
    const closeBtn = popup.querySelector('.as-close');
    closeBtn && closeBtn.addEventListener('click', closePopup);
  });

  // close popup function
  function closePopup(){
    popup.classList.remove('active');
    setTimeout(()=> overlay.classList.remove('active'), 300);
  }

  // close when clicking outside popup
  overlay.addEventListener('click', (ev) => {
    if(ev.target === overlay) closePopup();
  });

  // handle review submissions (delegated)
  document.addEventListener('click', (e) => {
    if(e.target && e.target.id === 'asSubmitReview'){
      const nameEl = document.getElementById('asReviewName');
      const txtEl = document.getElementById('asReviewText');
      const msgEl = document.getElementById('asReviewMsg');
      if(!nameEl || !txtEl) return;
      const name = nameEl.value.trim();
      const text = txtEl.value.trim();
      if(!name || !text){
        if(msgEl) msgEl.textContent = 'الرجاء إدخال الاسم والتعليق لنتمكن من إرساله.';
        return;
      }
      // append review card
      const listEl = document.getElementById('asReviewsList');
      if(listEl){
        const card = document.createElement('div');
        card.className = 'as-review-card';
        card.innerHTML = `<strong>${escapeHtml(name)}</strong><div>${escapeHtml(text)}</div>`;
        listEl.insertBefore(card, listEl.firstChild);
        nameEl.value=''; txtEl.value='';
        if(msgEl) { msgEl.style.color='green'; msgEl.textContent = 'تم إضافة رأيك، شكراً لك!'; setTimeout(()=> msgEl.textContent='', 2500); }
      }
    }
  });

  // small helper to escape HTML (prevent simple injection)
  function escapeHtml(s){
    return String(s).replace(/[&<>"']/g, (m) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
  }

  // Accessibility: close on ESC
  document.addEventListener('keydown', (e) => {
    if(e.key === 'Escape'){
      // if popup open, close popup first
      if(overlay.classList.contains('active')) closePopup();
      else if(sidebar.classList.contains('open')) closeSidebar();
    }
  });

  // small polish: auto-hide main btn if user scrolls near left top area (avoid overlap)
  window.addEventListener('resize', ()=> {
    if(window.innerWidth < 420){
      btn.style.display = 'none';
    } else {
      if(!sidebar.classList.contains('open')) btn.style.display = 'flex';
    }
  });

})();
(() => {
  // زر المساعد
  const button = document.createElement("div");
  button.textContent = "🌿 خليني أساعدك";
  Object.assign(button.style, {
    position: "fixed",
    bottom: "15px",
    left: "0px",
    backgroundColor: "var(--color-primary)",
    color: "#fff",
    padding: "2px 10px",
    borderRadius: "10px",
    boxShadow: "0 8px 16px rgba(0,0,0,0.3)",
    cursor: "pointer",
    fontSize: "15px",
    fontWeight: "bold",
    zIndex: 9999,
    transition: "transform 0.3s ease",
  });
  button.onmouseenter = () => button.style.transform = "scale(1.05)";
  button.onmouseleave = () => button.style.transform = "scale(1)";
  document.body.appendChild(button);

  // صندوق الدردشة
  const chatBox = document.createElement("div");
  Object.assign(chatBox.style, {
    position: "fixed",
    bottom: "90px",
    left: "120px",
    width: "320px",
    maxHeight: "400px",
    backgroundColor: "var(--color-primary)",
    borderRadius: "20px",
    boxShadow: "0 10px 30px rgba(0,0,0,0.3)",
    padding: "20px",
    overflowY: "auto",
    fontFamily: "'Segoe UI', sans-serif",
    fontSize: "15px",
    display: "none",
    zIndex: 10000,
    animation: "slideUp 0.4s ease",
    color: "white",
    flexDirection: "column",
  });
  document.body.appendChild(chatBox);

  // زر الإغلاق
  const closeBtn = document.createElement("div");
  closeBtn.textContent = "✖";
  Object.assign(closeBtn.style, {
    position: "absolute",
    top: "10px",
    right: "15px",
    cursor: "pointer",
    fontSize: "18px",
    fontWeight: "bold",
    color: "#fff"
  });
  closeBtn.onclick = () => {
    chatBox.style.display = "none";
  };
  chatBox.appendChild(closeBtn);

  // روابط الأقسام
  const links = {
    "العناية بالبشرة": "https://softandcare.store/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9/c1780697876",
    "المكملات الصحية": "https://softandcare.store/%D8%A7%D9%84%D8%A7%D8%BA%D8%B0%D9%8A%D8%A9-%D8%A7%D9%84%D8%B5%D8%AD%D9%8A%D8%A9/c1141402133",
    "المكياج": "https://softandcare.store/%D8%A7%D9%84%D9%85%D9%83%D9%8A%D8%A7%D8%AC/c299272470",
    "الأجهزة": "https://softandcare.store/%D8%A7%D9%84%D8%A7%D8%AC%D9%87%D8%B2%D8%A9/c1672718359",
    "العطور": "https://softandcare.store/%D8%A7%D9%84%D8%B9%D8%B7%D9%88%D8%B1/c1033418512"
  };

  // الأسئلة المخصصة لكل قسم
  const sectionQuestions = {
    "العناية بالبشرة": [
      { q: "💧 نوع بشرتك؟", options: ["دهنية", "جافة", "مختلطة", "عادية"] },
      { q: "💰 ميزانيتك تقريبًا؟", options: ["أقل من 200", "200 - 500", "أكثر من 500"] }
    ],
    "المكملات الصحية": [
      { q: "💪 هدفك الأساسي؟", options: ["زيادة الطاقة", "بناء العضلات", "صحة عامة", "تخسيس"] },
      { q: "💰 ميزانيتك تقريبًا؟", options: ["أقل من 300", "300 - 700", "أكثر من 700"] }
    ],
    "المكياج": [
      { q: "🎨 أي منتج تفضلي؟", options: ["أحمر شفاه", "كريم أساس", "ظلال عيون", "مكياج كامل"] },
      { q: "💖 هل في لون معين بيديك إحساس مميز؟", input: true }
    ],
    "الأجهزة": [
      { q: "⚡ نوع الجهاز اللي تحتاجه؟", options: ["عناية بالبشرة", "تصفيف الشعر", "أجهزة مساج", "أخرى"] },
      { q: "💰 الميزانية المتوقعة؟", options: ["أقل من 500", "500 - 1000", "أكثر من 1000"] }
    ],
    "العطور": [
      { q: "🌸 تفضل نوع الرائحة؟", options: ["زهري", "خشبي", "شرقي", "حمضي"] },
      { q: "💎 تحب العطور: ", options: ["خفيفة يومية", "مميزة للمناسبات", "فاخرة"] }
    ]
  };

  let current = 0;
  let activeSection = null;
  const answers = [];

  function addMessage(text, type = "bot") {
    const msg = document.createElement("div");
    msg.textContent = text;
    msg.style.margin = "10px 0";
    msg.style.padding = "10px 14px";
    msg.style.borderRadius = "16px";
    msg.style.maxWidth = "85%";
    msg.style.wordBreak = "break-word";
    msg.style.animation = "fadeIn 0.3s ease";
    msg.style.color = type === "bot" ? "#f1f2f6" : "#ffffff";
    msg.style.backgroundColor = type === "bot" ? "#57606f" : "#1e90ff";
    msg.style.display = "inline-block";
    const wrapper = document.createElement("div");
    wrapper.style.display = "flex";
    wrapper.style.justifyContent = type === "bot" ? "flex-start" : "flex-end";
    wrapper.appendChild(msg);
    chatBox.appendChild(wrapper);
    chatBox.scrollTop = chatBox.scrollHeight;
  }

  function showOptions(question) {
    addMessage(question.q, "bot");
    const inputWrap = document.createElement("div");
    inputWrap.style.marginTop = "10px";
    inputWrap.style.display = "flex";
    inputWrap.style.flexDirection = "column";

    if (question.options) {
      question.options.forEach(opt => {
        const btn = document.createElement("button");
        btn.textContent = opt;
        Object.assign(btn.style, {
          margin: "5px 0",
          padding: "10px",
          borderRadius: "12px",
          background: "var(--color-light)",
          border: "1px solid #aaa",
          cursor: "pointer",
        });
        btn.onclick = () => {
          addMessage(opt, "user");
          answers.push(opt);
          inputWrap.remove();
          nextStep();
        };
        inputWrap.appendChild(btn);
      });
    } else if (question.input) {
      const input = document.createElement("input");
      input.placeholder = "اكتب هنا...";
      Object.assign(input.style, {
        padding: "10px",
        borderRadius: "10px",
        border: "1px solid #ccc",
        marginBottom: "10px",
        color: "black"
      });

      const send = document.createElement("button");
      send.textContent = "التالي";
      Object.assign(send.style, {
        padding: "10px",
        borderRadius: "10px",
        backgroundColor: "#1e90ff",
        color: "white",
        border: "none",
        cursor: "pointer",
      });

      send.onclick = () => {
        if (input.value.trim() !== "") {
          addMessage(input.value.trim(), "user");
          answers.push(input.value.trim());
          inputWrap.remove();
          nextStep();
        }
      };

      inputWrap.appendChild(input);
      inputWrap.appendChild(send);
    }

    chatBox.appendChild(inputWrap);
    chatBox.scrollTop = chatBox.scrollHeight;
  }

  function nextStep() {
    if (!activeSection) {
      activeSection = answers[0]; // أول إجابة = القسم
      current = 0;
    } else {
      current++;
    }

    const qList = sectionQuestions[activeSection];
    if (qList && current < qList.length) {
      showOptions(qList[current]);
    } else {
      finishChat();
    }
  }

  function finishChat() {
    addMessage("✅ شكرًا! بنوجّهك للقسم المناسب...", "bot");
    setTimeout(() => {
      if (links[activeSection]) {
        window.location.href = links[activeSection];
      }
    }, 2000);
  }

  button.onclick = () => {
    chatBox.style.display = "flex";
    chatBox.innerHTML = "";
    chatBox.appendChild(closeBtn);
    current = -1;
    answers.length = 0;
    activeSection = null;
    showOptions({ q: "🌿 اختر القسم المناسب:", options: Object.keys(links) });
  };

  const style = document.createElement("style");
  style.textContent = `
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0 }
      to { opacity: 1 }
    }
  `;
  document.head.appendChild(style);
})();

  
(() => {
  const products = [
    {
      name: "تجريبي",
      image: "https://cdn.salla.sa/xAXedz/582d2e78-bd2b-4757-9b63-bd4b6dc4679c-723.78277153558x1000-Yb5wO5jHU6NcBABQINUUveQi2jvAA4oFzjDsR1as.png",
      price: "100 ر.س",
      rating: 4.7,
      reviews: "منتج رائع جدًا والجودة ممتازة",
      link: "https://softandcare.store/%D8%AA%D8%AC%D8%B1%D9%8A%D8%A8%D9%8A/p897500557"
    },
    {
     name: "تجريبي",
      image: "https://cdn.salla.sa/xAXedz/582d2e78-bd2b-4757-9b63-bd4b6dc4679c-723.78277153558x1000-Yb5wO5jHU6NcBABQINUUveQi2jvAA4oFzjDsR1as.png",
      price: "100 ر.س",
      rating: 4.7,
      reviews: "منتج رائع جدًا والجودة ممتازة",
      link: "https://softandcare.store/%D8%AA%D8%AC%D8%B1%D9%8A%D8%A8%D9%8A/p897500557"
    },
    {
     name: "تجريبي",
      image: "https://cdn.salla.sa/xAXedz/582d2e78-bd2b-4757-9b63-bd4b6dc4679c-723.78277153558x1000-Yb5wO5jHU6NcBABQINUUveQi2jvAA4oFzjDsR1as.png",
      price: "100 ر.س",
      rating: 4.7,
      reviews: "منتج رائع جدًا والجودة ممتازة",
      link: "https://softandcare.store/%D8%AA%D8%AC%D8%B1%D9%8A%D8%A8%D9%8A/p897500557"
    },
    {
      name: "تجريبي",
      image: "https://cdn.salla.sa/xAXedz/582d2e78-bd2b-4757-9b63-bd4b6dc4679c-723.78277153558x1000-Yb5wO5jHU6NcBABQINUUveQi2jvAA4oFzjDsR1as.png",
      price: "100 ر.س",
      rating: 4.7,
      reviews: "منتج رائع جدًا والجودة ممتازة",
      link: "https://softandcare.store/%D8%AA%D8%AC%D8%B1%D9%8A%D8%A8%D9%8A/p897500557"
    },
  ];

  const btn = document.createElement("button");
  btn.textContent = "🌟 أفضل المنتجات";
  btn.style.cssText = `
    position: fixed;
  bottom: 10px; /* قريب من أسفل الشاشة */
  left: 50%; /* لتوسيط الزرار أفقياً */
  transform: translateX(-50%);
  background: var(--color-primary, #ff0077);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    
  `;
  document.body.appendChild(btn);

  const container = document.createElement("div");
  container.style.cssText = `
    position: fixed;
    bottom: 80px;
    left: 50%;
transform: translateX(-50%);

    width: 330px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--color-light, #fff);
    border: 2px solid var(--color-primary, #ff0077);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 99999;
    display: none;
    font-family: sans-serif;
  `;

  const closeBtn = document.createElement("div");
  closeBtn.innerHTML = "❌";
  closeBtn.style.cssText = `
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 18px;
    cursor: pointer;
  `;
  container.appendChild(closeBtn);

  products.forEach(p => {
    const card = document.createElement("div");
    card.style.cssText = `
      background: white;
      border-radius: 12px;
      margin-bottom: 12px;
      padding: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    `;
    card.innerHTML = `
      <img src="${p.image}" alt="${p.name}" style="width: 100%; border-radius: 8px; margin-bottom: 8px;">
      <h4 style="margin: 0 0 4px;">${p.name}</h4>
      <strong style="color: var(--color-primary, #ff0077);">${p.price}</strong>
      <div style="color: #ffc107;">${"★".repeat(Math.floor(p.rating))}${"☆".repeat(5 - Math.floor(p.rating))}</div>
      <p style="font-size: 13px; color: #555;">"${p.reviews}"</p>
      <a href="${p.link}" target="_blank" style="display: inline-block; background: var(--color-primary, #ff0077); color: white; text-decoration: none; padding: 6px 12px; border-radius: 20px; font-size: 14px; margin-top: 4px;">مشاهدة المنتج</a>
    `;
    container.appendChild(card);
  });
 
  document.body.appendChild(container);

  btn.onclick = () => {
    container.style.display = "block";
  };
  closeBtn.onclick = () => {
    container.style.display = "none";
  };
})();

document.addEventListener("DOMContentLoaded", function () {
  const isHomePage = location.pathname === "/" || location.pathname === "/index.html";
  if (!isHomePage || sessionStorage.getItem("welcomeMessageShown") === "true") return;

  const overlay = document.createElement("div");
  overlay.id = "welcome-overlay";
  overlay.innerHTML = `
    <div id="welcome-popup">
      <div class="close-top">×</div>
      <div class="popup-inner">
        <div class="image-section"></div>
        <div class="text-section">
          <p>
            أهلًا بك في GHARAMI ✨<br>
            هنا تبدأ رحلتك لاكتشاف منتجات تعكس ذوقك وتجربتك الخاصة.<br>
            استمتع معنا بتجربة تسوّق لا تُنسى.
          </p>
        </div>
        <button class="close-btn">إغلاق</button>
        <label class="dont-show-label">
          <input type="checkbox" id="dont-show-again" />
          لا تظهر هذه الرسالة مرة أخرى
        </label>
      </div>
    </div>
  `;

  const style = document.createElement("style");
  style.textContent = `
    :root {
      --popup-border-color: #f2a436;
      --popup-button-bg: #000;
      --popup-button-color: #f2a436;
      --popup-radius: 20px;
      --popup-shadow: 0 0 30px rgba(0,0,0,0.3);
      --popup-video-url: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExemthYzFndjY2aG14b2ZrYWg3YjNldG55Z2RnNmVlejNlY2Qxa204MiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/R2b4SA5UPiVSHn8nR8/giphy.gif');
      --popup-bg-color: #f0e4dc;
      --popup-text-color: #222;
      --popup-font-size: 17px;
      --popup-animation-speed: 2.8s;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --popup-bg-color: #1e1e1e;
        --popup-text-color: #f0f0f0;
        --popup-border-color: #555;
        --popup-button-bg: #fff;
        --popup-button-color: #000;
      }
    }

    #welcome-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 9998;
    }

    #welcome-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 100%);
      opacity: 0;
      width: 95%;
      max-width: 700px;
      background: var(--popup-bg-color);
      border: 4px solid var(--popup-border-color);
      border-radius: var(--popup-radius);
      box-shadow: var(--popup-shadow);
      z-index: 9999;
      font-family: 'Tahoma', sans-serif;
      padding: 20px;
      box-sizing: border-box;
      animation: slideFadeIn var(--popup-animation-speed) ease-out forwards;
    }

    @keyframes slideFadeIn {
      0% {
        transform: translate(-50%, 100%);
        opacity: 0;
      }
      100% {
        transform: translate(-50%, -50%);
        opacity: 1;
      }
    }

    .popup-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .image-section {
      width: 100%;
      height: 250px;
      background-image: var(--popup-video-url);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 15px;
    }

    .text-section p {
      font-size: var(--popup-font-size);
      line-height: 1.8;
      text-align: center;
      color: var(--popup-text-color);
      margin: 0;
    }

    .close-btn {
      background: var(--popup-button-bg);
      color: var(--popup-button-color);
      border: none;
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }

    .close-top {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 22px;
      color: var(--popup-text-color);
      cursor: pointer;
    }

    .dont-show-label {
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--popup-text-color);
    }

    .dont-show-label input {
      transform: scale(0.9);
    }

    @media (max-width: 600px) {
      #welcome-popup {
        max-width: 95%;
        padding: 15px;
      }

      .text-section p {
        font-size: 15px;
      }

      .image-section {
        height: 200px;
      }
    }
  `;

  document.head.appendChild(style);
  document.body.appendChild(overlay);
  sessionStorage.setItem("welcomeMessageShown", "true");

  const closePopup = () => overlay.remove();
  overlay.querySelector(".close-btn").addEventListener("click", closePopup);
  overlay.querySelector(".close-top").addEventListener("click", closePopup);

  setTimeout(closePopup, 15000);
});

//------------------------------------------
  document.addEventListener("DOMContentLoaded", () => {
    const statsSection = document.createElement("section");
    statsSection.className = "stats-section";
    statsSection.setAttribute("aria-label", "إحصائيات الخدمة");
    statsSection.innerHTML = `
     <h2 class="stats-title">لماذا تختارنا؟</h2>
     <div class="stats-container" role="list">
       <article class="stat-item" data-count="490" aria-label="عدد العملاء السعداء" role="listitem" tabindex="0">
         <div class="icon-wrapper" aria-hidden="true">
           <img src="https://i.ibb.co/DgGyqwFj/like.gif" alt="" class="stat-icon" />
         </div>
         <span class="stat-number" aria-live="polite" aria-atomic="true">0</span>
         <p class="stat-text">عميل سعيد</p>
       </article>
 
       <article class="stat-item" data-count="500" aria-label="عدد الطلبات المكتملة" role="listitem" tabindex="0">
         <div class="icon-wrapper" aria-hidden="true">
           <img src="https://i.ibb.co/N6KvVfWt/delivery-truck.gif" alt="" class="stat-icon" />
         </div>
         <span class="stat-number" aria-live="polite" aria-atomic="true">0</span>
         <p class="stat-text">طلب مكتمل</p>
       </article>
 
       <article class="stat-item" data-count="24" aria-label="ساعات الدعم الفني" role="listitem" tabindex="0">
         <div class="icon-wrapper" aria-hidden="true">
           <img src="https://i.ibb.co/LXy5p6vP/helpdesk.gif" alt="" class="stat-icon" />
         </div>
         <span class="stat-number" aria-live="polite" aria-atomic="true">0</span>
         <p class="stat-text">دعم فني 24/7</p>
       </article>
     </div>
   `;

    const footer = document.querySelector("footer");
    if (footer) {
      footer.parentNode.insertBefore(statsSection, footer);
    } else {
      document.body.appendChild(statsSection);
    }

    const style = document.createElement("style");
    style.textContent = `
     :root {
       --primary-color: var(--1);
       --secondary-color: #6c7a9e;
       --background-color: #f9fbff;
       --text-color: #223344;
       --spacing: clamp(20px, 3vw, 60px);
       --card-radius: 24px;
       --transition-time: 0.4s;
       --shadow-light: rgba(49, 116, 255, 0.15);
       --shadow-strong: rgba(49, 116, 255, 0.3);
     }
 
     body {
       background-color: var(--background-color);
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       color: var(--text-color);
       margin: 0;
       padding: 0;
     }
 
     .stats-section {
       padding: var(--spacing) 20px;
       max-width: 1200px;
       margin: 0 auto;
       text-align: center;
     }
 
     .stats-title {
       font-size: clamp(2rem, 4vw, 3rem);
       margin-bottom: var(--spacing);
       font-weight: 800;
       color: var(--primary-color);
       text-shadow: 0 2px 6px rgba(0 0 0 / 0.1);
       user-select: none;
       animation: fadeInUp 1s ease forwards;
     }
 
     .stats-container {
       display: flex;
       justify-content: center;
       gap: clamp(30px, 5vw, 60px);
       flex-wrap: wrap;
       perspective: 1000px;
     }
 
     .stat-item {
       background: white;
       border-radius: var(--card-radius);
       box-shadow: 0 8px 25px rgba(0 0 0 / 0.07);
       padding: 20px 10px;
       width: 200px;
       cursor: default;
       display: flex;
       flex-direction: column;
       align-items: center;
       transition:
         box-shadow var(--transition-time) ease,
         transform var(--transition-time) ease;
       user-select: none;
       will-change: transform;
       opacity: 0;
       transform: translateY(40px);
     }
 
     .stat-item.visible {
       opacity: 1;
       transform: translateY(0);
       animation: pulseScale 1.5s ease infinite;
     }
 
     .stat-item:hover {
       box-shadow: 0 16px 40px rgba(0 0 0 / 0.12);
       transform: translateY(-15px) scale(1.06);
       animation-play-state: paused;
     }
 
     .icon-wrapper {
       width: 80px;
       height: 80px;
       margin-bottom: 25px;
       transition: transform 0.5s ease;
       filter: drop-shadow(0 3px 6px rgba(0 0 0 / 0.1));
       display: flex;
       justify-content: center;
       align-items: center;
     }
 
     .stat-item:hover .icon-wrapper {
       transform: rotate(15deg) scale(1.15);
       filter: drop-shadow(0 6px 10px rgba(0 0 0 / 0.15));
     }
 
     .stat-icon {
       max-width: 80px;
       max-height: 80px;
       user-select: none;
       pointer-events: none;
     }
 
     .stat-number {
       font-size: clamp(2.8rem, 6vw, 3.5rem);
       font-weight: 900;
       color: var(--primary-color);
       margin-bottom: 8px;
       letter-spacing: 0.05em;
       user-select: text;
     }
 
     .stat-text {
       font-size: clamp(1.1rem, 2vw, 1.4rem);
       font-weight: 600;
       color: var(--secondary-color);
       user-select: text;
     }
 
     @keyframes fadeInUp {
       0% {
         opacity: 0;
         transform: translateY(30px);
       }
       100% {
         opacity: 1;
         transform: translateY(0);
       }
     }
 
     @keyframes pulseScale {
       0%, 100% {
         transform: scale(1);
       }
       50% {
         transform: scale(1.05);
       }
     }
 
     @media (max-width: 900px) {
       .stats-container {
         gap: 40px;
       }
       .stat-item {
         width: 45vw;
         padding: 30px 20px;
       }
       .stat-number {
         font-size: 6vw;
       }
     }
 
     @media (max-width: 480px) {
       .stats-container {
         flex-direction: column;
         align-items: center;
         gap: 30px;
       }
       .stat-item {
         width: 80vw;
       }
     }
   `;
    document.head.appendChild(style);

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            animateNumber(entry.target);
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.4 }
    );

    document.querySelectorAll(".stat-item").forEach((item) => {
      observer.observe(item);
    });

    function animateNumber(item) {
      const target = parseInt(item.getAttribute("data-count"), 10);
      const numberElem = item.querySelector(".stat-number");
      let current = 0;
      const stepTime = Math.max(20, 1500 / target);

      const addPlusOrSlash = () => {
        if (target > 1000) return "+";
        if (target <= 30) return "/7";
        return "";
      };

      const suffix = addPlusOrSlash();

      const timer = setInterval(() => {
        current += Math.ceil(target / 60);
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }
        numberElem.textContent = current.toLocaleString("en-EG") + suffix;
      }, stepTime);
    }
  });
  
/* Add custom Js code below */ 
document.querySelectorAll('a[href=""]').forEach(x=>{x.addEventListener('click',e => {e.preventDefault();});});

(() => {
  const CONFIG = {
    selector : '.store-header',
    gradient : 'var(--background-gradient)',  // استخدام التدرج من :root
    interval : 5000,
    fadeTime : 400,
msgs: [
  "💖 جمالك يبدأ من العناية… منتجات تعكس تألقك الطبيعي",
 "🌿 مكملاتنا الغذائية… سر نشاطك وحيويتك اليومية",
  "✨ عطور فاخرة… لتترك بصمتك أينما ذهبت",
 "💄 مكياج يبرز أناقتك… ويكمل إطلالتك المميزة",
  "⚡ أجهزة مبتكرة… تجعل حياتك أسهل وأكثر رفاهية",
  "🌸 تفاصيل دقيقة… لأنك تستحقين الأفضل في كل لحظة",
 "🔥 كل منتج حكاية… وكل اختيار يعكس ذوقك الرفيع"
]
  };

  if (localStorage.getItem('tickerClosed')) return;

  const waitFor = s => new Promise(res => {
    if (document.querySelector(s)) return res(document.querySelector(s));
    new MutationObserver((_, o) => {
      if (document.querySelector(s)) { o.disconnect(); res(document.querySelector(s)); }
    }).observe(document.documentElement, { childList: true, subtree: true });
  });

  const makeTicker = header => {
    if (document.querySelector('.clr-ticker')) return;

    const bar = Object.assign(document.createElement('div'), {
      className: 'clr-ticker',
      role: 'region',
      ariaLabel: 'إعلانات المتجر',
      innerHTML: `
        <span class="clr-ticker-static"></span>
        <button class="clr-ticker-close" aria-label="إغلاق الشريط">×</button>`
    });

    header.parentNode.insertBefore(bar, header);

    const textBox = bar.querySelector('.clr-ticker-static');
    const closeBtn = bar.querySelector('.clr-ticker-close');

    let current = 0;
    const updateMessage = () => {
      textBox.classList.add('fade-out');
      setTimeout(() => {
        textBox.textContent = CONFIG.msgs[current];
        textBox.classList.remove('fade-out');
        textBox.classList.add('fade-in');
        setTimeout(() => textBox.classList.remove('fade-in'), CONFIG.fadeTime);
        current = (current + 1) % CONFIG.msgs.length;
      }, CONFIG.fadeTime);
    };

    updateMessage();
    const interval = setInterval(updateMessage, CONFIG.interval);

    closeBtn.onclick = () => {
      clearInterval(interval);
      bar.remove();
      localStorage.setItem('tickerClosed', '1');
    };

    // ✅ الأنماط باستخدام متغيرات الألوان فقط
    const style = document.createElement('style');
    style.textContent = `
      .clr-ticker {
        --h: 42px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: var(--h);
        padding-inline: 18px;
        background: ${CONFIG.gradient};
        color: var(--color-primary, #000);
        font: 700 .9rem "Cairo", sans-serif;
        box-shadow: 0 3px 8px var(37,61,85,0.1, rgba(0,0,0,0.1));
        z-index: 9999;
      }
      .clr-ticker-static {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
        text-align: center;
        transition: opacity ${CONFIG.fadeTime}ms ease;
      }
      .fade-out { opacity: 0; }
      .fade-in  { opacity: 1; }

      .clr-ticker-close {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: 0;
        color: inherit;
        font-size: 1.3rem;
        cursor: pointer;
        line-height: 1;
        padding: 0 4px;
      }

      @media(max-width: 767px) {
        .clr-ticker {
          --h: 40px;
          font-size: .85rem;
        }
      }
    `;
    document.head.appendChild(style);
  };

  waitFor(CONFIG.selector).then(makeTicker);
})();

const style = document.createElement("style");
style.textContent = `
  .custom-section-heading {
    color: #fff;
    background: var(--color-primary);
    padding: 14px 28px;
    border-radius: 16px;
    font-size: 1.8rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    margin: 0;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    font-family: 'Cairo', sans-serif;
  }

  .custom-section-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  .custom-section-heading:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }
`;
document.head.appendChild(style);

function insertStyledSectionHeading(text, sectionIndex) {
  const wrapper = document.createElement("div");
  const heading = document.createElement("h2");

  heading.textContent = text;
  heading.className = "custom-section-heading";
  wrapper.className = "custom-section-wrapper";
  wrapper.appendChild(heading);

  const container = document.querySelector(`section:nth-of-type(${sectionIndex}) .container`);
  if (container) {
    container.insertBefore(wrapper, container.firstChild);
  }
}

insertStyledSectionHeading('أبرز المنتجات', 2);
insertStyledSectionHeading('الأقسام', 4
);






document.querySelectorAll('a[href=""]').forEach(a =>
  a.addEventListener("click", e => e.preventDefault())
);

const fontLink = document.createElement("link");
fontLink.rel = "stylesheet";
fontLink.href = "https://fonts.googleapis.com/css2?family=Alexandria:wght@400;700&family=Cairo:wght@400;700&display=swap";
document.head.appendChild(fontLink);


const progressDiv = document.createElement('div');
progressDiv.id = 'progress';


const progressSpan = document.createElement('span');
progressSpan.id = 'progress-value';
progressSpan.innerHTML = '&#8593;'; 


progressDiv.appendChild(progressSpan);


document.body.appendChild(progressDiv);

let calcScrollValue = () => {
  let scrollProgress = document.getElementById("progress");
  let progressValue = document.getElementById("progress-value");
  let pos = document.documentElement.scrollTop;
  let calcHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  let scrollValue = Math.round((pos * 100) / calcHeight);
  if (pos > 100) {
    scrollProgress.style.display = "grid";
  } else {
    scrollProgress.style.display = "none";
  }
  scrollProgress.addEventListener("click", () => {
    document.documentElement.scrollTop = 0;
  });
  scrollProgress.style.background = `conic-gradient(var(--color-primary) ${scrollValue}%,var(--color-light) ${scrollValue}%)`;
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;






document.addEventListener("DOMContentLoaded", () => {
  const features = [
    { title: "خدمة عملاء لخدمتك وراحتك", icon: "https://i.postimg.cc/4xMzCTq0/customer-service.png" },
    { title: "جودة لا تُضاهى",           icon: "https://i.postimg.cc/GhdJdTvD/quality-1.png" },
    { title: "عروض وخصومات مميزة",    icon: "https://i.postimg.cc/QCpPw9vK/hot-deal-1.png" }
  ];

  const featSec = document.createElement("section");
  featSec.style.cssText = `
    max-width: 1000px;
    margin: 40px auto 60px;
    padding: 20px;
    font-family: 'Cairo', sans-serif;
  `;

  const headingWrapper = document.createElement("div");
  headingWrapper.style.cssText = "display: flex; justify-content: center; margin-bottom: 40px;";

  const heading = document.createElement("h2");
  heading.textContent = "اكتشف الفرق بنفسك!";
  heading.style.cssText = `
    color: var(--color-primary-reverse);
    background: var(--color-primary);
    padding: 12px 28px;
    border-radius: 16px;
    font-size: 1.8rem;
    font-weight: 900;
    box-shadow: 0 4px 12px var(--color-rgba);
    margin: 0;
  `;
  headingWrapper.appendChild(heading);
  featSec.appendChild(headingWrapper);

  const featStyle = document.createElement("style");
  featStyle.textContent = `
    .features-grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @media (min-width: 600px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 992px) {
      .features-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .feature-card {
      background: var(--background-gradient);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 28px;
      padding: 56px 32px 44px;
      text-align: center;
      color: var(--color-primary);
      box-shadow: 0 6px 26px var(--color-rgba);
      transition: transform 0.45s cubic-bezier(.22,1,.36,1), background 0.4s ease;
      backdrop-filter: blur(8px);
    }

    .feature-card:hover {
      transform: translateY(-12px) scale(1.03);
      background: var(--color-light);
    }

    .feature-icon {
      width: 110px;
      height: 110px;
      margin: 0 auto 24px;
      display: block;
      border-radius: 50%;
      padding: 18px;
      object-fit: contain;
      background: var(--color-primary);
      border: 3px solid var(--color-secondary);
      box-shadow: 0 0 10px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.2);
      transition: transform 0.35s ease;
    }

    .feature-card:hover .feature-icon {
      transform: scale(1.08) rotate(3deg);
    }

    .feature-title {
      font-weight: 900;
      font-size: 1.5rem;
      margin: 0;
      line-height: 1.3;
      color: var(--color-primary);
      text-shadow: 0 1px 2px rgba(255,255,255,0.6);
    }
  `;
  document.head.appendChild(featStyle);

  const featGrid = document.createElement("div");
  featGrid.className = "features-grid";
  features.forEach(f => {
    featGrid.insertAdjacentHTML("beforeend", `
      <div class="feature-card">
        <img class="feature-icon" src="${f.icon}" alt="${f.title}">
        <div class="feature-title">${f.title}</div>
      </div>
    `);
  });
  featSec.appendChild(featGrid);

  const footer = document.querySelector("footer");
  footer ? footer.parentNode.insertBefore(featSec, footer) : document.body.appendChild(featSec);
});



document.addEventListener("DOMContentLoaded", () => {
  

const section = document.createElement('section');
section.style.display = 'flex';
section.style.flexDirection = 'column'; 
section.style.alignItems = 'center'; 
section.style.justifyContent = 'center'; 
section.style.backgroundColor = 'transparent';
section.style.height = 'fit-content'; 
section.style.padding = '60px 20px';
section.style.fontFamily = 'Alexandria, sans-serif';
document.body.style.margin = '0';
document.body.appendChild(section);

 
data.forEach((item, index) => {
  const testimonial = document.createElement('div');
  testimonial.className = 'testimonial';
  testimonial.style.position = 'absolute';
  testimonial.style.top = '0';
  testimonial.style.left = '0';
  testimonial.style.right = '0';
  testimonial.style.bottom = '0';
  testimonial.style.opacity = index === 0 ? '1' : '0';
  testimonial.style.transition = 'opacity 0.6s ease-in-out';
  testimonial.style.display = 'flex';
  testimonial.style.flexDirection = 'column';
  testimonial.style.justifyContent = 'center';
  testimonial.style.alignItems = 'center';
  testimonial.style.padding = '10px 20px';

  const img = document.createElement('img');
  img.src = avatars[item.gender] || avatars.default;
  img.alt = 'avatar';
  img.style.width = '64px';
  img.style.height = '64px';
  img.style.borderRadius = '50%';
  img.style.marginBottom = '12px';
  img.style.border = '2px solid #eee';
  testimonial.appendChild(img);

  const name = document.createElement('div');
  name.textContent = item.name;
  name.style.fontWeight = 'bold';
  name.style.color = 'var(--color-primary)';
  name.style.marginTop = '6px';

  const text = document.createElement('div');
  text.textContent = item.text;
  text.style.color = 'var(--color-secondary)';
  text.style.fontSize = '15px';
  text.style.marginTop = '10px';

  // ⭐ تقييم النجوم
  const stars = document.createElement('div');
  stars.style.marginTop = '10px';
  stars.style.color = '#fbc02d'; // لون النجوم
  stars.style.fontSize = '18px';
  stars.innerHTML = '⭐'.repeat(item.rating) + '☆'.repeat(5 - item.rating);



  testimonial.appendChild(name);
  testimonial.appendChild(text);
  testimonial.appendChild(stars);
  slider.appendChild(testimonial);
});

const testimonials = document.querySelectorAll('.testimonial');
let current = 0;

function updateDots() {
  dots.forEach((dot, i) => {
    dot.style.backgroundColor = i === current ? 'var(--color-primary)' : 'var(--color-secondary)';
  });
}

function showNext(n = 1) {
  testimonials[current].style.opacity = '0';
  current = (current + n + testimonials.length) % testimonials.length;
  testimonials[current].style.opacity = '1';
  updateDots();
}

let interval = setInterval(() => showNext(1), 5000);

let startX = 0;
slider.addEventListener('touchstart', e => startX = e.touches[0].clientX);
slider.addEventListener('touchend', e => {
  const diff = e.changedTouches[0].clientX - startX;
  if (Math.abs(diff) > 50) {
    clearInterval(interval);
    showNext(diff < 0 ? 1 : -1);
    interval = setInterval(() => showNext(1), 5000);
  }
});

// Dots
const dotsContainer = document.createElement('div');
dotsContainer.style.display = 'flex';
dotsContainer.style.justifyContent = 'center';
dotsContainer.style.marginTop = '20px';
dotsContainer.style.gap = '8px';

const dots = [];

data.forEach((_, index) => {
  const dot = document.createElement('div');
  dot.style.width = '10px';
  dot.style.height = '10px';
  dot.style.borderRadius = '50%';
  dot.style.cursor = 'pointer';
  dot.style.backgroundColor = index === 0 ? 'var(--color-primary)' : 'var(--color-secondary)';
  dot.style.transition = 'background-color 0.3s ease';

  dot.addEventListener('click', () => {
    clearInterval(interval);
    testimonials[current].style.opacity = '0';
    current = index;
    testimonials[current].style.opacity = '1';
    updateDots();
    interval = setInterval(() => showNext(1), 5000);
  });

  dotsContainer.appendChild(dot);
  dots.push(dot);
});
section.appendChild(dotsContainer);

// Arrows
const arrowLeft = document.createElement('button');
arrowLeft.innerText = '←';
const arrowRight = document.createElement('button');
arrowRight.innerText = '→';
[arrowLeft, arrowRight].forEach(btn => {
  btn.style.background = 'transparent';
  btn.style.border = 'none';
  btn.style.fontSize = '20px';
  btn.style.cursor = 'pointer';
  btn.style.color = 'var(--color-secondary)';
});
arrowLeft.style.position = arrowRight.style.position = 'absolute';
arrowLeft.style.left = '10px';
arrowRight.style.right = '10px';
arrowLeft.style.top = arrowRight.style.top = '50%';
arrowLeft.style.transform = arrowRight.style.transform = 'translateY(-50%)';

arrowLeft.onclick = () => {
  clearInterval(interval);
  showNext(1);
  interval = setInterval(() => showNext(1), 5000);
};
arrowRight.onclick = () => {
  clearInterval(interval);
  showNext(-1);
  interval = setInterval(() => showNext(1), 5000);
};

slider.appendChild(arrowLeft);
slider.appendChild(arrowRight);


    const footer = document.querySelector("footer");
    if (footer) {
        footer.parentNode.insertBefore(section, footer);
    } else {
        document.body.appendChild(section);
    }
});

document.addEventListener("DOMContentLoaded", () => {

  /* قسم الأسئلة الشائعة */
  const faqSec = document.createElement("section");
  faqSec.style.cssText = `
    background: var(--color-light,#f8bbd0);
    padding:2rem;margin:2rem auto;width:90%;max-width:900px;
    border-radius:25px;
    box-shadow:0 6px 15px rgba(0,0,0,.12);
    font-family:'Cairo','Comic Sans MS',cursive;
  `;

  

  faqData.forEach(([q, a]) => {
    const wrap = document.createElement("div");
    wrap.style.cssText = `
      background: var(--color-secondary,#f06292);
      border-radius:20px;color:#fff;margin-bottom:1rem;overflow:hidden;
      box-shadow:0 4px 8px rgba(0,0,0,.12);transition:box-shadow .3s;
    `;
    const head = document.createElement("div");
    head.textContent = q;
    head.style.cssText = `
      display:flex;justify-content:space-between;align-items:center;
      padding:1rem 1.5rem;cursor:pointer;font-weight:700;font-size:1.1rem;
    `;
    const ico = document.createElement("span");
    ico.textContent = "+";
    ico.style.cssText = "font-size:1.5rem;font-weight:bold;margin-right:10px;transition:transform .3s";
    head.appendChild(ico);
    const ans = document.createElement("div");
    ans.textContent = a;
    ans.style.cssText = `
      padding:1rem 2rem;background:#fff;color:var(--color-primary);
      font-size:1rem;display:none;line-height:1.6;
      border-top:2px dashed var(--color-light,#f8bbd0);
    `;
    head.onclick = () => {
      const open = ans.style.display === "block";
      ans.style.display = open ? "none" : "block";
      ico.textContent = open ? "+" : "−";
      ico.style.transform = open ? "rotate(0deg)" : "rotate(180deg)";
    };
    wrap.append(head, ans);
    faqSec.appendChild(wrap);
  });

  const footer = document.querySelector("footer");
  (footer ? footer.parentNode : document.body).insertBefore(faqSec, footer);

  const animCSS = document.createElement("style");
  animCSS.textContent = `
    section{opacity:0;transform:translateY(30px) scale(.9);transition:opacity .7s ease-out,transform .7s ease-out}
    section.visible{opacity:1;transform:translateY(0) scale(1)}
  `;
  document.head.appendChild(animCSS);
  const secs = document.querySelectorAll("section");
  const reveal = () => {
    secs.forEach(s => {
      const r = s.getBoundingClientRect();
      s.classList.toggle("visible", r.top < innerHeight && r.bottom > 0);
    });
  };
  addEventListener("scroll", reveal);
  reveal();
});



document.addEventListener("DOMContentLoaded", function() {

    const style = document.createElement('style');
    style.innerHTML = `
        section {
            opacity: 0;
            transform: translateY(30px) scale(0.9); 
            transition: opacity 0.7s ease-out, transform 0.7s ease-out; /* Increased duration for smoother transition */
        }

        section.visible {
            opacity: 1;
            transform: translateY(0) scale(1); /* Normal size and position when visible */
        }
    `;
    document.head.appendChild(style);

    const sections = document.querySelectorAll('section');

    let isChecking = false;

    function checkVisibility() {
        if (isChecking) return;
        isChecking = true;
        requestAnimationFrame(() => {
            sections.forEach(section => {
                const position = section.getBoundingClientRect();
                if (position.top < window.innerHeight && position.bottom >= 0) {
                    section.classList.add('visible');
                } else {
                    section.classList.remove('visible');
                }
            });
            isChecking = false;
        });
    }

    window.addEventListener("scroll", checkVisibility);
    checkVisibility(); 
});


const updateSearchPlaceholder = () => {
  const input = document.querySelector(".s-search-container input.s-search-input");
  if (input) {
    input.placeholder = "🔍 اكتشف كل ما يليق بجمالك…";
  }
};
const searchObserver = new MutationObserver(updateSearchPlaceholder);
searchObserver.observe(document.body, { childList: true, subtree: true });
document.addEventListener("DOMContentLoaded", updateSearchPlaceholder);

const sallaProductOptions = document.querySelector('salla-product-options');


const alertMessage = document.createElement('p');
alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

alertMessage.style.backgroundColor = 'var(--color-light)';
alertMessage.style.color = 'var(--color-primary)';
alertMessage.style.padding = '15px';
alertMessage.style.border = '1px solid var(--color-primary)';
alertMessage.style.borderRadius = '5px';
alertMessage.style.marginBottom = '10px';
alertMessage.style.fontWeight = 'bold';
alertMessage.style.textAlign = 'center';

sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);