/* Interface language menu (templates/_uilang.html): a small pill in the top-right
   corner -- globe, current code, caret -- opening a list of the site's languages with
   their flags. Logical properties throughout (inset-inline-end, margin-inline-start),
   so the same rules put it in the correct corner on the right-to-left Urdu page. */

.topbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.uilang { position: relative; }

.uilang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(22, 24, 31, .72);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.uilang__btn:hover { border-color: #343846; background: rgba(27, 30, 39, .9); }
.uilang__btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.uilang__globe { color: var(--muted); flex: none; }
.uilang__code { min-width: 2ch; }
.uilang__caret { color: var(--muted); transition: transform .15s ease; }
.uilang__btn[aria-expanded="true"] .uilang__caret { transform: rotate(180deg); }

.uilang__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-2);
  box-shadow: var(--shadow-sm);
}
.uilang__menu[hidden] { display: none; }

.uilang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
}
.uilang__item:hover,
.uilang__item:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.uilang__item[aria-checked="true"] { background: rgba(124, 92, 255, .14); }
.uilang__flag { width: 20px; height: 20px; flex: none; border-radius: 4px; }
.uilang__name { flex: 1; }
.uilang__item-code { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
/* each name renders in its own script's face, so اردو is legible on the English page */
.uilang__item[lang="ur"] .uilang__name { font-family: "QV Noto Sans Arabic", var(--font); }

@media (max-width: 520px) {
  .uilang__btn { height: 32px; padding: 0 9px; }
  .uilang__menu { min-width: 170px; }
}