/*
 * Dedicated styles for the /loginv2 page only.
 * Scoped under .login-v2-page so nothing here leaks into /login, /register,
 * the dashboard, or any other page.
 */
.login-v2-page,
.login-v2-page *{
    box-sizing:border-box;
}
.login-v2-page{
    min-height:100vh;
    min-height:100dvh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    padding:24px;
    font-family:'Segoe UI',Tahoma,Arial,sans-serif;
    background:
      radial-gradient(circle at 15% 20%,rgba(0,214,255,.35),transparent 34%),
      radial-gradient(circle at 85% 25%,rgba(39,93,255,.45),transparent 40%),
      radial-gradient(circle at 18% 90%,rgba(0,76,190,.45),transparent 40%),
      linear-gradient(135deg,#0e9eea 0%,#087ee8 45%,#0759df 100%);
}
/* position:fixed (not absolute): these decorative shapes are large and
 * deliberately positioned mostly off-screen, clipped by this page's own
 * overflow:hidden. .login-v2-page fills the viewport exactly (width:100%,
 * min-height:100vh), so fixed vs. absolute renders pixel-identical here —
 * but unlike absolute, a fixed-position element is excluded from its
 * ancestor's scrollable-overflow calculation entirely, which is the actual
 * root cause of document.documentElement/body.scrollWidth exceeding the
 * viewport on this page at every width (mobile AND desktop): overflow:hidden
 * stops it from ever being visibly/functionally scrollable, but an absolutely
 * positioned box's full extent — including the part sitting off-screen at a
 * negative inset — still counts toward scrollWidth regardless of clipping. */
.login-v2-page:before{
    content:"";position:fixed;width:850px;height:850px;top:-300px;
    border-radius:45%;background:rgba(255,255,255,.06);transform:rotate(12deg);
    inset-inline-end:-180px;
}
.login-v2-page:after{
    content:"";position:fixed;width:900px;height:450px;bottom:-220px;
    border-radius:50%;background:rgba(0,43,150,.22);transform:rotate(-15deg);
    inset-inline-start:-180px;
}

.login-v2-card{
    width:480px;
    max-width:100%;
    background:#fff;
    border-radius:30px;
    padding:30px 24px 24px;
    position:relative;
    z-index:2;
    box-shadow:0 25px 60px rgba(0,36,120,.20);
}

.login-v2-logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    color:#0759df;
}
.login-v2-logo img{
    max-height:32px;
    width:auto;
}

.login-v2-card h1{
    color:#464c5a;
    font-size:38px;
    line-height:1.3;
    font-weight:800;
    margin-bottom:26px;
}

.login-v2-alert{
    background:#fff3cd;
    border:1px solid #ffe69c;
    color:#664d03;
    border-radius:14px;
    padding:12px 16px;
    font-size:14px;
    margin-bottom:20px;
}

.login-v2-field{
    margin-bottom:22px;
}
.login-v2-field label{
    display:block;
    font-size:15px;
    font-weight:700;
    color:#4b4f59;
    margin-bottom:8px;
}
.login-v2-input-wrapper{
    position:relative;
}
.login-v2-input-wrapper input{
    width:100%;
    height:48px;
    border:1px solid #c9d4e6;
    border-radius:28px;
    background:#fff;
    color:#4b5563;
    font-size:16px;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.login-v2-input-wrapper input:focus{
    border-color:#1764e8;
    box-shadow:0 0 0 3px rgba(23,100,232,.10);
}
.login-v2-input-wrapper input::placeholder{
    color:#8a94a6;
}
/* This page is Arabic/RTL-only: the START of an RTL input is its RIGHT
   edge, so the decorative icon (envelope / lock) sits there — physically
   right, never logical, so it can never flip. */
#loginv2-email{
    padding-right:48px;
    padding-left:20px;
}
/* Password needs clearance on both physical edges: the lock on the right
   (start) and the eye toggle on the left (end). */
#loginv2-password{
    padding-right:48px;
    padding-left:45px;
}
.login-v2-input-icon{
    position:absolute;
    right:17px;
    left:auto;
    top:50%;
    transform:translateY(-50%);
    color:#52627a;
    font-size:16px;
    pointer-events:none;
}
/* Password visibility toggle — fixed physical left edge (the END of
   this RTL page's inputs). */
.login-v2-password-toggle{
    position:absolute;
    left:11px;
    right:auto;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:#8a97ad;
    cursor:pointer;
    font-size:16px;
    padding:4px 6px;
    line-height:1;
}
.login-v2-password-toggle:hover{
    color:#52627a;
}

.login-v2-error{
    color:#dc3545;
    font-size:13px;
    font-weight:600;
    margin-top:6px;
    margin-bottom:0;
}

.login-v2-remember{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    font-size:14px;
    font-weight:600;
    color:#4b4f59;
}
.login-v2-remember input{
    width:16px;
    height:16px;
    accent-color:#0860ff;
}

.login-v2-forgot{
    margin-top:-8px;
    margin-bottom:28px;
    text-align:end;
}
.login-v2-forgot a{
    color:#465061;
    font-size:14px;
    text-decoration:underline;
    font-weight:600;
}

.login-v2-btn{
    width:100%;
    height:48px;
    border:0;
    border-radius:28px;
    background:#0860ff;
    color:#fff;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    transition:.2s;
}
.login-v2-btn:hover{
    background:#0758ed;
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(8,96,255,.25);
}
.login-v2-btn i{
    font-size:15px;
}

.login-v2-register{
    text-align:center;
    margin-top:25px;
    color:#515866;
    font-size:15px;
    font-weight:600;
}
.login-v2-register a{
    color:#0759df;
    font-weight:800;
    text-decoration:underline;
}

@media (max-width:600px){
    .login-v2-page{padding:20px;}
    .login-v2-card{width:100%;max-width:480px;border-radius:25px;padding:25px 20px 22px;}
    .login-v2-card h1{font-size:32px;margin-bottom:22px;}
    .login-v2-field{margin-bottom:20px;}
    .login-v2-input-wrapper input{font-size:14px;}
}
@media (max-width:380px){
    .login-v2-page{padding:12px;}
    .login-v2-card{padding:22px 16px;}
    .login-v2-card h1{font-size:28px;}
}