/* Loaded only on the Arabic site (see Lang.Head). Pages are dir="rtl" and use Bootstrap's RTL build. */

/* Tajawal is the Arabic brand font: rounded and geometric like Poppins (the English brand font). */
html[dir="rtl"] {
  --font-primary: "Tajawal", "Poppins", sans-serif;
  --font-heading: "Tajawal", "Poppins", sans-serif;
  --bs-body-font-family: "Tajawal", "Poppins", sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] span:not([class*="fa"]), html[dir="rtl"] a, html[dir="rtl"] label,
html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] small, html[dir="rtl"] strong,
html[dir="rtl"] .btn, html[dir="rtl"] input, html[dir="rtl"] textarea,
html[dir="rtl"] select, html[dir="rtl"] button {
  font-family: "Tajawal", "Poppins", sans-serif;
}

/* Arrows that mean "forward" point left in Arabic. */
html[dir="rtl"] .eh-flip-rtl,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-left {
  transform: scaleX(-1);
}

/* Emails, numbers, codes and English practice text stay left-to-right inside Arabic pages. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] .otp-input,
html[dir="rtl"] code,
html[dir="rtl"] [lang="en"] {
  direction: ltr;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"] {
  text-align: right;
}

/* The language switcher keeps its "EN | عربي" order. */
html[dir="rtl"] .lang-switcher {
  direction: ltr;
}

/* Dropdown menus open toward the inside of the page. */
html[dir="rtl"] .dropdown-menu-end {
  --bs-position: start;
}

/* Home footer and navbar spacing written with left/right margins. */
html[dir="rtl"] .navbar .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .navbar .me-lg-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .text-md-end { text-align: left !important; }
html[dir="rtl"] .text-md-start { text-align: right !important; }