/* ============================================================
   AREA RISERVATA — PAGINE DI ACCESSO
   (login, recupero password, reset, scelta filiale)

   Stesso design system della homepage pubblica:
   Porcelain #F8F7F4 (fondo) + Signal Blue #0057FF (unico accento).
   Tutto prefissato .hga- / --hga- come sulla home (.hg-), cosi'
   il file convive con Bootstrap dove ancora presente.

   Regole mobile non negoziabili:
   1. Tutto in UNA schermata: niente scroll di pagina sul telefono.
      Il layout e' alto 100svh (small viewport height = altezza
      MINIMA della finestra, barre del browser visibili), quindi
      non cresce mai oltre lo schermo.
   2. Niente zoom automatico al focus: ogni controllo di form e'
      >= 16px e gli elementi tappabili hanno touch-action:manipulation
      (uccide anche lo zoom da doppio tap). Il meta viewport NON
      usa user-scalable=no: il pinch-zoom manuale resta disponibile.
   ============================================================ */

:root {
    --hga-blue: #0057FF;
    --hga-blue-d: #0046D1;
    --hga-ink: #0C1420;
    --hga-slate: #4E5C6B;
    --hga-mute: #5E6A78;
    --hga-rule: #DBDEE4;
    --hga-porcelain: #F8F7F4;
    --hga-paper: #FFFFFF;
    --hga-mist: #F1F0EC;
    --hga-danger: #C0281C;
    --hga-ok: #1A7F55;
    --hga-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --hga-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
    --hga-pad: 24px;
    --hga-safe-top: env(safe-area-inset-top, 0px);
    --hga-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- reset minimo ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.hga *,
.hga *::before,
.hga *::after { box-sizing: border-box; }

.hga {
    margin: 0;
    background: var(--hga-porcelain);
    color: var(--hga-ink);
    font-family: var(--hga-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Il reset di base va scritto con :where(), che vale ZERO in specificita':
   cosi' qualsiasi classe .hga-* piu' sotto lo sovrascrive senza dover
   rincorrere i selettori (altrimenti `.hga button` batterebbe `.hga-btn`). */
:where(.hga) :where(img) { max-width: 100%; display: block; }
:where(.hga) :where(p) { margin: 0; }
:where(.hga) :where(h1, h2, h3) { margin: 0; font-weight: 640; letter-spacing: -.02em; }
:where(.hga) :where(a) { color: inherit; text-decoration: none; }
:where(.hga) :where(ul) { margin: 0; padding: 0; list-style: none; }

:where(.hga) :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.hga :focus-visible {
    outline: 2px solid var(--hga-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* NIENTE ZOOM AL FOCUS: i campi di testo non scendono mai sotto i 16px.
   (I bottoni non c'entrano: iOS zooma solo su cio' in cui si scrive,
   quindi restano liberi di usare il carattere mono piccolo.) */
:where(.hga) :where(input, select, textarea) {
    font-family: inherit;
    font-size: 16px;
}

.hga a,
.hga button,
.hga label,
.hga input,
.hga select,
.hga textarea,
.hga summary { touch-action: manipulation; }

/* ---------- guscio a tutta altezza ---------- */
.hga-shell {
    /* ALTEZZA FISSA, non min-height: solo cosi' i figli flex sono
       obbligati a restringersi e la pagina non cresce mai oltre lo
       schermo. svh = altezza minima della finestra (barre del browser
       visibili), quindi il risultato tiene anche mentre si scrolla. */
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding: calc(var(--hga-safe-top) + 14px) var(--hga-pad) calc(var(--hga-safe-bottom) + 14px);
    position: relative;
    overflow: hidden;
}

/* alone blu del hero della home */
.hga-glow {
    position: absolute;
    top: -22%;
    right: -14%;
    width: 620px;
    height: 620px;
    max-width: 96vw;
    max-height: 70vh;
    background: radial-gradient(circle, rgba(0,87,255,.11), transparent 62%);
    pointer-events: none;
    z-index: 0;
}

.hga-top,
.hga-main,
.hga-foot { position: relative; z-index: 1; }

/* ---------- barra alta: logo + ritorno al sito ---------- */
.hga-top {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.hga-logo {
    display: block;
    width: 140px;
    aspect-ratio: 2592/583;
    flex: none;
}

.hga-logo img { width: 100%; height: 100%; }

.hga-top__back {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 4px;
    font-family: var(--hga-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hga-mute);
    transition: color .16s ease;
}

.hga-top__back:hover { color: var(--hga-ink); }
.hga-top__back svg { flex: none; }

/* ---------- corpo centrato ---------- */
.hga-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 16px 0;
    /* Valvola di sicurezza: se lo schermo e' talmente basso che nemmeno
       la card riesce a restringersi (es. tastiera aperta + errore di
       validazione), scorre QUESTO blocco, non la pagina. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.hga-col {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hga-col--wide { max-width: 720px; }

/* pagine larghe (scelta filiale): barra e footer seguono la card */
.hga-shell--wide .hga-top,
.hga-shell--wide .hga-foot { max-width: 720px; }

/* ---------- card ---------- */
.hga-card {
    background: var(--hga-paper);
    border: 1px solid var(--hga-rule);
    border-radius: 8px;
    box-shadow: 0 24px 60px -34px rgba(12,20,32,.45);
    padding: clamp(22px, 4.4vw, 34px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    animation: hga-rise .42s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes hga-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* Il form deve essere anch'esso una colonna flessibile, altrimenti resta
   un blocco rigido e cio' che ha dentro (la lista filiali) non si
   restringe mai: la card verrebbe tagliata invece di far scorrere la lista. */
.hga-card > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Cio' che deve restare sempre visibile non si restringe mai. */
.hga-card__head,
.hga-note,
.hga-alert,
.hga-secure,
.hga-actions { flex: none; }

.hga-label {
    font-family: var(--hga-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hga-mute);
}

.hga-card__title {
    margin-top: 10px;
    font-size: clamp(1.6rem, 5.6vw, 2rem);
    line-height: 1.1;
}

.hga-card__title b { color: var(--hga-blue); font-weight: inherit; }

.hga-card__lead {
    margin-top: 8px;
    color: var(--hga-slate);
    font-size: .95rem;
    line-height: 1.5;
}

.hga-card__head { margin-bottom: 22px; }

/* icona tonda opzionale (pagine di esito) */
.hga-mark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0,87,255,.10);
    color: var(--hga-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.hga-mark--ok { background: rgba(26,127,85,.12); color: var(--hga-ok); }

/* ---------- campi ---------- */
.hga-field { margin-bottom: 14px; }

.hga-field > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--hga-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hga-mute);
}

.hga-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--hga-rule);
    border-radius: 4px;
    background: var(--hga-paper);
    color: var(--hga-ink);
    font-size: 16px; /* mai sotto i 16px: nessuno zoom al focus */
    line-height: 1.35;
    transition: border-color .16s ease, box-shadow .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.hga-input::placeholder { color: #98A1AC; }

.hga-input:focus {
    outline: none;
    border-color: var(--hga-blue);
    box-shadow: 0 0 0 3px rgba(0,87,255,.14);
}

.hga-input--cf {
    text-transform: uppercase;
    font-family: var(--hga-mono);
    letter-spacing: .06em;
}

.hga-input--cf::placeholder { letter-spacing: .04em; text-transform: none; }

/* password + occhio */
.hga-pwd { position: relative; }
.hga-pwd .hga-input { padding-right: 52px; }

.hga-eye {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hga-mute);
    border-radius: 0 4px 4px 0;
    transition: color .16s ease;
}

.hga-eye:hover { color: var(--hga-ink); }

/* ---------- bottoni ---------- */
.hga-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: var(--hga-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.hga-btn svg { flex: none; }
.hga-btn--block { width: 100%; flex: none; }

.hga-btn--primary { background: var(--hga-blue); color: #fff; }
.hga-btn--primary:hover { background: var(--hga-blue-d); }
.hga-btn--primary:active { transform: translateY(1px); }

.hga-btn--primary:disabled {
    background: #C3CBD6;
    color: #F4F6F9;
    cursor: not-allowed;
    transform: none;
}

.hga-btn--ghost { border-color: var(--hga-rule); color: var(--hga-ink); background: var(--hga-paper); }
.hga-btn--ghost:hover { border-color: var(--hga-ink); }

.hga-textlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    color: var(--hga-blue);
    font-weight: 600;
    font-size: .9rem;
}

.hga-textlink svg { transition: transform .18s ease; }
.hga-textlink:hover svg { transform: translateX(3px); }

.hga-actions {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* ---------- avvisi ---------- */
.hga-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(192,40,28,.24);
    border-left: 3px solid var(--hga-danger);
    border-radius: 4px;
    background: rgba(192,40,28,.05);
    color: var(--hga-danger);
    font-size: .88rem;
    line-height: 1.45;
}

.hga-alert svg { flex: none; margin-top: 2px; }
.hga-alert ul { padding-left: 17px; list-style: disc; }
/* con un errore solo il pallino e' rumore: lo togliamo */
.hga-alert ul:has(li:only-child) { padding-left: 0; list-style: none; }
.hga-alert p:last-child, .hga-alert ul:last-child { margin-bottom: 0; }

.hga-alert--warn {
    border-color: rgba(176,116,0,.28);
    border-left-color: #B07400;
    background: rgba(176,116,0,.06);
    color: #7A5200;
}

.hga-note {
    padding: 13px 15px;
    margin-bottom: 16px;
    border: 1px solid var(--hga-rule);
    border-radius: 4px;
    background: var(--hga-mist);
    color: var(--hga-slate);
    font-size: .875rem;
    line-height: 1.5;
}

.hga-note strong { color: var(--hga-ink); }
.hga-note ul { margin-top: 6px; padding-left: 17px; list-style: disc; }
.hga-note li { margin-bottom: 2px; }

/* ---------- riga sicurezza + footer ---------- */
.hga-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hga-mist);
    font-family: var(--hga-mono);
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hga-mute);
}

.hga-secure svg { flex: none; color: var(--hga-ok); }

.hga-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    font-family: var(--hga-mono);
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hga-mute);
}

.hga-foot a { transition: color .16s ease; }
.hga-foot a:hover { color: var(--hga-blue); }

/* ---------- lista scelta filiale ---------- */
.hga-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* si restringe fin quasi a una sola voce, poi scorre al proprio
       interno: intestazione e bottone "Continua" restano sempre a video */
    min-height: 92px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 -4px;
    padding: 2px 4px;
}

