const applyClasses = () => {
  document.querySelectorAll(
    'section:nth-of-type(2), section:nth-of-type(3), section:nth-of-type(7), section:nth-of-type(10)'
  ).forEach(el => {
    el.classList.remove('container');

    const div = el.querySelector(':scope > div');
    if (div) div.classList.add('container');

    const slider = el.querySelector('salla-slider');
    if (slider) slider.classList.add('container');
    
    const categ = el.querySelector('.s-block.s-block--banners .grid');
    if (categ) categ.classList.add('container');
  });
};

const observer = new MutationObserver(() => applyClasses());
observer.observe(document.body, { childList: true, subtree: true });

// شغله من أول كمان
applyClasses();




/**
 * ticker.js — شريط إعلاني متحرك
 * الاستخدام: أضف السكريبت فقط: <script src="ticker.js"></script>
 * لا حاجة لأي HTML إضافي
 */

(function () {
  /* ─── إعدادات ─── */
  const CONFIG = {
    text: "  وفر الآن على طلبك 🐑✨ استخدم كود ZAK7 عند الدفع (يسري على جميع طرق الدفع باستثناء تابي وتمارا).  ",
    speed: 60,
    textColor: "#fff",
    bgColor: "#bc2d2b",
    fontSize: "18px",
    fontFamily: "inherit",
    height: "52px",
    separator: "   ✦   ",
  };
  
  /* ─── بناء الحاوية ─── */
  const wrapper = document.createElement("div");
  wrapper.id = "ticker-container";

  function mountWrapper() {
    document.body.insertBefore(wrapper, document.body.firstChild);
  }

  if (document.body) {
    mountWrapper();
  } else {
    document.addEventListener("DOMContentLoaded", mountWrapper);
  }

  Object.assign(wrapper.style, {
    width: "100%",
    height: CONFIG.height,
    background: CONFIG.bgColor,
    overflow: "hidden",
    position: "fixed",
    top: "0",
    left: "0",
    right: "0",
    zIndex: "9999",
    display: "flex",
    alignItems: "center",
    borderBottom: "1px solid #222",
    boxSizing: "border-box",
  });

  /* ─── مسافة للـ body حتى لا يختبي المحتوى تحت الشريط ─── */
  document.body.style.marginTop = CONFIG.height;

  /* ─── شريط الضوء العلوي ─── */
  const glowLine = document.createElement("div");
  Object.assign(glowLine.style, {
    position: "absolute",
    top: "0",
    left: "0",
    width: "100%",
    height: "2px",
    background: "linear-gradient(90deg, transparent, #f5e7c6 40%, #f5e7c6 60%, transparent)",
    opacity: "0.4",
    pointerEvents: "none",
  });
  wrapper.appendChild(glowLine);

  /* ─── track يحمل النصوص ─── */
  const track = document.createElement("div");
  Object.assign(track.style, {
    display: "flex",
    alignItems: "center",
    whiteSpace: "nowrap",
    willChange: "transform",
    position: "absolute",
    top: "0",
    left: "0",
    height: "100%",
  });
  wrapper.appendChild(track);

  /* ─── دالة إنشاء span نصي ─── */
  function makeSpan() {
    const span = document.createElement("span");
    span.textContent = CONFIG.text + CONFIG.separator;
    Object.assign(span.style, {
      color: CONFIG.textColor,
      fontSize: CONFIG.fontSize,
      fontFamily: CONFIG.fontFamily,
      fontWeight: "600",
      letterSpacing: "0.03em",
      padding: "0 12px",
      direction: "rtl",
      textShadow: `0 0 18px rgba(245,231,198,0.25)`,
    });
    return span;
  }

  /* ─── أضف نسختين أولاً لحساب العرض ─── */
  track.appendChild(makeSpan());
  track.appendChild(makeSpan());

  /* ─── حساب عرض وحدة واحدة ─── */
  function getUnitWidth() {
    return track.children[0].getBoundingClientRect().width;
  }

  /* ─── ملء الـ track بما يكفي لسد الشاشة ─── */
  function fillTrack() {
    const unit = getUnitWidth();
    const needed = Math.ceil((window.innerWidth * 3) / unit) + 2;
    while (track.children.length < needed) {
      track.appendChild(makeSpan());
    }
  }

  /* ─── حلقة الأنيميشن ─── */
  let pos = 0;
  let last = null;

  function animate(ts) {
    if (!last) last = ts;
    const delta = (ts - last) / 1000;
    last = ts;

    pos -= CONFIG.speed * delta;

    const unit = getUnitWidth();
    if (pos <= -unit) {
      pos += unit;
    }

    track.style.transform = `translateX(${pos}px)`;
    requestAnimationFrame(animate);
  }

  /* ─── تشغيل بعد التحميل ─── */
  window.addEventListener("load", () => {
    fillTrack();
    requestAnimationFrame(animate);
  });

  window.addEventListener("resize", fillTrack);

  /* ─── إتاحة التحكم من الخارج ─── */
  window.TickerBanner = {
    setSpeed: (v) => { CONFIG.speed = v; },
    setText: (v) => {
      CONFIG.text = v;
      [...track.children].forEach((el) => {
        el.textContent = v + CONFIG.separator;
      });
    },
    setColors: (text, bg) => {
      if (text) {
        CONFIG.textColor = text;
        [...track.children].forEach((el) => { el.style.color = text; });
      }
      if (bg) {
        CONFIG.bgColor = bg;
        wrapper.style.background = bg;
      }
    },
  };
})();