/* ════════════════════════════════════════════════════════════════════════════
   HEADER — INGRANAGGIO (preferenze) e BANDIERINA (lingua/fuso), popover del
   player. Era un <style> inline dentro theme_family/lingua.html: spostato qui
   (regola Dav: CSS in file, mai inline) quando l'ingranaggio ha preso il blocco
   «Orologio e fuso» e la lista lingue i codici-bandiera (Angelo 24/07).
   Servito su ogni pagina /player via FOGLI (dopo il CSS del tema: vince).
   ──────────────────────────────────────────────────────────────────────────── */

/* DA LOGGATO l'header è quello del TEMA (icone .hu-ic) e la nostra pill lingua è nascosta
   (il tema ha già la sua bandiera): resta la nostra ⚙ rotellina, vestita come icona-pillola
   del tema, centrata, col pannello sempre sopra tutto. Scoped a .hd-top-header--right →
   non tocca la resa da sloggato. */
.hd-top-header--right .menu-list{display:inline-flex;align-items:center;flex:0 0 auto}
.hd-top-header--right .menu-list .menu-activator{display:inline-flex;align-items:center;gap:3px;
  padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);cursor:pointer;
  transition:background .15s;line-height:1}
.hd-top-header--right .menu-list .menu-activator:hover{background:rgba(255,255,255,.22)}
.hd-top-header--right .menu-list .menu-activator .mdi{font-size:17px;line-height:1}
#menuPrefsHeader.tb-hd-pop{z-index:200 !important}

/* trigger nell'header: pillole coerenti, non icone nude */
.tb-hd-trig{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);cursor:pointer;font-weight:700;transition:background .15s;
  white-space:nowrap}
.tb-hd-trig:hover{background:rgba(255,255,255,.22)}
.tb-hd-pop{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;
  box-shadow:0 14px 40px rgba(10,25,45,.30);width:288px;z-index:70;color:#1c4267;
  overflow:hidden}

/* i pannelli header si ancorano al loro trigger e si aprono verso SINISTRA: così non escono
   mai dal bordo destro (era quello a tagliare «Americane», «Completo»). `!important` +
   `left:auto` battono la regola del tema (.menu-list--submenu); `max-width` li tiene dentro
   il viewport. Sempre fuori-flusso (absolute): un pannello chiuso non allarga la riga
   dell'header — era quello a far scrollare la pagina di lato (~82px a 1280). */
.menu-list--language .tb-hd-pop, #menuPrefsHeader{position:absolute !important;right:0 !important;
  left:auto !important;top:calc(100% + 8px);max-width:calc(100vw - 24px)}
/* il tema clampa i submenu a ~350px e la lista lingue usciva TAGLIATA a 5 righe: il pannello
   può crescere fino al viewport, e a scrollare — se serve — è la lista, non il pannello. */
#menuLanguageHeader{max-height:calc(100vh - 90px) !important;overflow:visible}
#menuLanguageHeader ul{max-height:calc(100vh - 240px) !important}
/* i contenitori del selettore non devono mai sforare: se lo spazio è poco, si stringono. */
.menu-list--language, .menu-list--language .tb-hd-trig{max-width:100%;min-width:0}
/* B54: overflow orizzontale @1280 (QA di D). Sotto i 1360 si sacrifica la SIGLA lingua
   (bandiera e orologio restano): l'ORA DEL SITO è sempre visibile (Angelo 25/07 —
   prima qui si nascondeva #tbClock). `overflow-x:clip` toglie definitivamente lo
   scroll orizzontale senza toccare quello verticale. */
@media (max-width:1360px){ .menu-list--language .tb-lang-abbr{display:none} }
html, body{ overflow-x:clip }

.tb-hd-pop *{color:#1c4267}
.tb-hd-pop .ttl{font-size:.7em;font-weight:800;letter-spacing:.07em;opacity:.6;
  text-transform:uppercase;margin:14px 16px 6px}
.tb-hd-pop select{width:calc(100% - 32px);margin:0 16px;border:1px solid rgba(28,66,103,.3);
  border-radius:9px;padding:8px 10px;background:#fff;font-weight:600}
/* le tendine che seggono ACCANTO a una scritta (Vista mercati, Fuso orario) non prendono
   tutta la riga: si stringono sul contenuto e vivono nella stessa riga dell'etichetta. */
.tb-hd-pop label.sel{display:flex;gap:8px;align-items:center;margin:4px 16px;font-weight:600}
.tb-hd-pop label.sel select{flex:1;width:auto;margin:0;min-width:0}

/* il FORMATO QUOTE: bottoni segmentati, non una tendina */
.tb-seg{display:flex;gap:5px;margin:0 16px;flex-wrap:wrap}
.tb-seg label{flex:1 1 30%;text-align:center;border:1px solid rgba(28,66,103,.28);border-radius:9px;
  padding:8px 4px;font-weight:800;cursor:pointer;font-size:.85em;transition:all .12s}
.tb-seg label small{display:block;font-weight:600;opacity:.55;font-size:.82em}
.tb-seg input{display:none}
.tb-seg input:checked+span, .tb-seg label:has(input:checked){background:linear-gradient(135deg,#1c4267,#276aa6);color:#fff;border-color:transparent}
.tb-seg label:has(input:checked) small{opacity:.8;color:#fff}
.tb-hd-pop label.rad{display:inline-flex;gap:6px;align-items:center;margin:4px 0 4px 16px;
  cursor:pointer;font-weight:600}
.tb-hd-pop .salva{display:block;width:calc(100% - 32px);margin:14px 16px 16px;border:0;
  cursor:pointer;background:linear-gradient(180deg,#8cc63e,#7ab829);color:#fff !important;
  font-weight:900;border-radius:10px;padding:10px 0;letter-spacing:.04em}
.tb-hd-pop .salva:hover{filter:brightness(1.06)}

/* lingua: tab pieni, ricerca col bordo, righe con hover */
.tb-lang-tabs{display:flex;background:rgba(28,66,103,.07)}
.tb-lang-tabs span{flex:1;text-align:center;padding:11px 4px;font-weight:800;cursor:pointer;
  border-bottom:3px solid transparent;transition:all .12s}
.tb-lang-tabs span.on{background:#fff;border-bottom-color:#f60}
.tb-hd-pop input[type=text]{width:calc(100% - 32px);margin:10px 16px 4px;
  border:1px solid rgba(28,66,103,.3);border-radius:9px;padding:8px 12px;font-weight:600}
.tb-hd-pop ul{margin:4px 0 8px;padding:0;list-style:none;max-height:70vh;overflow-y:auto}
/* il nome sta ATTACCATO al codice (il tema mette justify space-between e lo spingeva
   al bordo destro: «IT ......... Italiano» non si legge come una riga sola) */
.tb-hd-pop li a{display:flex;align-items:center;justify-content:flex-start !important;
  gap:10px;padding:9px 16px;font-weight:600}
.tb-hd-pop li a:hover{background:rgba(39,106,166,.08)}
.tb-flag-r{width:22px;height:22px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(28,66,103,.15)}
.tb-lang-code{min-width:28px;font-weight:900;border-right:1px solid rgba(28,66,103,.2);
  padding-right:9px;font-size:.85em}