/* Language switcher for the static SMS Bridge pages.
   Visual language copied from the main site control so the two do not look
   like they were built by different people. */
#langSwitch { position: relative; }
#langSwitch #langBtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid #d9d2ff; color: #3a3f5c;
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 99px; cursor: pointer; transition: .15s;
}
#langSwitch #langBtn:hover { background: #f3f0ff; color: #6d4aff; }
#langSwitch #langMenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  margin: 0; padding: 6px; list-style: none;
  background: #1b1f38; border-radius: 12px; min-width: 190px;
  max-height: 320px; overflow-y: auto;
  box-shadow: 0 18px 44px rgba(10, 14, 40, .34);
}
#langSwitch #langMenu[hidden] { display: none; }
#langSwitch #langMenu li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  color: #e9eaf5; font-size: 14px; white-space: nowrap;
}
/* White, not the near white, on the purple highlight: #e9eaf5 on #6d4aff is
   4.31:1 and fails AA for body text, #ffffff is 5.15:1. */
#langSwitch #langMenu li:hover,
#langSwitch #langMenu li:focus { background: #6d4aff; color: #ffffff; outline: none; }
#langSwitch #langMenu li i {
  font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; color: #9aa0c4; min-width: 20px;
}
#langSwitch #langMenu li:hover i,
#langSwitch #langMenu li:focus i { color: #ffffff; }

/* Right to left: mirror the page without touching the source order. */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .feats,
html[dir="rtl"] ul { padding-right: 0; }
html[dir="rtl"] #langSwitch #langMenu { right: auto; left: 0; }

/* Arabic needs a face with the joining forms; without it every letter renders
   in isolated form and the text looks broken. Self hosted, because the cookie
   banner promises that no typeface is fetched from anyone else. */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/NotoSansArabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/NotoSansArabic-700.woff2") format("woff2");
}
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .btn, html[lang="ar"] button, html[lang="ar"] input {
  font-family: "Noto Sans Arabic", "Open Sans", Inter, system-ui, sans-serif;
  letter-spacing: normal;
}

/* Keep the wordmark on one line once the switcher joins the nav. */
.brand, #langSwitch #langBtn { white-space: nowrap; }