/* Arabic-specific media display fixes */

/* Ensure videos and images are always visible in Arabic mode */
body.rtl video,
body.rtl img,
[dir="rtl"] video,
[dir="rtl"] img,
html[dir="rtl"] video,
html[dir="rtl"] img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
}

/* Fix for slick carousel in RTL mode */
body.rtl .slick-carousel,
[dir="rtl"] .slick-carousel {
    direction: ltr; /* Carousel should maintain LTR for proper sliding */
}

body.rtl .slick-slide,
[dir="rtl"] .slick-slide {
    direction: rtl; /* But content inside slides should be RTL */
}

/* Ensure ratio containers show media properly */
body.rtl .ratio,
[dir="rtl"] .ratio {
    overflow: visible !important;
}

body.rtl .ratio > *,
[dir="rtl"] .ratio > * {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for lazy loaded images */
body.rtl img[data-lazy],
[dir="rtl"] img[data-lazy] {
    min-height: 200px; /* Ensure space is reserved */
    background-color: #f0f0f0;
}

/* Ensure video controls are accessible */
body.rtl video::-webkit-media-controls,
[dir="rtl"] video::-webkit-media-controls {
    direction: ltr !important;
}

/* Fix z-index issues that might hide media */
body.rtl .card,
body.rtl .card-body,
[dir="rtl"] .card,
[dir="rtl"] .card-body {
    z-index: auto !important;
}

/* Ensure proper stacking context */
body.rtl .slick-list,
[dir="rtl"] .slick-list {
    z-index: 1;
}

body.rtl .slick-track,
[dir="rtl"] .slick-track {
    z-index: 1;
}

/* Force hardware acceleration for better performance */
body.rtl .slick-slide img,
body.rtl .slick-slide video,
[dir="rtl"] .slick-slide img,
[dir="rtl"] .slick-slide video {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Ensure hero video is visible */
body.rtl .hero--video,
[dir="rtl"] .hero--video {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fix hero section for RTL */
body.rtl .hero,
[dir="rtl"] .hero {
    direction: ltr; /* Keep video container LTR */
}

body.rtl .hero--text,
[dir="rtl"] .hero--text {
    direction: rtl; /* But text content should be RTL */
}

/* Ensure all media elements are visible */
body.rtl img,
body.rtl video,
body.rtl iframe,
[dir="rtl"] img,
[dir="rtl"] video,
[dir="rtl"] iframe {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for any hidden parent containers */
body.rtl .ratio > *,
body.rtl .card img,
body.rtl .card video,
[dir="rtl"] .ratio > *,
[dir="rtl"] .card img,
[dir="rtl"] .card video {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}