@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --font-arabic-display: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  --font-arabic-body: "IBM Plex Sans Arabic", sans-serif;
  --font-latin: "Inter", sans-serif;
}

html, body, button, input, select, textarea {
  font-family: var(--font-latin) !important;
}

html[dir="rtl"] body,
html[lang="ar"] body,
body.rtl,
body:not(.en)[dir="rtl"] {
  font-family: var(--font-arabic-body) !important;
}

html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: var(--font-arabic-body) !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body:not(.en)[dir="rtl"] h1,
body:not(.en)[dir="rtl"] h2,
body:not(.en)[dir="rtl"] h3 {
  font-family: var(--font-arabic-display) !important;
  letter-spacing: 0;
  line-height: 1.38;
  text-wrap: balance;
}

h1, h2, h3 {
  overflow-wrap: normal;
  word-break: normal;
}

p, li, label, input, textarea, select, button {
  line-height: 1.7;
}