window.addEventListener("load", (() => {
    const e = "/" === window.location.pathname;
    "reload" === window.performance.getEntriesByType("navigation")[0].type && e && sessionStorage.removeItem("popupShownThisSession");
    if (!sessionStorage.getItem("popupShownThisSession"))
        if (e) {
            const e = document.getElementById("change-btn");
            e && e.remove(), setTimeout(showSectionPopup, 1e3)
        } else addChangeButton();
    else addChangeButton()
})), document.addEventListener("DOMContentLoaded", (function() {
    const e = document.querySelectorAll("a.banner.banner--fixed");
    if (e.length) {
        const t = Array.from(e).map((e => {
            const t = e.getAttribute("href"),
                n = e.querySelector("img");
            return {
                id: d(t),
                href: t,
                img: n ? n.src : null
            }
        }));
        localStorage.setItem("categories_data", JSON.stringify(t)), e.forEach((e => {
            e.addEventListener("click", (function() {
                const e = this.getAttribute("href"),
                    t = this.querySelector("img"),
                    n = d(e);
                n && localStorage.setItem("last_clicked_category", JSON.stringify({
                    id: n,
                    href: e,
                    img: t ? t.src : null,
                    isRoot: !0
                }))
            }))
        }))
    }
    document.querySelectorAll("a[href*='/c']").forEach((e => {
        e.addEventListener("click", (function() {
            const e = this.getAttribute("href"),
                t = d(e);
            let n = this.closest("li"),
                o = n && n.classList.contains("root-level");
            t && localStorage.setItem("last_clicked_category", JSON.stringify({
                id: t,
                href: e,
                img: null,
                isRoot: !!o
            }))
        }))
    }));
    const t = document.querySelector(".main-content.flex-1.w-full");
    if (!t) return;
    const n = JSON.parse(localStorage.getItem("categories_data") || "[]"),
        o = window.location.href.match(/\/c(\d+)/),
        r = o ? o[1] : null;
    let a = null;
    if (r && (a = n.find((e => e.id === r))), a || (a = JSON.parse(localStorage.getItem("last_clicked_category") || "null")), !a || !a.img || !1 === a.isRoot) return;
    const s = document.createElement("div");
    s.className = "category-top-banner", s.innerHTML = `<a href="${a.href}" class="banner-link"><img src="${a.img}" alt="category banner" class="banner-image"></a>`;
    const c = {}[a.id] || [];
    if (c.length) {
        const e = document.createElement("div");
        e.className = "category-sub-categories", e.innerHTML = c.map((e => `\n      <a href="${e.href}" class="sub-category-item">\n        <img src="${e.img}" alt="${e.name}" class="sub-category-img">\n        <span class="sub-category-name">${e.name}</span>\n      </a>\n    `)).join(""), s.appendChild(e)
    }
    if (!document.querySelector("#category-banner-style")) {
        const e = document.createElement("style");
        e.id = "category-banner-style", e.textContent = "\n      .category-top-banner { width: 100%; margin-bottom: 20px;  overflow: hidden; }\n      .category-top-banner .banner-image { width: 100%; display: block; object-fit: cover; max-height: 768px; transition: transform 0.3s ease; }\n      .category-top-banner:hover .banner-image { transform: scale(1.02); }\n      \n      \n.category-sub-categories {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 أعمدة للشاشات الكبيرة */\n  gap: 10px;\n  padding: 10px 0;\n  width: 100%;\n  justify-content: center; /* لمحاذاة العناصر عند عدد أقل من الأعمدة */\n}\n\n.category-sub-categories .sub-category-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-decoration: none;\n  color: #333;\n  font-weight: 500;\n  transition: transform 0.3s;\n}\n\n.category-sub-categories .sub-category-item:hover {\n  transform: scale(1.05);\n}\n\n.category-sub-categories .sub-category-img {\n  width: 100%;\n  object-fit: cover;\n  ;\n  margin-bottom: 5px;\n}\n\n.category-sub-categories .sub-category-name {\n  text-align: center;\n  font-size: 14px;\n}\n\n@media (max-width: 768px) {\n  .category-top-banner {\n    margin-bottom: 15px;\n    border-radius: 6px;\n  }\n\n.category-sub-categories {\n    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 أعمدة للشاشات الصغيرة */\n    gap: 8px;\n    justify-content: center;\n  }\n\n  .category-sub-categories .sub-category-img {\n    width: 100%;\n  }\n\n  .category-sub-categories .sub-category-name {\n    font-size: 12px;\n  }\n}\n    ", document.head.appendChild(e)
    }

    function i() {
        const e = t.querySelector("div.mb-4.flex.justify-between.items-center");
        e && (e.insertAdjacentElement("beforebegin", s), l.disconnect())
    }
    const l = new MutationObserver(i);

    function d(e) {
        const t = e.match(/\/categories\/(\d+)/);
        if (t) return t[1];
        const n = e.match(/\/c(\d+)/);
        return n ? n[1] : null
    }
    l.observe(t, {
        childList: !0,
        subtree: !0
    }), i()
})), document.querySelectorAll('a[href=""], a[href="#"]').forEach((e => {
    e.addEventListener("click", (e => {
        e.preventDefault()
    }))
}));
const selectElement = document.querySelector("ul.list.list--brands select");
selectElement && (selectElement.style.display = "none");
const createBackToTopButton = () => {
        const e = document.createElement("button");
        e.innerHTML = "↑", e.ariaLabel = "العودة إلى الأعلى", Object.assign(e.style, {
            position: "fixed",
            bottom: "20px",
            right: "20px",
            width: "50px",
            height: "50px",
            background: "linear-gradient(135deg, var(--third-color), var(--main-color))",
            color: "white",
            fontSize: "24px",
            fontWeight: "bold",
            border: "none",
            padding: "0",
            borderRadius: "50%",
            cursor: "pointer",
            zIndex: "1000",
            display: "none",
            justifyContent: "center",
            alignItems: "center",
            boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3)",
            transition: "all 0.3s ease-in-out"
        });
        const t = document.createElement("div");
        Object.assign(t.style, {
            position: "absolute",
            top: "0",
            left: "0",
            width: "100%",
            height: "100%",
            borderRadius: "50%",
            border: "3px solid transparent",
            borderTopColor: "#ffffff",
            animation: "spin 1s linear infinite",
            boxSizing: "border-box",
            pointerEvents: "none"
        }), e.appendChild(t);
        const n = document.createElement("style");
        return n.textContent = "\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeOut {\n      from { opacity: 1; transform: translateY(0); }\n      to { opacity: 0; transform: translateY(20px); }\n    }\n  ", document.head.appendChild(n), e
    },
    createWhatsAppButton = () => {
        const e = document.createElement("a");
        e.innerHTML = '\n    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" \n         alt="تواصل عبر واتساب" \n         width="24" \n         height="24">\n  ', Object.assign(e.style, {
            position: "fixed",
            top: "60%",
            transform: "translateY(-60%)",
            left: "5px",
            width: "40px",
            height: "40px",
            backgroundColor: "#25D366",
            borderRadius: "50%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3)",
            transition: "all 0.3s ease",
            zIndex: "1000",
            textDecoration: "none"
        });
        return e.href = "https://wa.me/966595295520", e.target = "_blank", e.rel = "noopener noreferrer", e.addEventListener("mouseenter", (() => {
            e.style.transform = "scale(1.1)", e.style.boxShadow = "0 6px 20px rgba(37, 211, 102, 0.4)"
        })), e.addEventListener("mouseleave", (() => {
            e.style.transform = "scale(1)", e.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3)"
        })), e
    },
    setupSectionObserver = () => {
        const e = document.querySelectorAll("section");
        if (!e.length) return;
        const t = new IntersectionObserver((e => {
            e.forEach((e => {
                e.target.classList.toggle("visible", e.isIntersecting)
            }))
        }), {
            threshold: .1
        });
        e.forEach((e => t.observe(e)))
    },
    enhanceProductCards = () => {
        const e = document.querySelectorAll(".s-product-card-entry");
        if (!e.length) return;
        e.forEach((e => {
            let t = e.querySelector(".product-rating");
            if (!t) {
                t = document.createElement("div"), t.className = "product-rating";
                const n = Math.floor(2 * Math.random()) + 4;
                t.innerHTML = "★".repeat(n) + "☆".repeat(5 - n), Object.assign(t.style, {
                    color: "#FFD700",
                    fontSize: "18px",
                    margin: "6px 0",
                    display: "block !important"
                });
                const o = e.querySelector(".s-product-card-content-main");
                o && o.appendChild(t)
            }
            let n = e.querySelector(".product-badge");
            if (!n) {
                const t = (() => {
                    const e = [{
                            text: "الاكثر مبيعا 🔥",
                            class: "bestseller",
                            weight: .25
                        }, {
                            text: "جديد ✨",
                            class: "new",
                            weight: .25
                        }, {
                            text: "",
                            class: "offer",
                            weight: .2
                        }, {
                            text: "",
                            class: "limited",
                            weight: .2
                        }, {
                            text: "",
                            class: "no-badge",
                            weight: .1
                        }],
                        t = Math.random();
                    let n = 0;
                    for (const o of e)
                        if (n += o.weight, t < n) return o;
                    return e[0]
                })();
                if ("no-badge" === t.class) return;
                n = document.createElement("div"), n.className = `product-badge ${t.class}`, n.textContent = t.text, Object.assign(n.style, {
                    position: "absolute",
                    top: "10px",
                    right: "10px",
                    padding: "3px 8px",
                    borderRadius: "12px",
                    fontSize: "12px",
                    fontWeight: "bold",
                    color: "white",
                    backgroundColor: "offer" === t.class ? "transparent" : "new" === t.class ? "#4CAF50" : "limited" === t.class ? "transparent" : "#9C27B0",
                    display: "block !important"
                }), e.style.position = "relative", e.appendChild(n)
            }
        }))
    };