.hga-pick {
    display: block;
    position: relative;
    border: 1px solid var(--hga-rule);
    border-radius: 6px;
    background: var(--hga-porcelain);
    padding: 14px 16px 14px 46px;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.hga-pick:hover { border-color: var(--hga-blue); }

.hga-pick input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* pallino disegnato: niente checkbox/radio nativo da ingrandire */
.hga-pick__dot {
    position: absolute;
    left: 16px;
    top: 17px;
    width: 18px;
    height: 18px;
    border: 1px solid #B9C0CA;
    border-radius: 50%;
    background: var(--hga-paper);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.hga-pick__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--hga-blue);
    transform: scale(0);
    transition: transform .16s cubic-bezier(.2,.8,.2,1);
}

.hga-pick input:checked ~ .hga-pick__dot { border-color: var(--hga-blue); }
.hga-pick input:checked ~ .hga-pick__dot::after { transform: scale(1); }

.hga-pick input:checked ~ .hga-pick__body .hga-pick__name { color: var(--hga-blue); }

.hga-pick:has(input:checked) {
    border-color: var(--hga-blue);
    background: var(--hga-paper);
    box-shadow: 0 0 0 1px var(--hga-blue) inset;
}

.hga-pick input:focus-visible ~ .hga-pick__dot {
    box-shadow: 0 0 0 3px rgba(0,87,255,.2);
}

