/* chiave.css — le due pagine della chiave: success.html (dopo il pagamento) e lost-key.html (la chiave persa).
   Si appoggia a sito.css (colori, carattere, pulsanti, testata, pagine .legale) e aggiunge solo quello che manca. */

.chiave-pagina { padding-bottom: 40px; }
.chiave-pagina [hidden] { display: none !important; }
.chiave-pagina .stato { padding-block: 0; }
.chiave-pagina h1 { margin-bottom: 12px; }
.chiave-pagina h2 { margin-top: 36px; }
.chiave-pagina .lead { font-size: 1.05rem; }
.chiave-email { color: var(--testo); font-weight: 600; overflow-wrap: anywhere; }

/* la chiave: si legge, si seleziona con un tocco, va a capo dove serve */
.chiave-box {
  margin-top: 22px; padding: 16px; border-radius: var(--raggio);
  background: var(--carta); border: 1px solid rgba(var(--accento-rgb), 0.35); box-shadow: var(--ombra);
}
.chiave-box code {
  display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55;
  color: var(--testo); word-break: break-all; -webkit-user-select: all; user-select: all;
}

.chiave-azioni { display: grid; gap: 10px; margin-top: 18px; }
.chiave-copiata { min-height: 1.4em; margin-top: 8px; font-size: 0.9rem; color: var(--verde-testo); text-align: center; }

.chiave-passi { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.chiave-passi li { color: var(--testo-2); font-size: 0.98rem; padding-left: 4px; }
.chiave-passi li::marker { color: var(--accento-chiaro); font-weight: 700; }
.chiave-passi b { color: var(--testo); font-weight: 600; }
.chiave-passi a { color: var(--accento-chiaro); }

.chiave-piede { margin-top: 28px; font-size: 0.92rem; }
.legale .chiave-piede, .chiave-piede { color: var(--testo-3); }
.chiave-piede a { color: var(--testo-2); }

/* attesa: un anello che gira, finché Stripe risponde */
.giro-attesa {
  width: 28px; height: 28px; margin-top: 26px; border-radius: 50%;
  border: 3px solid rgba(var(--accento-rgb), 0.2); border-top-color: var(--accento);
  animation: giro-attesa 0.8s linear infinite;
}
@keyframes giro-attesa { to { transform: rotate(360deg); } }

/* il modulo della chiave persa */
.chiave-modulo { display: grid; gap: 10px; margin-top: 26px; }
.chiave-modulo label { font-size: 0.9rem; font-weight: 600; color: var(--testo-2); }
.chiave-campo {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px;
  font: inherit; font-size: 17px; color: var(--testo);
  background: var(--carta); border: 1px solid var(--linea-forte); box-shadow: var(--ombra);
  -webkit-appearance: none; appearance: none;
}
.chiave-campo::placeholder { color: var(--testo-3); }
.chiave-campo:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px rgba(var(--accento-rgb), 0.22); }
.chiave-campo[aria-invalid="true"] { border-color: var(--rosso); }
.chiave-errore { min-height: 1.3em; font-size: 0.9rem; color: var(--rosso); }
.legale .chiave-errore { color: var(--rosso); }
.chiave-esito { margin-top: 22px; }
.chiave-esito b { color: var(--testo); }
.bottone[disabled] { opacity: 0.6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .giro-attesa { animation-duration: 2.4s; } }