/* OC Language Switcher — v1.7.0 */

/* ══════════════════════════════════
   TOKENS — modo claro (padrao)
   ══════════════════════════════════ */
.ocls-wrap {
  --ocls-text:        #1c1c1c;
  --ocls-btn-bg:      rgba(0,0,0,0.04);
  --ocls-btn-border:  rgba(0,0,0,0.16);
  --ocls-btn-hover:   rgba(0,0,0,0.08);
  --ocls-dd-bg:       #ffffff;
  --ocls-dd-border:   rgba(0,0,0,0.12);
  --ocls-dd-shadow:   0 12px 40px rgba(0,0,0,0.18);
  --ocls-item-hover:  rgba(0,0,0,0.05);
  --ocls-item-active: rgba(0,0,0,0.09);
  --ocls-item-ring:   rgba(0,0,0,0.14);
  --ocls-name:        #1c1c1c;
  --ocls-region:      rgba(0,0,0,0.45);
  --ocls-divider:     rgba(0,0,0,0.09);
  --ocls-placeholder: rgba(0,0,0,0.38);
  --ocls-icon:        rgba(0,0,0,0.45);
  --ocls-scroll:      rgba(0,0,0,0.18);
}

/* ══════════════════════════════════
   TOKENS — modo escuro
   ══════════════════════════════════ */
.ocls-wrap[data-scheme="dark"],
.ocls-wrap[data-resolved="dark"],
html[data-theme="dark"] .ocls-wrap:not([data-scheme="light"]):not([data-resolved="light"]),
html.dark-mode .ocls-wrap:not([data-scheme="light"]):not([data-resolved="light"]),
body.dark-mode .ocls-wrap:not([data-scheme="light"]):not([data-resolved="light"]),
body.is-dark .ocls-wrap:not([data-scheme="light"]):not([data-resolved="light"]),
.dark-scheme .ocls-wrap:not([data-scheme="light"]):not([data-resolved="light"]),
[data-mode="dark"] .ocls-wrap:not([data-scheme="light"]):not([data-resolved="light"]) {
  --ocls-text:        #ffffff;
  --ocls-btn-bg:      rgba(255,255,255,0.06);
  --ocls-btn-border:  rgba(255,255,255,0.16);
  --ocls-btn-hover:   rgba(255,255,255,0.12);
  --ocls-dd-bg:       #161616;
  --ocls-dd-border:   rgba(255,255,255,0.12);
  --ocls-dd-shadow:   0 12px 40px rgba(0,0,0,0.55);
  --ocls-item-hover:  rgba(255,255,255,0.08);
  --ocls-item-active: rgba(255,255,255,0.12);
  --ocls-item-ring:   rgba(255,255,255,0.16);
  --ocls-name:        #ffffff;
  --ocls-region:      rgba(255,255,255,0.4);
  --ocls-divider:     rgba(255,255,255,0.09);
  --ocls-placeholder: rgba(255,255,255,0.3);
  --ocls-icon:        rgba(255,255,255,0.45);
  --ocls-scroll:      rgba(255,255,255,0.18);
}

/* Fallback: preferencia do sistema, quando o tema nao declara modo */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not(.light-mode) .ocls-wrap[data-scheme="auto"]:not([data-resolved]) {
    --ocls-text:        #ffffff;
    --ocls-btn-bg:      rgba(255,255,255,0.06);
    --ocls-btn-border:  rgba(255,255,255,0.16);
    --ocls-btn-hover:   rgba(255,255,255,0.12);
    --ocls-dd-bg:       #161616;
    --ocls-dd-border:   rgba(255,255,255,0.12);
    --ocls-dd-shadow:   0 12px 40px rgba(0,0,0,0.55);
    --ocls-item-hover:  rgba(255,255,255,0.08);
    --ocls-item-active: rgba(255,255,255,0.12);
    --ocls-item-ring:   rgba(255,255,255,0.16);
    --ocls-name:        #ffffff;
    --ocls-region:      rgba(255,255,255,0.4);
    --ocls-divider:     rgba(255,255,255,0.09);
    --ocls-placeholder: rgba(255,255,255,0.3);
    --ocls-icon:        rgba(255,255,255,0.45);
    --ocls-scroll:      rgba(255,255,255,0.18);
  }
}

/* ══════════════════════════════════
   WRAPPER
   ══════════════════════════════════ */
.ocls-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  z-index: 999;
}

/* ══════════════════════════════════
   BOTAO
   ══════════════════════════════════ */
