/* ==========================
   Zadax Host Login
   ========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
    font-family:Inter,Segoe UI,Arial,sans-serif;
}

body{

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #1d0f36 0%,
        #35196d 35%,
        #5b21b6 70%,
        #2563eb 100%
    );

}

/*========================*/

.background{

    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-1;

}

/*========================*/

.blob{

    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.45;
    animation:float 16s ease-in-out infinite;

}

.blob1{

    width:420px;
    height:420px;

    background:#9333ea;

    top:-120px;
    left:-120px;

}

.blob2{

    width:360px;
    height:360px;

    background:#2563eb;

    right:-100px;
    top:80px;

    animation-delay:3s;

}

.blob3{

    width:420px;
    height:420px;

    background:#7c3aed;

    bottom:-160px;
    left:40%;

    animation-delay:6s;

}

/*========================*/

@keyframes float{

    0%{

        transform:translateY(0px)
                  translateX(0px)
                  scale(1);

    }

    50%{

        transform:translateY(-40px)
                  translateX(30px)
                  scale(1.1);

    }

    100%{

        transform:translateY(0px)
                  translateX(0px)
                  scale(1);

    }

}

/*========================*/

.login-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:20px;

}

/*========================*/

.login-card{

    width:100%;
    max-width:430px;

    padding:45px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

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

    box-shadow:

        0 20px 60px rgba(0,0,0,.35);

    animation:fadeUp .8s;

}

/*========================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*========================*/

.logo{

    width:155px;

    margin-bottom:18px;

    transition:.4s;

}

.logo:hover{

    transform:scale(1.08)
              rotate(4deg);

}

/*========================*/

.login-card h2{

    color:#fff;

    font-size:28px;

    font-weight:700;

    margin-bottom:8px;

}

.login-card p{

    color:#ddd;

    font-size:15px;

    margin-bottom:30px;

}

/*========================*/

.form-label{

    color:#fff;

    font-weight:600;

}

/*========================*/

.input-group{

    margin-top:6px;

}

.input-group-text{

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

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

    color:white;

}

.form-control{

    height:52px;

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

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

    color:white;

}

.form-control::placeholder{

    color:#cfcfcf;

}

.form-control:focus{

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

    color:white;

    border-color:#8b5cf6;

    box-shadow:

        0 0 0 .20rem rgba(139,92,246,.25);

}

.btn-outline-secondary{

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

    color:white;

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

}

.btn-outline-secondary:hover{

    background:#8b5cf6;

    color:white;

}

/*========================*/

.btn-login{

    height:55px;

    margin-top:18px;

    border:none;

    border-radius:14px;

    background:linear-gradient(

        90deg,

        #7c3aed,

        #2563eb

    );

    color:white;

    font-size:16px;

    font-weight:700;

    letter-spacing:.4px;

    transition:.3s;

}

.btn-login:hover{

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(124,58,237,.35);

}

/*========================*/

a{

    color:#d8b4fe;

    text-decoration:none;

}

a:hover{

    color:white;

}

/*========================*/

.footer-login{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-top:18px;

    color:#ddd;

    font-size:13px;

}

.footer-login div{

    display:flex;

    align-items:center;

    gap:6px;

}

/*========================*/

.alert{

    border:none;

    border-radius:12px;

}

/*========================*/

.modal-content{

    background:#1d1d35;

    border-radius:20px;

    color:white;

    border:none;

}

.modal-header{

    border:none;

}

.modal-footer{

    border:none;

}

.modal .form-control{

    background:#2b2b4d;

}

/*========================*/

hr{

    border-color:rgba(255,255,255,.15);

    margin:25px 0;

}

/*========================*/

.spinner-border{

    width:18px;

    height:18px;

    margin-right:8px;

}

/*========================*/

@media(max-width:576px){

    .login-card{

        padding:30px;

        border-radius:22px;

    }

    .login-card h2{

        font-size:24px;

    }

    .footer-login{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}