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

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

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

body{

    min-height:100vh;

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

    padding:20px;

    overflow:auto;

    font-family:'Segoe UI', sans-serif;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e3a8a,
            #0f766e
        );

    background-size:400% 400%;

    animation:bgAnimation 12s ease infinite;
}

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

@keyframes bgAnimation{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

/* ========================================
   OVERLAY
======================================== */

.background-overlay{
    position:fixed;
    inset:0;
    backdrop-filter:blur(10px);
    z-index:1;
}

/* ========================================
   CONTAINER
======================================== */

.login-container{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ========================================
   GLASS CARD
======================================== */

.glass-card{
    position:relative;
    width:100%;
    max-width:360px;
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.18);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow: 0 15px 45px rgba(0,0,0,0.35);

    overflow:hidden;
    transition: transform 0.35s ease,
        box-shadow 0.35s ease;

    animation:floatCard 5s ease-in-out infinite;
}

/* hover */

.glass-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 30px rgba(22, 22, 22, 0.322);
    border: .8px solid rgba(255, 253, 253, 0.678);
}

/* glow */

.glass-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:  rgba(255,255,255,0.06);
    top:-70px;
    left:-60px;
    z-index: -1;
}

.glass-card::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    background:   rgba(255,255,255,0.05);
    bottom:-50px;
    right:-80px;
}

/* ========================================
   FLOAT
======================================== */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* ========================================
   HEADER
======================================== */

.login-header{
    text-align:center;
    color:white;
    margin-bottom:25px;
}

.profile-image-pic{
    width:95px;
    height:95px;
    object-fit:cover;
    border-radius:50%;
    border: 3px solid rgba(255,255,255,0.25);
    margin-bottom:15px;
    box-shadow:  0 0 20px rgba(255,255,255,0.15);
}

.login-header h2{
    font-size:28px;
    font-weight:700;
}

.login-header p{
    font-size:14px;
    opacity:0.8;
    margin-top:5px;
}

/* ========================================
   HOME BUTTON
======================================== */

.top-actions{
    margin-bottom:18px;
}

.btn-home{
    display: inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 15px;
    border-radius:14px;
    text-decoration:none;
    color:white;
    background:  rgba(255,255,255,0.10);
    transition:0.3s;
    z-index: 9999999;
}

.btn-home:hover{
    background: rgba(255,255,255,0.20);
    color: #06b6d4;
}

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

.input-box{
    position:relative;
    margin-bottom:24px;
}

.input-box input{
    width:100%;
    height:45px;
    border:none;
    outline:none;
    border-radius:16px;
    padding: 18px 48px 18px 18px;
    background: rgba(255,255,255,0.10);
    border:  1px solid rgba(255,255,255,0.10);
    color:white;
    font-size:14px;
    transition:0.3s;
}

/* focus */

.input-box input:focus{
    border: 1px solid #7dd3fc;
    box-shadow:0 0 16px rgba(125,211,252,0.35);
    background:   rgba(255,255,255,0.14);
}

/* valid */

.input-box input:valid{
    border: 1px solid rgba(74,222,128,0.4);
}

/* invalid */

.input-box input:invalid:not(:focus):not(:placeholder-shown){
    border:  1px solid rgba(255,0,0,0.45);
    box-shadow:  0 0 10px rgba(255,0,0,0.15);
}

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

.input-box label{
    position: absolute;
    top:-9px;
    left: 18px;
    width: 100px;
    text-align: center;
    background: rgba(15,23,42,0.85);
    color: rgba(255,255,255,0.65);
    font-size:12px;
    padding: 2px 5px;
    pointer-events:none;
    transition: 0.25s;
    border-radius: 10px;
    border-radius:8px;
}

.input-box input:focus + label,
.input-box input:valid + label{
    left: calc(100%/2 + 15px);
    font-size:11px;
    padding:2px 8px;
    color:#7dd3fc;
}
.input-box input:not(:focus) + label{
    left: 18px;
    right: 0;
    color: rgba(255,255,255,0.65);
}
/* ========================================
   ICONS
======================================== */

.input-box i{
    position:absolute;
    right:16px;
    top:18px;
    color:  rgba(0, 0, 0, 0.7);
    transition:0.3s;
}

.input-box input:focus ~ i{
    color:#7dd3fc;
    transform:scale(1.1);
}

/* ========================================
   TOOLTIP ERROR
======================================== */

.error-message{
    position:absolute;
    left:8px;
    bottom:-17px;
    font-size:11px;
    color:#fca5a5;
    opacity:0;
    transition:0.25s;
}

.input-box input:invalid:not(:focus):not(:placeholder-shown)
~ .error-message{
    opacity:1;
}

/* ========================================
   SERVER ERROR
======================================== */

.alert-custom{
    padding:11px;
    border-radius:12px;
    margin-bottom:18px;
    text-align:center;
    color:white;
    font-size:13px;
    background:  rgba(255,0,0,0.14);
    border: 1px solid rgba(255,0,0,0.2);
}

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

.login-btn{

    position:relative;

    width:100%;

    border:none;

    height:52px;

    border-radius:16px;

    color:white;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 10px 25px rgba(37,99,235,0.35);

    transition:0.3s;
}

/* shine effect */

.login-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.25),
            transparent
        );

    transition:0.6s;
}

.login-btn:hover::before{
    left:100%;
}

.login-btn:hover{
    transform:  translateY(-2px);
    box-shadow:  0 15px 35px rgba(37,99,235,0.45);
}