/* ---------------------------------------------------
   LOGIN - veste grafica ilink® System (2026)
   Caricato solo da core/views/site/login.php.
   Palette e font presi da www.ilinksystem.com
----------------------------------------------------- */

:root {
    --ilink-yellow: #FAD306;
    --ilink-black: #000000;
    --ilink-ink: #1E1E1E;
    --ilink-muted: #6B6B6B;
    --ilink-line: #E4E4E4;
    --ilink-field: #F7F7F7;
    --ilink-radius: 8px;
    /* "Inter Tight" ora e' un carattere che serviamo noi: lo dichiara css/ilink-font.css,
       nell'AppAsset di questa applicazione, e i file stanno in core/web/font/. Prima
       questa riga nominava una famiglia che arrivava da Google - e, se Google non
       rispondeva, non arrivava affatto.

       Il seguito della pila e' quello del Design System (`--il-font-display`) invece di
       "Helvetica Neue", Arial: conta solo nel caso in cui il carattere non si carichi, ma
       in quel caso e' meglio che questa pagina ripieghi su quello che ripiega il resto
       del prodotto. */
    --ilink-font: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Pagina: fondo giallo pieno, niente foto di sfondo del layout */
body {
    background: var(--ilink-yellow) !important;
    font-family: var(--ilink-font);
    color: var(--ilink-ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}

/* Il vecchio logo in testa al layout non serve: il marchio è nella card */
.img-header {
    display: none;
}

.wrap {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 0;
    padding: 48px 16px;
}

.wrap > .container.core-content {
    width: 100%;
    max-width: 880px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* ---- struttura a due colonne ---- */
.ilink-login {
    display: grid;
    grid-template-columns: 5fr 6fr;
    min-height: 480px;
    background: #fff;
}

.ilink-login__brand {
    background: var(--ilink-black);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 48px 32px;
    text-align: center;
}

.ilink-login__logo {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.ilink-login__tagline {
    margin: 0;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.ilink-login__panel {
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ilink-login__title {
    font-family: var(--ilink-font);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--ilink-black);
}

.ilink-login__subtitle {
    margin: 0 0 28px;
    color: var(--ilink-muted);
    font-size: 0.95rem;
}

/* ---- campi ---- */
.ilink-login .form-control {
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--ilink-line);
    border-radius: var(--ilink-radius);
    background: var(--ilink-field);
    font-family: var(--ilink-font);
    font-size: 1rem;
    color: var(--ilink-ink);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.ilink-login .form-control::placeholder {
    font-size: 0.95rem;
    color: #9A9A9A !important;
}

.ilink-login .form-control:focus {
    background: #fff;
    border-color: var(--ilink-black);
    box-shadow: 0 0 0 3px rgba(250, 211, 6, 0.55);
}

.ilink-login .form-control.is-invalid {
    border-color: #C62828;
}

.ilink-login .invalid-feedback {
    font-size: 0.8rem;
    text-align: left;
}

.ilink-login .mb-3 {
    margin-bottom: 14px !important;
}

/* ---- ricordami + password dimenticata ---- */
.ilink-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
}

.ilink-login__row .mb-3,
.ilink-login__row .form-group {
    margin: 0 !important;
}

.ilink-login .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin: 0;
}

.ilink-login .form-check > input {
    display: inline-block;
    float: none;
    margin: 0;
    width: 18px;
    height: 18px;
    border-color: #BDBDBD;
}

.ilink-login .form-check-input:checked {
    background-color: var(--ilink-black);
    border-color: var(--ilink-black);
}

.ilink-login .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(250, 211, 6, 0.55);
}

.ilink-login .form-check > label {
    width: auto;
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ilink-ink);
}

.ilink-login__forgot {
    color: var(--ilink-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--ilink-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.ilink-login__forgot:hover {
    color: var(--ilink-black);
    text-decoration-color: var(--ilink-black);
}

/* ---- pulsante ---- */
.ilink-login .btn-login {
    width: 100%;
    max-width: none;
    height: 50px;
    border: 0;
    border-radius: var(--ilink-radius);
    background: var(--ilink-black);
    color: var(--ilink-yellow);
    font-family: var(--ilink-font);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color .15s, color .15s, transform .05s;
}

.ilink-login .btn-login:hover,
.ilink-login .btn-login:focus {
    background: var(--ilink-yellow);
    color: var(--ilink-black);
    box-shadow: 0 0 0 2px var(--ilink-black) inset;
}

.ilink-login .btn-login:active {
    transform: translateY(1px);
}

/* ---- registrazione ---- */
.ilink-login .login-register {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ilink-line);
    text-align: center;
    font-size: 0.95rem;
    color: var(--ilink-muted);
}

.ilink-login .login-register b {
    font-size: 1em;
}

.ilink-login .login-register a {
    color: var(--ilink-black);
    text-decoration: underline;
    text-decoration-color: var(--ilink-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ---- footer del layout ---- */
.footer {
    height: auto;
    margin-top: 0;
    padding: 18px 20px;
    border-top: 0;
    background: var(--ilink-black) !important;
    color: var(--ilink-yellow) !important;
}

.footer > p {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

/* ---- tablet e telefoni: colonne impilate ---- */
@media (max-width: 767.98px) {
    .wrap {
        padding: 24px 16px;
        align-items: flex-start;
    }

    .ilink-login {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ilink-login__brand {
        padding: 32px 24px;
        gap: 12px;
    }

    .ilink-login__logo {
        max-width: 160px;
    }

    .ilink-login__panel {
        padding: 32px 24px;
    }

    .ilink-login__title {
        font-size: 1.6rem;
    }
}

/*
    Le bandiere della lingua, in fondo al riquadro di accesso.

    Chi arriva qui con un browser in italiano ma vuole entrare in brasiliano deve poterlo
    fare senza cambiare le impostazioni del browser. Stanno in fondo e non in cima perche'
    la cosa da fare in questa pagina e' entrare: la lingua e' un ripensamento, non il
    primo passo, e in cima avrebbe preso il posto che spetta al titolo.
*/
.ilink-login__lingue {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.ilink-login__lingua {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    color: #6b6b6b;
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}

.ilink-login__lingua:hover,
.ilink-login__lingua:focus-visible {
    background-color: rgba(0, 0, 0, .04);
    color: #1f1f1f;
    text-decoration: none;
}

/* La lingua in cui si sta leggendo adesso: si vede che e' quella, e resta cliccabile. */
.ilink-login__lingua--scelta {
    border-color: rgba(0, 0, 0, .18);
    background-color: rgba(0, 0, 0, .04);
    color: #1f1f1f;
    font-weight: 600;
}

.ilink-login__lingua .bandiera {
    display: block;
    border-radius: 2px;
}

/*
    Sotto i 420 px i cinque nomi non ci stanno su due righe decenti: restano le bandiere,
    che sono riconoscibili da sole, e il nome lo dice il suggerimento del titolo.
*/
@media (max-width: 420px) {
    .ilink-login__lingua-nome {
        display: none;
    }

    .ilink-login__lingua {
        padding: 6px;
    }
}