/* =====================================================
   MICKEY LIVE PREMIUM LOGIN
===================================================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;

}



body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;


    background:

    radial-gradient(
        circle at 10% 10%,
        rgba(255,30,30,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 90% 90%,
        rgba(255,20,20,.12),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #050509,
        #0b0b12,
        #030305
    );


    color:white;

}




.login-page{

    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

}





.login-card{


    width:100%;

    max-width:430px;


    padding:35px 30px 30px;



    position:relative;


    background:

    linear-gradient(
        145deg,
        #191921,
        #08080c
    );



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


    border-radius:22px;




    box-shadow:


    0 25px 70px rgba(0,0,0,.7),

    0 0 45px rgba(255,25,20,.12);



    overflow:hidden;


}





.login-card::before{


    content:"";


    position:absolute;


    top:0;

    left:8%;


    width:84%;


    height:2px;



    background:

    linear-gradient(
        90deg,
        transparent,
        #ff1f1f,
        #ff5748,
        #ff1f1f,
        transparent
    );



}








/* ==========================
   MICKEY BRAND
========================== */



.mickey-brand-box{


    width:100%;


    display:flex;


    align-items:center;


    gap:13px;



    padding:12px;


    margin-bottom:28px;



    background:

    rgba(255,255,255,.03);



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



    border-radius:16px;


}





.mickey-logo{


    width:55px;


    height:55px;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:16px;



    background:

    linear-gradient(
        135deg,
        #ff1717,
        #ff482e
    );



    color:white;


    font-size:30px;


    font-weight:900;



    box-shadow:

    0 0 25px rgba(255,30,25,.35);


}





.mickey-info{


    flex:1;


}





.mickey-info h3{


    color:white;


    font-size:20px;


    font-weight:900;


}





.mickey-info span{


    display:block;


    margin-top:5px;


    color:#888;


    font-size:10px;


    text-transform:uppercase;


    letter-spacing:1px;


}





.theme-btn{


    width:42px;


    height:42px;


    border-radius:50%;


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


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


    color:#ff4037;


    cursor:pointer;


    font-size:18px;


}








/* ==========================
   TITLE
========================== */


.login-title{


    font-size:31px;


    font-weight:900;


    color:white;


    margin-bottom:8px;


}





.login-subtitle{


    color:#85858f;


    font-size:13px;


    line-height:1.6;


    margin-bottom:25px;


}

/* ==========================
   GOOGLE LOGIN
========================== */


.google-login{

    width:100%;

}



.google-login-btn{


    width:100%;


    height:55px;



    display:flex;


    align-items:center;


    justify-content:center;



    gap:12px;



    border-radius:14px;



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



    background:


    linear-gradient(
        135deg,
        #252d3d,
        #30394d
    );



    color:white;



    font-size:15px;



    font-weight:800;



    cursor:pointer;



    transition:.2s;


}





.google-login-btn:hover{


    transform:translateY(-2px);


    box-shadow:


    0 10px 25px rgba(0,0,0,.35);


}




.google-icon{


    width:27px;


    height:27px;


    background:white;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


}




.google-letter{


    font-size:20px;


    font-weight:900;



    background:

    linear-gradient(
        45deg,
        #4285f4,
        #34a853,
        #fbbc05,
        #ea4335
    );



    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}







/* ==========================
   DIVIDER
========================== */


.google-divider{


    display:flex;


    align-items:center;


    gap:12px;



    margin:20px 0;



    color:#777;


    font-size:12px;


}



.google-divider::before,
.google-divider::after{


    content:"";


    flex:1;


    height:1px;



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


}







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


.field-label{


    display:block;


    margin-bottom:8px;


    color:#eeeeee;


    font-size:14px;


    font-weight:700;


}







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


.input-box{


    width:100%;


    height:53px;



    display:flex;


    align-items:center;



    margin-bottom:16px;




    background:


    linear-gradient(
        135deg,
        #1f1f29,
        #14141c
    );




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



    border-radius:12px;



    transition:.2s;


}





.input-box:focus-within{


    border-color:#ff3730;



    box-shadow:


    0 0 20px rgba(255,40,30,.15);


}




.input-icon{


    width:48px;


    display:flex;


    align-items:center;


    justify-content:center;



    color:#85858f;


}






.input-box input{


    width:100%;


    height:100%;



    border:none;


    outline:none;



    background:transparent;



    color:white;



    font-size:14px;


}





.input-box input::placeholder{


    color:#6e6e78;


}







.password-toggle{


    width:45px;


    height:100%;



    border:none;


    background:transparent;



    color:#888;


    cursor:pointer;


    font-size:18px;


}







.password-toggle:hover{


    color:#ff4037;


}







/* ==========================
   FORGOT PASSWORD
========================== */


.forgot-password{


    text-align:right;


    margin-top:5px;


    margin-bottom:20px;


}





.forgot-password a{


    color:#999;


    font-size:12px;


    text-decoration:none;


}



.forgot-password a:hover{


    color:#ff4037;


}







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


#loginBtn{


    width:100%;



    height:52px;



    display:flex;


    align-items:center;


    justify-content:center;



    gap:8px;



    border:none;



    border-radius:12px;



    background:


    linear-gradient(
        135deg,
        #ff1717,
        #ff482e
    );



    color:white;



    font-size:15px;



    font-weight:900;



    cursor:pointer;




    box-shadow:


    0 10px 25px rgba(255,30,25,.25);



    transition:.2s;


}





#loginBtn:hover{


    transform:translateY(-2px);



    box-shadow:


    0 15px 35px rgba(255,30,25,.35);


}





#loginBtn:active{


    transform:scale(.98);


}





.login-arrow{


    font-size:20px;


}







/* MESSAGE */


#message{


    min-height:20px;


    margin-top:12px;


    text-align:center;


    color:#ff5555;


    font-size:12px;


}
/* ==========================
   REGISTER TEXT
========================== */


.register-text{


    margin-top:22px;


    text-align:center;



    color:#777781;


    font-size:13px;



}





.register-text a{


    margin-left:5px;



    color:#ff4037;



    font-weight:700;



    text-decoration:none;



    transition:.2s;



}





.register-text a:hover{


    color:#ff716a;


    text-shadow:

    0 0 10px rgba(255,50,40,.3);



}







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


::selection{


    background:rgba(255,40,30,.35);


    color:white;


}







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


@media(max-width:600px){



    body{


        padding:10px;


    }





    .login-page{


        padding:10px;


    }





    .login-card{


        padding:28px 22px 25px;



        border-radius:20px;


    }





    .mickey-brand-box{


        padding:10px;


    }





    .mickey-logo{


        width:48px;


        height:48px;


        font-size:25px;


    }





    .mickey-info h3{


        font-size:18px;


    }





    .mickey-info span{


        font-size:8px;


    }





    .theme-btn{


        width:38px;


        height:38px;


    }





    .login-title{


        font-size:27px;


    }





    .login-subtitle{


        font-size:12px;


    }





    .google-login-btn{


        height:52px;


        font-size:14px;


    }





    .input-box{


        height:50px;


    }





    #loginBtn{


        height:50px;


    }



}







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


@media(max-width:390px){



    .login-card{


        padding:25px 18px 22px;


    }





    .mickey-brand-box{


        gap:8px;


    }





    .mickey-logo{


        width:45px;


        height:45px;


        font-size:22px;


    }





    .mickey-info h3{


        font-size:16px;


    }





    .login-title{


        font-size:24px;


    }





    .google-divider{


        font-size:10px;


    }





    .register-text{


        font-size:11px;


    }


}