/* ========================================================
   تنسيقات الهيدر المخصص - سطام العود (للديسكتوب فقط)
   (في الجوال سيبقى الهيدر الافتراضي لمنصة زد كما طلبت)
   ======================================================== */

@media (min-width: 1024px) {
  
  /* 1. جعل خلفية الهيدر بيضاء مع ظل خفيف بدلاً من الحدود */
  header.bg-secondary {
    background-color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* 2. تجهيز حاوية الهيدر للتموضع */
  header nav.theme-container {
    position: relative !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 3. توسيط حاوية الشعار بالقوة المطلقة (ديسكتوب فقط) */
  header nav .flex.items-center.gap-8 > a[href="/"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  /* 4. إجبار صورة الشعار في الديسكتوب على التمركز وإلغاء خصائص القالب */
  header nav .flex.items-center.gap-8 > a[href="/"] img.hidden.md\:block {
    position: static !important;
    transform: none !important; 
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 60px !important; /* حجم الشعار في الديسكتوب */
    width: auto !important;
    object-fit: contain !important;
  }

  /* 5. إخفاء الروابط النصية من الديسكتوب للحصول على مظهر نظيف */
  header nav ul.lg\:flex {
    display: none !important;
  }

  /* 6. تنسيق الأيقونات (السلة، البحث، الحساب) لتكون باللون الأسود */
  header nav .text-foreground,
  header nav svg.text-foreground,
  header nav button svg {
    color: #111827 !important;
    transition: color 0.3s ease;
  }

  /* تأثير التمرير للأيقونات (يتحول للذهبي) */
  header nav button:hover svg,
  header nav a:hover svg {
    color: #b98b28 !important;
  }

  /* 7. شارة رقم المنتجات في السلة */
  [data-cart-badge] {
    background-color: #b98b28 !important; /* خلفية ذهبية */
    color: #ffffff !important;
    font-weight: bold !important;
  }
}

/* --- Sattam Al-Oud Premium Products CSS --- */

/* 1. الحاوية الرئيسية وقسم المنتجات */
.section-products {
  background-color: #fcfcfc; /* لون خلفية هادئ جداً لتمييز القسم */
}

/* 2. تصميم بطاقة المنتج الأساسية */
[data-product-card] {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 15px; /* مساحة داخلية مريحة */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  height: 100%;
}

/* تأثير مرور الماوس على بطاقة المنتج */
[data-product-card]:hover {
  transform: translateY(-5px); /* رفع خفيف */
  box-shadow: 0 12px 24px rgba(185, 139, 40, 0.1); /* ظل مائل للذهبي */
  border-color: #e5cc98; /* إطار مذهب خفيف */
}

/* 3. حاوية الصورة */
[data-product-card] > a {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px; /* مسافة بين الصورة والنص */
  background-color: #f9f9f9; /* خلفية محايدة للصورة */
}

[data-product-card] img {
  transition: transform 0.5s ease;
}

/* تكبير الصورة ببطء عند التمرير */
[data-product-card]:hover img {
  transform: scale(1.05);
}

/* 4. زر إضافة للمفضلة */
[data-wishlist-btn] {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #111827 !important; /* أيقونة سوداء */
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

[data-wishlist-btn]:hover {
  background-color: #111827 !important;
  color: #b98b28 !important; /* أيقونة ذهبية عند التمرير */
  border-color: #b98b28;
}

/* 5. شارة الخصم (Badge) */
.bg-success\/20, 
[data-product-card] .text-success {
  background-color: #b98b28 !important; /* خلفية ذهبية */
  color: #ffffff !important; /* نص أبيض */
  border-radius: 4px;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* 6. عناوين المنتجات */
[data-product-card] h3 a {
  color: #111827; /* أسود كلاسيكي */
  font-weight: 700;
  font-size: 1.1rem;
  transition: color 0.3s ease;
  display: block; /* لتحسين شكل العناوين الطويلة */
  line-height: 1.4;
}

[data-product-card]:hover h3 a {
  color: #b98b28; /* يتحول للذهبي عند تمرير الماوس على البطاقة */
}

/* 7. تنسيق الأسعار */
/* السعر الأساسي (الحالي) */
[data-product-card] p.font-semibold {
  color: #b98b28 !important; /* لون السعر ذهبي */
  font-size: 1.25rem !important;
  font-weight: 800;
}

/* السعر المشطوب (القديم) */
[data-product-card] .line-through {
  color: #9ca3af !important; /* رمادي فاتح */
  font-size: 0.9rem;
}

/* 8. زر أضف للسلة (المظهر العادي) */
[data-product-card] .btn-outlined {
  background-color: #111827; /* خلفية سوداء */
  color: #ffffff; /* نص أبيض */
  border: 1px solid #111827;
  border-radius: 8px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  padding: 10px 0; /* زيادة ارتفاع الزر ليكون أوضح */
}

/* تأثير مرور الماوس على زر الإضافة */
[data-product-card] .btn-outlined:hover {
  background-color: #b98b28; /* يتحول للذهبي */
  color: #ffffff;
  border-color: #b98b28;
  box-shadow: 0 4px 10px rgba(185, 139, 40, 0.3);
}

/* 9. قسم التحكم بالكمية (إذا كان ظاهراً) */
[data-qty-input] {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

[data-qty-action] {
  background-color: #f9f9f9;
  color: #111827;
  transition: background-color 0.2s ease;
}

[data-qty-action]:hover {
  background-color: #e5cc98; /* لون مذهب خفيف عند النقر/التمرير */
}

.qty-input-field {
  color: #111827;
  font-weight: bold;
}

/* 10. تعديلات أزرار السلايدر (السهم اليمين واليسار) */
.products-embla__prev, 
.products-embla__next {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb;
  color: #111827 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.products-embla__prev:hover:not(:disabled), 
.products-embla__next:hover:not(:disabled) {
  background-color: #111827 !important;
  color: #b98b28 !important;
  border-color: #111827;
}

/* شريط التقدم للسلايدر */
.products-embla__progress-bar {
  background-color: #b98b28 !important; /* لون الشريط ذهبي */
}
/* تصميم زر الواتساب العائم - إجباري */
.sattam-whatsapp-float {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important; 
  width: 60px !important;
  height: 60px !important;
  background-color: #111827 !important; 
  color: #b98b28 !important; 
  border: 2px solid #b98b28 !important; 
  border-radius: 50% !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  z-index: 999999 !important; /* رقم عالي جداً ليطفو فوق كل شيء */
  box-shadow: 0 4px 15px rgba(185, 139, 40, 0.3) !important;
  transition: all 0.3s ease !important;
  animation: sattam-pulse-gold 2s infinite !important;
}

.sattam-whatsapp-float:hover {
  transform: scale(1.1) !important;
  background-color: #b98b28 !important; 
  color: #111827 !important; 
  box-shadow: 0 6px 20px rgba(185, 139, 40, 0.5) !important;
}

.sattam-whatsapp-float svg {
  width: 32px !important;
  height: 32px !important;
  fill: currentColor !important;
}

@keyframes sattam-pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(185, 139, 40, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(185, 139, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(185, 139, 40, 0); }
}

@media (max-width: 768px) {
  .sattam-whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    bottom: 20px !important;
    right: 20px !important; 
  }
  .sattam-whatsapp-float svg {
    width: 26px !important;
    height: 26px !important;
  }
}
/* إخفاء أيقونة الدفع عند الاستلام من أسفل الصفحة (الفوتر) */
footer img[alt="دفع عند الاستلام"],
footer img[src*="cod.png"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* إخفاء الرابط المحيط بالأيقونة لكي لا يترك مسافة فارغة قابلة للنقر */
footer a[href="/shipping-and-payment"]:has(img[alt="دفع عند الاستلام"]),
footer a[href="/shipping-and-payment"]:has(img[src*="cod.png"]) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}