/* ==========================================================
   SABUATI APPAREL ERP
   LOGIN PREMIUM STYLE
========================================================== */



/* ==========================================================
   RESET
========================================================== */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}





:root{


    --navy:#061426;

    --navy2:#0B2748;


    --gold:#D4AF37;

    --orange:#F59E0B;

    --pink:#F53D9E;

    --purple:#7B4DFF;


    --text:#0F172A;

    --muted:#64748B;


}







/* ==========================================================
   BODY
========================================================== */


body{


    font-family:'Inter',sans-serif;


    min-height:100vh;


    overflow:hidden;



    background:


    linear-gradient(

        135deg,

        #061426,

        #0B2748,

        #1E293B

    );



}







/* ==========================================================
   BACKGROUND EFFECT
========================================================== */


.background{


    position:fixed;


    inset:0;



    background:


    radial-gradient(

        circle at top left,

        rgba(212,175,55,.35),

        transparent 35%

    ),



    radial-gradient(

        circle at bottom right,

        rgba(245,61,158,.25),

        transparent 35%

    );



    filter:blur(60px);



    animation:

    bgMove 10s ease-in-out infinite alternate;



}







@keyframes bgMove{


    from{


        transform:translate(-50px,-30px);


    }



    to{


        transform:translate(50px,40px);


    }


}








/* ==========================================================
   WRAPPER
========================================================== */


.login-wrapper{


    position:relative;


    z-index:2;



    min-height:100vh;



    display:flex;



    justify-content:center;



    align-items:center;



    padding:30px;



}








/* ==========================================================
   LOGIN CARD
========================================================== */


.login-card{


    width:430px;



    padding:45px;



    border-radius:30px;



    background:


    rgba(255,255,255,.92);



    backdrop-filter:


    blur(20px);



    border:


    1px solid rgba(255,255,255,.5);



    box-shadow:


    0 30px 80px rgba(0,0,0,.35);



}








/* ==========================================================
   LOGO
========================================================== */


.logo{


    text-align:center;


    margin-bottom:25px;


}




.logo img{


    width:170px;


    max-width:100%;


}







.subtitle{


    margin-top:10px;



    color:#64748B;



    font-size:14px;



    line-height:1.5;



}








/* ==========================================================
   ALERT
========================================================== */


.alert{


    border-radius:14px;



    margin-bottom:20px;



}








/* ==========================================================
   LABEL
========================================================== */


.form-label{


    color:#334155;



    font-weight:600;



    margin-bottom:8px;



}







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


.input-group{


    margin-bottom:15px;


}





.input-group-text{


    width:52px;



    justify-content:center;



    background:#F1F5F9;



    color:#0B2748;



    border:


    1px solid #CBD5E1;



}






.form-control{


    height:52px;



    background:white;



    color:#0F172A;



    border:


    1px solid #CBD5E1;



}





.form-control::placeholder{


    color:#94A3B8;


}







.form-control:focus{


    background:white;



    color:#0F172A;



    border-color:


    var(--gold);



    box-shadow:


    0 0 0 3px rgba(212,175,55,.18);



}







.btn-password{


    width:52px;



    background:#F8FAFC;



    color:#0B2748;



    border:


    1px solid #CBD5E1;



}



.btn-password:hover{


    background:#E2E8F0;



}








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


.btn-login{


    width:100%;



    height:55px;



    border:none;



    border-radius:15px;



    color:white;



    font-size:17px;



    font-weight:700;



    letter-spacing:.5px;



    background:


    linear-gradient(

        90deg,

        #D4AF37,

        #F59E0B,

        #F53D9E,

        #7B4DFF

    );



    transition:.3s;



}





.btn-login:hover{


    transform:


    translateY(-3px);



    color:white;



    box-shadow:


    0 15px 35px rgba(245,61,158,.35);



}








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


.login-footer{


    margin-top:25px;



    text-align:center;



    font-size:13px;



    color:#64748B;



}








/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:576px){


    .login-card{


        width:100%;


        padding:30px;


    }



    .logo img{


        width:140px;


    }



}