/* ─────────────────────────────────────────────────────────────
   Unite — the language picker, complete.

   Its own file, and emitted by unite_lang_picker() in /inc/i18n.php alongside
   the markup and the script, so ONE call gives a page all three parts.

   It lived in styles.css until 2026-08-28 and that was wrong for one page:
   delete-account is deliberately standalone (its own nav, footer and tokens)
   and does not load styles.css at all — so it got the picker's markup with
   none of its CSS and unfolded it into a bare list of links at the bottom of
   the page, on the live site. A component a page can mount without knowing
   about a second file it also has to include is a component with a trap in it.

   It therefore defines the few tokens it needs itself, rather than borrowing
   styles.css's :root.
   ───────────────────────────────────────────────────────────── */
.lang-picker{
  --lp-bg:rgba(24,24,24,.72);--lp-panel:rgba(22,22,22,.94);
  --lp-border:#333;--lp-muted:#585450;--lp-muted2:#888;
  --lp-text:#F2EEE8;--lp-sand2:#B8A894;--lp-accent:#5DD3D3;--lp-radius:14px;
  font-family:'DM Sans',sans-serif;
}
.lang-picker{position:fixed;right:24px;bottom:24px;z-index:600;font-family:inherit}
.lang-picker *{box-sizing:border-box}

.lp-btn{
  display:flex;align-items:center;gap:7px;
  height:36px;padding:0 14px 0 11px;
  background:var(--lp-bg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--lp-border);border-radius:100px;
  color:var(--lp-muted2);font-family:inherit;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;opacity:.82;
  transition:opacity .2s,border-color .2s,color .2s;
}
.lp-btn:hover,.lp-btn:focus-visible{opacity:1;color:var(--lp-text);border-color:var(--lp-accent)}
.lp-btn:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
.lang-picker.open .lp-btn{opacity:1;color:var(--lp-text);border-color:var(--lp-accent)}
.lp-globe{width:15px;height:15px;flex-shrink:0;opacity:.9}
.lp-cur{line-height:1;padding-top:1px}

/* The panel. Rises from the button, right-aligned to it, and capped so a long
   list scrolls inside the panel rather than growing up the page. */
.lp-menu{
  position:absolute;right:0;bottom:calc(100% + 10px);
  min-width:196px;max-height:min(300px,60vh);overflow-y:auto;overscroll-behavior:contain;
  padding:8px;
  background:var(--lp-panel);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--lp-border);border-radius:var(--lp-radius);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:bottom right;
  transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),visibility .18s;
}
.lang-picker.open .lp-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.lp-menu-head{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--lp-muted);
  padding:6px 12px 8px;margin:0;font-weight:500;
}
.lp-list{list-style:none;display:flex;flex-direction:column;gap:1px;margin:0;padding:0}
.lp-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:9px;text-decoration:none;
  color:var(--lp-sand2);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  transition:background .15s,color .15s;
}
.lp-opt:hover,.lp-opt:focus-visible{background:rgba(255,255,255,.05);color:var(--lp-text)}
.lp-opt:focus-visible{outline:2px solid var(--lp-accent);outline-offset:-2px}
.lp-opt-native{flex:1;line-height:1.3}
.lp-opt-code{font-size:10px;letter-spacing:.12em;color:var(--lp-muted);text-transform:uppercase}
.lp-tick{width:15px;height:15px;flex-shrink:0;color:var(--lp-accent);opacity:0}
.lp-opt.is-current{color:var(--lp-text)}
.lp-opt.is-current .lp-tick{opacity:1}
.lp-opt.is-current .lp-opt-code{display:none}

@media(max-width:768px){
  .lang-picker{right:16px;bottom:16px}
  .lp-btn{height:34px;padding:0 12px 0 10px}
  .lp-menu{max-height:min(260px,52vh)}
}
@media(prefers-reduced-motion:reduce){
  .lp-menu{transition:opacity .01ms,visibility .01ms;transform:none}
  .lang-picker.open .lp-menu{transform:none}
}