/* ============================================================
   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(19,48,94,.55), rgba(2,8,20,.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(212,61,94,.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,#132a4c 0%,#0b1d38 46%,#081830 100%);
    border:1px solid rgba(120,190,255,.28);
    box-shadow:
        0 8px 0 #040b16,
        0 30px 70px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 46px rgba(31,180,232,.14);
}
.auth-pop-card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
    background:linear-gradient(90deg,transparent,rgba(34,211,238,.85),rgba(47,107,255,.85),transparent);
}
.auth-pop-card::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:
        linear-gradient(rgba(120,180,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,180,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(31,180,232,.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:#9fe4ff;
    background:rgba(10,37,66,.7); border:1px solid rgba(63,169,232,.5);
    box-shadow:0 0 16px rgba(63,169,232,.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:#8fa5c4;margin:0}
.auth-pop-sub{font-size:12.5px;color:#8fa5c4}

/* 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 #040b16,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:#ffd9d9;
    background:linear-gradient(135deg,rgba(127,43,51,.92),rgba(87,27,34,.95));
    border:1px solid rgba(248,113,113,.4);
}
.auth-pop-msg.ok{
    display:block; color:#c9f6e6;
    background:linear-gradient(135deg,rgba(14,92,70,.92),rgba(10,68,52,.95));
    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:#7d97ba; 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:#22d3ee;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(5,14,28,.75); border:1px solid rgba(120,180,255,.2); border-radius:11px;
    transition:border .16s, box-shadow .16s;
}
.auth-pop-field:focus-within{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.13)}
.auth-pop-field > span{
    width:38px; text-align:center; font-size:14px; color:#5f7ea6; flex-shrink:0;
}
.auth-pop-field input{
    flex:1; background:none; border:0; outline:0; color:#eaf4ff; font-size:14px;
    padding:12px 8px 12px 0; min-width:0;
}
.auth-pop-field input::placeholder{color:#47638a}

/* Nova Eye Guard — password visibility toggle */
.auth-pop-eye{
    background:none; border:0; cursor:pointer; color:#5f7ea6; 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(34,211,238,.14),rgba(47,107,255,.18));
    border:1px solid rgba(34,211,238,.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:#22d3ee;border-color:rgba(34,211,238,.65);box-shadow:0 0 12px rgba(34,211,238,.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:#8fa5c4; 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(120,180,255,.35); border-radius:5px; background:rgba(5,14,28,.8);
    display:grid; place-items:center; transition:all .16s ease; flex-shrink:0;
}
.auth-pop-remember input:checked{
    background:linear-gradient(135deg,#19c4e8,#2f6bff); border-color:#22d3ee;
    box-shadow:0 0 10px rgba(34,211,238,.4);
}
.auth-pop-remember input:checked::after{
    content:"✓"; color:#04121f; font-size:11px; font-weight:900; line-height:1;
}
.auth-pop-remember:hover{color:#cfe6ff}

/* 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:#04121f;
    background:linear-gradient(135deg,#19c4e8,#2f6bff);
    box-shadow:0 4px 0 #0b4d6b,0 12px 26px rgba(31,180,232,.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 #0b4d6b,0 16px 32px rgba(31,180,232,.35)}
.auth-pop-btn:active{transform:translateY(0);box-shadow:0 2px 0 #0b4d6b}
.auth-pop-btn:disabled{opacity:.6;cursor:wait}

/* Terms line (signup) */
.auth-pop-terms{font-size:11.5px;color:#6f88ab;text-align:center;margin:10px 4px 0;line-height:1.55}
.auth-pop-terms a{color:#22d3ee;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(120,180,255,.12); font-size:12.5px; color:#8fa5c4;
}
.auth-pop-foot a{color:#22d3ee;font-weight:700;text-decoration:none}
.auth-pop-foot a:hover{text-decoration:underline}
.auth-pop-alt{text-align:center;font-size:12px;color:#6f88ab;margin-top:12px}
.auth-pop-alt a{color:#22d3ee;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(4,18,31,.4);border-top-color:#04121f;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}
}