/* Mobile Hero Text Colors Fix - إصلاح ألوان النصوص في قسم الهيرو على الهاتف */
/* حل مشكلة عدم ظهور نصوص الهيرو باللون الأبيض على الهاتف */

/* Universal hero text colors - apply to all screen sizes (desktop + mobile) */
.hero .hero-keywords .hero-rotator,
.hero-text .hero-keywords .hero-rotator,
.hero-layout .hero-keywords .hero-rotator,
.hero .hero-rotator,
.hero-text .hero-rotator,
.hero-layout .hero-rotator {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  z-index: 2 !important;
  position: relative !important;
}

.hero .hero-keywords,
.hero-text .hero-keywords,
.hero-layout .hero-keywords {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  z-index: 2 !important;
  position: relative !important;
}

.hero .hero-label,
.hero-text .hero-label,
.hero-layout .hero-label {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  z-index: 2 !important;
  position: relative !important;
}

@media (max-width: 768px) {
  /* Hero section base styling */
  .hero,
  .hero.section {
    color: #ffffff !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Hero title - العنوان الرئيسي */
  .hero h1,
  .hero .hero-title,
  .hero-text h1,
  .hero-layout .hero h1,
  .hero-copy h1,
  .hero-title h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero subtitle - العنوان الفرعي */
  .hero h2,
  .hero .hero-subtitle,
  .hero-text h2,
  .hero-layout .hero h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero description - الوصف */
  .hero p,
  .hero .hero-description,
  .hero-text p,
  .hero-layout .hero p,
  .hero-copy p,
  .hero-description p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero eyebrow - الشريط العلوي */
  .hero .hero-eyebrow,
  .hero-text .hero-eyebrow,
  .hero-layout .hero-eyebrow {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero keywords - الكلمات المفتاحية */
  .hero .hero-keywords,
  .hero-text .hero-keywords,
  .hero-layout .hero-keywords {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero rotator - النص المتغير */
  .hero .hero-keywords .hero-rotator,
  .hero-text .hero-keywords .hero-rotator,
  .hero-layout .hero-keywords .hero-rotator,
  .hero .hero-rotator,
  .hero-text .hero-rotator,
  .hero-layout .hero-rotator {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero meta - المعلومات الإضافية */
  .hero .hero-meta,
  .hero-text .hero-meta,
  .hero-layout .hero-meta {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero badge - الشارة */
  .hero .hero-badge,
  .hero-text .hero-badge,
  .hero-layout .hero-badge {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero rating - التقييم */
  .hero .hero-rating,
  .hero-text .hero-rating,
  .hero-layout .hero-rating {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  .hero .hero-rating strong,
  .hero-text .hero-rating strong,
  .hero-layout .hero-rating strong {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Hero actions - الأزرار */
  .hero .hero-actions,
  .hero-text .hero-actions,
  .hero-layout .hero-actions {
    z-index: 2 !important;
    position: relative !important;
  }
  
  .hero .hero-actions .btn,
  .hero-text .hero-actions .btn,
  .hero-layout .hero-actions .btn {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Hero container and layout */
  .hero .container,
  .hero .hero-layout,
  .hero .hero-text,
  .hero .hero-copy {
    color: #ffffff !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* Override any conflicting styles */
  .hero * {
    color: inherit !important;
  }
  
  /* Ensure all text elements are white */
  .hero h1,
  .hero h2,
  .hero h3,
  .hero h4,
  .hero h5,
  .hero h6,
  .hero p,
  .hero span,
  .hero div,
  .hero strong,
  .hero em,
  .hero small,
  .hero label {
    color: #ffffff !important;
  }
  
  /* Specific text elements with opacity */
  .hero p,
  .hero .hero-description,
  .hero .hero-eyebrow,
  .hero .hero-meta {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  
  /* Small mobile adjustments */
  @media (max-width: 480px) {
    .hero h1,
    .hero .hero-title,
    .hero-text h1 {
      font-size: 2rem !important;
      color: #ffffff !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    }
    
    .hero p,
    .hero .hero-description {
      font-size: 1rem !important;
      color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
    }
  }
  
  /* Extra small mobile adjustments */
  @media (max-width: 360px) {
    .hero h1,
    .hero .hero-title,
    .hero-text h1 {
      font-size: 1.8rem !important;
      color: #ffffff !important;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
    }
    
    .hero p,
    .hero .hero-description {
      font-size: 0.95rem !important;
      color: rgba(255, 255, 255, 0.85) !important;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
    }
  }
}

/* RTL support for Arabic */
[dir="rtl"] .hero,
[dir="rtl"] .hero.section {
  direction: rtl !important;
}

[dir="rtl"] .hero h1,
[dir="rtl"] .hero .hero-title,
[dir="rtl"] .hero-text h1 {
  text-align: right !important;
  direction: rtl !important;
  color: #ffffff !important;
}

[dir="rtl"] .hero p,
[dir="rtl"] .hero .hero-description,
[dir="rtl"] .hero-text p {
  text-align: right !important;
  direction: rtl !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* LTR support for English */
[dir="ltr"] .hero,
[dir="ltr"] .hero.section {
  direction: ltr !important;
}

[dir="ltr"] .hero h1,
[dir="ltr"] .hero .hero-title,
[dir="ltr"] .hero-text h1 {
  text-align: left !important;
  direction: ltr !important;
  color: #ffffff !important;
}

[dir="ltr"] .hero p,
[dir="ltr"] .hero .hero-description,
[dir="ltr"] .hero-text p {
  text-align: left !important;
  direction: ltr !important;
  color: rgba(255, 255, 255, 0.9) !important;
}