/* Language dropdown in top menu */
.lang-switch { position: relative; }
.lang-switch > a, .lang-switch > button {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.lang-switch img { width: 18px; height: 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 2px; }
.lang-switch .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; opacity: .7; margin-left: 4px; }
.lang-menu {
  position: absolute; right: 0; top: 120%;
  background: #fff; color: #111; min-width: 180px;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px; padding: 6px; display: none; z-index: 9999;
}
.lang-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; text-decoration: none; color: inherit; border-radius: 8px;
}
.lang-menu a:hover { background: rgba(0,0,0,.06); }

@media (prefers-color-scheme: dark) {
  .lang-switch img { border-color: rgba(255,255,255,.2); }
  .lang-menu { background: #111827; color: #e5e7eb; border-color: rgba(255,255,255,.08); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
  .lang-menu a:hover { background: rgba(255,255,255,.08); }
}

/* Trigger tweaks for code label */
.lang-switch > a { gap: 8px; font-weight: 700; letter-spacing: .5px; }
/* Active language styling in dropdown */
.lang-menu a.active { background: rgba(0,0,0,.08); font-weight: 700; }
@media (prefers-color-scheme: dark){
  .lang-menu a.active { background: rgba(255,255,255,.12); }
}


/* Final fix: show only mobile switch on small screens */
@media (max-width: 767px) {
  .navbar-nav > li.lang-switch { display: none !important; }
  .navbar-nav > li.lang-switch-mobile { display: block !important; }
}