/* VOYZ language control — selective iOS material with a liquid selection. */
.language-toggle{
  position:relative;isolation:isolate;direction:ltr;
  min-width:118px;height:44px;padding:5px 6px;
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(11,87,164,.12);border-radius:14px;
  background:rgba(240,246,252,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 6px rgba(10,39,64,.08);
  backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-2) var(--ease-ios-soft),border-color var(--dur-2) var(--ease-ios-soft),transform var(--dur-tap) var(--ease-ios-tap);
}
.language-toggle::before{content:none}
.language-toggle:hover{background:rgba(232,242,251,.9);border-color:rgba(11,87,164,.22)}
.language-toggle:active{transform:scale(.975)}
.language-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px;box-shadow:0 0 0 5px rgba(47,134,218,.18)}
.language-toggle .language-toggle-icon{
  position:relative;z-index:1;width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;border-radius:10px;
  background:var(--brand-050);color:var(--brand);opacity:1;
  transition:background var(--dur-2) var(--ease-ios-soft),color var(--dur-2) var(--ease-ios-soft),transform var(--dur-3) var(--ease-ios);
}
.language-toggle .language-toggle-icon svg{width:16px;height:16px}
.language-toggle[data-language="ar"] .language-toggle-icon{background:var(--accent-050);color:var(--accent-ink)}
.language-toggle.is-switching .language-toggle-icon{transform:rotate(-8deg) scale(.92)}
.language-toggle .language-options{
  position:relative;z-index:1;width:70px;height:32px;padding:2px;flex:0 0 70px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  border-radius:10px;background:rgba(103,119,140,.12);opacity:1;
  box-shadow:inset 0 0 0 .5px rgba(16,31,48,.06);
}
.language-options::before{
  content:"";position:absolute;z-index:0;inset:2px auto 2px 2px;width:33px;
  border-radius:8px;background:var(--brand);
  box-shadow:0 3px 7px rgba(11,87,164,.24),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateX(0);transform-origin:center;
  transition:transform var(--dur-3) var(--ease-ios),background var(--dur-2) var(--ease-ios-soft),box-shadow var(--dur-2) var(--ease-ios-soft);
}
.language-toggle[data-language="ar"] .language-options::before{transform:translateX(33px);background:var(--accent-700);box-shadow:0 3px 7px rgba(10,118,132,.24),inset 0 1px 0 rgba(255,255,255,.24)}
.language-toggle .language-option{
  position:relative;z-index:1;width:auto;height:28px;display:grid;place-items:center;
  color:var(--ink-2);font-size:11px;font-weight:var(--fw-strong);line-height:1;letter-spacing:0;
  opacity:.7;transition:color var(--dur-2) var(--ease-ios-soft),opacity var(--dur-2) var(--ease-ios-soft),transform var(--dur-2) var(--ease-ios);
}
.language-toggle .language-option[data-language-option="ar"]{font-family:"Segoe UI","Geeza Pro","Noto Naskh Arabic",system-ui,sans-serif;font-size:15px}
.language-toggle .language-option.active{color:#fff;opacity:1;transform:scale(1.04)}
.language-toggle.is-switching[data-language="ar"] .language-options::before{animation:language-liquid-ar .42s var(--ease-ios)}
.language-toggle.is-switching[data-language="fr"] .language-options::before{animation:language-liquid-fr .42s var(--ease-ios)}
@keyframes language-liquid-ar{0%{transform:translateX(0) scaleX(1)}48%{transform:translateX(18px) scaleX(1.2)}100%{transform:translateX(33px) scaleX(1)}}
@keyframes language-liquid-fr{0%{transform:translateX(33px) scaleX(1)}48%{transform:translateX(15px) scaleX(1.2)}100%{transform:translateX(0) scaleX(1)}}
.mobile-language-toggle{margin-bottom:14px;align-self:flex-start}

@media(max-width:520px){
  .header-actions>.language-toggle,.dash-top-r>.language-toggle{min-width:82px;padding-inline:5px}
  .header-actions>.language-toggle .language-toggle-icon,.dash-top-r>.language-toggle .language-toggle-icon{display:none}
  .mobile-language-toggle{min-width:118px}
  .mobile-language-toggle .language-toggle-icon{display:grid}
}
@media(prefers-reduced-motion:reduce){
  .language-toggle,.language-toggle-icon,.language-options::before,.language-option{transition:none!important;animation:none!important}
}
