/* Il selettore della lingua in testata e l'avviso che ne suggerisce una (02/11/2026).

   Il selettore è un <details>: si apre senza JavaScript, e i sette link dentro restano nel
   markup anche a cassetto chiuso — che è metà del motivo per cui esiste, perché sono il modo
   in cui un motore passa da una lingua all'altra.

   I colori vengono dai token del sito (style.css): niente valori nuovi. */

.sel-lingua {
  position: relative;
  flex: 0 0 auto;
  font: inherit;
}

.sel-lingua > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(127, 227, 240, .28);
  border-radius: 999px;
  color: #dff3fb;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(3, 16, 33, .45);
  transition: border-color .18s ease, background-color .18s ease;
}

/* Safari disegna il triangolino con uno pseudo-elemento suo. */
.sel-lingua > summary::-webkit-details-marker { display: none; }
.sel-lingua > summary::marker { content: ""; }

.sel-lingua > summary:hover,
.sel-lingua[open] > summary {
  border-color: rgba(127, 227, 240, .6);
  background: rgba(8, 33, 58, .8);
}

.sel-lingua > summary:focus-visible {
  outline: 2px solid #7fe3f0;
  outline-offset: 2px;
}

.sel-lingua > summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  flex: 0 0 auto;
  opacity: .85;
}

.sel-lingua > ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(127, 227, 240, .22);
  border-radius: 14px;
  background: #061b31;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.sel-lingua > ul a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: #cfe6f4;
  font-size: .88rem;
  text-decoration: none;
}

.sel-lingua > ul a:hover,
.sel-lingua > ul a:focus-visible {
  background: rgba(127, 227, 240, .14);
  color: #fff;
}

.sel-lingua > ul a[aria-current="true"] {
  color: #7fe3f0;
  font-weight: 700;
}

/* La riga che dice «questa è una traduzione, l'originale è in italiano». Sta sotto le
   briciole, prima del titolo: chi arriva da una ricerca in un'altra lingua deve sapere
   che il servizio si installa in Italia prima di leggere il prezzo. */
.nota-traduzione {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid rgba(127, 227, 240, .45);
  border-radius: 0 8px 8px 0;
  background: rgba(127, 227, 240, .07);
  color: #a9c6da;
  font-size: .82rem;
  line-height: 1.5;
}

.nota-traduzione a { color: #7fe3f0; }

/* L'avviso che suggerisce una lingua, in basso. Lo monta lingua.mjs e solo se serve. */
.avviso-lingua {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(520px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(127, 227, 240, .3);
  border-radius: 14px;
  background: #061b31;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
  color: #dff3fb;
  font-size: .86rem;
  line-height: 1.45;
}

.avviso-lingua p { margin: 0; flex: 1 1 auto; }

.avviso-lingua a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: #7fe3f0;
  color: #031021;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.avviso-lingua button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9fbdd2;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.avviso-lingua button:hover { color: #fff; background: rgba(255, 255, 255, .08); }

@media (max-width: 720px) {
  /* In testata lo spazio è dell'azione: il selettore mostra solo il globo. */
  .sel-lingua > summary span { display: none; }
  .sel-lingua > summary { padding: 8px 10px; }
  .avviso-lingua { flex-wrap: wrap; bottom: 88px; }
  .avviso-lingua a { width: 100%; text-align: center; }
}