/* Omniverto i18n — language switcher + RTL support.
   Loaded on every page after style.css. */

.lang-switcher {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 26px 0 30px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background-color: var(--surface, #fff);
  /* globe icon + caret, inlined so the CSP stays happy */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left 9px center, right 8px center;
  color: var(--text-secondary, #374151);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher:hover {
  border-color: var(--primary, #4f46e5);
  color: var(--text, #111827);
}

.lang-switcher:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 2px;
}

.lang-switcher option {
  color: #111827;
  background: #fff;
}

/* Sit neatly at the end of the nav list. */
.nav-links .lang-switcher {
  margin-left: 6px;
}

@media (max-width: 720px) {
  .lang-switcher {
    height: 32px;
    padding: 0 22px 0 28px;
    font-size: 0.8rem;
  }
}

/* -------------------- RTL -------------------- */
[dir="rtl"] body,
[dir="rtl"] .main-container,
[dir="rtl"] .hero,
[dir="rtl"] .footer-container {
  text-align: right;
}

[dir="rtl"] .nav-container,
[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

[dir="rtl"] .lang-switcher {
  padding: 0 30px 0 26px;
  background-position: right 9px center, left 8px center;
}

[dir="rtl"] .nav-links .lang-switcher {
  margin-left: 0;
  margin-right: 6px;
}