(function initAnnouncementSlider() {
	'use strict';

// Configuration
	const announcementsConfig = {
		ar: [
			{
				text: ' أستخدم كود APR15 و أحصل علي خصم 15% الأن',
				link: '',
				icon: '',
				backgroundColor: '#ffffff',
				textColor: '#21211f',
			},
			{
				text: 'شحن مجاني عند تجاوز قيمة سلتك 350 ريال',
				link: '',
				icon: '',
				backgroundColor: '#ffffff',
				textColor: '#21211f',
			},
			{
				text: 'جمالك يبدأ من هنا',
				link: '',
				icon: '',
				backgroundColor: '#ffffff',
				textColor: '#21211f',
			},
		],
		en: [
			{
				text: 'Enjoy free shipping in Saudi Arabia',
				link: '',
				icon: '',
				backgroundColor: '#ffffff',
				textColor: '#21211f',
			},
			{
				text: 'Free shipping on orders over 350 SAR',
				link: '',
				icon: '',
				backgroundColor: '#ffffff',
				textColor: '#21211f',
			},
			{
				text: 'UNIQUE',
				link: '',
				icon: '',
				backgroundColor: '#ffffff',
				textColor: '#21211f',
			},
		],
	};

	// Settings
	const settings = {
		autoplaySpeed: 3000,
		transitionDuration: 600,
		pauseOnHover: true,
	};

	function getCurrentLanguage() {
		return document.documentElement.dir === 'rtl' ||
			document.documentElement.lang === 'ar' ||
			window.location.href.includes('/ar/')
			? 'ar'
			: 'en';
	}

	function addStyles() {
		if (document.getElementById('announcement-slider-styles')) return;

		const style = document.createElement('style');
		style.id = 'announcement-slider-styles';
		style.textContent = `
			.announcement-slider-container {
				overflow: hidden;
				width: 100%;
				position: relative;
			}

			.announcement-slider-wrapper {
				width: 100%;
				height: 40px;
				position: relative;
				overflow: hidden;
			}

			.announcement-slider-track {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.announcement-slide {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				transform: translateY(100%);
				transition: all ${settings.transitionDuration}ms ease-in-out;
			}

			.announcement-slide.active {
				opacity: 1;
				transform: translateY(0);
				z-index: 2;
			}

			.announcement-slide.prev {
				opacity: 0;
				transform: translateY(-100%);
				z-index: 1;
			}

			.announcement-content {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				padding: 0.625rem 1rem;
			}

			.announcement-text {
				flex: 1;
				text-align: center;
				font-weight: 300;
				font-size: 0.9rem;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5rem;
			}

			.announcement-text a {
				color: inherit;
				text-decoration: none;
				transition: opacity 0.2s;
			}

			.announcement-text a:hover {
				opacity: 0.8;
			}

			.announcement-close {
				padding: 0 0.25rem;
				cursor: pointer;
				font-size: 1rem;
				opacity: 0.8;
				transition: opacity 0.2s;
				flex-shrink: 0;
                display:none;
			}

			.announcement-close:hover {
				opacity: 1;
			}

			.announcement-slider-container.paused .announcement-slide {
				transition-duration: 0ms;
			}

			@media (max-width: 768px) {
				.announcement-text {
					font-size: 0.9rem;
				}

				.announcement-slider-wrapper {
					height: 40px;
				}
			}
		`;

		document.head.appendChild(style);
	}

	function createSliderHTML(announcements) {
		const slidesHTML = announcements
			.map(
				(announcement, index) => `
			<div class="announcement-slide ${index === 0 ? 'active' : ''}" 
			     style="background-color: ${announcement.backgroundColor}; color: ${announcement.textColor
					}">
				<div class="announcement-content container center-between">
					<div class="announcement-text">
						${announcement.icon
						? `<i class="inline-block align-middle ${announcement.icon}"></i>`
						: ''
					}
						<a href="${announcement.link}" target="_self">
							${announcement.text}
						</a>
					</div>
					<a href="#" class="announcement-close sicon-cancel" aria-label="close-alert"></a>
				</div>
			</div>
		`,
			)
			.join('');

		return `
			<div class="announcement-slider-container salla-advertisement" role="region" aria-label="Announcements">
				<div class="announcement-slider-wrapper">
					<div class="announcement-slider-track">
						${slidesHTML}
					</div>
				</div>
			</div>
		`;
	}

	function removeOldAnnouncements() {
		const oldAnnouncements = document.querySelectorAll('.salla-advertisement');
		oldAnnouncements.forEach(ad => ad.remove());
	}

	function initSlider(container, announcements) {
		if (announcements.length <= 1) return;

		const slides = container.querySelectorAll('.announcement-slide');
		let currentIndex = 0;
		let autoplayInterval;
		let isPaused = false;

		function goToSlide(index) {
			slides.forEach(slide => {
				slide.classList.remove('active', 'prev');
			});

			slides[currentIndex].classList.add('prev');
			currentIndex = index;
			slides[currentIndex].classList.add('active');
		}

		function nextSlide() {
			const nextIndex = (currentIndex + 1) % slides.length;
			goToSlide(nextIndex);
		}

		function startAutoplay() {
			if (autoplayInterval) clearInterval(autoplayInterval);
			autoplayInterval = setInterval(nextSlide, settings.autoplaySpeed);
		}

		function stopAutoplay() {
			if (autoplayInterval) {
				clearInterval(autoplayInterval);
				autoplayInterval = null;
			}
		}

		if (settings.pauseOnHover) {
			container.addEventListener('mouseenter', () => {
				isPaused = true;
				stopAutoplay();
				container.classList.add('paused');
			});

			container.addEventListener('mouseleave', () => {
				isPaused = false;
				container.classList.remove('paused');
				startAutoplay();
			});
		}

		startAutoplay();

		document.addEventListener('visibilitychange', () => {
			if (document.hidden) {
				stopAutoplay();
			} else if (!isPaused) {
				startAutoplay();
			}
		});
	}

	function handleCloseClick(container) {
		const closeButtons = container.querySelectorAll('.announcement-close');
		closeButtons.forEach(btn => {
			btn.addEventListener('click', e => {
				e.preventDefault();
				e.stopPropagation();

				container.style.transition = 'opacity 0.3s ease, max-height 0.3s ease';
				container.style.opacity = '0';
				container.style.maxHeight = '0';

				setTimeout(() => {
					container.remove();
					localStorage.setItem('announcement_slider_closed', 'true');
				}, 300);
			});
		});
	}

	function init() {
		if (localStorage.getItem('announcement_slider_closed') === 'true') {
			removeOldAnnouncements();
			return;
		}

		const lang = getCurrentLanguage();
		const announcements = announcementsConfig[lang] || announcementsConfig.en;

		if (!announcements || announcements.length === 0) {
			console.warn('No announcements configured');
			return;
		}

		addStyles();
		removeOldAnnouncements();

		const header = document.querySelector(
			'header, .store-header, .main-nav-container',
		);
		const insertionPoint = header || document.body.firstChild;

		const sliderHTML = createSliderHTML(announcements);
		const tempDiv = document.createElement('div');
		tempDiv.innerHTML = sliderHTML;
		const sliderContainer = tempDiv.firstElementChild;

		if (header) {
			header.parentNode.insertBefore(sliderContainer, header);
		} else {
			document.body.insertBefore(sliderContainer, insertionPoint);
		}

		if (announcements.length > 1) {
			initSlider(sliderContainer, announcements);
		}

		handleCloseClick(sliderContainer);

		console.log(
			'✅ Announcement slider initialized with',
			announcements.length,
			'slides',
		);
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}

	window.AnnouncementSliderConfig = {
		refresh: function () {
			localStorage.removeItem('announcement_slider_closed');
			const existing = document.querySelector('.announcement-slider-container');
			if (existing) existing.remove();
			init();
		},
		updateAnnouncements: function (lang, newAnnouncements) {
			announcementsConfig[lang] = newAnnouncements;
			this.refresh();
		},
		getConfig: function () {
			return { announcementsConfig, settings };
		},
	};
})();