document.addEventListener("DOMContentLoaded", (() => {
    const e = createBackToTopButton();
    document.body.appendChild(e), window.addEventListener("scroll", (() => {
        (window.scrollY || document.documentElement.scrollTop) > 200 ? "flex" !== e.style.display && (e.style.display = "flex", e.style.animation = "fadeIn 0.3s forwards") : (e.style.animation = "fadeOut 0.3s forwards", setTimeout((() => {
            e.style.display = "none"
        }), 300))
    })), e.addEventListener("click", (() => {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        })
    })), document.body.appendChild(createWhatsAppButton()), setupSectionObserver();
    const t = () => {
        enhanceProductCards(), document.querySelectorAll(".product-rating").forEach((e => {
            e.style.display = "block"
        })), document.querySelectorAll(".product-badge").forEach((e => {
            e.style.display = "block"
        }))
    };
    t();
    let n = 0;
    const o = setInterval((() => {
        t(), n++, n >= 5 && clearInterval(o)
    }), 1e3)
}));
const observer = new MutationObserver((() => {
    enhanceProductCards()
}));
observer.observe(document.body, {
    childList: !0,
    subtree: !0
}), document.addEventListener("DOMContentLoaded", (function() {
    function e() {
        const e = {
            mainColor: getComputedStyle(document.documentElement).getPropertyValue("--main-color").trim(),
            bgColor: getComputedStyle(document.documentElement).getPropertyValue("--bg-color").trim(),
            thirdColor: getComputedStyle(document.documentElement).getPropertyValue("--third-color").trim(),
            fourthColor: getComputedStyle(document.documentElement).getPropertyValue("--fourth-color").trim()
        };
        localStorage.setItem("themePreferences", JSON.stringify(e))
    }
    const t = function() {
            const e = localStorage.getItem("themePreferences");
            if (e) {
                const t = JSON.parse(e);
                return document.documentElement.style.setProperty("--main-color", t.mainColor), document.documentElement.style.setProperty("--bg-color", t.bgColor), document.documentElement.style.setProperty("--third-color", t.thirdColor), document.documentElement.style.setProperty("--fourth-color", t.fourthColor), t
            }
            return null
        }(),
        n = document.createElement("button");
    n.textContent = "🎨", n.style.cssText = "\n    position: fixed;\n    left: 5px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 40px;\n    height: 40px;\n    background: var(--second-color);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    font-size: 20px;\n    box-shadow: 0 0 10px rgba(0,0,0,0.2);\n    z-index: 9998;\n    transition: all 0.3s ease;\n  ";
    const o = document.createElement("div");
    o.id = "theme-popup", o.style.cssText = "\n    position: fixed;\n    left: 70px;\n    top: 50%;\n    transform: translateY(-50%);\n    background: white;\n    padding: 15px;\n    width: 220px;\n    box-shadow: 0 0 15px rgba(0,0,0,0.1);\n    border-radius: 8px;\n    z-index: 9999;\n    display: none;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    direction: rtl;\n  ";
    const r = document.createElement("button");
    r.textContent = "×", r.style.cssText = "\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    background: none;\n    border: none;\n    font-size: 18px;\n    cursor: pointer;\n    padding: 5px;\n  ";
    const a = document.createElement("h3");
    a.textContent = "تخصيص الألوان", a.style.cssText = "\n    margin-top: 0;\n    margin-bottom: 15px;\n    color: #333;\n    font-size: 16px;\n    text-align: right;\n  ";
    const s = document.createElement("div");
    s.style.cssText = "\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n    margin-bottom: 15px;\n  ";
    const c = {
        "اللون الرئيسي": "--main-color",
        "لون الخلفية": "--bg-color",
        "لون التمييز": "--third-color",
        "لون النص": "--fourth-color"
    };
    for (const [n, o] of Object.entries(c)) {
        const r = document.createElement("div");
        r.style.cssText = "\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    ";
        const a = document.createElement("input");
        a.type = "color";
        const c = t ? "--main-color" === o ? t.mainColor : "--bg-color" === o ? t.bgColor : "--third-color" === o ? t.thirdColor : t.fourthColor : getComputedStyle(document.documentElement).getPropertyValue(o).trim();
        a.value = c, a.dataset.variable = o, a.style.cssText = "\n      width: 30px;\n      height: 30px;\n      cursor: pointer;\n      border-radius: 100%;\n      margin-bottom: 5px;\n    ";
        const i = document.createElement("span");
        i.textContent = n, i.style.cssText = "\n      font-size: 11px;\n      color: #555;\n      text-align: center;\n    ", a.addEventListener("input", (function() {
            document.documentElement.style.setProperty(this.dataset.variable, this.value), e()
        })), r.appendChild(a), r.appendChild(i), s.appendChild(r)
    }
    const i = document.createElement("button");
    i.textContent = "إعادة تعيين الألوان", i.style.cssText = "\n    grid-column: 1 / -1;\n    width: 100%;\n    padding: 8px;\n    background: #f0f0f0;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 13px;\n    transition: background 0.2s ease;\n  ", i.addEventListener("mouseenter", (() => i.style.background = "#e0e0e0")), i.addEventListener("mouseleave", (() => i.style.background = "#f0f0f0")), i.addEventListener("click", (function() {
        localStorage.removeItem("themePreferences"), document.documentElement.style.removeProperty("--main-color"), document.documentElement.style.removeProperty("--bg-color"), document.documentElement.style.removeProperty("--third-color"), document.documentElement.style.removeProperty("--fourth-color"), document.querySelectorAll('#theme-popup input[type="color"]').forEach((e => {
            e.value = getComputedStyle(document.documentElement).getPropertyValue(e.dataset.variable).trim()
        }))
    })), o.appendChild(r), o.appendChild(a), o.appendChild(s), o.appendChild(i), document.body.appendChild(n), document.body.appendChild(o), n.addEventListener("click", (function() {
        "none" === o.style.display || "" === o.style.display ? (o.style.display = "block", setTimeout((() => o.style.opacity = "1"), 10), n.style.transform = "translateY(-50%) rotate(45deg)") : (o.style.opacity = "0", setTimeout((() => o.style.display = "none"), 300), n.style.transform = "translateY(-50%)")
    })), r.addEventListener("click", (function() {
        o.style.opacity = "0", setTimeout((() => o.style.display = "none"), 300), n.style.transform = "translateY(-50%)"
    }))
}));
var requestOptions = {
    method: "GET",
    redirect: "follow"
};
fetch("https://api.salla.dev/admin/v2/categories?page&keyword&status&with=translations", requestOptions).then((e => e.text())).then((e => console.log(e))).catch((e => console.log("error", e)));
const data = [{
        icon: "🎧",
        text: "خدمة عملاء"
    }, {
        icon: "🚚",
        text: "توصيل آمن وسريع"
    }, {
        icon: "🏅",
        text: "جودة عالية"
    }],
    cardsContainer = document.createElement("div");