.hga-pick__body { display: block; }

.hga-pick__name {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    transition: color .16s ease;
}

.hga-pick__meta {
    display: block;
    margin-top: 3px;
    color: var(--hga-slate);
    font-size: .85rem;
    line-height: 1.4;
}

.hga-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 2px;
    background: rgba(0,87,255,.10);
    color: var(--hga-blue);
    font-family: var(--hga-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}

.hga-tag--ok { background: rgba(26,127,85,.12); color: var(--hga-ok); }

/* spinner del submit */
.hga-spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hga-spin .7s linear infinite;
}

@keyframes hga-spin { to { transform: rotate(360deg); } }

/* ============================================================
   COMPATTAZIONE: schermi bassi (telefono in verticale, o con
   la barra del browser aperta). Tutto continua a stare dentro
   una schermata senza mai scrollare.
   ============================================================ */
@media (max-width: 560px) {
    :root { --hga-pad: 18px; }
    .hga-logo { width: 124px; }
    .hga-main { padding: 12px 0; }
}

@media (max-height: 700px) {
    .hga-card { padding: 20px; }
    .hga-card__head { margin-bottom: 16px; }
    .hga-card__title { margin-top: 7px; }
    .hga-field { margin-bottom: 11px; }
    .hga-input { min-height: 46px; padding: 10px 13px; }
    .hga-pwd .hga-input { padding-right: 50px; }
    .hga-btn { min-height: 48px; }
    .hga-textlink { min-height: 40px; }
    .hga-secure { margin-top: 12px; padding-top: 12px; }
    .hga-main { padding: 10px 0; }
}

@media (max-height: 600px) {
    .hga-card__lead { display: none; }
    .hga-secure { display: none; }
    .hga-card__title { font-size: 1.45rem; }
    .hga-note { padding: 10px 12px; margin-bottom: 12px; }
}

/* Telefono in orizzontale: la card scorre al proprio interno
   invece di allungare la pagina. */
@media (max-height: 480px) and (orientation: landscape) {
    .hga-shell { padding-top: 10px; padding-bottom: 10px; }
    .hga-top { display: none; }
    .hga-card { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .hga-foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hga-card { animation: none; }
    .hga *, .hga *::before, .hga *::after { transition: none !important; }
}