/* BadgeBox v2 — auth pages (login, register, recover).
 * Mirrors design_handoff_badgebox_v2/src/auth.jsx (split layout).
 */

body.bbx-v2.bbx-auth-host {
    overflow: hidden;
    height: 100vh;
}

body.bbx-v2 .bbx-auth {
    width: 100%;
    height: 100vh;
    background: var(--bbx-gray-0);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    font-family: var(--bbx-font);
}

/* Logo. logo.svg (marchio ambra + testo bianco) va sempre su fondo
   scuro, altrimenti sparisce. */
body.bbx-v2 .bbx-auth__logo {
    display: block;
    height: clamp(32px, 2.6vw, 46px);
    width: auto;
    max-width: 280px;
    /* .bbx-auth__side e' un flex column: senza questo l'immagine, da flex item,
       viene stirata alla larghezza della colonna (align-items: stretch) e con
       l'altezza fissa si deforma. Il wordmark che c'era prima era uno <span>,
       che stirandosi non se ne accorgeva. */
    align-self: flex-start;
    object-fit: contain;
}

/* Fascia col logo in testa al form: serve solo da mobile, dove la colonna
   hero (e quindi il marchio) viene nascosta. */
body.bbx-v2 .bbx-auth__form__brand { display: none; }

/* ═══ HERO — fascia sinistra ═════════════════════════════════════════
 * Fondo a tre strati, tutti sui token della piattaforma (blu 600-900 +
 * giallo del marchio). L'animazione tocca SOLO transform e opacity: sta
 * sul compositor, non fa ne' layout ne' repaint, e i cicli sono lunghi
 * (18-30s) perche' si deve percepire come respiro, non come movimento.
 *
 *   ::before   griglia oraria — statica, e' solo texture
 *   ::after    alone che deriva (blu + un tocco di giallo)
 *   .__aurora  lama di luce che attraversa la fascia
 *
 * Chi ha chiesto meno movimento (prefers-reduced-motion) vede lo stesso
 * fondo, fermo: in coda al blocco.
 * ────────────────────────────────────────────────────────────────── */
body.bbx-v2 .bbx-auth__side {
    /* Blu della piattaforma, un paio di gradini piu' chiaro di prima (era
       800-900, quasi nero). Il primary puro (#0080f6) sta nell'alone, non nel
       fondo: come colore di campo regge 3.6:1 col bianco, sotto soglia per il
       sottotitolo e per le didascalie dei numeri; da 600 in giu' tornano tutti
       sopra. Il marchio e' bianco pieno e ha bisogno dello stesso margine. */
    background:
        radial-gradient(105% 75% at 16% -10%, color-mix(in srgb, var(--bbx-blue-400) 55%, transparent) 0%, transparent 62%),
        linear-gradient(158deg, var(--bbx-blue-600) 0%, var(--bbx-blue-700) 52%, var(--bbx-blue-800) 100%);
    position: relative;
    isolation: isolate;   /* tiene gli strati decorativi sotto il contenuto */
    overflow: hidden;
    padding: clamp(32px, 3.4vw, 64px);
    display: flex;
    flex-direction: column;
    /* Prima era space-between su tre figli: logo, testo e stats finivano a
       distanze uguali e enormi (243px a 1440, 333px a 1920), leggendosi come
       tre isole slegate. Ora logo e messaggio restano un blocco unico in alto
       e solo le stats vanno in fondo, con un unico vuoto intenzionale. */
    justify-content: flex-start;
    gap: clamp(28px, 4.5vh, 56px);
    color: var(--bbx-ink-inverse);
}

/* Strato 1 — puntini su griglia quadrata regolare. Un solo radial-gradient
   ripetuto su un passo uguale nei due assi: e' la texture, non deve leggersi
   come disegno. Sfumata ai bordi dalla maschera, altrimenti il reticolo si
   vede finire e sembra un bordo. Se il browser non supporta mask-image i
   puntini restano uniformi: degrada, non si rompe. */
