/* RTL overrides for Arabic locale — flips physical (non-logical) Bootstrap 4
   utility classes actually used in the Rawafa views, since Bootstrap 4 has
   no official RTL build and this template is LTR-only by default. */

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

[dir="rtl"] .navbar-nav {
    padding-right: 0;
}

/* margin utilities */
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ml-lg-3 { margin-left: 0 !important; margin-right: 1rem !important; }

/* padding utilities */
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }

/* text alignment utilities */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }

@media (min-width: 992px) {
    [dir="rtl"] .text-lg-left { text-align: right !important; }
    [dir="rtl"] .text-lg-right { text-align: left !important; }
}

@media (min-width: 768px) {
    [dir="rtl"] .text-md-left { text-align: right !important; }
    [dir="rtl"] .text-md-right { text-align: left !important; }
}

/* icons used before text (mr-2 on <i>) read more naturally on the other side in RTL */
[dir="rtl"] .fa, [dir="rtl"] .fas, [dir="rtl"] .far, [dir="rtl"] .fab {
    margin-left: 0.4rem;
}

[dir="rtl"] .back-to-top {
    right: auto;
    left: 30px;
}