/* RTL fixes for Arabic layout */

/* Ensure videos maintain proper aspect ratio in RTL */
body.rtl video,
[dir="rtl"] video {
    direction: ltr; /* Videos should always be LTR */
}

/* Fix card layouts in RTL */
body.rtl .card,
[dir="rtl"] .card {
    text-align: right;
}

body.rtl .card-body,
[dir="rtl"] .card-body {
    direction: rtl;
}

/* Fix button alignments */
body.rtl .btn,
[dir="rtl"] .btn {
    direction: rtl;
}

/* Fix navigation */
body.rtl .navbar-nav,
[dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
}

/* Fix margin and padding for RTL */
body.rtl .me-2,
[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

body.rtl .ms-2,
[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Ensure proper text alignment */
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    text-align: right;
}

body.rtl p,
[dir="rtl"] p {
    text-align: right;
}

/* Fix floating elements */
body.rtl .float-start,
[dir="rtl"] .float-start {
    float: right !important;
}

body.rtl .float-end,
[dir="rtl"] .float-end {
    float: left !important;
}

/* Ensure images don't flip */
body.rtl img,
[dir="rtl"] img {
    direction: ltr;
}

/* Fix Slick carousel arrows for RTL */
body.rtl .slick-prev,
[dir="rtl"] .slick-prev {
    left: auto;
    right: 0;
}

body.rtl .slick-next,
[dir="rtl"] .slick-next {
    right: auto;
    left: 0;
}

/* Fix arrow icons direction in RTL */
body.rtl .slick-prev:before,
[dir="rtl"] .slick-prev:before {
    content: '→';
}

body.rtl .slick-next:before,
[dir="rtl"] .slick-next:before {
    content: '←';
}

/* Fix chevron/arrow animations for RTL */
body.rtl .chevron:before,
[dir="rtl"] .chevron:before {
    left: auto;
    right: 0;
    transform: skew(0deg, -30deg);
}

body.rtl .chevron:after,
[dir="rtl"] .chevron:after {
    right: auto;
    left: 0;
    transform: skew(0deg, 30deg);
}

/* Fix Bootstrap icons in RTL */
body.rtl .bi-arrow-left::before,
[dir="rtl"] .bi-arrow-left::before {
    transform: scaleX(-1);
}

body.rtl .bi-arrow-right::before,
[dir="rtl"] .bi-arrow-right::before {
    transform: scaleX(-1);
}

/* Fix positioning for absolute elements */
body.rtl .position-absolute,
[dir="rtl"] .position-absolute {
    left: auto;
}

/* Ensure z-index hierarchy is maintained */
body.rtl .hero--text--cover,
[dir="rtl"] .hero--text--cover {
    z-index: 10;
}

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