body.bbx-v2 .bbx-auth__side::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.20) 1.3px, transparent 1.4px);
    /* Stesso valore sui due assi = maglia quadrata. */
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(85% 75% at 25% 35%, #000 0%, transparent 78%);
            mask-image: radial-gradient(85% 75% at 25% 35%, #000 0%, transparent 78%);
    pointer-events: none;
}

/* Strato 2 — alone che deriva. Due sorgenti azzurre in un solo strato: una
   schiarisce in alto a sinistra, l'altra alza appena l'angolo in basso a
   destra. Tutto dentro la scala del primary: la fascia resta monocroma. */
body.bbx-v2 .bbx-auth__side::after {
    content: "";
    position: absolute;
    /* Piu' grande della fascia: cosi' la deriva non scopre mai un bordo. */
    inset: -25%;
    z-index: -1;
    background:
        radial-gradient(38% 42% at 26% 30%,
            color-mix(in srgb, var(--bbx-blue-200) 30%, transparent) 0%, transparent 70%),
        radial-gradient(30% 34% at 74% 76%,
            color-mix(in srgb, var(--bbx-blue-300) 22%, transparent) 0%, transparent 68%);
    animation: bbxAuthDrift 30s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

/* Strato 3 — lama di luce. Attraversa la fascia una volta ogni 18s: e'
   quasi invisibile (4% di bianco), serve solo a non far sembrare il fondo
   una fotografia. */
body.bbx-v2 .bbx-auth__aurora {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 42%;
    z-index: -1;
    /* Niente filter: blur qui — le fermate del gradiente sono gia' morbide e
       un filtro su uno strato animato aggiunge un passaggio di rasterizzazione
       per nulla. Cosi' resta una texture che il compositor sposta e basta. */
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.015) 25%,
        rgba(255, 255, 255, 0.055) 50%,
        rgba(255, 255, 255, 0.015) 75%,
        transparent 100%);
    animation: bbxAuthSweep 18s linear infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes bbxAuthDrift {
    0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%      { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes bbxAuthSweep {
    0%   { transform: translate3d(-120%, 0, 0) skewX(-10deg); }
    /* La pausa e' dentro il ciclo: la lama esce a meta' animazione e il
       resto del tempo la fascia sta ferma. Senza questo il passaggio
       sarebbe continuo e diventerebbe un disturbo. */
    55%  { transform: translate3d(340%, 0, 0) skewX(-10deg); }
    100% { transform: translate3d(340%, 0, 0) skewX(-10deg); }
}

/* Entrata: logo, claim e numeri salgono di 14px in sequenza. Gira una
   volta sola, al caricamento. */
@keyframes bbxAuthIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
body.bbx-v2 .bbx-auth__side > .bbx-auth__logo,
body.bbx-v2 .bbx-auth__side > .bbx-auth__side__body,
body.bbx-v2 .bbx-auth__side > .bbx-auth__stats {
    animation: bbxAuthIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
body.bbx-v2 .bbx-auth__side > .bbx-auth__side__body { animation-delay: 0.10s; }
body.bbx-v2 .bbx-auth__side > .bbx-auth__stats      { animation-delay: 0.20s; }

body.bbx-v2 .bbx-auth__side .bbx-auth__logo { position: relative; z-index: 1; }
/* Nessun max-width in "ch" qui: si misurerebbe sul font del contenitore, non
   su quello del titolo, strozzandolo. I limiti di riga stanno sui figli. */
body.bbx-v2 .bbx-auth__side__body {
    max-width: clamp(380px, 42vw, 560px);
    position: relative;
    z-index: 1;
    /* I due claim occupano la STESSA cella: si incrociano senza posizionamento
       assoluto, quindi il blocco tiene l'altezza del piu' alto e nulla salta
       al cambio scheda. */
    display: grid;
}
body.bbx-v2 .bbx-auth__copy {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    /* visibility con ritardo pari alla dissolvenza: esce dall'albero di
       accessibilita' solo a fine transizione, non a meta'. */
    transition: opacity 0.40s ease,
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0.40s;
    pointer-events: none;
}
body.bbx-v2 .bbx-auth__copy.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Il claim entrante parte un soffio dopo che l'uscente ha iniziato a
       sparire: i due non si sovrappongono a piena opacita'. */
    transition-delay: 0.10s, 0.10s, 0s;
    pointer-events: auto;
}
body.bbx-v2 .bbx-auth__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--bbx-r-full);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    letter-spacing: 0.3px;
    margin-bottom: 28px;
}
body.bbx-v2 .bbx-auth__headline {
    font-size: clamp(32px, 3vw, 52px);
    /* "ch" qui e' corretto: si misura sul font-size del titolo stesso. 22ch
       tiene il claim su due righe senza spezzare "ogni ora,". */
    max-width: 22ch;
    line-height: 1.1;
    font-weight: 600;
    margin: 0;
    letter-spacing: -1px;
    /* base.css assegna un colore scuro direttamente a `body.bbx-v2 h1`: essendo
       sull'elemento batte il bianco EREDITATO da .bbx-auth__side, e il titolo
       finiva blu scuro su blu scuro. Va riaffermato qui. */
    color: inherit;
}
/* L'accento era il giallo del marchio: su un fondo ora azzurro stonava e
   tirava l'occhio piu' del titolo. Blue-200 resta dentro la scala del
   primary e si stacca comunque dal bianco pieno del resto della riga. */
body.bbx-v2 .bbx-auth__headline .accent { color: var(--bbx-blue-200); }
body.bbx-v2 .bbx-auth__subheadline {
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.55;
    /* Alzata da .70: il fondo non e' piu' il blu quasi nero di prima ma il
       primary, e a .70 il testo secondario finiva sotto la soglia di
       contrasto per il corpo (misurato sul pixel dietro la riga). */
    color: rgba(255, 255, 255, 0.86);
    margin: 20px 0 0;
    max-width: 46ch;
}
body.bbx-v2 .bbx-auth__stats {
    margin-top: auto;
    display: flex;
    gap: clamp(24px, 2.4vw, 40px);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    position: relative;
    z-index: 1;
}
body.bbx-v2 .bbx-auth__stats strong {
    color: var(--bbx-ink-inverse);
    font-weight: 600;
    font-size: 20px;
    display: block;
    font-family: var(--bbx-mono);
}

/* Meno movimento: il fondo resta identico, si fermano deriva, lama e
   pulsazione. Il cambio di claim diventa immediato invece che sparire:
   il contenuto non deve mai dipendere dall'animazione. */
@media (prefers-reduced-motion: reduce) {
    body.bbx-v2 .bbx-auth__side::after,
    body.bbx-v2 .bbx-auth__aurora,
    body.bbx-v2 .bbx-auth__side > .bbx-auth__logo,
    body.bbx-v2 .bbx-auth__side > .bbx-auth__side__body,
    body.bbx-v2 .bbx-auth__side > .bbx-auth__stats {
        animation: none;
    }
    body.bbx-v2 .bbx-auth__copy {
        transition: none;
        transform: none;
    }
}

/* Form side */
body.bbx-v2 .bbx-auth__form {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2vw, 36px) clamp(24px, 3vw, 56px);
    min-width: 0;
    overflow-y: auto;
    max-height: 100vh;
}
/* Selettore lingua — 13 lingue, quindi un <select> e non una fila di link.
 * Chevron: stessa data-URI di §4 in primitives (il select qui vive fuori da
 * #body-content, che e' lo scope di quelle regole, quindi va rivestito). */
