/* Carousel Fixes for Arabic Language */
/* This file contains specific fixes for carousel images when using Arabic language */

/* Force carousel images to be visible in all languages */
.hero .carousel-item img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 1 !important;
}

/* Restore original overlay layer with filter effect */
.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 */
@supports (color: color-mix(in lab, red, red)) {
  .hero .carousel-item::before {
    background-color: color-mix(in srgb, var(--background-color), transparent 30%) !important;
  }
}

/* Ensure carousel works properly in RTL */
[dir="rtl"] .hero .carousel {
  direction: ltr !important;
}

[dir="rtl"] .hero .carousel-item {
  direction: ltr !important;
}

[dir="rtl"] .hero .carousel-item img {
  direction: ltr !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for any CSS conflicts */
.hero .carousel-item.active img,
.hero .carousel-item:not(.active) img {
  opacity: 1 !important;
  visibility: visible !important;
}

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

/* Fix for Bootstrap carousel transitions */
.carousel-item {
  transition: transform 0.6s ease-in-out !important;
}

.carousel-item img {
  transition: none !important;
}

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

[dir="rtl"] .hero .carousel-indicators {
  direction: ltr !important;
}

/* Ensure proper filter effect works */
.hero .carousel-item::before {
  pointer-events: none !important;
}

/* Fix for any potential z-index conflicts */
.hero .carousel-item {
  z-index: 1 !important;
}

.hero .carousel-item.active {
  z-index: 2 !important;
}

/* Ensure text content is visible above the filter */
.hero .info {
  z-index: 3 !important;
  position: relative !important;
}

/* Fix for carousel controls visibility */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 4 !important;
}