/* ============================================================
   SoFitness — Pagine auth (login) nel nuovo design system
   Stesso layout di prima (foto full-height + card centrata), ristilizzato
   coi token --ds-*/--sf-* e Inter Display. Consuma solo token di :root.
   ============================================================ */

/* nasconde il chrome globale (header/footer/dropdown di base.html.twig) sulla login */
body.route-app_login #header-wrapper,
body.route-app_login > .dropdown,
body.route-app_login .header-wrapper + .dropdown,
body.route-app_login > footer { display: none !important; }

.sf-auth {
    font-family: var(--ds-font-display);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}
.sf-auth__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: -2;
}
/* overlay verde brand: fa risaltare la card e dà coerenza col resto del sito */
.sf-auth__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 31, 32, 0.55) 0%, rgba(5, 31, 32, 0.75) 100%),
        radial-gradient(120% 80% at 50% 0%, rgba(5, 31, 32, 0.15), rgba(5, 31, 32, 0) 60%);
}

.sf-auth__card {
    width: 100%;
    max-width: 460px;
    background: var(--ds-green);
    color: var(--ds-on-green);
    border: 1px solid var(--ds-border-on-green);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-lg);
    padding: 48px 44px;
}

.sf-auth__head { text-align: center; margin-bottom: 32px; }
.sf-auth__title {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 12px;
}
.sf-auth__title .sf-accent { color: #fff; }
.sf-auth__sub {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.23px;
    color: var(--ds-on-green-soft);
    max-width: 340px;
    margin: 0 auto;
}

.sf-auth__form { display: flex; flex-direction: column; }
.sf-auth__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sf-auth__label {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.23px;
    color: var(--ds-on-green-soft);
}
.sf-auth__input {
    width: 100%;
    font-family: var(--ds-font-display);
    font-size: 16px;
    letter-spacing: -0.23px;
    color: var(--ds-ink);
    background: #fff;
    border: 1px solid transparent;
    border-radius: var(--ds-radius);
    padding: 15px 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-auth__input::placeholder { color: var(--ds-muted); }
.sf-auth__input:focus {
    outline: none;
    border-color: var(--ds-sage);
    box-shadow: 0 0 0 3px rgba(142, 182, 155, 0.35);
}

/* CTA: bottone bianco pieno full-width (riusa .sf-btn) */
.sf-auth__submit {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    font-size: 16px;
    padding: 17px 24px;
}
.sf-btn--white.sf-auth__submit:hover { background: var(--sf-btn-white-hover); }

.sf-auth__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    text-align: center;
}
.sf-auth__link {
    font-family: var(--ds-font-display);
    font-size: 14px;
    letter-spacing: -0.23px;
    color: var(--ds-on-green-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s ease;
}
.sf-auth__link:hover { color: #fff; }

.sf-auth__bottom {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ds-border-on-green);
    text-align: center;
    font-size: 14px;
    letter-spacing: -0.23px;
    color: var(--ds-on-green-soft);
}
.sf-auth__bottom a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* messaggi: errore auth + stato "già loggato" */
.sf-auth__alert {
    background: var(--ds-danger-bg);
    color: var(--ds-danger);
    border-radius: var(--ds-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    letter-spacing: -0.23px;
    margin-bottom: 20px;
    text-align: center;
}
.sf-auth__note {
    background: var(--ds-surface-on-green);
    color: var(--ds-on-green-soft);
    border-radius: var(--ds-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}
.sf-auth__note a { color: #fff; text-decoration: underline; }

@media (max-width: 560px) {
    .sf-auth__card { padding: 36px 26px; border-radius: var(--ds-radius-lg); }
    .sf-auth__title { font-size: 34px; }
}

/* ---------- Aggiunte per registrazione / reset / verifica (5 set 2026) ----------
   Le altre pagine di accesso erano rimaste col vestito GlueGlue: qui solo i pezzi
   che il login non aveva (due colonne, password con occhio, checkbox, card larga). */
.sf-auth__card--wide { max-width: 620px; }

.sf-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .sf-auth__row { grid-template-columns: 1fr; } }

/* password col tasto mostra/nascondi */
.sf-auth__pwd { position: relative; display: flex; align-items: center; }
.sf-auth__pwd .sf-auth__input { padding-right: 48px; }
.sf-auth__eye {
    position: absolute;
    right: 8px;
    display: inline-flex;
    padding: 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
/* niente invert: l'occhio sta DENTRO l'input, che è bianco — in bianco spariva */
.sf-auth__eye img { width: 20px; height: 20px; opacity: .5; }
.sf-auth__eye:hover img { opacity: .85; }

/* consensi */
.sf-auth__checks { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 20px; }
.sf-auth__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--ds-font-display);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ds-on-green-soft);
    cursor: pointer;
}
.sf-auth__check input { margin: 2px 0 0; accent-color: #fff; flex: none; }
.sf-auth__check a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* messaggio di stato (link scaduto, email confermata) senza form sotto */
.sf-auth__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.sf-auth__hint { font-family: var(--ds-font-display); font-size: 13px; line-height: 1.5; color: var(--ds-on-green-soft); margin-top: -8px; margin-bottom: 18px; }

/* ---------- Comparsa della card (5 set 2026) ----------
   Qui basta il CSS: la card è sopra la piega, non serve un osservatore come nelle
   pagine lunghe. `both` tiene lo stato iniziale anche prima che l'animazione parta. */
@media (prefers-reduced-motion: no-preference) {
    /* niente terzo tempo sui campi: la card È il <form>, quindi .sf-auth__form
       non esiste nel markup e quella riga non animava niente */
    .sf-auth__card { animation: sf-auth-entra .65s cubic-bezier(.16, 1, .3, 1) both; }
    .sf-auth__head { animation: sf-auth-entra .65s cubic-bezier(.16, 1, .3, 1) .12s both; }
}
@keyframes sf-auth-entra {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}