body.bbx-v2 .bbx-auth__langs {
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
body.bbx-v2 .bbx-auth__langs__select {
    -webkit-appearance: none;
    appearance: none;
    max-width: 100%;
    padding: 6px 32px 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23616b7b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    color: var(--bbx-gray-500);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
body.bbx-v2 .bbx-auth__langs__select:hover {
    background-color: var(--bbx-gray-50);
    border-color: var(--bbx-gray-200);
    color: var(--bbx-gray-800);
}
body.bbx-v2 .bbx-auth__langs__select:focus-visible {
    border-color: var(--bbx-blue-500);
    box-shadow: var(--bbx-focus-ring);
    outline: none;
    color: var(--bbx-gray-800);
}
/* Il menu nativo eredita il colore grigio del trigger e diventa illeggibile
 * su alcuni browser: le option tornano al testo pieno su fondo bianco. */
body.bbx-v2 .bbx-auth__langs__select option {
    background: var(--bbx-surface);
    color: var(--bbx-gray-800);
}

body.bbx-v2 .bbx-auth__center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}
body.bbx-v2 .bbx-auth__card {
    width: 100%;
    max-width: clamp(380px, 32vw, 460px);
}

body.bbx-v2 .bbx-auth__title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--bbx-gray-800);
    letter-spacing: -0.5px;
}
body.bbx-v2 .bbx-auth__desc {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--bbx-gray-500);
}
body.bbx-v2 .bbx-auth__intro { margin-bottom: 28px; }

