/*====================================================
    Samadhan Order ERP
    Login Screen
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    height:100%;
}

body{

    min-height:100vh;

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

    background:linear-gradient(145deg,#2563eb,#4f46e5,#7c3aed);

    overflow-x:hidden;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

/*=========================
Background
==========================*/

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(8px);

    opacity:.18;

}

.circle1{

    width:280px;

    height:280px;

    background:#fff;

    top:-90px;

    left:-90px;

}

.circle2{

    width:230px;

    height:230px;

    background:#9ec5ff;

    right:-60px;

    top:25%;

}

.circle3{

    width:250px;

    height:250px;

    background:#ffffff;

    bottom:-90px;

    left:35%;

}

/*=========================
Wrapper
==========================*/

.login-wrapper{

    width:100%;

    max-width:430px;

}

/*=========================
Logo
==========================*/

.logo-box{

    text-align:center;

    margin-bottom:24px;

    color:#fff;

}

.logo-box img{

    width:92px;

    height:92px;

    object-fit:contain;

    border-radius:20px;

    background:#fff;

    padding:10px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.logo-box h2{

    margin-top:18px;

    font-size:28px;

    font-weight:700;

}

.logo-box p{

    margin-top:6px;

    opacity:.85;

    font-size:14px;

}

/*=========================
Glass Card
==========================*/

.login-card{

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-radius:28px;

    padding:30px;

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.login-card h3{

    color:#fff;

    font-size:26px;

    font-weight:700;

}

.login-card p{

    color:rgba(255,255,255,.85);

    margin-bottom:25px;

    font-size:14px;

}

/*=========================
Form
==========================*/

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    color:#fff;

    margin-bottom:8px;

    font-size:13px;

    font-weight:500;

}

.input-box{

    position:relative;

}

.input-box>i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#6b7280;

    z-index:2;

}

.input-box input{

    width:100%;

    height:56px;

    border:none;

    outline:none;

    border-radius:16px;

    background:#fff;

    padding-left:50px;

    padding-right:50px;

    font-size:15px;

    transition:.30s;

}

.input-box input:focus{

    box-shadow:0 0 0 4px rgba(255,255,255,.30);

}
/*====================================================
    PASSWORD ICON
====================================================*/

#togglePassword{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:5;

}

#togglePassword:hover{

    color:#2563eb;

}


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

.login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    margin-top:15px;

    color:#fff;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

    cursor:pointer;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    box-shadow:0 15px 30px rgba(37,99,235,.35);

    transition:.30s;

    position:relative;

    overflow:hidden;

}

.login-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(37,99,235,.45);

}

.login-btn:active{

    transform:scale(.98);

}

.login-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

}


/*====================================================
    RIPPLE EFFECT
====================================================*/

.login-btn::before{

    content:'';

    position:absolute;

    width:0;

    height:0;

    left:50%;

    top:50%;

    background:rgba(255,255,255,.25);

    border-radius:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.login-btn:hover::before{

    width:320px;

    height:320px;

}


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

.footer{

    text-align:center;

    color:#fff;

    margin-top:22px;

    font-size:13px;

    line-height:22px;

}

.footer strong{

    font-weight:600;

}


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

.login-card{

    animation:cardAnimation .6s ease;

}

.logo-box{

    animation:logoAnimation .8s ease;

}

@keyframes cardAnimation{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes logoAnimation{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.input-box input::placeholder{

    color:#9ca3af;

}


/*====================================================
    AUTOFILL FIX
====================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px white inset !important;

}


/*====================================================
    SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:6px;

}

::-webkit-scrollbar-thumb{

    background:#4f46e5;

    border-radius:20px;

}
/*====================================================
    MOBILE SAFE AREA
====================================================*/

@supports (padding: max(0px)) {

    body{

        padding-top:max(20px, env(safe-area-inset-top));

        padding-bottom:max(20px, env(safe-area-inset-bottom));

        padding-left:max(20px, env(safe-area-inset-left));

        padding-right:max(20px, env(safe-area-inset-right));

    }

}


/*====================================================
    SMALL DEVICES
====================================================*/

@media(max-width:390px){

    .login-wrapper{

        max-width:100%;

    }

    .login-card{

        padding:22px;

        border-radius:24px;

    }

    .logo-box img{

        width:75px;

        height:75px;

    }

    .logo-box h2{

        font-size:23px;

    }

    .login-card h3{

        font-size:22px;

    }

    .input-box input{

        height:52px;

        font-size:14px;

    }

    .login-btn{

        height:54px;

    }

}


/*====================================================
    TABLET
====================================================*/

@media(min-width:768px){

    .login-wrapper{

        max-width:450px;

    }

}


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

.input-box input:hover{

    transform:translateY(-1px);

}


/*====================================================
    BUTTON LOADING
====================================================*/

.login-btn.loading{

    pointer-events:none;

    opacity:.85;

}

.login-btn.loading .btn-text{

    opacity:.2;

}

.login-btn.loading .spinner-border{

    display:inline-block !important;

}


/*====================================================
    GLASS SHADOW
====================================================*/

.login-card::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:28px;

    pointer-events:none;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.18),

        rgba(255,255,255,.02)

    );

}


/*====================================================
    FLOATING BACKGROUND
====================================================*/

.circle{

    animation:floating 10s infinite ease-in-out;

}

.circle2{

    animation-delay:2s;

}

.circle3{

    animation-delay:4s;

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0px);

    }

}


/*====================================================
    FOCUS EFFECT
====================================================*/

.input-box:focus-within{

    transform:scale(1.02);

    transition:.25s;

}


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

.login-btn i{

    margin-right:8px;

}


/*====================================================
    DARK MODE READY
====================================================*/

@media(prefers-color-scheme:dark){

    body{

        background:linear-gradient(

        135deg,

        #0f172a,

        #1e3a8a,

        #312e81);

    }

}


/*====================================================
    REMOVE BLUE TAP
====================================================*/

button,

input,

a{

    -webkit-tap-highlight-color:transparent;

}


/*====================================================
    SELECTION
====================================================*/

::selection{

    background:#2563eb;

    color:#fff;

}


/*====================================================
    APP FEEL
====================================================*/

html{

    scroll-behavior:smooth;

}

body{

    user-select:none;

}

input{

    user-select:text;

}