/* زر واتساب عائم - WA STYLE */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #25D366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.whatsapp-float svg {
  width: 36px;
  height: 36px;
  fill: white;
}

/* دعم RTL (العربية) */
body[dir="rtl"] .whatsapp-float {
  left: 20px;
  right: auto;
}

/* للشاشات الصغيرة */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
  body[dir="rtl"] .whatsapp-float {
    left: 15px;
    right: auto;
  }
}
/* ========== الفوتر الأسود والذهبي ========== */

/* خلفية الفوتر الرئيسية */
#footer {
  background-color: #0a0a0a !important;
  border-top: 3px solid #d4af37 !important;
  color: #cccccc !important;
}

/* جميع العناوين (مثل "تابعنا"، "تواصل معنا") */
#footer h3 {
  color: #d4af37 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  position: relative !important;
  display: inline-block !important;
}

/* الخط الذهبي أسفل العنوان */
#footer h3::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  right: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: #d4af37 !important;
  border-radius: 2px !important;
}

/* النصوص العادية والروابط */
#footer p,
#footer span,
#footer li,
#footer a,
#footer .text-foreground,
#footer .text-muted {
  color: #dddddd !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* الروابط عند التمرير */
#footer a:hover {
  color: #d4af37 !important;
  transition: all 0.3s ease !important;
}

/* أيقونات التواصل الاجتماعي */
#footer .flex.gap-3 a,
#footer .social-icons a {
  background-color: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid #d4af37 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

#footer .flex.gap-3 a:hover,
#footer .social-icons a:hover {
  background-color: #d4af37 !important;
  transform: translateY(-3px) !important;
}

#footer .flex.gap-3 a:hover svg,
#footer .social-icons a:hover svg {
  fill: #0a0a0a !important;
}

/* أيقونات البريد والهاتف */
#footer svg:not(.size-6) {
  stroke: #d4af37 !important;
  fill: none !important;
}

/* الروابط التي تحتوي على البريد والهاتف */
#footer .flex.items-center a {
  color: #dddddd !important;
}

#footer .flex.items-center a:hover {
  color: #d4af37 !important;
}

/* الخط الفاصل العلوي للقسم السفلي */
#footer .border-border-light {
  border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* شريط طرق الدفع وصور الشحن */
#footer .flex.flex-wrap.items-center img {
  filter: brightness(0.8) !important;
  transition: filter 0.3s ease !important;
}

#footer .flex.flex-wrap.items-center img:hover {
  filter: brightness(1) !important;
}

/* النصوص الخاصة بالأرقام (الضريبي، السجل التجاري) */
#footer .text-muted.text-sm,
#footer .text-foreground.text-xs {
  color: #d4af37 !important;
  font-weight: 500 !important;
}

/* جعل النص "جميع الحقوق محفوظة" ذهبياً */
#footer .text-foreground.text-sm span {
  color: #d4af37 !important;
}

/* تنسيق خاص للشعار (اختياري) */
#footer img {
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(320deg);
  /* يمنح الشعار لوناً ذهبياً إذا كان أبيض */
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 768px) {
  #footer {
    text-align: center !important;
    padding: 30px 15px 20px !important;
  }
  #footer h3::after {
    right: 50% !important;
    transform: translateX(50%) !important;
  }
  #footer .flex.gap-3 {
    justify-content: center !important;
  }
  #footer .flex.items-center {
    justify-content: center !important;
  }
}
/* جعل علامة "غير متوفر" باللون الأحمر */
.badge-filled,
span.badge-filled,
span[class*="badge-filled"] {
  background-color: #dc2626 !important; /* خلفية حمراء */
  color: #ffffff !important;            /* نص أبيض */
  border: none !important;
  font-weight: 600 !important;
}
.custom-whatsapp-alert {
  background-color: #fff3e0;
  border-right: 4px solid #ff9800;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.custom-whatsapp-alert .alert-title {
  color: #e65100;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-whatsapp-btn {
  background-color: #25D366;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  text-decoration: none;
}
.custom-whatsapp-btn:hover {
  background-color: #128C7E;
}
.add-to-cart-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* حاوية الصورة النسبية */
.aspect-square.relative,
.embla__slide .relative.block {
  position: relative;
}
/* ========== ظل عند التمرير على عناصر الهيدر مع سلاسة ========== */

/* 1. ظل للروابط الرئيسية في القائمة */
nav ul li a,
nav .flex.items-center.gap-8 a {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
}

nav ul li a:hover,
nav .flex.items-center.gap-8 a:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.02);
  transform: translateY(-1px);
}


/* 3. ظل لأزرار القائمة المنسدلة */
[popovertarget] {
  transition: all 0.25s ease !important;
  padding: 6px 12px;
  border-radius: 10px;
}

[popovertarget]:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  background-color: rgba(0, 0, 0, 0.02);
  transform: translateY(-1px);
}

/* 4. ظل لزر القائمة الجانبية (الهامبرغر) */
button[command="show-modal"][commandfor="mobile-drawer"] {
  transition: all 0.2s ease !important;
  border-radius: 12px;
}

button[command="show-modal"][commandfor="mobile-drawer"]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.02);
}
/* إخفاء زر الملف الشخصي في الهيدر */
#header-profile-btn,
a#header-profile-btn {
  display: none !important;
}
/* تنسيق زر "جميع المنتجات" */
a.text-foreground.text-sm.hidden.items-center.gap-2.px-4.py-3.md\:flex {
  display: inline-flex !important;
  background: linear-gradient(135deg, #d4af37, #f5b81b) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  text-decoration: none;
}

/* تأثير عند المرور */
a.text-foreground.text-sm.hidden.items-center.gap-2.px-4.py-3.md\:flex:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  background: linear-gradient(135deg, #f5b81b, #d4af37) !important;
}

/* تنسيق السهم داخل الزر */
a.text-foreground.text-sm.hidden.items-center.gap-2.px-4.py-3.md\:flex svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

a.text-foreground.text-sm.hidden.items-center.gap-2.px-4.py-3.md\:flex:hover svg {
  transform: translateX(4px);
}