.i18n-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: inherit;
}

.i18n-switcher__label {
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.i18n-switcher .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.i18n-switcher__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.i18n-switcher .i18n-switcher__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.65;
  flex-shrink: 0;
}

/* Especificidade duplicada (.i18n-switcher .i18n-switcher__select) para vencer
   `.sx-dark select` que existe em syntax-cliente-overrides.css. */
.i18n-switcher .i18n-switcher__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background-color: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 28px 6px 36px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 120px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.i18n-switcher .i18n-switcher__select:hover,
.i18n-switcher .i18n-switcher__select:focus {
  border-color: rgba(148, 163, 184, 0.6);
  outline: none;
}

.i18n-switcher .i18n-switcher__select:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.45);
  outline-offset: 2px;
}

/* <option> nao herda background/color do <select> em todos os browsers:
   sem regras explicitas, o SO desenha o dropdown com defaults que conflitam
   com data-theme="dark" (fundo branco + texto branco => so visivel no hover).
   Setamos explicitamente nos dois temas pra garantir contraste. */
.i18n-switcher .i18n-switcher__select option {
  background-color: #ffffff;
  color: #1f2937;
}

[data-theme="dark"] .i18n-switcher .i18n-switcher__select option {
  background-color: #111827;
  color: #f3f4f6;
}

.i18n-switcher__submit {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* ============ Variante: dropdown (default, inline em headers) ============ */
.i18n-switcher--dropdown {
  /* nada especial; usa defaults */
}

/* ============ Variante: card (dashboard) ============ */
.i18n-switcher--card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.i18n-switcher--card .i18n-switcher__label {
  font-size: 13px;
  opacity: 0.7;
}

.i18n-switcher--card .i18n-switcher__select-wrap {
  width: 100%;
}

.i18n-switcher--card .i18n-switcher__select {
  width: 100%;
  font-size: 14px;
  padding: 10px 32px 10px 36px;
  background-color: var(--panel, #fff);
  color: var(--text, #1f2937);
}

/* ============ Variante: mobile (item dentro de menu drawer) ============ */
.i18n-switcher--mobile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
}

.i18n-switcher--mobile .i18n-switcher__select {
  width: 100%;
}

/* ============ Ajustes contextuais ============ */
/* Header cliente logado (.sx-actions) — fica compacto e branco/translúcido */
.sx-actions .i18n-switcher {
  color: var(--sx-text, #e2e8f0);
}

.sx-actions .i18n-switcher__select {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.04);
}

.sx-actions .i18n-switcher__select:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Header admin — neutro */
.app-header .i18n-switcher {
  margin-left: auto;
  align-self: center;
}

.app-header .i18n-switcher__select {
  background-color: rgba(15, 23, 42, 0.04);
}

/* Vitrine pública — segue paleta dark */
.public-desktop-actions .i18n-switcher {
  color: inherit;
}

.public-desktop-actions .i18n-switcher__select {
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.03);
  color: inherit;
}

/* Card no dashboard admin */
.dashboard-language-card .dashboard-language-card-desc {
  font-size: 0.85rem;
  margin: 4px 0 14px;
  line-height: 1.4;
}

.dashboard-language-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============ Responsivo ============ */
@media (max-width: 760px) {
  .i18n-switcher--dropdown .i18n-switcher__label {
    display: none;
  }
  .i18n-switcher--dropdown .i18n-switcher__select {
    min-width: 110px;
    padding: 6px 26px 6px 34px;
    font-size: 12px;
  }
}