/* Shared styles for the flag language DROPDOWN (all sites).
   Round flag button + glass menu of flags and language names.
   Flags are inline SVG (emoji flags do not render on Windows). */
.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(255,255,255,.34); border-radius: 50%;
  background: rgba(10,10,14,.30);
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.lang-btn:hover { transform: translateY(-1px); background: rgba(10,10,14,.45); }
.lang-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-current { display: block; width: 21px; height: 15px; border-radius: 2.5px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 1px 4px rgba(0,0,0,.4); }
.lang-current svg { display: block; width: 100%; height: 100%; }

.lang-menu {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 400;
  min-width: 196px; padding: .4rem;
  background: rgba(14, 15, 20, .92);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  display: flex; flex-direction: column; gap: .1rem;
  animation: lang-menu-in .28s cubic-bezier(.22,.8,.28,1);
}
.lang-menu[hidden] { display: none; }
.lang-switch.align-right .lang-menu { left: auto; right: 0; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

.lang-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border: 0; border-radius: 9px;
  background: none; color: rgba(255,255,255,.88);
  font: 500 .88rem/1.2 system-ui, sans-serif;
  cursor: pointer; text-align: left; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.lang-item:hover { background: rgba(255,255,255,.10); color: #fff; }
.lang-item.active { background: rgba(232, 201, 160, .16); color: #F0E2CC; }
.lang-item.active::after { content: "✓"; margin-left: auto; font-size: .8rem; color: #E8C9A0; }
.lang-flag { display: block; width: 22px; height: 15.5px; border-radius: 3px; overflow: hidden;
  flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.35); }
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-item:focus-visible { outline: 2px solid #E8C9A0; outline-offset: 1px; }

/* solid headers: the button stays a readable pill, just lighter */
.site-head.solid .lang-btn, .s-head.solid .lang-btn, .vh-head.solid .lang-btn,
.w-head.solid .lang-btn, .z-head.solid .lang-btn, .m-head.solid .lang-btn {
  background: rgba(10,10,14,.08); border-color: rgba(0,0,0,.22); box-shadow: none;
}

@media (max-width: 760px) {
  .lang-btn { width: 34px; height: 34px; }
  .lang-current { width: 19px; height: 13.5px; }
  .lang-menu { min-width: 188px; }
}