/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Language Switcher  (css/i18n.css)
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 99px; padding: 3px;
}
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: transparent; border: none; border-radius: 99px;
  padding: 6px 11px; color: var(--gray, #A0A0A0);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease, cubic-bezier(.22,1,.36,1)), color .2s, box-shadow .2s;
  font-family: inherit;
}
.lang-btn span:first-child { font-size: 13px; line-height: 1; }
.lang-btn:hover { background: rgba(255,255,255,.08); color: var(--white, #fff); }
.lang-btn.on, .lang-btn.active {
  background: var(--red, #E30613); color: #fff;
  box-shadow: 0 3px 12px -4px rgba(227,6,19,.7);
}
.lang-btn:focus-visible { outline: 2px solid var(--red, #E30613); outline-offset: 2px; }

/* Hide the AL/MK secondary label on very tight screens, keep flag */
@media (max-width: 1100px) {
  .lang-btn span:last-child { display: none; }
  .lang-btn { padding: 6px; }
}
@media (max-width: 768px) {
  .lang-switcher { gap: 3px; }
  .lang-btn span:last-child { display: inline; }
}