/* Language switcher dropdown (Arabic / English). */
.st-lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding-inline: var(--st-space-1, 4px);
  border-radius: var(--st-radius-sm);
  border: 1px solid var(--st-color-border);
  background: var(--st-color-white, #fff);
  position: relative;
}
.st-lang-switcher__item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--st-space-3, 12px);
  border-radius: var(--st-radius-sm);
  border: none;
  background: transparent;
  color: var(--st-color-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--st-duration-fast, 120ms), color var(--st-duration-fast, 120ms);
  white-space: nowrap;
}
.st-lang-switcher__item:hover {
  background: var(--st-color-surface-2);
}
.st-lang-switcher__item[aria-current="true"] {
  background: var(--st-color-surface-2);
  color: var(--st-color-primary);
  font-weight: 800;
}

/* v2.12.0 — Legacy anchor-injected switcher is replaced by the real
 * header dropdown (.st-hdr-lang, injected by stayin-header-switchers.js).
 * Keep the legacy markup for pages that do NOT load the new service,
 * but hide it where both exist so only ONE language UI is visible. */
.st-hdr-lang + .st-lang-switcher,
.st-lang-switcher-anchor:has(.st-hdr-lang) .st-lang-switcher {
  display: none;
}

/* v2.12.0 — Real header dropdowns (stayin-header-switchers.js). */
.st-hdr-country, .st-hdr-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.st-hdr-country__trigger, .st-hdr-lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding-inline: var(--st-space-3, 12px);
  border-radius: var(--st-radius-sm);
  border: 1px solid var(--st-color-border);
  background: var(--st-color-white, #fff);
  color: var(--st-color-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--st-duration-fast, 120ms), border-color var(--st-duration-fast, 120ms);
  white-space: nowrap;
}
.st-hdr-country__trigger:hover, .st-hdr-lang__trigger:hover {
  background: var(--st-color-surface-2);
}
.st-hdr-country__chev, .st-hdr-lang__chev {
  opacity: .6;
  font-size: 11px;
}
.st-hdr-country__flag {
  font-size: 16px;
  line-height: 1;
}
.st-hdr-country__menu, .st-hdr-lang__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 9998;
  min-width: 190px;
  background: var(--st-color-white, #fff);
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-md, 10px);
  box-shadow: 0 8px 24px rgba(11, 27, 54, .14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[dir="rtl"] .st-hdr-country__menu, html[dir="rtl"] .st-hdr-lang__menu {
  right: auto;
  left: 0;
}
.st-hdr-country__option, .st-hdr-lang__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--st-radius-sm);
  background: transparent;
  color: var(--st-color-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  transition: background-color var(--st-duration-fast, 120ms);
}
.st-hdr-country__option:hover, .st-hdr-lang__option:hover {
  background: var(--st-color-surface-2);
}
/* v2.12.0 — Auth pages: language dropdown as a top-right control. */
.auth-wrap--lang {
  position: relative;
}
.auth-wrap--lang > .st-hdr-lang {
  position: absolute;
  top: 14px;
  right: 14px;
}
html[dir="rtl"] .auth-wrap--lang > .st-hdr-lang {
  right: auto;
  left: 14px;
}