/* Tabs (Accedi / Registrati) */
/* Il segmented «Accedi / Registrati» era una copia privata del componente:
 * stessa idea ma raggi 10/7 invece di r-md/5, padding e corpo diversi. Ora
 * usa .bbx-seg / .bbx-seg__item di primitives con la variante --full.
 * Resta qui solo lo stacco dal modulo sotto. */
/* Il segmented non e' figlio DIRETTO della card ma dei due pannelli
 * #bbx-login / #bbx-register: col `>` la regola non agganciava niente e
 * restava incollato ai campi. */
body.bbx-v2 .bbx-auth__card .bbx-seg { margin-bottom: 28px; }

/* La maschera della password usciva a quadratini: il glifo che il motore
 * usa per coprire i caratteri non c'e' in Hanken Grotesk. Sui soli campi
 * password si passa allo stack di sistema, che ce l'ha tondo. */
body.bbx-v2 input[type="password"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* Auth form grid */
body.bbx-v2 .bbx-auth__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.bbx-v2 .bbx-auth__row {
    display: flex;
    gap: 12px;
}
body.bbx-v2 .bbx-auth__row > .bbx-field { flex: 1 1 0; }

/* Options row (remember me + forgot password) */
body.bbx-v2 .bbx-auth__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -4px;
    flex-wrap: wrap;
    gap: 8px;
}
body.bbx-v2 .bbx-auth__options a {
    font-size: 13px;
    color: var(--bbx-blue-600);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
body.bbx-v2 .bbx-auth__options a:hover { text-decoration: underline; }

/* Primary submit button — bigger than standard .bbx-btn */
body.bbx-v2 .bbx-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bbx-accent-fill);
    color: var(--bbx-ink-inverse);
    border: none;
    border-radius: var(--bbx-r-lg);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 1px 0 var(--bbx-blue-700), 0 2px 4px rgba(0, 128, 246, 0.25);
    transition: background 120ms ease, box-shadow 120ms ease, transform 100ms ease;
}
body.bbx-v2 .bbx-auth__submit:hover { background: var(--bbx-accent-hover); }
body.bbx-v2 .bbx-auth__submit:active { transform: translateY(1px); }
body.bbx-v2 .bbx-auth__submit:disabled { opacity: 0.6; cursor: wait; }

/* Error message */
body.bbx-v2 .bbx-auth__error {
    padding: 10px 12px;
    border-radius: var(--bbx-r-md);
    background: var(--bbx-red-soft);
    color: var(--bbx-danger-ink);
    font-size: 13px;
    border: 1px solid var(--bbx-danger-border);
}
body.bbx-v2 .bbx-auth__error:empty { display: none; }

