/* AERXIO bilingual header v11.
   Genuine HTML labels (not language-exact pseudo text); a sliding visual pill.
   English gets a reserved flex slot in the fixed header. Arabic retains its
   existing fixed left-side placement. Nothing below the header is restyled. */
.header .ax-language-toggle {
  --ax-toggle-width:108px;
  --ax-toggle-height:40px;
  position:fixed;
  inset-block-start:17px;
  inset-inline-end:18px;
  z-index:180;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  justify-content:center;
  flex:none;
  box-sizing:border-box;
  inline-size:var(--ax-toggle-width);
  min-inline-size:var(--ax-toggle-width);
  block-size:var(--ax-toggle-height);
  min-block-size:var(--ax-toggle-height);
  padding:3px;
  border:1px solid rgba(255,200,5,.72);
  border-radius:999px;
  background:rgba(5,5,5,.94);
  color:#ffc805;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  font-family:Inter,Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  text-decoration:none;
  text-transform:none;
  direction:ltr;
  isolation:isolate;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.header .ax-language-toggle::before {
  content:"";
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  inline-size:calc((100% - 6px) / 2);
  block-size:calc(100% - 6px);
  border-radius:999px;
  background:#ffc805;
  box-shadow:0 4px 16px rgba(255,200,5,.18);
  transform:translateX(0);
  transition:transform .22s ease,background .18s ease;
  pointer-events:none;
  z-index:0;
}
.header .ax-language-toggle[data-active-language="en"]::before { transform:translateX(100%); }
.header .ax-language-toggle__label {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-inline-size:0;
  block-size:100%;
  color:#ffc805;
  font:800 12px/1 Inter,Arial,sans-serif;
  letter-spacing:0;
  pointer-events:none;
}
.header .ax-language-toggle[data-active-language="en"] [data-language-label="en"],
.header .ax-language-toggle[data-active-language="ar"] [data-language-label="ar"] { color:#050505; }
.header .ax-language-toggle:hover { background:#141414; border-color:#ffc805; }
.header .ax-language-toggle:focus-visible { outline:2px solid #ffc805; outline-offset:4px; }
.ax-directional-arrow { display:inline-block; white-space:nowrap; }

/* Fix applies to en-GB as well as en: :lang(en) matches language subtags. */
html:lang(en) .header .nav-wrap.ax-has-language {
  width:min(1440px,calc(100% - 64px));
  min-inline-size:0;
  gap:20px;
}
html:lang(en) .ax-has-language > .brand { flex:none; }
html:lang(en) .ax-has-language > .nav-links {
  margin-inline-start:auto;
  flex:0 0 auto;
  flex-wrap:nowrap;
  gap:clamp(10px,1.2vw,20px);
}
html:lang(en) .ax-has-language > .nav-links a { white-space:nowrap; }
html:lang(en) .ax-header-tools {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
}
html:lang(en) .ax-header-tools .ax-language-toggle {
  position:relative;
  inset:auto;
  z-index:auto;
}
/* A fallback menu is preferable to squeezing links under the switch.
   Font/zoom overflow above the breakpoint is also checked after fonts settle. */
html:lang(en) .ax-has-language.ax-nav-compact > .nav-links { display:none!important; }
html:lang(en) .ax-has-language.ax-nav-compact .menu-btn { display:flex!important; }
@media(max-width:1250px) {
  html:lang(en) .ax-has-language > .nav-links { display:none!important; }
  html:lang(en) .ax-has-language .menu-btn { display:flex!important; }
}
@media(max-width:900px) {
  html:lang(en) .header .nav-wrap.ax-has-language { width:calc(100% - 28px)!important; gap:12px; }
  html:lang(en) .ax-header-tools { gap:8px; }
  .header .ax-language-toggle { --ax-toggle-width:102px; --ax-toggle-height:40px; }
}
@media(max-width:360px) {
  html:lang(en) .header .nav-wrap.ax-has-language { width:calc(100% - 24px)!important; gap:8px; }
  html:lang(en) .ax-header-tools { gap:6px; }
  .header .ax-language-toggle { --ax-toggle-width:96px; }
}
/* Preserve the working RTL header position and reserve its existing footprint.
   AR/EN is itself an LTR control; inline-start therefore stays at the left. */
html[dir="rtl"] .header .ax-language-toggle {
  inset-inline-start:12px;
  inset-inline-end:auto;
  inset-block-start:20px;
  min-inline-size:var(--ax-toggle-width);
  min-block-size:var(--ax-toggle-height);
  padding:3px;
  font-size:12px;
}
@media(max-width:1100px) {
  html[dir="rtl"] .header .ax-language-toggle { inset-inline-start:72px; inset-block-start:12px; }
}
@media(max-width:900px) {
  html[dir="rtl"] .header .ax-language-toggle { inset-inline-start:66px; inset-block-start:8px; --ax-toggle-height:38px; }
}
@media(max-width:360px) {
  html[dir="rtl"] .header .ax-language-toggle { inset-inline-start:58px; }
}
@media(prefers-reduced-motion:reduce) {
  .header .ax-language-toggle::before { transition:none; }
}
/* Keep the existing Arabic desktop/mobile treatment; add only the clearance
   missing at the two legacy tablet header breakpoints. */
@media(min-width:901px) and (max-width:1100px) {
  html[dir="rtl"] .header .ax-language-toggle { inset-inline-start:88px; }
}
@media(min-width:1101px) and (max-width:1180px) {
  html[dir="rtl"] .header .nav-links { margin-inline-end:100px; }
}