/* header general */ 
.matcha-store-header .matcha-main-nav-container {
  background-color: #fceff6!important;
  color: #631a2b;
}

/* header logo */
.navbar-brand img{
  opacity: 0;
}
a.navbar-brand {
  content: "";
  background-image: url(https://i.postimg.cc/Ff9Gk9ML/ROSE.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  
  width: 160px;
}

/* header cart */
.matcha-store-header .matcha-main-nav-container .card-header-btn__icon,
.matcha-store-header .matcha-main-nav-container .card-header-btn__icon:after{
  background: #631a2b!important;
}

/* hero banner */
section.s-block.s-block--fixed-banner.wide-placeholder.component-spacing .container {
  max-width: 100%;
  padding: 0;
}
section.s-block.s-block--fixed-banner.wide-placeholder.component-spacing img {
  border-radius: 0!important;
}

/* categories */
.matcha-categories .lg\:grid-cols-4{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.category-card .bg-gradient-to-t{
  display: none;
}
.category-card .object-cover{
  object-fit: contain;
}

a.category-card.group.relative.rounded-3xl.overflow-hidden.bg-white.shadow-lg.hover\:shadow-2xl.transition-all.duration-500 {
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}

a.category-card img{
  transition: all .3s ease;
}

.category-card .aspect-\[4\/5\].relative.overflow-hidden{
  aspect-ratio: auto;
}

.category-card .overflow-hidden{
  overflow: visible;
}

.category-card .absolute.bottom-0.left-0.right-0.p-6.text-white {
  position: relative;
  margin-top: 16px;
  text-align: center;
  padding: 6px 14px !important;
}

.category-card .absolute.top-6.right-6.opacity-0.group-hover\:opacity-100.transition-opacity.duration-300{
  display: none;
}

/* footer */
.matcha-store-footer {
  background: #4a111e;
}
.matcha-store-footer .matcha-store-footer__inner{
  background: #631a2b;
}
(function () {

    function initRoseCouponPopup() {

        const POPUP_IMAGE_URL = "https://ibb.co/prQzB4Dn";
        const POPUP_CLICK_URL = "https://roseblends.com/%D8%A8%D9%83%D8%AC%D8%A7%D8%AA/p972354605";
        const DISCOUNT_CODE = "Rose";
        const POPUP_DELAY = 3000;

        const BRAND_COLOR = "#761314";
        const BRAND_HOVER = "#9B3F50";
        const SIDE_TAB_TEXT = "كود خصم";

        const POPUP_STORAGE_KEY = "rose_blends_coupon_popup_v1";

        const IS_MOBILE = window.innerWidth <= 768;

        addCustomPopupStyle();

        if (localStorage.getItem(POPUP_STORAGE_KEY)) {
            createSideTab();
        } else {
            setTimeout(function () {
                createPopup();
            }, POPUP_DELAY);
        }

        function addCustomPopupStyle() {
            const oldStyle = document.getElementById("rose-popup-style");
            if (oldStyle) oldStyle.remove();

            const style = document.createElement("style");
            style.id = "rose-popup-style";

            style.innerHTML = `
                #offers-side-tab {
                    position: fixed !important;
                    left: 0 !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                    z-index: 2147483647 !important;
                    background: ${BRAND_COLOR} !important;
                    color: #ffffff !important;
                    border: none !important;
                    border-radius: 0 10px 10px 0 !important;
                    width: 48px !important;
                    height: 145px !important;
                    padding: 0 !important;
                    margin: 0 !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    cursor: pointer !important;
                    box-shadow: 0 5px 18px rgba(0,0,0,0.25) !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                    overflow: hidden !important;
                    text-align: center !important;
                    pointer-events: auto !important;
                }

                #offers-side-tab .rose-side-text {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    width: 145px !important;
                    height: 48px !important;
                    transform: rotate(-90deg) !important;
                    white-space: nowrap !important;
                    font-size: 15px !important;
                    font-weight: 900 !important;
                    line-height: 1 !important;
                    font-family: Arial, sans-serif !important;
                    color: #ffffff !important;
                    text-align: center !important;
                }

                #offers-side-tab:hover {
                    background: ${BRAND_HOVER} !important;
                    width: 52px !important;
                }

                @media (max-width: 768px) {
                    #offers-side-tab {
                        width: 46px !important;
                        height: 138px !important;
                        top: 52% !important;
                        border-radius: 0 10px 10px 0 !important;
                    }

                    #offers-side-tab .rose-side-text {
                        width: 138px !important;
                        height: 46px !important;
                        font-size: 14px !important;
                        font-weight: 900 !important;
                    }
                }
            `;

            document.head.appendChild(style);
        }

        function createPopup() {

            const oldTab = document.getElementById("offers-side-tab");
            if (oldTab) oldTab.remove();

            const oldPopup = document.getElementById("custom-image-popup");
            if (oldPopup) oldPopup.remove();

            const popupOverlay = document.createElement("div");
            popupOverlay.id = "custom-image-popup";

            Object.assign(popupOverlay.style, {
                position: "fixed",
                top: "0",
                left: "0",
                width: "100%",
                height: "100%",
                backgroundColor: "rgba(0, 0, 0, 0.70)",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                zIndex: "2147483646",
                opacity: "0",
                visibility: "hidden",
                transition: "all 0.3s ease-in-out",
                padding: IS_MOBILE ? "10px" : "16px",
                boxSizing: "border-box"
            });

            const popupContent = document.createElement("div");

            Object.assign(popupContent.style, {
                position: "relative",
                width: IS_MOBILE ? "86%" : "92%",
                maxWidth: IS_MOBILE ? "330px" : "580px",
                transform: "scale(0.8)",
                transition: "all 0.3s ease-in-out",
                borderRadius: "18px",
                overflow: "visible"
            });

            const imageLink = document.createElement("a");
            imageLink.href = POPUP_CLICK_URL;
            imageLink.target = "_self";
            imageLink.style.display = "block";

            const popupImage = document.createElement("img");
            popupImage.src = POPUP_IMAGE_URL;
            popupImage.alt = "عرض خلطات روز";

            Object.assign(popupImage.style, {
                width: "100%",
                height: "auto",
                borderRadius: "18px 18px 0 0",
                display: "block",
                boxShadow: "0 12px 35px rgba(0,0,0,0.35)",
                border: "2px solid " + BRAND_COLOR,
                borderBottom: "none"
            });

            const couponBox = document.createElement("div");

            Object.assign(couponBox.style, {
                backgroundColor: "#FFF7FA",
                border: "2px solid " + BRAND_COLOR,
                borderTop: "none",
                borderRadius: "0 0 18px 18px",
                padding: IS_MOBILE ? "12px" : "16px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                gap: "10px",
                boxShadow: "0 12px 35px rgba(0,0,0,0.20)",
                direction: "rtl",
                flexWrap: "wrap"
            });

            couponBox.onclick = function (e) {
                e.stopPropagation();
            };

            const couponText = document.createElement("div");
            couponText.innerHTML = 'كود الخصم: <strong>' + DISCOUNT_CODE + '</strong>';

            Object.assign(couponText.style, {
                color: BRAND_COLOR,
                fontSize: IS_MOBILE ? "14px" : "16px",
                fontWeight: "800",
                fontFamily: "Arial, sans-serif"
            });

            const copyBtn = document.createElement("button");
            copyBtn.innerHTML = "نسخ الكوبون";

            Object.assign(copyBtn.style, {
                backgroundColor: BRAND_COLOR,
                color: "#ffffff",
                border: "none",
                borderRadius: "12px",
                padding: IS_MOBILE ? "11px 20px" : "13px 34px",
                fontSize: IS_MOBILE ? "14px" : "16px",
                fontWeight: "bold",
                cursor: "pointer",
                minWidth: IS_MOBILE ? "140px" : "170px",
                textAlign: "center"
            });

            copyBtn.onmouseenter = function () {
                copyBtn.style.backgroundColor = BRAND_HOVER;
            };

            copyBtn.onmouseleave = function () {
                copyBtn.style.backgroundColor = BRAND_COLOR;
            };

            copyBtn.onclick = function (e) {
                e.preventDefault();
                e.stopPropagation();
                copyDiscountCode(DISCOUNT_CODE, copyBtn);
            };

            couponBox.appendChild(couponText);
            couponBox.appendChild(copyBtn);

            const closeBtn = document.createElement("button");
            closeBtn.innerHTML = "&times;";
            closeBtn.setAttribute("aria-label", "إغلاق");

            Object.assign(closeBtn.style, {
                position: "absolute",
                top: "-12px",
                right: "-12px",
                width: IS_MOBILE ? "32px" : "36px",
                height: IS_MOBILE ? "32px" : "36px",
                borderRadius: "50%",
                backgroundColor: BRAND_COLOR,
                color: "#ffffff",
                border: "2px solid #ffffff",
                fontSize: IS_MOBILE ? "22px" : "25px",
                fontWeight: "bold",
                cursor: "pointer",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                lineHeight: "1",
                boxShadow: "0 3px 12px rgba(0,0,0,0.35)",
                zIndex: "2147483647"
            });

            closeBtn.onclick = function (e) {
                e.stopPropagation();
                closePopupAndShowTab();
            };

            popupOverlay.onclick = function (event) {
                if (event.target === popupOverlay) {
                    closePopupAndShowTab();
                }
            };

            imageLink.appendChild(popupImage);
            popupContent.appendChild(closeBtn);
            popupContent.appendChild(imageLink);
            popupContent.appendChild(couponBox);
            popupOverlay.appendChild(popupContent);
            document.body.appendChild(popupOverlay);

            setTimeout(function () {
                popupOverlay.style.opacity = "1";
                popupOverlay.style.visibility = "visible";
                popupContent.style.transform = "scale(1)";
                localStorage.setItem(POPUP_STORAGE_KEY, "true");
            }, 50);

            function closePopupAndShowTab() {
                popupOverlay.style.opacity = "0";
                popupOverlay.style.visibility = "hidden";
                popupContent.style.transform = "scale(0.8)";

                setTimeout(function () {
                    if (popupOverlay && popupOverlay.parentNode) {
                        popupOverlay.remove();
                    }

                    createSideTab();
                }, 300);
            }
        }

        function createSideTab() {

            const oldTab = document.getElementById("offers-side-tab");
            if (oldTab) oldTab.remove();

            const sideTab = document.createElement("button");
            sideTab.id = "offers-side-tab";
            sideTab.type = "button";
            sideTab.innerHTML = '<span class="rose-side-text">' + SIDE_TAB_TEXT + '</span>';
            sideTab.setAttribute("aria-label", SIDE_TAB_TEXT);

            sideTab.onclick = function () {
                sideTab.remove();
                createPopup();
            };

            document.body.appendChild(sideTab);
        }

        function copyDiscountCode(code, button) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(code).then(function () {
                    showCopied(button);
                }).catch(function () {
                    fallbackCopy(code, button);
                });
            } else {
                fallbackCopy(code, button);
            }
        }

        function fallbackCopy(code, button) {
            const tempInput = document.createElement("textarea");
            tempInput.value = code;
            tempInput.style.position = "fixed";
            tempInput.style.opacity = "0";
            tempInput.style.left = "-9999px";

            document.body.appendChild(tempInput);
            tempInput.focus();
            tempInput.select();

            try {
                document.execCommand("copy");
                showCopied(button);
            } catch (err) {
                button.innerHTML = "تعذر النسخ";
            }

            document.body.removeChild(tempInput);
        }

        function showCopied(button) {
            const oldText = button.innerHTML;
            button.innerHTML = "تم النسخ ✓";
            button.style.backgroundColor = "#3BB273";

            setTimeout(function () {
                button.innerHTML = oldText;
                button.style.backgroundColor = BRAND_COLOR;
            }, 1800);
        }
    }

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

})();

document.addEventListener("DOMContentLoaded", function () {
  function forceWhiteButtonText() {
    document.querySelectorAll(
      'salla-add-product-button button, .s-add-product-button-main button, .sticky-product-bar button, .s-button-element'
    ).forEach(function (btn) {
      btn.style.setProperty("color", "#ffffff", "important");
      btn.style.setProperty("-webkit-text-fill-color", "#ffffff", "important");

      btn.querySelectorAll("*").forEach(function (el) {
        el.style.setProperty("color", "#ffffff", "important");
        el.style.setProperty("-webkit-text-fill-color", "#ffffff", "important");
        el.style.setProperty("fill", "#ffffff", "important");
        el.style.setProperty("stroke", "#ffffff", "important");
      });
    });
  }

  forceWhiteButtonText();

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