/* ==========================================================================
   Right-to-left overrides.
   Most directional spacing already uses logical properties (inline-start /
   inline-end), so only the cases Bootstrap 4 hard-codes are corrected here.
   ========================================================================== */

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

.text-left  { text-align: right !important; }
.text-right { text-align: left  !important; }

.ml-auto, .mr-auto { margin-left: 0 !important; margin-right: 0 !important; }
.navbar-nav.ml-auto { margin-right: auto !important; }
.navbar-nav.mr-auto { margin-left: auto !important; }

.dropdown-menu { text-align: right; }
.dropdown-menu-right { right: auto; left: 0; }

/* Input groups: Bootstrap 4 uses physical (left/right) radii, so an appended
   button keeps its rounding on the wrong side in RTL. The input sits on the
   right and the button on the left, so flip the flattened corners to match. */
.input-group > .form-control:not(:last-child) {
    border-radius: 0 8px 8px 0 !important;
}
.input-group-append { margin-left: 0; margin-right: -1px; }
.input-group-append > .btn,
.input-group-append > .input-group-text {
    border-radius: 8px 0 0 8px !important;
}

.site-nav .navbar-brand { margin-right: 0; margin-left: 1rem; }

.spec-table th { text-align: right; }

.footer-contact li { flex-direction: row; }

/* Bootstrap's directional utility margins used in the templates */
.ml-lg-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.mr-lg-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }

.pagination { padding-right: 0; }

/* Arabic reads better with slightly looser lines */
body, p, li { line-height: 1.9; }