.ocls-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--ocls-btn-bg);
  border: 1px solid var(--ocls-btn-border);
  border-radius: 8px;
  color: var(--ocls-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.ocls-btn:hover { background: var(--ocls-btn-hover); }
.ocls-btn:focus-visible {
  outline: 2px solid var(--ocls-text);
  outline-offset: 2px;
}

.ocls-btn-flag { font-size: 16px; line-height: 1; }
.ocls-btn-name { font-size: 12px; font-weight: 500; }
.ocls-globe    { opacity: 0.65; flex-shrink: 0; }

.ocls-chevron {
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ocls-wrap.ocls-open .ocls-chevron { transform: rotate(180deg); }

/* ══════════════════════════════════
   DROPDOWN
   ══════════════════════════════════ */
.ocls-dropdown {
  display: none;
  position: absolute;
  left: 0;
  width: 280px;
  background: var(--ocls-dd-bg);
  border: 1px solid var(--ocls-dd-border);
  border-radius: 14px;
  box-shadow: var(--ocls-dd-shadow);
  overflow: hidden;
}

.ocls-wrap[data-position="up"] .ocls-dropdown {
  bottom: calc(100% + 10px);
  top: auto;
  animation: oclsFadeUp 0.15s ease both;
}
.ocls-wrap[data-position="down"] .ocls-dropdown {
  top: calc(100% + 10px);
  bottom: auto;
  animation: oclsFadeDown 0.15s ease both;
}
.ocls-wrap.ocls-open .ocls-dropdown { display: block; }

@keyframes oclsFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes oclsFadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════
   BUSCA
   ══════════════════════════════════ */
.ocls-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ocls-divider);
  color: var(--ocls-icon);
}
.ocls-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ocls-name);
  font-size: 12px;
  font-family: inherit;
}
.ocls-search::placeholder { color: var(--ocls-placeholder); }

/* ══════════════════════════════════
   LISTA
   ══════════════════════════════════ */
.ocls-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
}
.ocls-list.ocls-searching { grid-template-columns: 1fr !important; }

.ocls-list li {
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  list-style: none;
  transition: background 0.12s ease;
}
.ocls-list li:hover        { background: var(--ocls-item-hover); }
.ocls-list li.ocls-active  {
  background: var(--ocls-item-active);
  outline: 1px solid var(--ocls-item-ring);
}
.ocls-list li.ocls-kb-focus {
  background: var(--ocls-item-active);
  outline: 1px solid var(--ocls-item-ring);
}

/* Ancora real ocupando todo o item */
.ocls-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  width: 100%;
  text-decoration: none !important;
  color: inherit;
  border-radius: inherit;
  box-shadow: none !important;
  cursor: pointer;
  border: none;
}
.ocls-link:hover,
.ocls-link:focus,
.ocls-link:active,
.ocls-link:visited {
  text-decoration: none !important;
  color: inherit;
  box-shadow: none !important;
}
.ocls-link:focus-visible {
  outline: 2px solid var(--ocls-name);
  outline-offset: -2px;
}

.ocls-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.ocls-lang-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ocls-lang-name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ocls-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.ocls-lang-region {
  display: block;
  font-size: 10px;
  color: var(--ocls-region);
  white-space: nowrap;
  line-height: 1.3;
}

/* ══════════════════════════════════
   ESTADO VAZIO
   ══════════════════════════════════ */
.ocls-empty {
  display: none;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--ocls-placeholder);
  text-align: center;
}

/* ══════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════ */
.ocls-list::-webkit-scrollbar       { width: 3px; }
.ocls-list::-webkit-scrollbar-track { background: transparent; }
.ocls-list::-webkit-scrollbar-thumb { background: var(--ocls-scroll); border-radius: 2px; }

/* ══════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════ */
@media (max-width: 480px) {
  .ocls-dropdown { width: calc(100vw - 32px); left: 0; }
}


/* ══════════════════════════════════
   FALLBACK: SO sem emoji de bandeira
   (Windows mostra "BR" em vez de 🇧🇷)
   ══════════════════════════════════ */
.ocls-wrap.ocls-no-flag-emoji .ocls-flag,
.ocls-wrap.ocls-no-flag-emoji .ocls-btn-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 17px;
  padding: 0 4px;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  border-radius: 3px;
  background: var(--ocls-item-active);
  border: 1px solid var(--ocls-item-ring);
  color: var(--ocls-name);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ocls-wrap.ocls-no-flag-emoji .ocls-btn-flag {
  min-width: 24px;
  height: 16px;
}