/* ============================================================
   EXTRACTED FROM: login.aspx
   ============================================================ */

@font-face {
    font-family: 'Parastoo';
    src: url('Font/Parastoo.eot');
    src: url('Font/Parastoo.eot?#iefix') format('embedded-opentype'),
         url('Font/Parastoo.woff') format('woff'),
         url('Font/Parastoo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
    font-family: 'Parastoo', Tahoma, Arial, sans-serif;
}



*{box-sizing:border-box}

/* ============================================================
   MASTERPAGE COMPATIBILITY
   login.aspx is now rendered inside MasterPage.
   Do NOT make body a flex container; MasterPage owns the
   header, content area and footer.
   ============================================================ */
html{
    margin:0;
    width:100%;
    min-height:100%;
}

body{
    margin:0;
    width:100%;
    min-height:100vh;
    height:auto;
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    background:#f4f6fb;
    color:#202124;
}

/* Keep the login page content centered inside MasterPage */
.aivn-master-content{
    width:100%;
    min-height:0;
    background:
        radial-gradient(circle at 15% 15%, rgba(23,105,255,.14), transparent 32%),
        radial-gradient(circle at 85% 85%, rgba(120,70,255,.12), transparent 32%),
        #f4f6fb;
}

/* Login card - centered inside the MasterPage content area */
.login-shell{
    width:980px;
    max-width:calc(100% - 32px);
    min-height:570px;
    margin:45px auto 60px !important;
    padding:0;
    position:relative;

    /*
       MasterPage's ContentPlaceHolder is currently rendered inside
       a narrower/right-aligned content wrapper. This shift moves the
       whole login card by half of the difference between the viewport
       width and that wrapper width, making the card truly centered
       in the browser viewport.
    */
    left:calc((100vw - 100%) / 2) !important;
    right:auto !important;
    transform:none !important;

    display:grid;
    grid-template-columns:1.05fr .95fr;

    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.8);
    border-radius:28px;
    box-shadow:0 30px 80px rgba(20,35,70,.14);
    overflow:hidden;
    backdrop-filter:blur(18px);
}

