/* تعريف الانيميشن */
@keyframes fadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* تطبيق الانيميشن على جميع البلوكات */
.theme-section, .block, .section, .s-block, .salla-block {
  opacity: 0;
  animation: fadeZoom 0.8s ease forwards;
  animation-delay: 0.3s;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* تأثير hover */
.theme-section:hover, .block:hover, .section:hover, .s-block:hover, .salla-block:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 188, 212, 0.2);
  transition: all 0.3s ease;
}
/* الهيدر */
header {
  background-color: #0077B6;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header .logo {
  max-width: 180px;
  margin: 0 auto;
  display: block;
}

header .navbar {
  text-align: center;
}
/* تنسيق عام للإحصائيات */
.statistics-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
  padding: 20px;
  background-color: #0077B6; /* السماوي الفاتح */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* تنسيق البلوكات داخل الإحصائيات */
.stat-item, .stat-box {
  text-align: center;
  flex-basis: 30%;
  padding: 25px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* تأثير عند المرور بالماوس */
.stat-item:hover, .stat-box:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 188, 212, 0.3);
}

/* تخصيص النص في الإحصائيات */
.stat-item h3, .stat-box h3 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #007c91; /* الأزرق الداكن */
  margin-bottom: 10px;
}

.stat-item p, .stat-box p {
  font-size: 1.4rem;
  color: #555;
}

/* تخصيص الأيقونات */
.stat-item i, .stat-item svg, .stat-box i, .stat-box svg {
  font-size: 3.5rem; /* حجم الأيقونة أكبر */
  color: #00bcd4;
  margin-bottom: 15px;
}

/* انيميشن Fade + Zoom لجميع الإحصائيات */
@keyframes fadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* تطبيق انيميشن Fade + Zoom */
.stat-item, .stat-box {
  opacity: 0;
  animation: fadeZoom 1s ease-out forwards;
  animation-delay: 0.3s; /* تأخير بسيط لكل بلوك */
}

/* زيادة التباعد بين العناصر في بعض الشاشات الصغيرة */
@media (max-width: 768px) {
  .statistics-container {
    flex-direction: column;
    align-items: center;
  }

  .stat-item, .stat-box {
    margin-bottom: 20px;
    width: 80%;
  }
}
/* تغيير خلفية المساحة البيضاء في الجزء العلوي */
header, .top-section, .main-header {
  background-color: #0077B6; /* البيج الفاتح */
}

/* إذا كان الهيدر يحتوي على تدرج لوني أو تفاصيل أخرى */
header {
  background: #0077B6; /* البيج الفاتح */
  padding: 20px 0;  /* تغيير المسافة حسب الحاجة */
}
/* تصغير شريط البحث */
.search-bar {
  height: 30px; /* تقليل ارتفاع الشريط */
  width: 20px; /* تقليل عرض الشريط */
  padding: 5px;
  border-radius: 5px;
  transition: all 0.3s ease; /* حركة ناعمة */
}

.search-bar:focus {
  width: 300px; /* إذا كان الشريط مفعّل يكون عرضه أكبر */
  transition: all 0.3s ease;
}

/* إخفاء الشريط بشكل كامل عند عدم الحاجة */
.search-bar-container {
  display: none; /* إخفاء الشريط */
}

.search-bar-container.active {
  display: block; /* إظهار الشريط عند تفعيل الأيقونة */
}
/* تغيير لون الخلفية في الهيدر */
.header-contact {
  background-color: #f4f1e1; /* تغيير اللون إلى البيج الفاتح */
  color: #007c91; /* لون النص */
  padding: 15px 20px;
}

/* تغيير لون النص في الأيقونات */
.header-contact i, .header-contact a {
  color: #ead5d5; /* لون الأيقونات */
}

.header-contact i:hover, .header-contact a:hover {
  color: #ead5d5; /* تغيير اللون عند التمرير */
  transition: color 0.3s ease;
}
/* إخفاء الشريط وتحجيمه ليظهر كأيقونة صغيرة */
#search-bar {
  height: 30px; /* تصغير الشريط */
  width: 200px; /* عرض أصغر */
  padding: 5px;
  border-radius: 5px;
  transition: width 0.3s ease; /* حركة ناعمة */
}

#search-bar:focus {
  width: 300px; /* عند التفاعل مع الشريط يصبح أكبر */
  transition: width 0.3s ease;
}

/* إخفاء الشريط عند الضغط على أيقونة البحث */
#search-bar-container {
  display: none; /* إخفاء بشكل مبدئي */
}

#search-bar-container.active {
  display: block; /* إظهار عندما يتم تفعيل الأيقونة */
}
/* تغيير خلفية منطقة التواصل (رقم الهاتف والأيقونات) */
.header-contact-area {
  background-color: #f4f1e1; /* لون بيج فاتح */
  color: #007c91; /* تغيير لون النص */
  padding: 10px 20px;
}

/* تغيير لون الأيقونات في منطقة التواصل */
.header-contact-area i, .header-contact-area a {
  color: #007c91; /* لون الأيقونات */
}

.header-contact-area i:hover, .header-contact-area a:hover {
  color: #00bcd4; /* اللون عند التمرير */
  transition: color 0.3s ease;
}
/* تصغير شريط البحث في الهيدر */
.header-search-bar input[type="text"], .search-bar {
  height: 30px; /* تصغير الارتفاع */
  width: 200px; /* تصغير العرض */
  padding: 5px;
  border-radius: 5px;
  font-size: 14px; /* تصغير الخط */
  transition: width 0.3s ease; /* تأثير التغيير */
}

.header-search-bar input[type="text"]:focus, .search-bar:focus {
  width: 300px; /* زيادة الحجم عند التفاعل */
  transition: width 0.3s ease;
}

/* تغيير شكل الزر عند التفاعل */
.header-search-bar button {
  font-size: 14px;
  padding: 5px 10px;
  background-color: #00bcd4;
  border: none;
  border-radius: 5px;
  color: brown;
}
/* تصغير شريط البحث */
.search-bar input[type="text"] {
  height: 30px;
  width: 200px;  /* تقليل العرض */
  padding: 5px;
  font-size: 14px;
  transition: width 0.3s ease;
}

/* تكبير شريط البحث عند التفاعل */
.search-bar input[type="text"]:focus {
  width: 300px;  /* زيادة العرض عند التركيز */
  transition: width 0.3s ease;
}
/* تغيير لون منطقة التواصل (الهيدر) */
.header-contact {
  background-color: #f4f1e1;  /* البيج الفاتح */
  color: #007c91;  /* الأزرق الداكن */
  padding: 15px 20px;
}

/* تغيير لون الأيقونات في منطقة التواصل */
.header-contact i, .header-contact a {
  color: #007c91;
}

.header-contact i:hover, .header-contact a:hover {
  color: #00bcd4;  /* تغيير اللون عند التمرير */
  transition: color 0.3s ease;
}
body {
  color: #4276b3; /* اللون الأزرق الغامق */
}
button.product__form-submit,
form[action*="/cart/add"] button,
button.btn--add-to-cart,
.product-actions .btn--primary {
  display: none !important;
}
/* إخفاء زر "إضافة للسلة" لمنتج معين بناءً على الـ ID */
custom-salla-product-card[id="472377473"] button,
custom-salla-product-card[id="472377473"] a[href*="cart"] {
  display: none !important;
}