/* ============================================================================
   Accesso, registrazione, password.

   Quasi tutto viene dal tema: i campi sono .mhp-field, i pulsanti .mhp-btn, i
   colori sono le variabili del sito. Qui c'e' solo la scheda al centro e i
   pochi pezzi che esistono soltanto su queste pagine.
   ============================================================================ */

.mh-auth__wrap { display: flex; justify-content: center; padding: 56px 0 80px; }
.mh-auth__card {
    width: 100%; max-width: 480px;
    padding: 38px 36px 34px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 18px 44px var(--shadow, rgba(0,0,0,.08));
}
/* Il titolo NON usa la misura dei titoloni di pagina: qui sta in una scheda di 480
   pixel, e "Password dimenticata" a 32px la riempiva da bordo a bordo pesando piu'
   del modulo che ci sta sotto. Alla scala della scheda torna al suo posto. */
.mh-auth__title { margin: 0 0 6px; font-size: clamp(1.3rem, 2.2vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.mh-auth__lede { margin: 0 0 22px; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }

/* Il modulo qui sta su una colonna sola: due campi affiancati in una scheda
   stretta diventano illeggibili. Nome e cognome restano affiancati dove c'e'
   spazio, perche' sono corti e vanno insieme. */
.mh-auth__form { gap: 16px; }
.mh-auth__form .mhp-field { grid-column: 1 / -1; }
.mh-auth__form .mhp-field:has(input[name="first_name"]),
.mh-auth__form .mhp-field:has(input[name="last_name"]) { grid-column: span 1; }

/* La riga ha una misura sua: il corpo del testo del sito e' fluido (18px abbondanti
   sul telefono), e tutto quello che sta in questa scheda si scrive piu' piccolo. Un
   collegamento senza misura ereditava quella del corpo e veniva fuori un quarto piu'
   grande di cio' che ha accanto - in grassetto e in rosa, sembrava un titolo. */
.mh-auth__row { justify-content: space-between; gap: 12px; margin: -4px 0 2px; font-size: .92rem; }
.mh-auth__check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-2); }
.mh-auth__check input { width: 16px; height: 16px; accent-color: var(--pink); }
.mh-auth__link { font-size: .92rem; color: var(--pink); font-weight: 600; text-decoration: none; }
.mh-auth__link:hover { text-decoration: underline; }
.mh-auth__hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-3); line-height: 1.5; }
.mh-auth__actions { margin: 24px 0 0; }
.mh-auth__foot { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line-2); text-align: center; font-size: .93rem; color: var(--ink-2); }

/* Gli avvisi: il colore dice subito di cosa si tratta, il testo lo ripete per
   chi il colore non lo vede. */
.mh-auth__alert { margin: 0 0 20px; padding: 12px 14px; border-radius: 10px; font-size: .92rem; line-height: 1.55; border: 1px solid transparent; }
.mh-auth__alert--error   { background: var(--err-bg, #fdeaf2); border-color: rgba(163,24,90,.22); color: var(--err-ink, #a3185a); }
.mh-auth__alert--warning { background: #fff5e6; border-color: rgba(180,83,9,.22); color: var(--warn-ink, #b45309); }
.mh-auth__alert--success { background: var(--ok-bg, #e7f5ee); border-color: rgba(15,123,79,.22); color: var(--ok-ink, #0f7b4f); }
.mh-auth__alert a { color: inherit; font-weight: 700; }

/* La trappola per i bot: fuori dallo schermo, non "display:none", che certi
   robot sanno riconoscere. Chi naviga da tastiera non ci finisce (tabindex -1). */
.mh-auth__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mh-auth__captcha { grid-column: 1 / -1; margin: 4px 0 0; min-height: 65px; }

@media (max-width: 560px) {
    .mh-auth__wrap { padding: 28px 0 56px; }
    .mh-auth__card { padding: 28px 22px 26px; border-radius: 14px; }
    .mh-auth__form .mhp-field { grid-column: 1 / -1 !important; }
}