cardsContainer.className = "cards-section", cardsContainer.innerHTML = "\n    <style>\n      .cards-section {\n        display: flex;\n        justify-content: center;\n        gap: 30px;\n        margin: 50px auto;\n        width: 100%;\n        flex-wrap:wrap;\n      }\n      .cards-section .card {\n        background: #fff;\n        padding: 20px;\n        width:40%;\n        border-radius: 12px;\n        box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n        text-align: center;\n        transition: transform 0.3s;\n      }\n      .cards-section .card:hover {\n        transform: translateY(-5px);\n      }\n      .cards-section .icon {\n        font-size: 50px;\n        color: #b37aa1;\n        margin-bottom: 15px;\n        transition: transform 0.3s ease-in-out;\n      }\n      .cards-section .text {\n        font-size: 16px;\n        font-weight: bold;\n        color: #555;\n      }\n    </style>\n  ", data.forEach((e => {
    const t = document.createElement("div");
    t.className = "card";
    const n = document.createElement("div");
    n.className = "icon", n.textContent = e.icon;
    const o = document.createElement("div");
    o.className = "text", o.textContent = e.text, t.appendChild(n), t.appendChild(o), cardsContainer.appendChild(t)
}));
const footer = document.querySelector("footer.store-footer");
footer.parentNode.insertBefore(cardsContainer, footer);
const icons = cardsContainer.querySelectorAll(".icon");
icons.forEach(((e, t) => {
    setInterval((() => {
        e.style.transform = "scale(1.2) rotate(10deg)", setTimeout((() => {
            e.style.transform = "scale(1) rotate(0deg)"
        }), 300)
    }), 2e3 + 500 * t)
}));