/* =========================
   ERROR
========================= */

.alert-error{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;
    padding:13px 14px;

    border:1px solid #fecaca;
    border-radius:12px;

    background:var(--danger-bg);

    color:var(--danger);

    font-size:14px;
    font-weight:600;
}

/* =========================
   FORM
========================= */

.input-group{
    margin-bottom:17px;
}

.input-group label{
    display:block;

    margin:0 0 7px 3px;

    color:#34473d;

    font-size:13px;
    font-weight:700;
}

.input-wrap{
    position:relative;

    display:flex;
    align-items:center;
}

.input-icon{
    position:absolute;
    left:16px;

    font-size:18px;

    opacity:.72;

    pointer-events:none;
}

.input-wrap input{
    width:100%;
    height:57px;

    padding:
        0
        50px
        0
        49px;

    border:1px solid var(--border);
    border-radius:15px;

    outline:none;

    background:#fbfdfc;

    color:var(--text);

    font-size:15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.input-wrap input::placeholder{
    color:#a1aca6;
}

.input-wrap input:focus{
    border-color:#4ade80;

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.12);
}

.password-toggle{
    width:42px;
    height:42px;

    position:absolute;
    right:8px;

    border:0;
    border-radius:11px;

    background:transparent;

    cursor:pointer;

    font-size:17px;

    opacity:.65;

    transition:
        opacity .2s ease,
        background .2s ease;
}

.password-toggle:hover{
    opacity:1;
    background:#edf7f0;
}

/* =========================
   LOGIN BUTTON
========================= */

.login-button{
    width:100%;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin-top:7px;

    border:0;
    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #15803d
        );

    color:#fff;

    font-size:16px;
    font-weight:750;

    cursor:pointer;

    box-shadow:
        0 12px 24px rgba(22,163,74,.25);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.login-button:hover{
    transform:translateY(-2px);

    filter:brightness(1.04);

    box-shadow:
        0 16px 30px rgba(22,163,74,.31);
}

.login-button:active{
    transform:translateY(0);
}

.button-arrow{
    font-size:23px;

    transition:transform .18s ease;
}

.login-button:hover .button-arrow{
    transform:translateX(4px);
}

/* =========================
   FOOTER
========================= */

.login-footer{
    margin-top:22px;

    text-align:center;
}

.secure-text{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-bottom:10px;
    padding:6px 10px;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary-dark);

    font-size:12px;
    font-weight:700;
}

.login-footer p{
    color:#9aa5a0;

    font-size:12px;
    line-height:1.5;
}