/*
 * Estilos padrão do [yini_language_switcher] — deliberadamente mínimos.
 * Sobrescreva estas classes no CSS do seu tema para personalizar
 * (cores, espaçamento, ícones de bandeira via ::before, etc.).
 */

.yini-language-switcher {
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
}

.yini-language-switcher--list {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Cor via variável CSS (--yini-item-color) + !important de propósito: muitos
 * temas/plugins aplicam `color` em TODO <a> do site (às vezes com !important
 * próprio, ex.: reset.css do Hello Elementor), o que sobrescreveria a cor do
 * link mesmo dentro deste componente. O widget do Elementor seta a variável
 * lá em cima (no wrapper do próprio widget, não neste elemento) e ela herda
 * por toda a árvore — por isso o padrão vai só como 2º argumento do var()
 * aqui embaixo, nunca como uma declaração própria da variável em algum
 * elemento no meio do caminho.
 */
.yini-language-switcher__item a {
  text-decoration: none;
  color: var(--yini-item-color, inherit) !important;
}

.yini-language-switcher__item a:hover {
  color: var(--yini-item-hover-color, var(--yini-item-color, inherit)) !important;
}

.yini-language-switcher__item.is-current a {
  font-weight: 600;
  text-decoration: underline;
  color: var(--yini-item-current-color, var(--yini-item-color, inherit)) !important;
}

/*
 * SVG de bandeira (assets/public/flags/) — tamanho em "em" de propósito,
 * pra acompanhar o controle de tamanho de fonte do widget do Elementor
 * (que mira nesta mesma classe) sem precisar de um controle dedicado.
 * flex travado em "0 0 auto" com min/max iguais: sem isso, uma bandeira
 * dentro de um item flex sem texto ao lado (label="none") pode esticar e
 * ficar enorme.
 */
.yini-language-switcher__flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.33em;
  height: 1em;
  min-width: 1.33em;
  min-height: 1em;
  max-width: 1.33em;
  max-height: 1em;
  vertical-align: middle;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 0.35em;
}

/*
 * Estilo "dropdown" — botão + lista própria (não um <select> nativo), pra
 * poder mostrar a bandeira em SVG dentro dele. Visual autocontido (não
 * herda cor/fonte do tema por padrão) — evita bordas/tamanhos estranhos
 * dependendo de onde for colocado. A lista fica escondida por padrão via
 * CSS (nunca aparece "piscando" aberta antes do JS carregar).
 */
.yini-language-switcher--dropdown {
  position: relative;
  display: inline-block;
}

.yini-language-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  padding: 0.55em 0.75em;
  border: 1px solid #d6d9de;
  border-radius: 6px;
  background: #fff;
  color: #26292e;
  cursor: pointer;
}

.yini-language-switcher__toggle:hover {
  border-color: #aeb3ba;
}

.yini-language-switcher__caret {
  flex: 0 0 auto;
  width: 10px;
  height: 7px;
  margin-left: 0.35em;
  color: #6b7078;
}

.yini-language-switcher__menu {
  display: none;
  position: absolute;
  z-index: 100;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20, 20, 30, 0.14);
  white-space: nowrap;
}

.yini-language-switcher__menu.is-open {
  display: block;
}

/*
 * A classe __option fica no próprio <a> (não em um <li> pai — o <li> só tem
 * role="option"), então o seletor certo é ".yini-language-switcher__option"
 * sozinho, nunca ".yini-language-switcher__option a" (isso nunca bateu com
 * nada, já que não existe um <a> dentro de outro <a>).
 */
.yini-language-switcher__option {
  display: flex;
  align-items: center;
  padding: 0.5em 0.65em;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none !important;
  color: var(--yini-option-color, #26292e) !important;
}

.yini-language-switcher__option:hover {
  background: #f2f3f5;
  color: var(--yini-option-hover-color, var(--yini-option-color, #26292e)) !important;
}

.yini-language-switcher__option.is-current {
  background: #f2f3f5;
  font-weight: 600;
  color: var(--yini-option-current-color, var(--yini-option-color, #26292e)) !important;
}

/*
 * Botão flutuante (Frontend\FloatingSwitcher) — injetado automaticamente
 * quando ativado nas configurações. Fundo/sombra próprios para destacar
 * mesmo sobre qualquer conteúdo; sobrescreva no CSS do tema se quiser.
 */
.yini-floating-switcher {
  position: fixed;
  z-index: 99999;
  background: #fff;
  color: #1a1a1a;
  padding: 0.5em 0.75em;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.yini-floating-switcher--bottom-right {
  right: 20px;
  bottom: 20px;
}

.yini-floating-switcher--bottom-left {
  left: 20px;
  bottom: 20px;
}

.yini-floating-switcher--top-right {
  right: 20px;
  top: 20px;
}

.yini-floating-switcher--top-left {
  left: 20px;
  top: 20px;
}