.login-page-container {
  width: 100%;
  color: white;
  z-index: 10;
  overflow: hidden;
  height: calc(100 * var(--vh, 1vh));
  background-color: black;
  background-size: cover;
  background-position: center;
  position: fixed;
  background-image: url("../assets/cinema.png");
  animation: fadeInOut 1s ease-in-out;
}

.login-header {
  z-index: 11;
}

.login-header img {
  max-width: 100%;
  padding: 40px;
  height: auto;
}

/* La schermata nuovo utente (10 settembre 2026): due colonne, a sinistra
   il codice TV (40%), a destra l'accesso manuale (60%). Niente gap:
   margini (Chromium 68, test-compat). */
.login-colonne {
  display: grid;
  grid-template-columns: 2fr 3fr;
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 1%;
}
.attivazione-pannello {
  padding-right: 60px;
  border-right: 2px solid rgba(255, 255, 255, 0.15);
  margin-right: 60px;
}
.attivazione-titolo {
  font-size: 34px;
  font-weight: 500;
  margin: 0 0 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d0d0d0;
}
.attivazione-codice {
  font-size: 72px;
  font-weight: 800;
  color: var(--gold, #e7a101);
  letter-spacing: 6px;
  margin: 0 0 24px;
  padding: 18px 24px;
  border: 3px solid var(--gold, #e7a101);
  border-radius: 14px;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.attivazione-spiega {
  font-size: 26px;
  color: #d0d0d0;
  margin: 0 0 24px;
  max-width: 520px;
}
/* Su UNA riga (28 settembre 2026): la frase piu' lunga, "Questo account non e' abilitato per l'app, riprovo…", a 26 px andava a capo. */
.attivazione-stato {
  font-size: 22px;
  white-space: nowrap;
  color: #bababa;
  margin: 0;
}
/* KOOL TV web (2 ottobre 2026, sera): l'avviso della finestra privata, sotto la riga di stato; c'e' solo nel browser. */
.attivazione-privata {
  font-size: 18px;
  color: #9a9a9a;
  margin: 18px 0 0;
  max-width: 520px;
}
.attivazione-punto {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #e7a101);
  margin-right: 14px;
  vertical-align: middle;
  animation: attivazione-pulsa 1.6s ease-in-out infinite;
}
.attivazione-ricevuta .attivazione-punto {
  background: #4caf50;
  animation: none;
}
.attivazione-senza-rete .attivazione-punto {
  background: #d9534f;
}
@keyframes attivazione-pulsa {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
.login-nota {
  font-size: 20px;
  color: #9a9a9a;
  margin: -30px 0 0;
}
.login-url {
  color: #9a9a9a;
}

.login-form {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 6%;
}

.login-form h1 {
  text-align: left;
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #d0d0d0;
  text-wrap: nowrap;
  font-weight: 500;
  margin-bottom: 10px;
}

.login-page-form-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 44px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.login-form input {
  width: 100%;
  font-size: 30px;
  height: 80px;
  padding-left: 9%;
  background-color: transparent;
  padding-right: 5%;
  color: #bababa;
  outline: none;
  border-radius: 10px;
  border: 3px solid rgba(255, 255, 255, 0.25);
}

.login-input-container img {
  position: absolute;
  top: 50%;
  left: 21px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
}
.login-form input::placeholder {
  color: #bababa;
}

.login-input-container {
  position: relative;
}

.login-form button {
  background-color: white;
  color: black;
  padding: 10px 20px;
  font-size: 32px;
  border-radius: 28px;
  border: none;
  width: 662px;
  cursor: pointer;
}

.add-playlist {
  font-size: 30px !important;
  font-weight: 600 !important;
  border-radius: 88px !important;
  font-weight: 600 !important;
}

.list-playlist {
  width: auto !important;
  padding-left: 40px !important;
  border-radius: 57px !important;
  padding-right: 40px !important;
  font-weight: 600 !important;
  font-size: 24px !important;
}
.login-input-container img,
.login-input-container i {
  user-select: none;
}

.error-message {
  color: red;
  margin-top: 10px;
  font-size: 14px;
}
.splash-page-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../assets/bg-gradient.png");
  animation: fadeInOut 4s ease-in-out;
}
.password-container {
  position: relative;
}
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 40px; */
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 70px;
  cursor: pointer;
}

.btn:last-child {
  margin-top: 40px;
}
/* La tessera Privacy (dashboard .menu-box, riga bassa): occhio e "Privacy: ON/OFF", sotto Esci. */
.btn.privacy-login {
  margin-top: 40px;
  width: 300px;
  background-color: rgba(4, 4, 4, 0.42);
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  color: white;
}
.btn.privacy-login .privacy-login-occhio {
  width: 32px;
  height: 32px;
  margin-right: 16px;
}
.btn.privacy-login[aria-pressed="true"] {
  border-color: #e7a101;
}
.btn.privacy-login.login-btn-focused {
  background-color: #f4a30d !important;
  color: black;
}

.login-input-focused {
  box-shadow: inset 0 0 0 3px #f4a30d !important;
}

.login-icon-focused {
  box-shadow: inset 0 0 0 3px #f4a30d !important;
  background: transparent !important;
}

.add-user {
  background-color: white;
  color: black;
}
.login-btn-focused {
  background-color: #f4a30d !important;
  color: black;
}

.btn.list-users {
  width: 35%;
}
.list-users {
  background-color: white;
  color: black;
}

.list-users:hover {
  background-color: white;
  background-color: #f4a30d;
}

.btn i {
  font-size: 18px;
}
@media (max-width: 1024px) {
  .login-form {
    padding-left: 10%;
    padding-right: 10%;
  }

  .login-form h1 {
    font-size: 40px;
  }

  .login-form input {
    font-size: 24px;
    height: 65px;
  }

  .btn {
    width: 200px;
    height: 60px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .login-form {
    padding-left: 5%;
    padding-right: 5%;
  }

  .login-form h1 {
    font-size: 32px;
  }

  .login-page-form-container {
    grid-gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .login-form input {
    font-size: 20px;
    height: 55px;
    padding-left: 50px;
  }

  .login-input-container img {
    width: 32px;
    height: 32px;
    left: 12px;
  }

  .btn {
    width: 100%;
    height: 55px;
    font-size: 16px;
  }

  .btn.list-users {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .btn {
    width: 80%;
    max-width: 220px;
    height: 48px;
    font-size: 15px;
    padding: 0 12px;
  }
  .login-form button {
    width: 75%;
  }
}
@media (max-width: 480px) {
  .login-form h1 {
    font-size: 26px;
  }
  .login-form input {
    font-size: 18px;
    height: 50px;
  }
  .login-input-container img {
    width: 28px;
    height: 28px;
    left: 10px;
  }
  /* .button-container e' una colonna: il gap di 20px diventa un margine
     sopra, non a sinistra. */
  .button-container > * + * {
    margin-top: 20px; /* era gap: 20px (Chromium 84); qui webOS 5 */
  }
  .btn {
    font-size: 14px;
    height: 48px;
  }
}

.list-users-icon {
  height: 40px;
}

/* IL PANNELLO QR (login con QR, giro 2, 7 ottobre 2026; disegno 2026-10-06-2100 §3): il terzo pannello a sinistra, "Inquadra col
   telefono": QR bianco col margine di 4 moduli (circa 370 px su 1080), il codice di 6 caratteri sotto, la riga di stato; in pausa
   il QR sbiadisce con la scritta sopra e compare "Nuovo codice". Con tre pannelli le colonne sono 2 / 2 / 3. Oggi sul PC della web
   (pages/LoginPage.js, pannelloQr), sulle TV col giro 4. Niente gap, niente inset (Chromium 63). */
.login-colonne.login-tre {
  grid-template-columns: 2fr 2fr 3fr;
  padding-left: 3%;
  padding-right: 3%;
}
/* con tre colonne il codice a 8 cifre sta su UNA riga (a 72 px andava a capo "4821-" / "9037") */
.login-colonne.login-tre .attivazione-codice {
  font-size: 58px;
  letter-spacing: 4px;
  white-space: nowrap;
  padding: 14px 20px;
}
.qr-pannello {
  padding-right: 40px;
  border-right: 2px solid rgba(255, 255, 255, 0.15);
  margin-right: 40px;
  text-align: center;
}
.qr-pannello .attivazione-titolo {
  text-align: left;
}
.qr-cornice {
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 14px;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}
.qr-canvas {
  display: block;
  width: 370px;
  height: 370px;
  transition: opacity 0.5s;
}
.qr-pannello[data-stato="pausa"] .qr-canvas,
.qr-pannello[data-stato="riprovo"] .qr-canvas,
.qr-pannello[data-stato="collegata"] .qr-canvas {
  opacity: 0.12;
}
.qr-velo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  color: #000;
  font-size: 30px;
  font-weight: 700;
  padding: 20px;
  pointer-events: none;
}
.qr-oppure {
  color: #cfd6d9;
  font-size: 22px;
  margin: 18px 0 6px;
}
.qr-codice {
  font-size: 44px;
  font-weight: 800;
  color: var(--gold, #e7a101);
  letter-spacing: 6px;
  margin: 0 0 12px;
  min-height: 1.3em;
  font-variant-numeric: tabular-nums;
}
.qr-stato {
  justify-content: center;
}
.qr-pannello[data-stato="collegata"] .attivazione-punto {
  background: #7ed321;
}
.qr-nuovo {
  margin: 10px auto 0;
  width: 280px;
}
.qr-nuovo[hidden] {
  display: none;
}

/* LE TRE COLONNE DEI TELEVISORI (login con QR, giro 4, 7 ottobre 2026; la stessa impaginazione della 0.1.64 Android): sulle TV LG
   e Samsung la pagina di accesso ha QR, codice TV e accesso manuale affiancati e INTERI dentro l'area sicura (il 5% da ogni bordo:
   l'overscan dei televisori), mai impilati. Pesi 2/2/3 con minmax(0, ...): una riga lunga non allarga la sua colonna, si riduce
   (pages/LoginPage.js, adatta: il codice a 8 cifre fino al 55%, titoli e righe di stato fino al 60%). Il QR prende la larghezza
   utile della sua colonna, al piu' 390 px (LoginPage, latoQr). Solo con .login-tv: il PC della web resta com'era. */
.login-page-container.login-tv .login-header img {
  padding: 60px 0 12px 6%;
}
.login-tv .login-colonne.login-tre {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
  padding-left: 6%;
  padding-right: 6%;
}
.login-tv .attivazione-pannello {
  padding-right: 40px;
  margin-right: 40px;
}
.login-tv .attivazione-titolo,
.login-tv .login-form h1 {
  white-space: nowrap;
  overflow: hidden;
}
/* il titolo del QR ("INQUADRA COL TELEFONO", 21 lettere) all'80% degli altri due, come su Android */
.login-tv .qr-pannello .attivazione-titolo {
  font-size: 27px;
}
.login-tv .login-colonne.login-tre .attivazione-codice {
  font-size: 72px;
  letter-spacing: 0.08em;
  padding: 0.2em 0.3em;
  white-space: nowrap;
}
.login-tv .attivazione-stato {
  overflow: hidden;
}
.login-tv .login-form button {
  max-width: 100%;
}
/* la colonna del modulo e' piu' stretta (3/7): il testo dei campi parte dopo l'icona */
.login-tv .login-form input {
  padding-left: 84px;
}
/* "Nuovo codice" (in pausa) col corpo dei pulsanti del modulo */
.login-tv .qr-nuovo {
  font-size: 28px;
  font-weight: 600;
  border-radius: 28px;
  border: none;
  width: 300px;
}

/* "DUE MODI PER ACCEDERE" SUI TELEVISORI (11 ottobre 2026; decisione dell'operatore e decisione 90, disegno 2026-10-11-1310): due
   colonne come Mediaset Infinity e Prime Video. A sinistra il QR grande (al piu' 440 px) col codice unico a 8 cifre sotto, la riga
   "oppure" e la riga di stato; a destra nome utente, password, Accedi ed Esci sulla stessa riga, la Privacy sotto. Niente "Il tuo codice
   TV" ne' campo Server, per i tre brand. Tutto dentro l'area sicura (6% ai lati). Niente gap (Chromium 63). */
.login-tv.login-due .login-header {
  position: relative;
  height: 170px;
}
.login-tv.login-due .login-header img {
  padding: 56px 0 0 6%;
}
.login-due-titolo {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 68px;
  margin: 0;
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}
.login-tv .login-colonne.login-due-colonne {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 36px;
}
.login-tv.login-due .attivazione-titolo {
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 28px;
  white-space: nowrap;
}
.login-tv.login-due .qr-pannello {
  padding-right: 60px;
  margin-right: 60px;
  text-align: center;
}
.login-tv.login-due .qr-pannello .attivazione-titolo {
  text-align: center;
  font-size: 34px;
}
.login-tv.login-due .qr-canvas {
  width: 440px;
  height: 440px;
}
/* la colonna come Android dal 13 ottobre 2026 (PaginaQr.kt): sotto il QR "oppure", la scritta piccola "IL TUO CODICE TV", il codice grande */
.login-tv.login-due .qr-oppure {
  font-size: 24px;
  margin: 16px 0 0;
}
.login-tv.login-due .qr-etichetta {
  font-size: 22px;
  font-weight: 600;
  color: #cfd6d9;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 28px 0 0;
  white-space: nowrap;
}
.login-tv.login-due .qr-codice {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 6px;
  margin: 6px 0 4px;
}
.login-tv.login-due .login-form {
  align-self: center;
  padding-bottom: 0;
}
.login-tv.login-due .login-form input {
  padding-left: 84px;
}
.login-tv.login-due .login-input-container {
  margin-bottom: 34px;
}
/* Accedi ed Esci sulla stessa riga, la Privacy sotto */
.login-tv.login-due .button-container {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.login-tv.login-due .login-form button.accedi,
.login-tv.login-due .login-form button.esci {
  width: 48%;
  margin: 0;
}
.login-tv.login-due .login-form button.esci {
  margin-left: 4%;
}
.login-tv.login-due .login-form button.privacy-login {
  margin-top: 30px;
}
/* il codice non disponibile (423): il QR sbiadito con la scritta sopra, come in "Riprovo fra poco" e "Collegata" */
.login-tv.login-due .attivazione-stato-vuota .attivazione-punto {
  visibility: hidden;
}
.qr-pannello[data-stato="bloccato"] .qr-canvas {
  opacity: 0.12;
}
.login-tv.login-due .qr-stato {
  margin-top: 6px;
  min-height: 1.4em;
}