/*
 * Le pagine del recupero password.
 *
 * Stessa lingua visiva della pagina di invito (registrazione-invito.html): sono le tre schermate
 * che una persona vede QUANDO NON E' ANCORA DENTRO, e devono sembrare la stessa applicazione. Il
 * foglio e' separato invece che copiato dentro ognuna perche' le pagine sono tre e stavano gia'
 * divergendo.
 */
:root {
    --wabi-navy: #10243c;
    --wabi-navy-soft: #1c3a5e;
    --wabi-green: #5fb26a;
    --wabi-green-dark: #2f7d43;
    --wabi-cream: #f8f1df;
    --wabi-ink: #0b1826;
    --wabi-line: rgba(16, 36, 60, 0.12);
    --wabi-clay: #c0564a;
    --font-display: 'Fraunces', Georgia, serif;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--wabi-cream);
    color: var(--wabi-ink);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}

.card-recupero {
    width: min(460px, 100%);
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--wabi-line);
    box-shadow: 0 30px 70px -35px rgba(8, 20, 34, 0.5);
    overflow: hidden;
}

.card-head {
    background: linear-gradient(135deg, var(--wabi-navy), var(--wabi-navy-soft));
    color: #fff; padding: 1.6rem 1.6rem 1.4rem;
}
.card-head .eyebrow {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 700; color: #86d992;
}
.card-head h1 {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 1.75rem; margin: 0.35rem 0 0;
}

.card-body-recupero { padding: 1.5rem 1.6rem 1.8rem; }

.intro {
    font-size: 0.88rem; line-height: 1.6; color: rgba(11, 24, 38, 0.7);
    margin-bottom: 1.3rem;
}

.form-label { font-weight: 600; font-size: 0.85rem; color: var(--wabi-navy-soft); }
.form-control {
    border: 1px solid var(--wabi-line); border-radius: 12px; padding: 0.65rem 0.85rem;
}
.form-control:focus {
    border-color: var(--wabi-green); box-shadow: 0 0 0 3px rgba(95, 178, 106, 0.16);
}
.hint { font-size: 0.75rem; color: rgba(11, 24, 38, 0.55); margin-top: 0.25rem; }

.btn-wabi {
    display: inline-block; width: 100%; text-align: center;
    border: none; border-radius: 12px; padding: 0.75rem;
    background: var(--wabi-green); color: #fff; font-weight: 600; text-decoration: none;
    box-shadow: 0 12px 26px -14px rgba(95, 178, 106, 0.95);
}
.btn-wabi:hover { background: var(--wabi-green-dark); color: #fff; }

.avviso {
    display: flex; gap: 0.5rem; align-items: flex-start; border-radius: 12px;
    padding: 0.7rem 0.85rem; font-size: 0.82rem; line-height: 1.5; margin-bottom: 1rem;
}
.avviso.err {
    background: rgba(192, 86, 74, 0.1); border: 1px solid rgba(192, 86, 74, 0.3); color: #8a3128;
}

/* Le due schermate senza modulo: quella riuscita e quella del collegamento morto. */
.esito, .scaduto { text-align: center; padding: 2.2rem 1.6rem; }
.esito i, .scaduto i { font-size: 2.4rem; margin-bottom: 0.8rem; }
.esito i { color: var(--wabi-green-dark); }
.scaduto i { color: var(--wabi-clay); }
.esito h2, .scaduto h2 {
    font-family: var(--font-display); font-style: italic; font-size: 1.45rem;
}
.esito p, .scaduto p {
    font-size: 0.88rem; color: rgba(11, 24, 38, 0.65); line-height: 1.6;
}
.esito .minuto { font-size: 0.79rem; color: rgba(11, 24, 38, 0.5); }
.esito .btn-wabi, .scaduto .btn-wabi { max-width: 230px; margin: 1rem auto 0; }

.piede {
    text-align: center; font-size: 0.76rem; color: rgba(11, 24, 38, 0.5);
    margin: 1rem 0 0; line-height: 1.55;
}