/* Add custom CSS styles below */ 
﴾إِنَّ اللَّهَ هُوَ الرَّزَّاقُ ذُو الْقُوَّةِ الْمَتِينُ﴿
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

body, html, h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea {
    font-family: 'Cairo', sans-serif !important;
}

/* ==========================================================================
   2. ألوان الهوية البصرية وتنسيق شريط الإعلانات العلوي
   ========================================================================== */
:root {
    --primary-color: #1a1a1a; /* اللون الأساسي - أسود فاخر */
    --accent-color: #bfa37a;  /* اللون الفرعي - ذهبي هادئ للمجوهرات والهدايا */
    --light-bg: #f9f9f9;      /* خلفية رمادية فاتحة جداً */
    --border-radius: 12px;    /* نعومة انحناء الزوايا */
}

/* شريط الإعلان العلوي */
.announcement-bar {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   3. تنسيق الهيدر وقائمة التنقل (Header & Navigation)
   ========================================================================== */
.site-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* أيقونة السلة والمفضلة والحساب */
.header-btn {
    color: var(--primary-color) !important;
    transition: color 0.3s ease;
}
.header-btn:hover {
    color: var(--accent-color) !important;
}

/* ==========================================
   4. كروت المنتجات وحمايتها (تم إصلاح المساحة للزر)
   ========================================== */
.s-product-card-entry {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: var(--normal-box-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100% !important;
  padding-bottom: 8px !important; /* مساحة داخلية إضافية أسفل الكارت للزر */
}

.s-product-card-entry img {
  width: 100% !important;
  height: 177px;
  object-fit: cover;
}

/* إعطاء عنوان المنتج والزر مساحة مرنة للظهور بالكامل */
.s-product-card-entry .s-product-card-title { 
  min-height: 44px; 
  margin-bottom: 8px !important;
}

/* لضمان عدم انضغاط زر إضافة للسلة */
.s-product-card-entry .s-product-card-button, 
.s-product-card-entry button {
  min-height: 38px !important;
  padding: 4px 8px !important;
}

/* ==========================================
   5. السلايدر وتكبير البنرات للجوال
   ========================================== */
@media (max-width: 768px) {
  .s-slider, .s-slider-item { height: 180px !important; }
  .s-slider-item img { height: 180px !important; object-fit: cover; }
  .s-products-slider-card {
    width: 46vw !important;
    max-width: 46vw !important;
  }
  .s-products-slider, .swiper-wrapper { overflow: visible !important; display: flex !important; }
}

/* ==========================================================================
   تصغير أيقونة الواتساب ورفعها فوق أزرار الشراء (خاص بالجوال)
   ========================================================================== */
@media (max-width: 768px) {
  .s-whatsapp-container, 
  .whatsapp-button, 
  [class*="whatsapp-container"], 
  [class*="whatsapp-btn"],
  a[href*="wa.me"], 
  a[href*="whatsapp.com"] {
    bottom: 100px !important; /* الارتفاع فوق الأزرار */
    left: 20px !important;
    position: fixed !important;
    z-index: 999999 !important;
    
    /* تصغير حجم الحاوية الأساسية للواتساب */
    width: 45px !important;   /* يمكنك تغيير الحجم من هنا (الافتراضي بسلة يكون 60px) */
    height: 45px !important;
  }

  /* تصغير الصورة أو الأيقونة الداخلية لتتناسب مع الحجم الجديد */
  .s-whatsapp-container img, 
  .whatsapp-button img,
  [class*="whatsapp"] img,
  [class*="whatsapp"] svg {
    width: 100% !important;
    height: 100% !important;
  }
}