/* ===== RESET ===== */
.login-popup,
.login-popup *{
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

/* ===== POPUP ===== */
.login-popup{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:20000;
}
.login-popup.active{display:flex}

/* ===== CARD ===== */
.login-card{
    width:100%;
    max-width:380px;
    padding:32px 26px;
    border-radius:22px;
    background:#120018;
    box-shadow:0 25px 60px rgba(140,0,255,.45);
    border:1px solid rgba(180,80,255,.35);
    color:#fff;
    position:relative;
    animation:popup .3s ease;
}
@keyframes popup{
    from{transform:scale(.9);opacity:0}
    to{transform:scale(1);opacity:1}
}

/* ===== BUTTON OPEN (Shine Auto) ===== */

@keyframes shineAuto {
    0%   { left:-120%; }
    35%  { left:120%; }
    100% { left:120%; }
}

.open-login-btn{
    position:relative;
    padding:8px 34px;
    border-radius:18px;
    background:linear-gradient(135deg,#6a00ff,#b76cff);
    color:#fff;
    font-size:18px;
    font-weight:700;
    border:none;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(140,0,255,.6);
    margin-bottom: 5px;
}

/* Shine layer */
.open-login-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    animation:shineAuto 4.5s ease-in-out infinite;
}

/* Hover (หยุดแสง + เนียนขึ้น) */
.open-login-btn:hover::before{
    animation-play-state:paused;
}

/* ===== CLOSE ===== */
.close-login{
    position:absolute;
    top:12px;right:12px;
    width:34px;height:34px;
    border-radius:50%;
    background:#6a00ff;
    color:#fff;
    border:none;
    font-size:18px;
    cursor:pointer;
}

/* ===== TITLE ===== */
.login-title{
    text-align:center;
    font-size:26px;
    margin-bottom:22px;
    color:#e9c6ff;
}

/* ===== FORM ===== */
.form-groups{
    margin-bottom:-10px;
    position:relative;
}

.form-groups input{
    width:100%;
    height:48px;
    padding:0 44px 0 46px;
    border-radius:14px;
    border:1px solid rgba(180,80,255,.35);
    background:#1a0023;
    color:#fff;
    font-size:15px;
    outline:none;
}

.input-icon{
    position:absolute;
    left:14px;
    top:68%!important;
    transform:translateY(-50%);
    font-size:18px;
}

.togglePw{
    position:absolute;
    right:14px;
    top:65%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:18px;
}

/* ===== BUTTON LOGIN ===== */
.btn-login{
    width:100%;
    height:52px;
    border-radius:18px;
    border:none;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,#6a00ff,#b76cff);
    margin-top:10px;
}

/* ===== SWEETALERT ===== */
.swal2-container{z-index:30000!important}