/* ============================================
   RTL - ARABIC DIRECTION
   ============================================ */

body.rtl {
    direction: rtl;
    text-align: right;
}

.rtl .me-1, .rtl .me-2, .rtl .me-3, .rtl .me-4, .rtl .me-5 {
    margin-right: 0 !important;
}

.rtl .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
.rtl .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
.rtl .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
.rtl .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
.rtl .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }

.rtl .me-1 { margin-left: 0.25rem !important; }
.rtl .me-2 { margin-left: 0.5rem !important; }
.rtl .me-3 { margin-left: 1rem !important; }
.rtl .me-4 { margin-left: 1.5rem !important; }
.rtl .me-5 { margin-left: 3rem !important; }

.rtl .text-md-end {
    text-align: left !important;
}

.rtl .text-md-start {
    text-align: right !important;
}

.rtl .navbar-nav {
    padding-right: 0;
}

.rtl .dropdown-menu {
    text-align: right;
}

.rtl .detail-meta-item i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ============================================
   CARROUSEL : le composant Bootstrap (float/
   translateX) ne fonctionne pas correctement en
   RTL. On le force à garder un comportement LTR
   quelle que soit la langue, sauf pour le texte
   de la légende qui doit rester lisible en arabe.
   ============================================ */
.hero-carousel,
.hero-carousel .carousel-inner {
    direction: ltr;
}

.hero-carousel .carousel-item {
    float: left !important;
    margin-right: -100% !important;
    margin-left: 0 !important;
    display: block !important;
}

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

.hero-carousel .carousel-indicators {
    flex-direction: row !important;
}

.hero-carousel .carousel-control-prev {
    left: 0 !important;
    right: auto !important;
}

.hero-carousel .carousel-control-next {
    right: 0 !important;
    left: auto !important;
}

.hero-carousel .carousel-caption {
    direction: rtl;
    text-align: right;
}

.rtl .footer-links a:hover {
    padding-left: 0;
    padding-right: 5px;
}

.rtl .announcement-card {
    border-left: none;
    border-right: 4px solid var(--accent-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.rtl .announcement-card.pinned {
    border-right-color: var(--primary-color);
    background: linear-gradient(to left, var(--primary-light), var(--white));
}