/* Selettore lingua a globo per la landing — desktop e mobile. Usa <details>/<summary> nativi:
   si aprono al clic (desktop) e al tap (mobile) senza una riga di JS. I colori vengono dalle
   variabili :root della pagina. Caricato dopo lo <style> in linea, così le regole mobile qui
   sotto vincono per ordine (niente !important). Predisposto per una terza lingua: basta una
   voce in più nel .langmenu quando arriva /de/. */

.lang { position: relative; }
.lang > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sumi2); font-size: 13px; padding: 6px 9px;
  border: 1px solid transparent; border-radius: 9px;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--hanko-x); border-color: var(--linea); }
.lang[open] > summary { color: var(--hanko-x); border-color: var(--linea); }
.lang > summary svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.lang > summary .lc { font-weight: 700; letter-spacing: .4px; }
.lang > summary::after { content: "▾"; font-size: 10px; color: var(--muted); }

.lang .langmenu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 158px; z-index: 60;
  background: #fff; border: 1px solid var(--linea); border-radius: 11px; box-shadow: var(--sh);
  padding: 5px; display: flex; flex-direction: column; gap: 2px;
}
.lang .langmenu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--sumi); font-size: 14px; }
.lang .langmenu a:hover { background: var(--soft); color: var(--hanko-x); }
.lang .langmenu a.on { color: var(--hanko-x); font-weight: 700; }

/* Mobile: il globo resta in testata anche a menu chiuso, così si cambia lingua senza aprire
   l'hamburger; la CTA «Inizia» compare solo col menu aperto (dove c'è spazio). */
@media (max-width: 880px) {
  .nav .right { display: flex; margin-left: auto; align-items: center; gap: 10px; }
  .nav .right .btn { display: none; }
  header.open .nav .right { width: 100%; order: 6; margin-left: 0; justify-content: space-between; padding-top: 12px; }
  header.open .nav .right .btn { display: inline-flex; }
  .lang .langmenu { right: 0; }
}

/* Nota «accesso in arrivo» (produzione, quando il login non è ancora pubblicato). */
.sito-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  background: #23201C; color: #F5F2EA; font-size: 13.5px; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 1200; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; }
.sito-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Badge «Beta» verde: sul pilot (flag BUDOPASS_ACCESSO=true) sito.js accende Budopass Web e
   «Inizia» con questo tono, invece del «Presto» rosso della vetrina. --verde viene dal :root
   della pagina (definito nell'inline <style>). */
.store .soon.beta { background: var(--verde); }
.btn   .soon.beta { background: var(--verde); }