.brand{
    padding:52px;
    background:linear-gradient(150deg,#1769ff 0%,#0d57d8 55%,#174bc1 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}

.brand:before,.brand:after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
}

.brand:before{
    width:340px;height:340px;
    left:-150px;bottom:-160px;
}

.brand:after{
    width:220px;height:220px;
    right:-110px;top:-110px;
}

.brand-top{position:relative;z-index:1}
.apple-circle{
    width:72px;height:72px;border-radius:22px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:28px;
}
.apple-circle svg{width:38px;height:38px;fill:#fff}
.brand h1{
    font-size:38px;
    line-height:1.35;
    margin:0 0 14px;
    font-weight:800;
}
.brand p{
    margin:0;
    font-size:15px;
    line-height:2.1;
    color:rgba(255,255,255,.84);
}
.brand-bottom{
    position:relative;z-index:1;
    font-size:12px;color:rgba(255,255,255,.7);
}

.form-side{
    padding:52px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.form-wrap{width:100%;max-width:390px}
.form-title{font-size:29px;font-weight:800;margin:0 0 8px}
.form-subtitle{font-size:13px;color:#888;margin-bottom:30px}

.field{margin-bottom:18px}
.field label{
    display:block;
    font-size:12px;
    color:#666;
    margin-bottom:8px;
}
.field input{
    width:100%;
    height:52px;
    border:1px solid #e4e7ed;
    border-radius:14px;
    outline:none;
    padding:0 16px;
    font-family:inherit;
    font-size:14px;
    background:#fbfcfe;
    transition:.18s;
}
.field input:focus{
    border-color:#1769ff;
    box-shadow:0 0 0 4px rgba(23,105,255,.10);
    background:#fff;
}


/* =========================
   SIMPLE NUMERIC CAPTCHA
   ========================= */
.captcha-row{
    display:grid;
    grid-template-columns:1fr 132px;
    gap:10px;
    align-items:end;
}

.captcha-box{
    height:52px;
    border:1px solid #e4e7ed;
    border-radius:14px;
    background:#f8faff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    direction:ltr;
}

.captcha-code{
    min-width:82px;
    text-align:center;
    font-family:Tahoma,Arial,sans-serif;
    font-size:21px;
    font-weight:800;
    letter-spacing:5px;
    color:#1769ff;
    user-select:none;
}

.captcha-refresh{
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    background:#eaf1ff;
    color:#1769ff;
    font-family:Tahoma,Arial,sans-serif;
    font-size:20px;
    line-height:34px;
    cursor:pointer;
    transition:.18s;
}

.captcha-refresh:hover{
    background:#1769ff;
    color:#fff;
    transform:rotate(90deg);
}

.captcha-input{
    direction:ltr;
    text-align:center;
    letter-spacing:3px;
}

@media(max-width:480px){
    .captcha-row{
        grid-template-columns:1fr 118px;
    }
    .captcha-code{
        font-size:19px;
        letter-spacing:4px;
    }
}

.login-btn{
    width:100%;
    height:54px;
    border:0;
    border-radius:15px;
    background:#1769ff;
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(23,105,255,.24);
    transition:.18s;
}
.login-btn:hover{transform:translateY(-1px);background:#0f5be4}
.login-btn:active{transform:translateY(0)}

.error{
    margin-bottom:15px;
    background:#fff1f1;
    border:1px solid #ffcfcf;
    color:#c62828;
    border-radius:12px;
    padding:12px 14px;
    font-size:12px;
    line-height:1.8;
}

.note{
    margin-top:16px;
    font-size:11px;
    color:#999;
    line-height:1.8;
    text-align:center;
}

@media(max-width:800px){
    body{overflow:auto;padding:16px}
    .login-shell{
        grid-template-columns:1fr;
        min-height:auto;
    }
    .brand{padding:34px;min-height:300px}
    .brand h1{font-size:31px}
    .form-side{padding:34px}
}

@media(max-width:480px){
    .brand{padding:26px;min-height:260px}
    .form-side{padding:26px}
}

    /* ================= PASSWORD RECOVERY ================= */
    .forgot-link{
        display:block;
        margin-top:14px;
        text-align:center;
        color:#1769ff;
        text-decoration:none;
        font-size:13px;
        cursor:pointer;
    }
    .forgot-link:hover{text-decoration:underline}

    .recovery-overlay{
        position:fixed;
        inset:0;
        z-index:9999;
        display:none;
        align-items:center;
        justify-content:center;
        padding:18px;
        background:rgba(10,20,40,.48);
        backdrop-filter:blur(7px);
        -webkit-backdrop-filter:blur(7px);
    }
    .recovery-overlay.show{display:flex}

    .recovery-modal{
        width:min(460px,100%);
        background:#fff;
        border-radius:24px;
        box-shadow:0 30px 90px rgba(0,0,0,.22);
        overflow:hidden;
    }

    .recovery-head{
        padding:24px;
        display:flex;
        align-items:center;
        gap:14px;
        border-bottom:1px solid #eef1f5;
    }

    .recovery-icon{
        width:48px;
        height:48px;
        border-radius:15px;
        background:#eaf1ff;
        color:#1769ff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:24px;
        flex:none;
    }

    .recovery-head h3{margin:0;font-size:19px}
    .recovery-head p{margin:4px 0 0;color:#888;font-size:12px}
    .recovery-close{
        margin-right:auto;
        width:36px;
        height:36px;
        border:0;
        border-radius:10px;
        background:#f4f6f9;
        color:#666;
        font-size:21px;
        cursor:pointer;
    }

    .recovery-body{padding:22px 24px 24px}
    .recovery-step{display:none}
    .recovery-step.active{display:block}

    .recovery-label{
        display:block;
        margin-bottom:8px;
        color:#555;
        font-size:12px;
    }

    .recovery-input{
        width:100%;
        height:50px;
        border:1px solid #e1e5eb;
        border-radius:13px;
        outline:none;
        padding:0 14px;
        background:#fbfcfe;
        font-family:inherit;
        font-size:14px;
    }

    .recovery-input:focus{
        border-color:#1769ff;
        box-shadow:0 0 0 4px rgba(23,105,255,.09);
        background:#fff;
    }

    .recovery-btn{
        width:100%;
        height:50px;
        margin-top:14px;
        border:0;
        border-radius:13px;
        background:#1769ff;
        color:#fff;
        font-family:inherit;
        font-size:14px;
        font-weight:700;
        cursor:pointer;
    }

    .recovery-btn:disabled{
        opacity:.6;
        cursor:not-allowed;
    }

    .recovery-secondary{
        background:#f1f4f8;
        color:#333;
    }

    .recovery-message{
        display:none;
        margin-bottom:14px;
        border-radius:11px;
        padding:10px 12px;
        font-size:12px;
        line-height:1.8;
    }

    .recovery-message.error{
        display:block;
        color:#b42318;
        background:#fff1f1;
        border:1px solid #ffd1d1;
    }

    .recovery-message.success{
        display:block;
        color:#16704a;
        background:#effbf5;
        border:1px solid #c8efdc;
    }

    .recovery-captcha{
        display:grid;
        grid-template-columns:1fr 125px;
        gap:9px;
        align-items:end;
        margin-top:15px;
    }

    .recovery-captcha-box{
        height:50px;
        border:1px solid #e1e5eb;
        border-radius:13px;
        background:#f8faff;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        direction:ltr;
    }

    .recovery-captcha-code{
        color:#1769ff;
        font-family:Tahoma,Arial,sans-serif;
        font-size:19px;
        font-weight:800;
        letter-spacing:4px;
    }

    .recovery-refresh{
        width:31px;
        height:31px;
        border:0;
        border-radius:9px;
        background:#eaf1ff;
        color:#1769ff;
        cursor:pointer;
        font-size:19px;
    }

    .recovery-code-input{
        direction:ltr;
        text-align:center;
        letter-spacing:5px;
        font-family:Tahoma,Arial,sans-serif;
    }

    .recovery-hint{
        margin-top:9px;
        color:#8a8f98;
        font-size:11px;
        line-height:1.8;
    }

    .recovery-phone{
        direction:ltr;
        text-align:center;
        font-family:Tahoma,Arial,sans-serif;
        font-weight:700;
    }

    .recovery-countdown{
        display:block;
        margin-top:8px;
        text-align:center;
        color:#8a8f98;
        font-size:11px;
    }

    @media(max-width:480px){
        .recovery-modal{border-radius:20px}
        .recovery-head,.recovery-body{
            padding-left:18px;
            padding-right:18px;
        }
        .recovery-captcha{grid-template-columns:1fr 112px}
    }

.aivn-login-overlay{
        position:fixed; inset:0; z-index:99999;
        display:none; align-items:center; justify-content:center;
        padding:20px; background:rgba(15,23,42,.52);
        backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    }
    .aivn-login-overlay.show{display:flex;}
    .aivn-login-modal{
        width:min(520px,100%); background:#fff; border-radius:22px;
        box-shadow:0 25px 70px rgba(0,0,0,.22); overflow:hidden;
        direction:rtl; animation:aivnLoginPop .22s ease-out;
    }
    @keyframes aivnLoginPop{
        from{opacity:0;transform:translateY(12px) scale(.97)}
        to{opacity:1;transform:translateY(0) scale(1)}
    }
    .aivn-login-head{padding:24px 24px 16px;text-align:center;}
    .aivn-login-success-icon{
        width:62px;height:62px;margin:0 auto 12px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        background:#eafaf1;color:#16a34a;font-size:31px;
    }
    .aivn-login-head h3{margin:0 0 7px;font-size:20px;color:#172033;}
    .aivn-login-head p{margin:0;color:#697386;font-size:13px;line-height:1.9;}
    .aivn-login-options{
        display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 22px 22px;
    }
    .aivn-login-option{
        border:1px solid #e6ebf2;background:#fff;border-radius:16px;
        padding:19px 13px;text-decoration:none!important;color:#172033!important;
        text-align:center;transition:.18s ease;cursor:pointer;
    }
    .aivn-login-option:hover{
        transform:translateY(-3px);border-color:#1769ff;
        box-shadow:0 10px 25px rgba(23,105,255,.12);
    }
    .aivn-login-option .ico{
        width:48px;height:48px;margin:0 auto 10px;border-radius:14px;
        display:flex;align-items:center;justify-content:center;
        font-size:24px;background:#eef5ff;color:#1769ff;
    }
    .aivn-login-option.orders .ico{background:#fff4e8;color:#e98218;}
    .aivn-login-option strong{display:block;font-size:14px;margin-bottom:5px;}
    .aivn-login-option span{display:block;color:#7a8494;font-size:11px;line-height:1.8;}
    .aivn-login-close{
        display:block;margin:0 auto 20px;border:0;background:transparent;
        color:#8a93a1;font-size:12px;cursor:pointer;
    }
    @media(max-width:560px){.aivn-login-options{grid-template-columns:1fr;}}
    .aivn-main-site-link{
        display:block;
        width:fit-content;
        margin:0 auto 12px;
        padding:7px 14px;
        border:1px solid #e6ebf2;
        border-radius:9px;
        background:#f8fafc;
        color:#1769ff!important;
        text-decoration:none!important;
        font-size:11px;
        line-height:1.5;
        transition:.18s ease;
    }
    .aivn-main-site-link:hover{
        border-color:#1769ff;
        background:#eef5ff;
    }





/* ============================================================
   FINAL LOGIN CENTERING
   Do not change the MasterPage or login.aspx markup.
   The card is centered against the browser viewport even when
   ContentPlaceHolder1 is hosted by a narrower RTL wrapper.
   ============================================================ */

.login-shell{
    margin-left:auto !important;
    margin-right:auto !important;
    left:calc((100vw - 100%) / 2) !important;
    right:auto !important;
    transform:none !important;
}

@media(max-width:800px){
    .login-shell{
        width:calc(100% - 32px) !important;
        max-width:calc(100vw - 32px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        left:calc((100vw - 100%) / 2) !important;
        right:auto !important;
    }

    body{
        padding-left:0 !important;
        padding-right:0 !important;
    }
}