/* Toast Container */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  zoom: 1.8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Lo strato piu' alto dell'app, per definizione: un messaggio parla di
     cio' che sta sotto, quindi deve stare sopra QUALSIASI cosa. Stava a
     9999, cioe' pari al dialogo del PIN e sotto la pagina Live (10000):
     a parita' vince chi viene dopo nella pagina, e il messaggio finiva
     sotto il velo nero all'80% del dialogo. Rosso letto attraverso quel
     velo = indistinguibile dal fondo. Il numero e' volutamente lontano:
     non e' una gara, e' un tetto. */
  z-index: 2000000;
  pointer-events: none; /* clicks pass through container */
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
/* Toast Container */ #toast-container > * + * {
  margin-top: 12px; /* era gap: 12px (Chromium 84); qui webOS 5 */
}

/* Toast Box */
.toast {
  pointer-events: auto; /* only toasts are clickable */
  padding: 14px 20px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  line-height: 1.4;
  background: #333;
  opacity: 0;
  transform: translateX(120%);
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Enter animation */
.toast.show {
  opacity: 1;
  transform: translateX(0);
}

/* Exit animation */
.toast.hide {
  opacity: 0;
  transform: translateX(120%);
}

/* Variants */
.toast.success {
  background: #28a745;
}
.toast.error {
  /* Fondo pieno e contorno chiaro: deve staccarsi dal nero del dialogo
     parentale, che e' lo sfondo su cui compare piu' spesso. */
  background: #d32535;
  color: #fff;
  font-weight: 700;
  border: 2px solid #ff9aa4;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
}
.toast.warning {
  background: #ffc107;
  color: #222;
}
.toast.info {
  background: #17a2b8;
}

/* Close Button */
.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  margin-left: 14px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.toast-close:hover {
  opacity: 1;
}