/*
|--------------------------------------------------------------------------
| AMGRES OTP LOGIN STYLE
|--------------------------------------------------------------------------
*/


.amgres-login-container {

    max-width: 420px;

    width: 100%;

    margin: 40px auto;

    padding: 30px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

    box-sizing: border-box;

}



.amgres-login-container h2 {

    text-align:center;

    margin-bottom:10px;

    font-size:26px;

    font-weight:600;

}



.amgres-login-container p {

    text-align:center;

    color:#666;

    margin-bottom:25px;

}






/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/


.amgres-input {


    width:100%;


    padding:14px 16px;


    font-size:16px;


    border:1px solid #ddd;


    border-radius:10px;


    outline:none;


    box-sizing:border-box;


    transition:0.3s;


    background:#fff;


}



.amgres-input:focus {


    border-color:#000;


}






/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/


.amgres-button {


    width:100%;


    padding:14px;


    margin-top:15px;


    border:none;


    border-radius:10px;


    background:#000;


    color:#fff;


    font-size:16px;


    cursor:pointer;


    transition:0.3s;


}




.amgres-button:hover {


    opacity:0.85;


}




.amgres-button:disabled {


    opacity:0.6;


    cursor:not-allowed;


}






.amgres-secondary-button {


    width:100%;


    margin-top:12px;


    padding:12px;


    border:none;


    background:transparent;


    color:#555;


    cursor:pointer;


    font-size:14px;


}






/*
|--------------------------------------------------------------------------
| OTP SECTION
|--------------------------------------------------------------------------
*/


#otp-section {


    margin-top:20px;


}







/*
|--------------------------------------------------------------------------
| MESSAGE
|--------------------------------------------------------------------------
*/


#message {


    margin-top:20px;


    text-align:center;


    font-size:15px;


}








/*
|--------------------------------------------------------------------------
| TOAST NOTIFICATION
|--------------------------------------------------------------------------
*/


#amgres-toast-container {


    position:fixed;


    top:25px;


    right:25px;


    z-index:99999;


}






.amgres-toast {


    min-width:280px;


    max-width:350px;


    padding:15px 20px;


    margin-bottom:12px;


    border-radius:12px;


    color:#fff;


    background:#222;


    font-size:15px;


    line-height:1.4;


    box-shadow:0 8px 25px rgba(0,0,0,0.15);


    animation:amgresToastIn .3s ease;


}






.amgres-toast-success {


    background:#198754;


}





.amgres-toast-error {


    background:#dc3545;


}





.amgres-toast-warning {


    background:#ffc107;


    color:#000;


}







@keyframes amgresToastIn {


    from {


        opacity:0;


        transform:translateY(-20px);


    }



    to {


        opacity:1;


        transform:translateY(0);


    }


}









/*
|--------------------------------------------------------------------------
| MOBILE RESPONSIVE
|--------------------------------------------------------------------------
*/


@media(max-width:768px){



    .amgres-login-container {


        width:calc(100% - 30px);


        margin:20px auto;


        padding:22px;


        border-radius:14px;


    }






    .amgres-login-container h2 {


        font-size:22px;


    }






    .amgres-input {


        padding:15px;


        font-size:16px;


    }







    .amgres-button {


        padding:15px;


        font-size:17px;


    }







    #amgres-toast-container {


        top:auto;


        bottom:20px;


        left:15px;


        right:15px;


    }






    .amgres-toast {


        width:100%;


        /*min-width:auto;*/


        max-width:none;


        text-align:center;


    }




}