/*
 NexusHub — shared language switcher (one component for every panel, app, theme and page).
 Markup: core PHP helper nexusLangSwitcher() · behaviour: nx-lang.js · flags: ../img/flags.svg
 Colours come ONLY from the host's own variables, tried in order: panel (--bg-surface …) · app themes (--t-surface …) · NexusBilling (--bl-…)
 · Site Builder (--w-…) · site theme NexusPro (--np-…) · NexusNews (--nn-…) · neutral fallback. A host with other names adds ONE line in the
 "adapters" block at the bottom — never a copy of the component.
 3.46.1 (round 237): every rule is «.nxl .nxl-…» (2 classes) + resets, so the links / lists / buttons styles of an app or a theme
 («.mk a», «.fr-top-links a», «nav ul li» …) never leak into the switcher.
*/
.nxl {
  /* order matters: the app / site families FIRST — the global variables.css also defines --text-main (old dark scheme) on app pages,
     so the panel family (--bg-surface / --text-main …, only real on panel pages) comes after them */
  --nxl-bg: var(--t-surface, var(--bl-surface, var(--w-card, var(--np-paper, var(--bg-surface, #fff)))));
  --nxl-ink: var(--t-text, var(--bl-text, var(--w-text, var(--np-text, var(--nn-ink, var(--text-main, #1b1f2b))))));
  --nxl-muted: var(--t-muted, var(--bl-muted, var(--w-muted, var(--np-muted, var(--nn-muted, var(--text-muted, #6b7487))))));
  --nxl-line: var(--t-line, var(--bl-line, var(--w-line, var(--np-rule, var(--border-strong, rgba(20, 28, 45, .14))))));
  --nxl-hover: var(--t-soft, var(--bl-soft, var(--w-soft, var(--bg-hover, rgba(20, 28, 45, .05)))));
  --nxl-accent: var(--t-accent, var(--bl-accent, var(--w-accent, var(--np-accent, var(--nn-accent, var(--accent, var(--accent-2, #2f6bff)))))));   /* 3.51.1: one «)» too many made this whole line invalid */
  --nxl-on: var(--bg-active, color-mix(in srgb, var(--nxl-accent) 13%, transparent));
  --nxl-shadow: var(--shadow-pop, 0 14px 34px rgba(16, 24, 40, .18));
  --nxl-radius: var(--t-radius, var(--radius, 10px));
  --nxl-btn-ink: inherit;
  position: relative;
  display: inline-block;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit;
  line-height: 1.2;
  vertical-align: middle;
  text-transform: none; letter-spacing: normal; white-space: normal;
}
.nxl > summary { list-style: none; }
.nxl > summary::-webkit-details-marker { display: none; }
.nxl > summary::marker { content: ""; }

/* ── trigger: flag + short code (+ small caret) ── */
.nxl .nxl-btn {
  display: inline-flex; align-items: center; gap: 7px; float: none;
  min-height: 34px; height: auto; width: auto; margin: 0; padding: 0 9px 0 8px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--nxl-radius); box-shadow: none;
  background: transparent; color: var(--nxl-btn-ink); text-decoration: none; text-transform: none;
  font: inherit; font-size: .86em; font-weight: 600; letter-spacing: .03em; line-height: 1.2;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.nxl .nxl-btn:hover, .nxl[open] > .nxl-btn { background: var(--nxl-hover); }
.nxl .nxl-btn:focus-visible, .nxl .nxl-pop .nxl-item:focus-visible, .nxl .nxl-q:focus-visible { outline: 2px solid var(--nxl-accent); outline-offset: 2px; }
.nxl .nxl-code { display: inline; min-width: 1.6em; text-align: start; }   /* display: hosts hide «nav span» on phones */
.nxl .nxl-caret { display: block; width: 10px; height: 10px; flex: none; opacity: .6; transition: transform .15s ease; }
.nxl[open] .nxl-caret { transform: rotate(180deg); }

/* the flag: 4:3, soft corners, hairline so a white flag still shows on a white bar */
.nxl .nxl-flag {
  width: 22px; height: 16.5px; max-width: none; flex: none; display: block; margin: 0;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
  color: var(--nxl-muted);               /* only the neutral globe uses currentColor */
}

/* ── popover ── */
.nxl .nxl-pop {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; left: auto; z-index: 90;
  width: 244px; max-width: calc(100vw - 24px); height: auto; box-sizing: border-box; margin: 0;
  background: var(--nxl-bg); color: var(--nxl-ink);
  border: 1px solid var(--nxl-line); border-radius: calc(var(--nxl-radius) + 4px);
  box-shadow: var(--nxl-shadow); padding: 6px;
  font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-align: start; text-transform: none; white-space: normal;
  animation: nxl-in .14s ease-out;
}
.nxl[data-align="start"] .nxl-pop { inset-inline-end: auto; inset-inline-start: 0; }
.nxl[data-up] .nxl-pop { top: auto; bottom: calc(100% + 6px); }
@keyframes nxl-in { from { transform: translateY(-4px); } to { transform: none; } }   /* no fade: never half-transparent */

.nxl .nxl-q {
  display: block; width: 100%; max-width: none; box-sizing: border-box; margin: 0 0 6px;
  height: 38px; padding: 0 12px; border: 1px solid var(--nxl-line); border-radius: var(--nxl-radius); box-shadow: none;
  background: transparent; color: inherit; font: inherit; font-size: 14px;
}
.nxl .nxl-q::placeholder { color: var(--nxl-muted); }
.nxl .nxl-list { display: block; list-style: none; margin: 0; padding: 0; border: 0; background: none; max-height: min(52vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.nxl .nxl-list > li { display: block; margin: 0; padding: 0; border: 0; background: none; list-style: none; float: none; width: auto; }
.nxl .nxl-list > li::before, .nxl .nxl-list > li::after { content: none; }
/* items: 3 classes (.nxl .nxl-pop .nxl-item) — beats host rules such as «.mk .mk-top-links a» (2 classes + element) */
.nxl .nxl-pop .nxl-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; height: auto; width: auto; margin: 0; padding: 6px 10px; box-sizing: border-box;
  border: 0; border-radius: calc(var(--nxl-radius) - 2px); box-shadow: none; background: transparent;
  color: var(--nxl-ink); text-decoration: none; text-transform: none; letter-spacing: 0; font: inherit; font-size: inherit; font-weight: 400; line-height: 1.3;
  white-space: nowrap; opacity: 1; transform: none; float: none; cursor: pointer;
}
.nxl .nxl-pop .nxl-item::before, .nxl .nxl-pop .nxl-item::after { content: none; }
.nxl .nxl-pop .nxl-item:hover, .nxl .nxl-pop .nxl-item:focus, .nxl .nxl-pop .nxl-item.is-kb { background: var(--nxl-hover); color: var(--nxl-ink); text-decoration: none; }
.nxl .nxl-pop .nxl-item[aria-current="true"] { background: var(--nxl-on); color: var(--nxl-ink); font-weight: 600; }
.nxl .nxl-pop .nxl-name { color: inherit; font: inherit; background: none; padding: 0; margin: 0; }   /* hosts colour «nav span» directly */
.nxl .nxl-btn .nxl-code { color: inherit; font: inherit; background: none; padding: 0; margin: 0; }
.nxl .nxl-name { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([dir="rtl"]) .nxl .nxl-name[dir="rtl"] { text-align: left; }   /* Arabic name inside a left-to-right list */
.nxl .nxl-pop .nxl-c { display: inline; flex: none; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--nxl-muted); }
.nxl .nxl-pop .nxl-item[aria-current="true"] .nxl-c { color: var(--nxl-accent); }
.nxl .nxl-none { padding: 14px 10px; color: var(--nxl-muted); text-align: center; }
.nxl .nxl-list > li[hidden], .nxl .nxl-none[hidden] { display: none; }
html.nxl-lock { overflow: hidden; }
.nxl .nxl-scrim { display: none; }

/* many languages (9 or more) — 3.51.1 (round 245): a grid that shows every language at once, no scrolling.
   desktop 4 columns (flag + name + code) · tablet 3 · phone 4 compact (flag + code; the name stays for screen readers) */
.nxl.nxl-many .nxl-pop { width: 664px; padding: 8px; }
.nxl.nxl-many .nxl-q { margin-bottom: 8px; }
.nxl.nxl-many .nxl-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 4px; max-height: none; overflow: visible; }
.nxl.nxl-many .nxl-list > li { min-width: 0; }
.nxl.nxl-many .nxl-pop .nxl-item { gap: 8px; min-height: 36px; padding: 5px 8px; font-size: 13.5px; }
.nxl.nxl-many .nxl-pop .nxl-c { font-size: 11px; opacity: .85; }
.nxl.nxl-many .nxl-pop .nxl-item[aria-current="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nxl-accent) 35%, transparent); }
/* a very short window (landscape phone, small laptop with big zoom): the only case left that may scroll */
.nxl.nxl-many .nxl-pop { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 600px) and (max-width: 959px) {
  .nxl.nxl-many .nxl-pop { width: 504px; }
  .nxl.nxl-many .nxl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── phone: bottom sheet (thumb reach, never clipped by a narrow header) ── */
@media (max-width: 599px) {
  .nxl .nxl-btn { min-height: 40px; padding: 0 10px 0 9px; }
  .nxl .nxl-pop, .nxl.nxl-many .nxl-pop {
    position: fixed; inset: auto 0 0 0; width: auto; max-width: none; z-index: 100001;   /* above the cookie notice and every sticky bar */
    border-radius: 18px 18px 0 0; border-width: 1px 0 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    animation: nxl-up .2s ease-out;
  }
  .nxl .nxl-pop::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--nxl-line); margin: -4px auto 10px; }
  .nxl .nxl-list { max-height: 58vh; }
  .nxl .nxl-pop .nxl-item { min-height: 46px; font-size: 15px; }
  .nxl .nxl-q { height: 44px; font-size: 16px; }      /* 16px = no zoom on iOS */
  .nxl .nxl-scrim { display: block; position: fixed; inset: 0; z-index: 100000; background: rgba(8, 12, 24, .45); animation: nxl-fade .2s ease-out; }
  /* phone: 4 compact cells (flag over code), ~9 rows for 35 languages — the whole list fits above the thumb */
  .nxl.nxl-many .nxl-pop { width: auto; max-height: calc(100vh - 24px); padding-top: 12px; }
  .nxl.nxl-many .nxl-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-height: none; }
  .nxl.nxl-many .nxl-pop .nxl-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; padding: 6px 2px; font-size: 12px; text-align: center; }
  .nxl.nxl-many .nxl-pop .nxl-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .nxl.nxl-many .nxl-pop .nxl-c { font-size: 12px; opacity: 1; color: var(--nxl-ink); }
  .nxl.nxl-many .nxl-pop .nxl-item { position: relative; }
  .nxl.nxl-many .nxl-q { margin-bottom: 10px; }
}
@keyframes nxl-up { from { transform: translateY(24px); } to { transform: none; } }
@keyframes nxl-fade { from { background: rgba(8, 12, 24, 0); } to { background: rgba(8, 12, 24, .45); } }
@media (prefers-reduced-motion: reduce) { .nxl .nxl-pop, .nxl .nxl-scrim, .nxl .nxl-caret, .nxl .nxl-btn { animation: none; transition: none; } }

/* ── skins of the trigger ── */
.nxl.nxl--outline .nxl-btn { border-color: var(--nxl-line); }
.nxl.nxl--glass { --nxl-btn-ink: #fff; }                                      /* over photos / gradients / dark bars */
.nxl.nxl--glass .nxl-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.nxl.nxl--glass .nxl-btn:hover, .nxl.nxl--glass[open] > .nxl-btn { background: rgba(255, 255, 255, .22); }
.nxl.nxl--compact .nxl-code { display: none; }                                  /* flag only, for very tight bars */

/* ── adapters: hosts whose variables are named differently (one line each) ── */
/* panel header (layout/header.php): sits between the search and the help button, like the old two flags */
.app-header .header-nxl { align-self: center; margin: 0 6px 0 0; }
body.panel-pro .header-right > .header-nxl { align-self: stretch; display: flex; align-items: center; margin: 0; padding: 0 8px; border-left: 1px solid var(--border-soft); }
body.panel-pro .header-nxl > .nxl-btn { color: var(--hdr-icon, inherit); }
body.panel-pro .header-nxl[open] > .nxl-btn, body.panel-pro .header-nxl > .nxl-btn:hover { color: var(--text-main); }
@media (max-width: 480px) { .app-header .header-nxl .nxl-code { display: none; } .app-header .header-nxl > .nxl-btn { padding: 0 6px; gap: 4px; } }
/* classic panel skins: --bg-surface is see-through there → the opaque sidebar colour */
body:not(.panel-pro) .app-header .nxl { --nxl-bg: var(--bg-sidebar, #fff); }
/* landing pages (landing.css: always dark) */
.ld-body .nxl { --nxl-bg: var(--ld-card, #1e293b); --nxl-ink: var(--ld-text, #f1f5f9); --nxl-muted: var(--ld-muted, #94a3b8); --nxl-line: var(--ld-line, #334155); --nxl-hover: rgba(255, 255, 255, .07); --nxl-accent: var(--ld-accent, #3b82f6); --nxl-on: rgba(59, 130, 246, .2); }
/* portal (style.css, light + dark): in the top bar between the logo and the light / dark button */
body.portal-pro .nxl { --nxl-bg: var(--p-surface); --nxl-ink: var(--p-text); --nxl-muted: var(--p-muted); --nxl-line: var(--p-border-strong); --nxl-hover: var(--p-soft); --nxl-accent: var(--p-accent); --nxl-radius: 8px; }
body.portal-pro .portal-nxl { align-self: stretch; display: flex; align-items: center; padding: 0 8px; }
body.portal-pro .portal-nxl > .nxl-btn { color: var(--p-muted); }
body.portal-pro .portal-nxl > .nxl-btn:hover, body.portal-pro .portal-nxl[open] > .nxl-btn { color: var(--p-text); }
/* sign-in / password pages (auth-pro.css, light + dark) */
body.auth-pro .nxl { --nxl-bg: var(--a-surface); --nxl-ink: var(--a-text); --nxl-muted: var(--a-muted); --nxl-line: var(--a-border); --nxl-hover: var(--a-soft); --nxl-accent: var(--a-accent); --nxl-on: var(--a-ring); --nxl-radius: 8px; }
body.auth-pro .card-lang-switch .nxl-btn { min-height: 34px; color: var(--a-muted); }
body.auth-pro .card-lang-switch .nxl-btn:hover, body.auth-pro .card-lang-switch .nxl[open] > .nxl-btn { color: var(--a-text); }
/* 3.46.1 — apps and site themes (round 237) */
.nxl.app-nxl { flex: none; }                                                   /* inside a flex top bar: never squeezed */
.nxl.app-nxl .nxl-pop { color: var(--nxl-ink); }
@media (max-width: 480px) { .nxl.app-nxl .nxl-btn .nxl-code { display: none; } .nxl.app-nxl .nxl-btn { padding: 0 7px; gap: 4px; } }   /* phone: flag + caret, the bar keeps its room */
.bl .nxl { --nxl-radius: 10px; }                                               /* NexusBilling: its 14px corners are too round for a small menu */
.bl-top .nxl, .bl-hero .nxl { --nxl-btn-ink: var(--bl-top-text, #e8edf7); }   /* NexusBilling dark top bar */
.es .nxl { --nxl-bg: var(--t-surface, var(--paper, #fbfaf6)); --nxl-ink: var(--t-text, var(--ink, #1d2329)); --nxl-line: var(--t-line, var(--line, #d9d3c6)); }