/* Add custom CSS styles below */ 
/* =========================
   خلفية الصفحة
   ========================= */
body {
  background-color: #fff3f1; /* خلفية الصفحة */
}

/* =========================

document.addEventListener("DOMContentLoaded", function() {
  // تغيير مربعات المنتجات
  document.querySelectorAll('[class*="product"]').forEach(function(product){
    product.style.backgroundColor = "rgba(255,255,255,0)";
    product.style.border = "1px solid #000";
    product.style.borderRadius = "12px";
    product.style.boxShadow = "none";
    product.style.transition = "transform 0.3s, box-shadow 0.3s";
  });

  // تغيير أزرار الإضافة للسلة
  document.querySelectorAll('[class*="btn"]').forEach(function(btn){
    btn.style.backgroundColor = "rgba(255,255,255,0)";
    btn.style.border = "1px solid #000";
    btn.style.color = "#000";
    btn.style.borderRadius = "8px";
    btn.style.fontWeight = "600";
    btn.style.transition = "background-color 0.3s, color 0.3s";

    btn.addEventListener("mouseenter", function(){
      btn.style.backgroundColor = "#000";
      btn.style.color = "#fff";
    });

    btn.addEventListener("mouseleave", function(){
      btn.style.backgroundColor = "rgba(255,255,255,0)";
      btn.style.color = "#000";
    });
  });
});