﻿/* App_Login.css - pagina di accesso del gateway WhatsApp (marchio AF Digital) */
body.wa-body.wa-login { min-height: 100%; background: var(--wa-ink); }
.wa-login__wrap {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
    padding: 32px 16px;
}
.wa-login__brand { text-align: center; color: var(--wa-on-ink); }
.wa-login__brand img { display: block; width: 186px; height: auto; margin: 0 auto 14px; }
.wa-login__brand p { margin: 0; font-family: var(--wa-font-head); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--wa-on-ink); }
/* Su fondo antracite l'evidenziatore copre tutta la parola, altrimenti la parte alta resta illeggibile */
.wa-login__brand .wa-marker { color: var(--wa-ink); padding: 0 .18em; background: var(--wa-yellow); border-radius: 2px; }
.wa-login__card {
    width: 100%; max-width: 400px;
    background: var(--wa-paper); border-radius: 8px; padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(14, 15, 10, .45);
    animation: waLoginIn .5s var(--wa-ease) both;
}
.wa-login__card h1 { font-size: 24px; font-weight: 800; letter-spacing: -.04em; margin: 0 0 18px; }
.wa-login__lead { font-size: 14px; color: var(--wa-muted); margin: -8px 0 18px; }
.wa-login__remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--wa-ink); margin: 2px 0 18px; cursor: pointer; }
/* Campo password con l'occhio per vederla in chiaro */
.wa-field > .wa-pass { position: relative; display: block; margin: 0; font-weight: 400; }
.wa-pass .wa-input { padding-right: 48px; }
.wa-pass__eye {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 0; border-radius: var(--wa-radius-sm); background: transparent;
    color: var(--wa-muted); font-size: 18px; cursor: pointer;
    transition: color .15s var(--wa-ease), background-color .15s var(--wa-ease);
}
@media (hover: hover) { .wa-pass__eye:hover { color: var(--wa-ink); background: var(--wa-paper-2); } }
.wa-pass__eye[aria-pressed="true"] { color: var(--wa-ink); }
.wa-login__submit { width: 100%; min-height: 48px; font-size: 15px; }
.wa-login__err { display: flex; gap: 8px; background: var(--wa-danger-soft); color: #8f1d17; border-radius: var(--wa-radius-sm); padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
@keyframes waLoginIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .wa-login__card { padding: 22px 18px 20px; } .wa-login__brand img { width: 150px; } }
