/* =====================================================
OVERLAY
===================================================== */

#avm-login-popup{

    display:none;

    position:fixed;

    inset:0;

    z-index:999999999;

    background:rgba(10,10,30,.35);

    backdrop-filter:blur(6px);

    align-items:center;

    justify-content:center;

    padding:24px;

}


/* =====================================================
POPUP
===================================================== */

.avm-popup-box{

   width:600px;

    max-width:1140px;

    background:#FFFFFF;

    border-radius:28px;

    padding:48px 56px;

    position:relative;

    box-shadow:
        0 24px 80px rgba(0,0,0,.18);

    animation:avmFade .25s ease;

}


/* =====================================================
ANIMATION
===================================================== */

@keyframes avmFade{

    from{

        opacity:0;

        transform:
            translateY(18px)
            scale(.98);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =====================================================
CLOSE
===================================================== */

.avm-close-popup{

    position:absolute;

    top:26px;

    right:30px;

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    font-size:46px;

    line-height:1;

    cursor:pointer;

    color:#0F172A;

    transition:.2s ease;

}

.avm-close-popup:hover{

    background:#0F172A;

    color:#FFFFFF;

    border-radius:10px;

}


/* =====================================================
HEADER
===================================================== */

.avm-login-header{

    margin-bottom:26px;

}

.avm-login-header h2{

    margin:0;

    font-size:38px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1px;

    color:#0F172A;

}

.avm-login-header p{

    margin-top:10px;

    font-size:16px;

    color:#6B7280;

}


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

#avm-login-form,
#avm-register-form{

    max-width:560px;

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* =====================================================
INPUT GROUP
===================================================== */

.avm-input-group{

    position:relative;

}


/* =====================================================
ICONS
===================================================== */

.avm-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#265CF2;

}

.avm-icon svg{

    width:20px;

    height:20px;

}


/* =====================================================
INPUTS
===================================================== */

#avm-login-form input,
#avm-register-form input{

    width:100%;

    height:56px;

    border:1px solid #D6DAE1;

    border-radius:12px;

    background:#FFFFFF;

    padding:
        0 18px
        0 52px;

    font-size:16px;

    font-weight:500;

    color:#111827;

    transition:.2s ease;

}

#avm-login-form input::placeholder,
#avm-register-form input::placeholder{

    color:#9CA3AF;

}

#avm-login-form input:focus,
#avm-register-form input:focus{

    outline:none;

    border-color:#265CF2;

    box-shadow:
        0 0 0 3px rgba(38,92,242,.12);

}


/* =====================================================
ACTIONS
===================================================== */

.avm-login-actions{

    display:flex;

    gap:18px;

    margin-top:10px;

}


/* =====================================================
BUTTONS
===================================================== */

#avm-login-popup .avm-login-btn,
#avm-login-popup .avm-register-btn{

    flex:1;

    height:56px;

    border:none !important;

    border-radius:12px;

    background:#265CF2 !important;

    color:#FFFFFF !important;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.2s ease;

    box-shadow:
        0 10px 24px rgba(38,92,242,.18);

}


/* =====================================================
BUTTON HOVER
===================================================== */

#avm-login-popup .avm-login-btn:hover,
#avm-login-popup .avm-register-btn:hover{

    background:#265CF2 !important;

    color:#FFFFFF !important;

    font-weight:700;

    transform:translateY(-1px);

    box-shadow:
        0 14px 28px rgba(38,92,242,.28);

}


/* =====================================================
MESSAGES
===================================================== */

#avm-login-message,
#avm-register-message{

    margin-top:8px;

    font-size:14px;

    font-weight:600;

    color:#265CF2;

}


/* =====================================================
FONT
===================================================== */

#avm-login-popup,
#avm-login-popup *{

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

    .avm-popup-box{

        padding:32px 24px;

        border-radius:22px;

    }

    .avm-login-header h2{

        font-size:30px;

    }

    #avm-login-form,
    #avm-register-form{

        max-width:100%;

    }

    .avm-login-actions{

        flex-direction:column;

    }

}