/* ==========================================================================
   SELETTORE LINGUA — aspetto
   ========================================================================== */

.lang-wrap{
  position:relative;
}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  font-weight:800;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  /* larghezza fissa: il pulsante non si muove cambiando lingua */
  min-width:104px;
  justify-content:flex-start;
}

.lang-sigla{
  display:inline-block;
  width:30px;
  text-align:left;
}

.lang-btn:hover{
  background:#f3f4f6;
}

/* tutte le bandiere sono disegnate in 3:2, quindi riempiono
   il riquadro senza essere ritagliate né deformate */
.lang-flag{
  width:24px;
  height:16px;
  object-fit:fill;
  border:1px solid rgba(0,0,0,.14);
  border-radius:3px;
  display:block;
  flex:0 0 24px;
}

.lang-caret{
  font-size:11px;
  opacity:.7;
}

.lang-list{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:1200;
  margin:0;
  padding:6px;
  list-style:none;
  min-width:170px;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.lang-list[hidden]{
  display:none;
}

.lang-opt{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border:none;
  border-radius:8px;
  background:none;
  font:inherit;
  font-size:14px;
  font-weight:700;
  color:#1f2937;
  text-align:left;
  cursor:pointer;
}

.lang-opt:hover{
  background:#f3f4f6;
}

.lang-opt.is-active{
  background:#eef4ff;
  color:#1a4499;
}

@media(max-width:859px){
  .lang-btn{
    padding:7px 10px;
    font-size:13px;
  }

  .lang-sigla{
    display:none;
  }
}