(function () {
  'use strict';

  const CONFIG = {
    mobileMenuSelector: '#mobile-menu > ul.main-menu > li.text-sm.font-bold',
    headerInner: '.store-header .main-nav-container .header-inner',
    burgerSelector: 'a.mburger',
    navBarId: 'desktop-nav-bar',
    navId: 'desktop-main-nav',
    breakpoint: 1024,
    skipClasses: ['mobile-menu-slider', 'links', 'social', 'language'],
  };

  // ─── Styles ───────────────────────────────────────────────────────────────

  function injectStyles() {
    if (document.getElementById('dn-styles')) return;
    const s = document.createElement('style');
    s.id = 'dn-styles';
    s.textContent = `
      /* ── Header overrides ── */
      #mainnav {
        height: auto !important;
      }

      .header-inner.inner.bg-white.da-bgm {
        background: #0c3f43 !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
      }

      .header-container > .flex {
        background: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
      }

      /* ── Second row: hidden on mobile, visible on desktop ── */
      #${CONFIG.navBarId} {
        display: none;
        width: 100%;
        border-top: 1px solid #f0ebe4;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
      }
      @media (min-width: ${CONFIG.breakpoint}px) {
        #${CONFIG.navBarId} { display: block; }
        ${CONFIG.burgerSelector} { display: none !important; }
      }

      /* ── Nav list ── */
      #${CONFIG.navId} {
        display: flex;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin: 0 auto;
        padding: 0;
        max-width: 1280px;
        height: 44px;
        gap: 0;
      }

      /* ── Top-level item ── */
      #${CONFIG.navId} > .dn-item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
      }

      /* ── Top-level link ── */
      #${CONFIG.navId} > .dn-item > .dn-link {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 16px;
        height: 100%;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        transition: color .2s;
        cursor: pointer;
      }
      #${CONFIG.navId} > .dn-item:hover > .dn-link {
        color: #fff;
      }

      /* bottom indicator */
      #${CONFIG.navId} > .dn-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 14px;
        left: 14px;
        height: 2px;
        background: var(--color-primary, #c9a96e);
        transform: scaleX(0);
        transition: transform .2s;
        border-radius: 2px 2px 0 0;
      }
      #${CONFIG.navId} > .dn-item:hover::after { transform: scaleX(1); }

      /* chevron */
      .dn-chevron {
        font-size: 9px;
        opacity: .5;
        transition: transform .2s;
        display: inline-block;
      }
      #${CONFIG.navId} > .dn-item:hover > .dn-link .dn-chevron {
        transform: rotate(180deg);
      }

      /* ── Dropdown ── */
      .dn-dropdown {
        position: absolute;
        top: 100%;
        min-width: 190px;
        background: #fff;
        border-top: 2px solid var(--color-primary, #c9a96e);
        border-radius: 0 0 8px 8px;
        padding: 6px 0;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .2s, transform .2s, visibility .2s;
        z-index: 9999;
        height: auto;
        overflow-y: auto;
      }

      html[dir="rtl"] .dn-dropdown,
      html[lang="ar"] .dn-dropdown { right: 0; left: auto; }
      html[dir="ltr"] .dn-dropdown { left: 0;  right: auto; }

      #${CONFIG.navId} > .dn-item:hover > .dn-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dn-dropdown > li { position: relative; }
      .dn-dropdown > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 18px;
        font-size: 13px;
        color: #555;
        text-decoration: none;
        white-space: nowrap;
        transition: background .15s, color .15s;
      }
      .dn-dropdown > li > a:hover {
        background: #5e6d6e20;
        color: var(--color-primary, #c9a96e);
      }

      .dn-sub-chevron {
        font-size: 10px;
        opacity: .45;
        margin-inline-start: 8px;
        flex-shrink: 0;
      }
      html[dir="rtl"] .dn-sub-chevron,
      html[lang="ar"] .dn-sub-chevron { transform: rotate(180deg); }

      /* ── Sub-dropdown ── */
      .dn-subdropdown {
        position: absolute;
        top: 0;
        min-width: 190px;
        background: #fff;
        border-top: 2px solid var(--color-primary, #c9a96e);
        border-radius: 0 0 8px 8px;
        padding: 6px 0;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s, transform .2s, visibility .2s;
        z-index: 10000;
      }
      html[dir="rtl"] .dn-subdropdown,
      html[lang="ar"] .dn-subdropdown { right: 100%; left: auto; transform: translateX(8px); }
      html[dir="ltr"] .dn-subdropdown { left: 100%; right: auto; transform: translateX(-8px); }

      .dn-dropdown > li:hover > .dn-subdropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) !important;
      }
      .dn-subdropdown > li > a {
        display: block;
        padding: 9px 18px;
        font-size: 13px;
        color: #555;
        text-decoration: none;
        white-space: nowrap;
        transition: background .15s, color .15s;
      }
      .dn-subdropdown > li > a:hover {
        background: #5e6d6e20;
        color: var(--color-primary, #c9a96e);
      }
    `;
    document.head.appendChild(s);
  }

  function getText(a) {
    return (a.querySelector('.menu_title') || a).textContent.trim();
  }

  function buildSubDropdown(ul) {
    const list = document.createElement('ul');
    list.className = 'dn-subdropdown';
    ul.querySelectorAll(':scope > li').forEach(li => {
      const a = li.querySelector(':scope > a');
      if (!a) return;
      const newLi = document.createElement('li');
      const newA = document.createElement('a');
      newA.href = a.href || '#';
      newA.target = a.target || '_self';
      newA.textContent = getText(a);
      newLi.appendChild(newA);
      list.appendChild(newLi);
    });
    return list;
  }

  function buildDropdown(ul) {
    const list = document.createElement('ul');
    list.className = 'dn-dropdown';
    ul.querySelectorAll(':scope > li').forEach(li => {
      const a = li.querySelector(':scope > a');
      if (!a) return;
      const newLi = document.createElement('li');
      const newA = document.createElement('a');
      newA.href = a.href || '#';
      newA.target = a.target || '_self';
      newA.appendChild(document.createTextNode(getText(a)));

      const nested = li.querySelector(':scope > ul');
      if (nested && nested.querySelectorAll(':scope > li').length) {
        const ch = document.createElement('span');
        ch.className = 'dn-sub-chevron';
        ch.textContent = '‹';
        newA.appendChild(ch);
        newLi.appendChild(newA);
        newLi.appendChild(buildSubDropdown(nested));
      } else {
        newLi.appendChild(newA);
      }
      list.appendChild(newLi);
    });
    return list;
  }

  function buildNav() {
    const items = document.querySelectorAll(CONFIG.mobileMenuSelector);
    if (!items.length) return null;

    const nav = document.createElement('ul');
    nav.id = CONFIG.navId;

    items.forEach(li => {
      if (CONFIG.skipClasses.some(c => li.classList.contains(c))) return;
      const a = li.querySelector(':scope > a');
      if (!a) return;

      const item = document.createElement('li');
      item.className = 'dn-item';

      const link = document.createElement('a');
      link.className = 'dn-link';
      link.href = a.href || '#';
      link.target = a.target || '_self';
      link.textContent = getText(a);
// --- كود ترتيب المدونة والماركات التجارية ---
      let itemText = link.textContent.trim();
      
      if (itemText === 'المدونة') {
          item.style.order = "1"; // ستنتقل إلى اليسار ولكن قبل الماركات
      } 
      if (itemText === 'الماركات التجارية') {
          item.style.order = "2"; // ستنتقل إلى أقصى اليسار (بعد المدونة)
      }
      // -----------------------------

      const subUl = li.querySelector(':scope > ul');
      if (subUl && subUl.querySelectorAll(':scope > li').length) {
        const ch = document.createElement('span');
        ch.className = 'dn-chevron';
        ch.textContent = '▾';
        link.appendChild(ch);
        item.appendChild(link);
        item.appendChild(buildDropdown(subUl));
      } else {
        item.appendChild(link);
      }

      nav.appendChild(item);
    });

    return nav;
  }

  function init() {
    if (document.getElementById(CONFIG.navBarId)) return;

    injectStyles();

    const mainNavContainer = document.querySelector('.main-nav-container.shadow-default');
    if (mainNavContainer) mainNavContainer.classList.add('container');

    const headerInner = document.querySelector(CONFIG.headerInner);
    if (!headerInner) return console.warn('[dn] header-inner not found');

    const nav = buildNav();
    if (!nav) return console.warn('[dn] no menu items found');

    const navBar = document.createElement('div');
    navBar.id = CONFIG.navBarId;
    navBar.appendChild(nav);

    headerInner.appendChild(navBar);
  }

  function tryInit() {
    if (document.querySelector(CONFIG.mobileMenuSelector)) {
      init();
    } else {
      const mo = new MutationObserver(() => {
        if (document.querySelector(CONFIG.mobileMenuSelector)) {
          mo.disconnect();
          init();
        }
      });
      mo.observe(document.body, { childList: true, subtree: true });
    }
  }

  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', tryInit)
    : tryInit();

})();