(function() {
    // إضافة CSS
    const style = document.createElement('style');
    style.textContent = `
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .whatsapp-button {
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            text-decoration: none;
        }

        .whatsapp-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
        }

        .whatsapp-button::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #25D366;
            animation: whatsapp-pulse 2s infinite;
        }

        @keyframes whatsapp-pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.3);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        .whatsapp-icon {
            width: 35px;
            height: 35px;
            fill: white;
            position: relative;
            z-index: 1;
        }

        .whatsapp-tooltip {
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            color: #333;
            padding: 10px 15px;
            border-radius: 8px;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .whatsapp-tooltip::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 8px solid transparent;
            border-left-color: white;
        }

        .whatsapp-button:hover .whatsapp-tooltip {
            opacity: 1;
            visibility: visible;
        }

        .whatsapp-button:active {
            transform: scale(0.95);
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 20px;
                left: 20px;
            }

            .whatsapp-button {
                width: 55px;
                height: 55px;
            }

            .whatsapp-icon {
                width: 30px;
                height: 30px;
            }

            .whatsapp-tooltip {
                display: none;
            }
        }
    `;
    document.head.appendChild(style);

    // إنشاء عنصر HTML
    const whatsappHTML = `
        <div class="whatsapp-float">
            <a href="https://api.whatsapp.com/send/?phone=966536621580&text&type=phone_number&app_absent=0" 
               class="whatsapp-button" 
               target="_blank" 
               rel="noopener noreferrer"
               aria-label="تواصل معنا عبر واتساب">
                <span class="whatsapp-tooltip">تواصل معنا عبر واتساب</span>
                <svg class="whatsapp-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 0c-8.837 0-16 7.163-16 16 0 2.825 0.737 5.607 2.137 8.048l-2.137 7.952 7.933-2.127c2.42 1.37 5.173 2.127 8.067 2.127 8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 29.467c-2.482 0-4.908-0.646-7.07-1.87l-0.507-0.292-5.043 1.354 1.362-5.073-0.319-0.525c-1.332-2.188-2.036-4.706-2.036-7.294 0-7.636 6.213-13.849 13.849-13.849s13.849 6.213 13.849 13.849-6.213 13.849-13.849 13.849zM22.096 19.174c-0.385-0.193-2.275-1.122-2.628-1.249-0.353-0.128-0.609-0.193-0.865 0.193s-0.993 1.249-1.217 1.505c-0.225 0.257-0.449 0.289-0.833 0.096s-1.626-0.599-3.096-1.91c-1.145-1.020-1.918-2.279-2.142-2.664s-0.024-0.593 0.169-0.785c0.173-0.171 0.385-0.449 0.577-0.673s0.257-0.385 0.385-0.641c0.128-0.257 0.064-0.481-0.032-0.673s-0.865-2.082-1.185-2.849c-0.312-0.747-0.629-0.646-0.865-0.658-0.224-0.012-0.481-0.014-0.737-0.014s-0.673 0.096-1.025 0.481c-0.353 0.385-1.346 1.315-1.346 3.206s1.378 3.718 1.57 3.974c0.193 0.257 2.706 4.134 6.558 5.799 0.916 0.396 1.631 0.633 2.188 0.81 0.92 0.292 1.758 0.251 2.419 0.152 0.738-0.11 2.275-0.929 2.596-1.826s0.321-1.667 0.225-1.826c-0.096-0.16-0.353-0.257-0.737-0.449z"/>
                </svg>
            </a>
        </div>
    `;

    // إضافة العنصر إلى الصفحة عند تحميلها
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            document.body.insertAdjacentHTML('beforeend', whatsappHTML);
        });
    } else {
        document.body.insertAdjacentHTML('beforeend', whatsappHTML);
    }

    // تتبع النقرات (اختياري)
    document.addEventListener('click', function(e) {
        if (e.target.closest('.whatsapp-button')) {
            console.log('تم النقر على زر واتساب');
            // يمكن إضافة كود Google Analytics هنا
        }
    });
})();
///////////////////////////////////
(function () {
  const logos = [
    "https://i.ibb.co/fVDJHrtK/Apple-Pay-Logo-wine.png",
    
    "https://i.ibb.co/gZ11mkQJ/Mada-Logo-svg.png",
    "https://i.ibb.co/YBsxn6H2/43deb5f3-2fe6-40c1-8c3e-a104ef38ebc5-1000x324.webp",
  
  ];

  function createMarqueeCards() {
    return logos
      .map(
        (logo) => `
      <div class="marquee-card">
        <img class="card-logo" src="${logo}" alt="Payment Logo">
      </div>
    `
      )
      .join("");
  }

  const marqueeHTML = `
    <style>
      .marquee-section {
        width: 100%;
        background-color: transparent;
        padding: 48px 0;
        overflow: hidden;
        position: relative;
      }
      .marquee-wrapper {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
      }
      .marquee-track {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        white-space: nowrap;
        will-change: transform;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 20s;
        padding-top: 10px;
      }
      .marquee-track--a {
        animation-name: slideRight;
        margin-right: 16px;
      }
      .marquee-track--b {
        animation-name: slideLeft;
        margin-right: 16px;
      }
      .marquee-section:hover .marquee-track {
        animation-play-state: paused;
      }
      .marquee-card {
        // border: 2px solid #726a5d;
        // border-radius: 12px;
        padding: 20px 0px;
        background-color: transparent;
        min-width: 100px;
        height: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        white-space: nowrap;
         margin-right: 16px;
         margin-left: 16px;
        max-width:100px;
      }
      .marquee-card:hover {
        cursor: pointer;
        transform: scale(1.05);
      }
      .card-logo {
        max-width: 100%;
        max-height: 60px;
        width: auto;
        height: auto;
        object-fit: contain;
      }
      @keyframes slideRight {
        from {
          transform: translate3d(-100%, 0, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }
      @keyframes slideLeft {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(100%, 0, 0);
        }
      }
      @media (max-width: 768px) {
        .marquee-wrapper {
          height: 100px;
        }
        .marquee-track {
          animation-duration: 40s;
        }
        .marquee-card {
          padding: 15px 0px;
          min-width: 70px;
          height: 80px;
          max-width:40px;
        }
        .card-logo {
          max-height: 50px;
        }
      }
    </style>
    <div class="marquee-section">
      <div class="marquee-wrapper">
        <div class="marquee-track marquee-track--a">
          ${createMarqueeCards()}
          ${createMarqueeCards()}
          ${createMarqueeCards()}
          ${createMarqueeCards()}
        </div>
        <div class="marquee-track marquee-track--b">
          ${createMarqueeCards()}
          ${createMarqueeCards()}
          ${createMarqueeCards()}
          ${createMarqueeCards()}
        </div>
      </div>
    </div>
  `;

  function insertMarquee() {
    const targetSection = document.querySelector(
      "section.s-block.s-block--photos-slider"
    );

    if (targetSection) {
      targetSection.insertAdjacentHTML("afterend", marqueeHTML);
      console.log("marqee done");
    } else {
      console.warn("not found");
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", insertMarquee);
  } else {
    insertMarquee();
  }
})();
///////////////////////
if (window.location.href.includes('p1494837800') || 
    window.location.href.includes('p498991194')) {
    const style = document.createElement('style');
    style.textContent = '.tamara-product-widget { display: none; }';
    document.head.appendChild(style);
}

//////////////////
function buildCopy() {
    var n = document.createElement("div");
    n.className = "marquee__copy";
    for (var e = 0; e < 20; e++) {
        var t = document.createElement("span");
        t.className = "marquee__msg";
        t.textContent = "تمتعي بشحن مجاني على جميع مشترياتك بـ 120 ريال وأكثر.. لأن إطلالتك في جمعات رمضان ولياليه هي أولويتنا في ميلاف";
        n.appendChild(t);
        
        if (e < 19) {
            var a = document.createElement("span");
            a.className = "sep";
            n.appendChild(a);
        }
    }
    return n;
}

function initMarquee() {
    var n = document.createElement("style");
    n.textContent = `
    .marquee {
      background-color: #003464 !important;
      color: #fff !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      padding: 12px 0 !important;
      position: relative !important;
      width: 100% !important;
      z-index: 999 !important;
      direction: ltr !important; /* Force LTR for animation */
    }
    
    .marquee__inner {
      display: inline-flex !important;
      animation: scroll-right 800s linear infinite !important;
      will-change: transform !important;
    }
    
    /* Duplicate content to create seamless loop */
    .marquee_inner > .marquee_copy:last-child {
      animation-delay: -75s !important; /* Half of animation duration */
    }
    
    .marquee__copy {
      display: inline-flex !important;
      align-items: center !important;
      flex-shrink: 0 !important;
    }
    
    .marquee__msg {
      display: inline-block !important;
      font-size: 16px !important;
      font-weight: 500 !important;
      padding: 0 10px !important;
      direction: rtl !important; /* Text content stays RTL */
      color: #ffff !important;
      white-space: nowrap !important;
    }
    
    .sep {
      display: inline-block !important;
      width: 8px !important;
      height: 8px !important;
      background-color: #ffff !important;
      border-radius: 50% !important;
      margin: 0 15px !important;
      flex-shrink: 0 !important;
    }
    
    @keyframes scroll-right {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    .marquee:hover .marquee__inner {
      animation-play-state: paused !important;
    }
  `;
    
    document.head.appendChild(n);
    
    var e = document.createElement("div");
    e.className = "marquee";
    
    var t = document.createElement("div");
    t.className = "marquee__inner";
    
    // Add 4 copies instead of 2 for seamless loop
    t.appendChild(buildCopy());
    t.appendChild(buildCopy());
    t.appendChild(buildCopy());
    t.appendChild(buildCopy());
    
    e.appendChild(t);
    
    // Find the best place to insert the marquee
    var header = document.querySelector("header");
    if (header) {
        header.parentNode.insertBefore(e, header.nextSibling);
    } else {
        var body = document.body;
        if (body.firstChild) {
            body.insertBefore(e, body.firstChild);
        } else {
            body.appendChild(e);
        }
    }
    
    console.log("Marquee created successfully!");
}

if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initMarquee);
} else {
    initMarquee();
}