/* ============================================================
   Nova Host Cloud — Home page 3D Login / Signup / Forgot / OTP popup
   Premium dark navy glass + glow + 3D slide animations.
   ============================================================ */

.auth-pop-overlay{
    position:fixed; inset:0; z-index:9000; display:none;
    align-items:center; justify-content:center; padding:18px;
    background:radial-gradient(ellipse 75% 60% at 50% 35%, rgba(124,92,255,.55), rgba(7,11,24,.88) 70%);
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.auth-pop-overlay.show{display:flex; animation:authPopFade .22s ease}
@keyframes authPopFade{from{opacity:0}to{opacity:1}}

.auth-pop-stage{
    position:relative; width:min(460px,94vw);
    animation:authPopRise .34s cubic-bezier(.18,.9,.28,1.15);
}
@keyframes authPopRise{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}

/* X close — top LEFT as requested */
.auth-pop-x{
    position:absolute; top:-14px; left:-14px; z-index:5;
    width:38px; height:38px; border-radius:50%; cursor:pointer; border:0;
    background:linear-gradient(135deg,#ff6b6b,#d43d5e); color:#fff; font-size:15px; font-weight:800;
    box-shadow:0 4px 0 #6e1f33,0 10px 22px rgba(244,102,127,.4),inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .18s ease,box-shadow .18s ease;
}
.auth-pop-x:hover{transform:rotate(90deg) scale(1.08)}
.auth-pop-x:active{transform:translateY(2px);box-shadow:0 2px 0 #6e1f33}

.auth-pop-card{
    position:relative; overflow:hidden; border-radius:22px; padding:26px 26px 18px;
    background:linear-gradient(168deg,var(--nc-panel, #101733) 0%,var(--nc-panel-2, #0d1329) 46%,var(--nc-bg-2, #0a1024) 100%);
    border:1px solid rgba(124,92,255,.28);
    box-shadow:
        0 8px 0 var(--nc-bg, #070b18),
        0 30px 70px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 46px rgba(124,92,255,.14);
}
.auth-pop-card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
    background:linear-gradient(90deg,transparent,rgba(124,92,255,.85),rgba(77,139,255,.85),transparent);
}
.auth-pop-card::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:
        linear-gradient(rgba(124,92,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,92,255,.05) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 75%);
}

/* Header */
.auth-pop-head{position:relative;z-index:1;text-align:center;margin-bottom:16px}

/* ---- NOVA GUARD robot (eyes react to the password eye) ---- */
.auth-pop-guard{width:92px; margin:0 auto 10px; text-align:center}
.auth-pop-guard-svg{
    width:92px; height:92px;
    filter:drop-shadow(0 10px 20px rgba(124,92,255,.35));
    animation:authPopFloat 3.4s ease-in-out infinite;
}
@keyframes authPopFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.guard-orb{animation:guardOrb 2.2s ease-in-out infinite}
@keyframes guardOrb{0%,100%{opacity:1}50%{opacity:.35}}
.guard-eyes-open{display:none}
.auth-pop-guard[data-reveal="1"] .guard-eyes-open{
    display:block;
    animation:guardEyesGlow .28s cubic-bezier(.2,.9,.3,1.4);
}
.auth-pop-guard[data-reveal="1"] .guard-eyes-closed{display:none}
@keyframes guardEyesGlow{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.guard-pulse{animation:guardPulse 1.4s ease-in-out infinite}
@keyframes guardPulse{0%,100%{opacity:.15;transform:scale(.9)}50%{opacity:.6;transform:scale(1.15)}}
.auth-pop-guard-label{
    display:inline-block; margin-top:4px; padding:3px 13px; border-radius:999px;
    font-size:9.5px; font-weight:800; letter-spacing:.2em; color:var(--nc-purple-2, #9d7dff);
    background:rgba(16,23,51,.7); border:1px solid rgba(124,92,255,.5);
    box-shadow:0 0 16px rgba(124,92,255,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-pop-head h2{font-size:21px;letter-spacing:-.02em;margin-bottom:4px;color:#fff}
.auth-pop-head p{font-size:12.5px;color:var(--nc-muted, #8590b4);margin:0}
.auth-pop-sub{font-size:12.5px;color:var(--nc-muted, #8590b4)}

/* Slide track — 4 panels, hard-clipped inside the wrap (no 3D context,
   so the next panel can NEVER peek out on any browser) */
.auth-pop-track-wrap{
    position:relative; z-index:1; overflow:hidden; border-radius:12px;
}
.auth-pop-track{
    display:flex; width:400%; will-change:transform;
    transition:transform .5s cubic-bezier(.22,.9,.3,1.08);
}
.auth-pop-track.panel-login{transform:translateX(0)}
.auth-pop-track.panel-signup{transform:translateX(-25%)}
.auth-pop-track.panel-forgot{transform:translateX(-50%)}
.auth-pop-track.panel-otp{transform:translateX(-75%)}
.auth-pop-panel{
    width:25%; flex:0 0 25%; box-sizing:border-box;
    padding:2px 2px 0; overflow:hidden;
}
/* Per-panel 3D entrance animation (re-triggered on switch) */
.auth-pop-panel.anim-in{animation:authPanelIn .42s cubic-bezier(.2,.9,.3,1.15)}
@keyframes authPanelIn{
    from{opacity:0;transform:translateX(26px) rotateY(-7deg) scale(.985)}
    to{opacity:1;transform:none}
}
.auth-pop-track.panel-signup .auth-pop-panel.anim-in{animation:authPanelInRight .42s cubic-bezier(.2,.9,.3,1.15)}
@keyframes authPanelInRight{
    from{opacity:0;transform:translateX(-26px) rotateY(7deg) scale(.985)}
    to{opacity:1;transform:none}
}
.auth-pop-track.panel-forgot .auth-pop-panel.anim-in{animation:authPanelInUp .42s cubic-bezier(.2,.9,.3,1.15)}
@keyframes authPanelInUp{
    from{opacity:0;transform:translateY(20px) scale(.97)}
    to{opacity:1;transform:none}
}
.auth-pop-track.panel-otp .auth-pop-panel.anim-in{animation:authPanelInLeft .42s cubic-bezier(.2,.9,.3,1.15)}
@keyframes authPanelInLeft{
    from{opacity:0;transform:translateX(22px) rotateY(-9deg)}
    to{opacity:1;transform:none}
}

/* Messages (3D small cards) */
.auth-pop-msg{
    position:relative; z-index:1; display:none; margin-bottom:12px; padding:10px 13px;
    border-radius:11px; font-size:12.5px; line-height:1.5; font-weight:600;
    box-shadow:0 3px 0 var(--nc-bg, #070b18),0 8px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
    animation:msgPop .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes msgPop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.auth-pop-msg.err{
    display:block; color:var(--nc-red, #f4667f);
    background:linear-gradient(135deg,rgba(244,102,127,.18),rgba(244,102,127,.12));
    border:1px solid rgba(244,102,127,.4);
}
.auth-pop-msg.ok{
    display:block; color:var(--nc-green, #34d399);
    background:linear-gradient(135deg,rgba(52,211,153,.18),rgba(52,211,153,.12));
    border:1px solid rgba(52,211,153,.4);
}

/* Fields */
.auth-pop-label{
    display:block; font-size:11px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--nc-faint, #65709a); margin:12px 0 6px;
}
.auth-pop-label:first-of-type{margin-top:2px}
.auth-pop-row{display:flex; align-items:center; justify-content:space-between}
.auth-pop-row .auth-pop-label{margin:12px 0 6px}
.auth-pop-link{font-size:12px;color:var(--nc-purple-2, #9d7dff);font-weight:700;text-decoration:none}
.auth-pop-link:hover{text-decoration:underline}
.auth-pop-field{
    position:relative; display:flex; align-items:center; margin-bottom:4px;
    background:rgba(7,11,24,.75); border:1px solid rgba(124,92,255,.2); border-radius:11px;
    transition:border .16s, box-shadow .16s;
}
.auth-pop-field:focus-within{border-color:var(--nc-purple-2, #9d7dff);box-shadow:0 0 0 3px rgba(124,92,255,.13)}
.auth-pop-field > span{
    width:38px; text-align:center; font-size:14px; color:var(--nc-faint, #65709a); flex-shrink:0;
}
.auth-pop-field input{
    flex:1; background:none; border:0; outline:0; color:var(--nc-text, #eaf0ff); font-size:14px;
    padding:12px 8px 12px 0; min-width:0;
}
.auth-pop-field input::placeholder{color:var(--nc-faint, #65709a)}

/* Nova Eye Guard — password visibility toggle */
.auth-pop-eye{
    background:none; border:0; cursor:pointer; color:var(--nc-faint, #65709a); font-size:14px; padding:0 12px;
    line-height:1; border-radius:8px;
}
.nova-eye{
    position:relative; width:34px; height:34px; margin-right:6px; display:grid; place-items:center;
    background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(77,139,255,.18));
    border:1px solid rgba(124,92,255,.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.3);
    transition:all .18s ease;
}
.nova-eye:hover{color:var(--nc-purple-2, #9d7dff);border-color:rgba(124,92,255,.65);box-shadow:0 0 12px rgba(124,92,255,.35)}
.nova-eye:active{transform:scale(.92)}
.nova-eye.eye-pop{animation:eyePop .28s cubic-bezier(.2,.9,.3,1.4)}
@keyframes eyePop{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Remember Me */
.auth-pop-remember{
    display:flex; align-items:center; gap:8px; margin:10px 2px 0; cursor:pointer;
    font-size:12.5px; color:var(--nc-muted, #8590b4); user-select:none;
}
.auth-pop-remember input{
    appearance:none; -webkit-appearance:none; width:17px; height:17px; margin:0; cursor:pointer;
    border:1.5px solid rgba(124,92,255,.35); border-radius:5px; background:rgba(7,11,24,.8);
    display:grid; place-items:center; transition:all .16s ease; flex-shrink:0;
}
.auth-pop-remember input:checked{
    background:var(--nc-accent-grad, linear-gradient(135deg,#7c5cff,#4d8bff)); border-color:var(--nc-purple-2, #9d7dff);
    box-shadow:0 0 10px rgba(124,92,255,.4);
}
.auth-pop-remember input:checked::after{
    content:"✓"; color:#fff; font-size:11px; font-weight:900; line-height:1;
}
.auth-pop-remember:hover{color:var(--nc-text, #eaf0ff)}

/* Submit button */
.auth-pop-btn{
    width:100%; margin-top:16px; padding:13px; border:0; border-radius:12px; cursor:pointer;
    font-size:14.5px; font-weight:800; letter-spacing:.02em; color:#fff;
    background:var(--nc-accent-grad, linear-gradient(135deg,#7c5cff,#4d8bff));
    box-shadow:0 4px 0 #3b2f7a,0 12px 26px rgba(124,92,255,.28);
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
    position:relative; overflow:hidden;
}
.auth-pop-btn::after{
    content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-20deg);
    animation:btnShine 3.4s ease-in-out infinite;
}
@keyframes btnShine{0%,70%{left:-80%}100%{left:130%}}
.auth-pop-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #3b2f7a,0 16px 32px rgba(124,92,255,.35)}
.auth-pop-btn:active{transform:translateY(0);box-shadow:0 2px 0 #3b2f7a}
.auth-pop-btn:disabled{opacity:.6;cursor:wait}

/* Terms line (signup) */
.auth-pop-terms{font-size:11.5px;color:var(--nc-faint, #65709a);text-align:center;margin:10px 4px 0;line-height:1.55}
.auth-pop-terms a{color:var(--nc-purple-2, #9d7dff);font-weight:700;text-decoration:none}
.auth-pop-terms a:hover{text-decoration:underline}

/* OTP two-step mini-slide */
.auth-pop-otp-step{animation:otpStep .3s cubic-bezier(.2,.9,.3,1.15)}
@keyframes otpStep{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Footer switches */
.auth-pop-foot{
    position:relative; z-index:1; margin-top:16px; padding-top:13px; text-align:center;
    border-top:1px solid rgba(124,92,255,.12); font-size:12.5px; color:var(--nc-muted, #8590b4);
}
.auth-pop-foot a{color:var(--nc-purple-2, #9d7dff);font-weight:700;text-decoration:none}
.auth-pop-foot a:hover{text-decoration:underline}
.auth-pop-alt{text-align:center;font-size:12px;color:var(--nc-faint, #65709a);margin-top:12px}
.auth-pop-alt a{color:var(--nc-purple-2, #9d7dff);font-weight:700;text-decoration:none}
.auth-pop-alt a:hover{text-decoration:underline}

/* Small loading spinner */
.auth-pop-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(7,11,24,.4);border-top-color:#fff;border-radius:50%;animation:authPopSpin .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes authPopSpin{to{transform:rotate(360deg)}}

@media (max-width:520px){
    .auth-pop-x{top:-10px;left:-10px}
    .auth-pop-card{padding:22px 18px 14px}
}