/* ===========================
   GOOGLE FONT
=========================== */

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

*{
    font-family:'Noto Sans Thai',sans-serif;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}


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

body{

    background:
    radial-gradient(circle at top,#eef2ff 0%,#edf4ff 35%,#f8faff 100%);

}

/* Blur Circle */

.bg-circle{

    position:absolute;
    border-radius:9999px;
    filter:blur(90px);
    opacity:.45;
    animation:floatBackground 12s ease-in-out infinite;

}

.bg-circle1{

    width:280px;
    height:280px;

    background:#6D5DFC;

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

}

.bg-circle2{

    width:240px;
    height:240px;

    background:#60A5FA;

    bottom:15%;
    right:-100px;

    animation-delay:2s;

}

.bg-circle3{

    width:180px;
    height:180px;

    background:#C084FC;

    top:45%;

    left:-80px;

    animation-delay:5s;

}


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

.login-header{

    position:relative;

    background:

    linear-gradient(
    135deg,
    #5B5EF8,
    #6A46FF,
    #4F7CFF
    );

    border-bottom-left-radius:42px;
    border-bottom-right-radius:42px;

    overflow:hidden;

    box-shadow:

    0 20px 40px rgba(79,124,255,.25);

}

/* Shape */

.header-shape{

    position:absolute;

    border-radius:999px;

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

}

.shape1{

    width:260px;
    height:260px;

    top:-130px;
    right:-70px;

}

.shape2{

    width:170px;
    height:170px;

    bottom:-60px;
    left:-40px;

}


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

.login-card{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:32px 24px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.05),

    0 25px 50px rgba(73,81,255,.08);

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

}


/* Glow */

.login-card::before{

    content:"";

    position:absolute;

    inset:-40%;

    background:

    radial-gradient(circle,
    rgba(99,102,241,.14),
    transparent 60%);

    animation:rotateGlow 18s linear infinite;

}


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

.login-icon{

    width:78px;

    height:78px;

    margin:auto;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
    135deg,
    #6366F1,
    #4F46E5
    );

    color:#fff;

    font-size:28px;

    box-shadow:

    0 15px 35px rgba(99,102,241,.35);

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

}


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

.input-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:700;

    color:#555;

}

.input-box{

    position:relative;

    display:flex;

    align-items:center;

    height:60px;

    border-radius:18px;

    background:#fff;

    border:2px solid #ECECEC;

    transition:.35s;

}

.input-box:hover{

    border-color:#C7D2FE;

}

.input-box:focus-within{

    border-color:#5B5EF8;

    box-shadow:

    0 0 0 5px rgba(91,94,248,.08);

}

.input-icon{

    width:58px;

    display:flex;

    justify-content:center;

    color:#7C7C7C;

    font-size:20px;

    transition:.35s;

}

.input-box:focus-within .input-icon{

    color:#5B5EF8;

    transform:scale(1.1);

}

.input-box input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:none;

    padding-right:18px;

    font-size:16px;

    color:#333;

}

.input-box input::placeholder{

    color:#B4B4B4;

}


/* ===========================
 REMEMBER
=========================== */

.remember{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-size:14px;

    color:#666;

}

.remember input{

    accent-color:#5B5EF8;

}


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

.login-btn{

    width:100%;

    height:60px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    color:#fff;

    font-weight:700;

    font-size:17px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:

    linear-gradient(
    135deg,
    #5B5EF8,
    #6A46FF
    );

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 15px 30px rgba(91,94,248,.35);

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 20px 40px rgba(91,94,248,.45);

}

.login-btn:active{

    transform:scale(.98);

}


/* Shine */

.login-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

    rgba(255,255,255,.35);

}

.login-btn:hover::before{

    animation:shine 1s;

}


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

.divider{

    display:flex;

    align-items:center;

    margin:35px 0;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E5E7EB;

}

.divider span{

    padding:0 15px;

    font-size:13px;

    color:#999;

}


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

.footer-box{

    display:flex;

    align-items:flex-start;

    gap:15px;

    background:#F8FAFF;

    border-radius:18px;

    padding:18px;

}

.footer-box i{

    font-size:24px;

    color:#5B5EF8;

}

.footer-box h4{

    font-size:15px;

    font-weight:700;

    color:#333;

}

.footer-box p{

    margin-top:4px;

    font-size:13px;

    color:#777;

    line-height:22px;

}


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

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes rotateGlow{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes shine{

    to{

        left:180%;

    }

}

@keyframes floatBackground{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

}


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

@media(max-width:430px){

.login-card{

padding:28px 20px;

}

.login-header{

border-bottom-left-radius:34px;
border-bottom-right-radius:34px;

}

.login-icon{

width:70px;
height:70px;

font-size:25px;

}

.login-btn{

height:56px;

}

}







/* ===================================================
Extra Animation
===================================================*/

@keyframes bubbleFloat {

    from {

        transform:translateY(40px) scale(.2);

        opacity:0;

    }

    to{

        transform:translateY(-120vh) scale(1);

        opacity:.18;

    }

}

.bubble{

    position:absolute;

    border-radius:999px;

    background:linear-gradient(135deg,#6366f1,#3b82f6);

    filter:blur(1px);

    animation:bubbleFloat linear forwards;

}

@keyframes shake{

0%,100%{

transform:translateX(0);

}

20%{

transform:translateX(-6px);

}

40%{

transform:translateX(6px);

}

60%{

transform:translateX(-5px);

}

80%{

transform:translateX(5px);

}

}

.shake{

animation:shake .45s;

}

@keyframes successScale{

0%{

transform:scale(.8);

}

60%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.success-scale{

animation:successScale .45s;

}






#loginBtn{

position:relative;

overflow:hidden;

}

#loginBtn::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:radial-gradient(circle,
rgba(255,255,255,.45),
transparent 70%);

left:calc(var(--x) - 110px);

top:calc(var(--y) - 110px);

opacity:0;

transition:.25s;

}

#loginBtn:hover::before{

opacity:1;

}