document.addEventListener('DOMContentLoaded', function() {
  if (document.querySelector('.product-single')) {
    const productContainer = document.createElement('div');
    productContainer.classList.add('product-container');

    productContainer.innerHTML = `
      <div class="product-left">
        <!-- To change the product link, edit the href below -->
        <a href="https://salla.sa/bloar-beluar/%D8%AC%D9%87%D8%A7%D8%B2-%D8%A7%D9%84%D8%AA%D8%B9%D8%B7%D9%8A%D8%B1/p1869184846">
          <img src="https://cdn.salla.sa/yrlRO/7168b587-9cb1-478c-b7ff-f072e7a62ec5-1000x1000-PdF5AP03DmsIKRBCT4dCFpuKdisR81ml1yiDEx8k.jpg" 
               alt="جهاز التعطير">
        </a>
      </div>
      <div class="product-right">
        <div class="text-info">
          <!-- Special offer banner with inline style -->
          <div class="special-offer-banner" 
               style="display:block; font-weight:bold; color:#e74c3c; font-size:18px; margin:10px 0 5px 0; text-align:right; line-height:1.4;">
            احصل على العطر هذا بسعر مميز اليوم
          </div>
          <!-- Product title updated -->
          <div class="product-title">جهاز التعطير</div>
          <div class="price">
            <span class="current-price">٧٥ ريال سعودي</span>
            <span class="original-price">٩٩ ريال </span>
          </div>
        </div>
        <div class="addToCart" data-title="اشترِ الآن">
          <salla-add-product-button class="addToCart__btn hydrated" aria-label="Add to cart button" 
            product-id="612456968" product-status="sale" fill="outline" product-type="product">
            <div class="w-full">
              <salla-button aria-label="Add to cart button" product-id="612456968" 
                product-status="sale" product-type="product" loader-position="center" 
                class="s-button-wrap hydrated" shape="btn" color="primary" fill="outline" 
                size="medium" width="normal" type="button">
                <button aria-label="Add to cart button" product-id="612456968" 
                  product-status="sale" product-type="product" loader-position="center" 
                  type="button" 
                  class="s-button-element s-button-btn s-button-outline s-button-primary-outline s-button-loader-center">
                  <span class="s-button-text"><i class="text-[16px] sicon-shopping"></i> اشترِ الآن</span>
                </button>
              </salla-button>
            </div>
          </salla-add-product-button>
        </div>
      </div>
    `;

    const referenceNode = document.querySelector('.flex.flex-col.space-y-5.mb-5');
    if (referenceNode && referenceNode.parentNode) {
      referenceNode.parentNode.insertBefore(productContainer, referenceNode.nextSibling);
    } else {
      const infoSection = document.querySelector('.product-single__info');
      if (infoSection) {
        infoSection.appendChild(productContainer);
      }
    }
  }
});

document.addEventListener("DOMContentLoaded", () => {
  if (location.pathname.includes("/cart")) {
    ["body", "html", ".app-inner"].forEach(sel => {
      const el = document.querySelector(sel);
      if (el) el.style.background = "#f7f6f2";
    });
  }
});