/* Language switcher and right-to-left layout for Persian and Arabic. */

html[lang="fa"] body,
html[lang="ar"] body,
html[lang="fa"] body.tg-app,
html[lang="ar"] body.tg-app,
html[lang="fa"] .tg-scope,
html[lang="ar"] .tg-scope {
  --tg-font: "Noto Sans Arabic", "Outfit", sans-serif;
}

html[lang="hi"] body,
html[lang="hi"] body.tg-app,
html[lang="hi"] .tg-scope {
  --tg-font: "Noto Sans Devanagari", "Outfit", sans-serif;
}

html[lang="ru"] body,
html[lang="ru"] body.tg-app,
html[lang="ru"] .tg-scope {
  --tg-font: "Noto Sans", "Outfit", sans-serif;
}

html[lang="fa"] body#outside.tg-landing,
html[lang="ar"] body#outside.tg-landing {
  font-family: "Noto Sans Arabic", "Outfit", sans-serif !important;
}

html[lang="hi"] body#outside.tg-landing {
  font-family: "Noto Sans Devanagari", "Outfit", sans-serif !important;
}

html[lang="ru"] body#outside.tg-landing {
  font-family: "Noto Sans", "Outfit", sans-serif !important;
}

.tg-lang {
  position: relative;
  flex: 0 0 auto;
}

.tg-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 999px;
  background: rgba(8, 18, 34, 0.55);
  color: #e8f4ff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tg-app .tg-lang-btn,
.tg-scope .tg-lang-btn {
  height: 36px;
  border-color: var(--tg-border);
  background: var(--tg-surface-2);
  color: var(--tg-text);
}

.tg-lang-btn i {
  font-size: 16px;
}

.tg-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 80;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 14px;
  background: #0c1728;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.tg-app .tg-lang-menu,
.tg-scope .tg-lang-menu {
  border-color: var(--tg-border);
  background: var(--tg-surface);
  box-shadow: var(--tg-shadow-pop);
}

.tg-lang-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #e8f4ff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}

.tg-app .tg-lang-menu a,
.tg-scope .tg-lang-menu a {
  color: var(--tg-text) !important;
}

.tg-lang-menu a:hover,
.tg-lang-menu a.is-active {
  background: rgba(61, 203, 255, 0.16);
}

.tg-top-actions,
.tg-sidebar-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tg-sidebar-foot {
  flex-direction: column;
  align-items: stretch;
}

.tg-sidebar-foot .tg-lang-btn {
  width: 100%;
  justify-content: center;
}

.tg-sidebar-foot .tg-lang-menu {
  bottom: calc(100% + 8px);
  top: auto;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

html[dir="rtl"] body.tg-app > aside.tg-sidebar {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--tg-border);
  transform: translateX(102%);
}

html[dir="rtl"] body.tg-app.tg-sidebar-open > aside.tg-sidebar {
  transform: none;
}

html[dir="rtl"] .tg-search input,
html[dir="rtl"] .tg-scope .tg-search input {
  padding-left: 14px !important;
  padding-right: 42px !important;
}

html[dir="rtl"] .tg-search > i,
html[dir="rtl"] .tg-scope .tg-search > i {
  left: auto !important;
  right: 14px !important;
}

html[dir="rtl"] .ri-arrow-right-line,
html[dir="rtl"] .ri-arrow-right-s-line,
html[dir="rtl"] .ri-arrow-right-up-line,
html[dir="rtl"] .ri-arrow-left-line,
html[dir="rtl"] .ri-arrow-left-s-line {
  display: inline-block;
  transform: scaleX(-1);
}

@media (min-width: 992px) {
  html[dir="rtl"] body.tg-app > aside.tg-sidebar {
    transform: none;
  }

  html[dir="rtl"] body.tg-app.sidebar-closed > aside.tg-sidebar {
    transform: translateX(102%);
  }

  html[dir="rtl"] body.tg-app > header.tg-topbar {
    left: 0 !important;
    right: var(--tg-sidebar-w) !important;
  }

  html[dir="rtl"] body.tg-app.sidebar-closed > header.tg-topbar {
    right: 0 !important;
  }

  html[dir="rtl"] body.tg-app > main.tg-main {
    margin-left: 0 !important;
    margin-right: var(--tg-sidebar-w) !important;
  }

  html[dir="rtl"] body.tg-app.sidebar-closed > main.tg-main {
    margin-right: 0 !important;
  }
}