/* Footer legal */
body.bbx-v2 .bbx-auth__footer {
    font-size: 12px;
    color: var(--bbx-gray-400);
    text-align: center;
    padding-top: 16px;
}

/* Loading overlay */
body.bbx-v2 .bbx-auth__cover {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
body.bbx-v2 .bbx-auth__cover.is-on { display: flex; }
body.bbx-v2 .bbx-auth__cover__spinner {
    /* Centrato in assoluto, non col flex del cover: function_login usa
     * fadeIn/fadeOut → jQuery scrive display:block inline e il flex
     * center del contenitore non scatta mai (spinner in alto a sinistra). */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -18px 0 0 -18px;
    width: 36px;
    height: 36px;
    border-radius: var(--bbx-r-full);
    border: 3px solid var(--bbx-blue-100);
    border-top-color: var(--bbx-blue-500);
    animation: bbx-spin 0.8s linear infinite;
}
@keyframes bbx-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
 * Info pages: centered card for browser/no_device/no_ticket/reserved/activation/reset/etc.
 */
body.bbx-v2.bbx-info-host {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, var(--bbx-blue-50) 0%, var(--bbx-gray-50) 55%);
}

body.bbx-v2 .bbx-info {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: var(--bbx-font);
    box-sizing: border-box;
}

body.bbx-v2 .bbx-info__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
body.bbx-v2 .bbx-info__brand__text {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.5px;
    color: var(--bbx-gray-800);
}
body.bbx-v2 .bbx-info__brand__text span { opacity: 0.55; }

body.bbx-v2 .bbx-info__card {
    width: 100%;
    max-width: 520px;
    background: var(--bbx-surface);
    border-radius: var(--bbx-r-xl);
    box-shadow: var(--bbx-shadow-lg);
    border: 1px solid var(--bbx-gray-150);
    padding: 40px;
    text-align: center;
    box-sizing: border-box;
}
body.bbx-v2 .bbx-info__card--wide { max-width: 640px; }

body.bbx-v2 .bbx-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--bbx-r-full);
    background: var(--bbx-blue-50);
    color: var(--bbx-blue-500);
    margin: 0 auto 20px;
}
body.bbx-v2 .bbx-info__icon--warn { background: var(--bbx-yellow-soft); color: var(--bbx-warn-ink); }
body.bbx-v2 .bbx-info__icon--danger { background: var(--bbx-red-soft); color: var(--bbx-red); }
body.bbx-v2 .bbx-info__icon--success { background: var(--bbx-green-soft); color: var(--bbx-green); }

body.bbx-v2 .bbx-info__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bbx-gray-800);
    letter-spacing: -0.3px;
    margin: 0 0 10px;
}

body.bbx-v2 .bbx-info__text {
    font-size: 14px;
    color: var(--bbx-gray-600);
    line-height: 1.55;
    margin: 0;
}
body.bbx-v2 .bbx-info__text a {
    color: var(--bbx-blue-600);
    font-weight: 500;
}

body.bbx-v2 .bbx-info__actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

body.bbx-v2 .bbx-info__fields {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

body.bbx-v2 .bbx-info__footer {
    margin-top: 20px;
    font-size: 12px;
    color: var(--bbx-gray-400);
}

/* Responsive: collapse side under 960px */
@media (max-width: 960px) {
    body.bbx-v2 .bbx-auth {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    body.bbx-v2 .bbx-auth__side { display: none; }
    body.bbx-v2 .bbx-auth__form { padding: 0 24px 40px; }

    /* Il marchio rientra qui, su fascia scura a tutta larghezza. */
    body.bbx-v2 .bbx-auth__form__brand {
        display: block;
        margin: 0 -24px 28px;
        padding: 20px 24px;
        background: linear-gradient(155deg, var(--bbx-accent-surface) 0%, var(--bbx-accent-surface-deep) 100%);
    }
    body.bbx-v2 .bbx-auth__logo { height: 30px; }
}