/* Discovery Private — EN | IN | AR switcher aligned with mobile header icons
   FIX 2026-08-30: matches the 38px/36px circular action controls. */
.lang-switcher{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  direction:ltr;
  gap:1px;
  height:38px;
  padding:3px;
  margin:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  flex:0 0 auto;
  white-space:nowrap;
  box-sizing:border-box;
  vertical-align:middle;
}
.lang-choice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:33px;
  min-width:33px;
  height:32px;
  padding:0;
  margin:0;
  border-radius:999px;
  color:#dbe7f3;
  text-decoration:none;
  font:700 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:0;
  flex:0 0 33px;
  box-sizing:border-box;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.lang-choice:hover,.lang-choice:focus-visible{
  background:rgba(255,255,255,.11);
  color:#fff;
  outline:none;
}
.lang-choice.is-active{
  background:#EE8B2E;
  color:#0F2540;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}

/* Desktop/tablet: slightly roomier, while keeping the same vertical rhythm. */
@media(min-width:641px){
  .lang-switcher{height:42px;padding:4px;gap:2px}
  .lang-choice{width:34px;min-width:34px;height:34px;flex-basis:34px;font-size:10.75px}
}

/* Mobile controls in style.css are 38x38. Keep the language control exactly 38px high. */
@media(max-width:640px){
  .lang-switcher{height:38px;padding:3px;gap:1px}
  .lang-choice{width:31px;min-width:31px;height:32px;flex-basis:31px;font-size:9.75px}
}

/* Very narrow phones use 36x36 header action buttons. */
@media(max-width:390px){
  .lang-switcher{height:36px;padding:3px;gap:0}
  .lang-choice{width:29px;min-width:29px;height:30px;flex-basis:29px;font-size:9px}
}