/* RTL Carousel Fixes - إصلاحات خاصة بالكاروسول للغة العربية */

/* Force carousel to work in LTR direction even in RTL languages */
html[dir="rtl"] .hero .carousel,
html[dir="rtl"] .hero .carousel-item,
html[dir="rtl"] .hero .carousel-item img {
  direction: ltr !important;
  text-align: left !important;
}

/* Ensure images are always visible in RTL but keep original styling */
html[dir="rtl"] .hero .carousel-item img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 1 !important;
  transform: none !important;
}

/* Restore original overlay layer with filter effect in RTL */
html[dir="rtl"] .hero .carousel-item::before {
  content: "" !important;
  background-color: var(--background-color) !important;
  opacity: 1 !important;
  z-index: 2 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Restore color-mix support for modern browsers in RTL */
@supports (color: color-mix(in lab, red, red)) {
  html[dir="rtl"] .hero .carousel-item::before {
    background-color: color-mix(in srgb, var(--background-color), transparent 30%) !important;
  }
}

/* Fix carousel controls in RTL */
html[dir="rtl"] .hero .carousel-control-prev,
html[dir="rtl"] .hero .carousel-control-next {
  direction: ltr !important;
}

/* Fix carousel indicators in RTL */
html[dir="rtl"] .hero .carousel-indicators {
  direction: ltr !important;
}

/* Force carousel transitions to work properly */
html[dir="rtl"] .hero .carousel-item {
  transition: transform 0.6s ease-in-out !important;
}

html[dir="rtl"] .hero .carousel-item img {
  transition: none !important;
}

/* Ensure proper image loading in RTL */
html[dir="rtl"] .hero .carousel-item img[src*="hero-carousel"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Fix for any potential CSS conflicts in RTL */
html[dir="rtl"] .hero .carousel-item.active img,
html[dir="rtl"] .hero .carousel-item:not(.active) img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure proper filter effect works in RTL */
html[dir="rtl"] .hero .carousel-item::before {
  pointer-events: none !important;
}

/* Fix for any potential z-index conflicts in RTL */
html[dir="rtl"] .hero .carousel-item {
  z-index: 1 !important;
}

html[dir="rtl"] .hero .carousel-item.active {
  z-index: 2 !important;
}

/* Ensure text content is visible above the filter in RTL */
html[dir="rtl"] .hero .info {
  z-index: 3 !important;
  position: relative !important;
}

/* Fix for carousel controls visibility in RTL */
html[dir="rtl"] .hero .carousel-control-prev,
html[dir="rtl"] .hero .carousel-control-next {
  z-index: 4 !important;
}