/* فونت‌ها */
@font-face{
    font-family:vazir;
    font-style:normal;
    font-weight:900;
    src:url('../font/Vazir-Regular.woff2') format('woff2'),url('../font/Vazir-Regular.woff') format('woff')
}

@font-face{
    font-family:shabnam;
    font-style:normal;
    font-weight:900;
    src:url('../font/Shabnam-FD.woff2') format('woff2'),url('../font/Shabnam-FD.woff') format('woff')
}

/* اصلاحات کلی */
input#li-phone{
    border-radius:20px!important
}

.inp.password input{
    direction:ltr;
    text-align:left
}

/* هدر مودال */
.modal .modal-head{
    padding:5px 0 25px;
    font-size:26px;
    font-weight:900;
    text-align:center;
    margin-bottom:10px;
    color:#1089d3;
    animation:fadeInDown .6s ease-out;
}

/* ================== دکمه‌ها ================== */

.lc-main-continer .lc-form-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:52px;
    margin-top:18px;
    margin-bottom:10px;
    padding:8px 22px;
    border:none;
    border-radius:20px;
    cursor:pointer;
    background:linear-gradient(45deg,#1089d3 0%,#12b1d1 100%);
    box-shadow:rgba(133,189,215,.6) 0px 18px 10px -14px;
    transition:all .25s ease-in-out;
    position:relative;
    overflow:hidden;
}

.lc-main-continer .lc-form-btn span{
    position:relative;
    font-size:16px;
    line-height:18px;
    font-weight:900;
    color:#fff;
    z-index:1;
}

.lc-main-continer .lc-form-btn svg{
    position:relative;
    margin-left:10px;
    fill:none;
    stroke:#fff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .3s ease;
}

.lc-main-continer .lc-form-btn:hover{
    transform:scale(1.02);
    box-shadow:rgba(133,189,215,.85) 0px 23px 12px -18px;
}

.lc-main-continer .lc-form-btn:active{
    transform:scale(.97);
    box-shadow:rgba(133,189,215,.85) 0px 12px 10px -10px;
}

.lc-main-continer .lc-form-btn:hover svg{
    transform:translateX(6px);
}

.lc-main-continer .pass-login,
a.g-login-a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:52px;
    margin-top:12px;
    margin-bottom:10px;
    padding:8px 22px;
    cursor:pointer;
    border:2px solid transparent;
    border-radius:20px;
    background:#fff;
    box-shadow:#cff0ff 0px 10px 10px -6px;
    transition:all .25s ease-in-out;
    position:relative;
    overflow:hidden;
}

.lc-main-continer .pass-login:hover,
a.g-login-a:hover{
    transform:scale(1.02);
    border-color:#12b1d1;
    box-shadow:rgba(133,189,215,.7) 0px 18px 12px -14px;
}

.lc-main-continer .pass-login:active,
a.g-login-a:active{
    transform:scale(.97);
}

.lc-main-continer .pass-login span{
    position:relative;
    font-size:15px;
    font-weight:900;
    color:#1089d3;
    z-index:1;
}

.lc-main-continer .pass-login svg{
    position:relative;
    margin-left:10px;
    fill:none;
    stroke:#1089d3;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .3s ease;
}

.lc-main-continer .pass-login:hover svg,
a.g-login-a:hover img{
    transform:translateX(6px);
}

a.g-login-a img{
    margin-left:8px;
    transition:transform .3s ease;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));
}

/* ================== اینپوت‌ها با لیبل شناور ================== */

.lc-main-continer .inp{
    border:none;
    display:inline-block;
    position:relative;
    width:100%;
    border-radius:20px;
    overflow:visible;
    margin-bottom:22px;
}

.inp .label{
    position:absolute;
    top:20px;
    right:20px;
    font-size:15px;
    color:#aaa;
    font-weight:500;
    transform-origin:0 0;
    transform:translate3d(0,0,0);
    transition:all .3s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
    max-width:100%;
    z-index:2;
}

.inp .focus-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,rgba(18,177,209,.04) 0%,rgba(16,137,211,.04) 100%);
    transform:scaleX(0);
    transform-origin:left;
    border-radius:20px;
    transition:transform .4s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
}

.inp input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:20px!important;
    width:100%;
    font-family:inherit;
    padding:20px 20px 6px!important;
    height:58px!important;
    font-size:16px!important;
    font-weight:400;
    background:#fff;
    color:#222;
    border:2px solid transparent!important;
    box-shadow:#cff0ff 0px 10px 10px -5px;
    transition:all .3s cubic-bezier(.4,0,.2,1);
}

.inp input:hover{
    border-color:rgba(18,177,209,.25)!important;
}

.inp input:focus{
    outline:0;
    border-color:#12b1d1!important;
    box-shadow:rgba(133,189,215,.55) 0px 14px 14px -8px;
    transform:translateY(-1px);
}

.inp input:focus+.label,
.inp input:not(:placeholder-shown)+.label{
    transform:translate3d(-4px,-13px,0) scale(.78);
    transform-origin:right;
    color:#1089d3;
    font-weight:600;
}

.inp input:focus+.label+.focus-bg{
    transform:scaleX(1);
}

/* دکمه چشم پسورد */
.inp.password:focus-within #eye,
.inp.password:has(.label.actived) #eye{
    visibility:visible;
    opacity:1;
}

.inp.password #eye{
    visibility:hidden;
    opacity:0;
    position:absolute;
    top:32%;
    cursor:pointer;
    z-index:5;
    transition:all .3s ease;
}

.inp.password #eye:hover{
    transform:scale(1.12);
}

/* نوار قدرت پسورد */
.lc-main-continer .ni-showlength-num{
    height:5px;
    transition:all .3s ease;
    margin-top:4px;
    border-radius:20px;
    max-width:100%;
    background:linear-gradient(90deg,#ff6b6b 0%,#feca57 50%,#12b1d1 100%);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ================== ساختار مودال ================== */

.modal.lc-main-continer{
    background:linear-gradient(135deg,rgba(16,137,211,.35) 0%,rgba(0,0,0,.55) 100%);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    display:none;
}

.modal.lc-main-continer #li-close-a{
    position:absolute;
    top:14px;
    left:16px;
    margin-right:0;
    cursor:pointer;
    color:#ec5445;
    font-size:24px;
    line-height:1;
    z-index:10;
    transition:all .3s ease;
}

.modal.lc-main-continer #li-close-a:hover{
    transform:rotate(90deg) scale(1.15);
}

.lc-main-continer{
    direction:rtl;
    font-family:shabnam;
    height:100%;
    position:fixed;
    width:100%;
    display:flex;
    align-content:center;
    justify-content:center;
    right:0;
    top:0;
    z-index:1000;
    text-align:right;
    animation:fadeIn .3s ease-out;
}

.lc-main-continer *{
    margin:0;
    padding:0;
    font-size:1em;
    font-family:inherit;
    box-sizing:border-box;
}

.lc-main-continer:hover{
    color:unset;
}

/* ================== حالت لودینگ جدید و جذاب ================== */
.lc-main-continer .lc-form-btn.loading,
.lc-main-continer .pass-login.loading {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
    position: relative;
    pointer-events: none;
}

.lc-main-continer .lc-form-btn.loading span,
.lc-main-continer .lc-form-btn.loading svg,
.lc-main-continer .pass-login.loading span,
.lc-main-continer .pass-login.loading svg {
    visibility: hidden;
    opacity: 0;
}

/* ساخت اسپینر لودینگ مدرن با CSS */
.lc-main-continer .lc-form-btn.loading::after,
.lc-main-continer .pass-login.loading::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -11px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: otp-spin 0.8s linear infinite;
    visibility: visible;
    display: block;
}

/* اسپینر برای دکمه‌های سفید (مثل ورود با رمز) باید آبی باشد */
.lc-main-continer .pass-login.loading::after {
    border: 3px solid rgba(16, 137, 211, 0.2);
    border-top-color: #1089d3;
}

@keyframes otp-spin {
    to { transform: rotate(360deg); }
}
/* ============================================================== */

.lc-main-continer #li-edit-a{
    float:left;
}

.lc-main-continer .lc-bottom-btn{
    border:1px solid rgba(18,177,209,.35);
    border-radius:12px;
    background-color:#fff;
    color:#1089d3;
    font-size:12px;
    padding:6px 14px;
    line-height:22px;
    cursor:pointer;
    transition:all .25s ease;
    box-shadow:#cff0ff 0px 6px 8px -4px;
}

.lc-main-continer .lc-bottom-btn:hover{
    background:linear-gradient(45deg,#1089d3 0%,#12b1d1 100%);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:rgba(133,189,215,.7) 0px 10px 10px -6px;
}

.lc-main-continer input[type=number]{
    text-align:left;
    direction:ltr;
    -moz-appearance:textfield;
    letter-spacing:4px;
    font-weight:700;
}

.lc-main-continer .lc-second-col{
    width:55%;
    z-index:2;
}

.lc-main-continer .lc-one-col{
    width:45%;
    display:flex;
    align-items:center;
    overflow-y:auto;
}

.lc-main-continer .lc-back-btn{
    background-color:#fff;
    position:absolute;
    top:14px;
    right:14px;
    padding:10px;
    box-shadow:#cff0ff 0px 8px 10px -4px;
    border-radius:50%;
    transition:all .3s ease;
    z-index:10;
}

.lc-main-continer .lc-back-btn:hover{
    transform:translateX(4px) scale(1.08);
    box-shadow:rgba(133,189,215,.7) 0px 12px 12px -6px;
}

.lc-main-continer .lc-back-btn a{
    display:block;
    cursor:pointer;
}

.lc-main-continer input::-webkit-inner-spin-button,
.lc-main-continer input::-webkit-outer-spin-button{
    -webkit-appearance:none;
}

.lc-main-continer::-webkit-scrollbar{
    width:6px;
    background-color:rgba(0,0,0,.05);
}

.lc-main-continer::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#1089d3 0%,#12b1d1 100%);
    border-radius:10px;
}

/* ================== کارت اصلی فرم ================== */

.lc-main-continer .lc-box-continer{
    max-width:420px;
    width:420px;
    padding:35px 40px 30px;
    margin:auto;
    position:relative;
    background:linear-gradient(0deg,#fff 0%,#f4f7fb 100%);
    border:5px solid #fff;
    border-radius:40px;
    box-shadow:rgba(133,189,215,.88) 0px 30px 30px -20px;
    animation:floatIn .5s cubic-bezier(.4,0,.2,1);
}

/* ================== پیام‌ها ================== */

.lc-main-continer #li-massage>div{
    font-size:1em;
    color:#fff;
    font-family:vazir;
    text-align:center;
    padding:18px 28px;
    border-radius:16px;
    position:fixed;
    top:2%;
    right:2%;
    max-width:80%;
    box-shadow:0 10px 40px rgba(0,0,0,.2);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    z-index:1100;
}

.lc-main-continer #li-massage .lf-error-msg{
    visibility:hidden;
    opacity:0;
    background:linear-gradient(45deg,#ec5445 0%,#ee5a6f 100%);
    animation:5s afadein;
}

.lc-main-continer #li-massage .lf-succs-msg{
    visibility:hidden;
    opacity:0;
    background:linear-gradient(45deg,#1089d3 0%,#12b1d1 100%);
    animation:3s afadein;
}

/* تایمر و لینک‌ها */
.lc-main-continer div#otp-timer{
    font-family:vazir;
    color:#1089d3;
    font-weight:bold;
    font-size:18px;
}

.lc-main-continer a{
    text-decoration:none;
    transition:all .25s ease;
}

.lc-main-continer a:not(#li-edit-a,#li-back-a,#li-close-a,.lc-logo-a){
    border-bottom:2px solid rgba(18,177,209,.4);
    color:#1089d3;
    font-weight:600;
}

.lc-main-continer a:not(#li-edit-a,#li-back-a,#li-close-a,.lc-logo-a):hover{
    border-bottom-color:#12b1d1;
    color:#0d6faa;
}

.lc-main-continer span#resendtext{
    font-size:14px;
    font-family:vazir;
    color:#5e5e5e;
}

/* ================== انیمیشن‌ها ================== */

@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

@keyframes floatIn{
    from{
        opacity:0;
        transform:translateY(30px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes fadeInDown{
    from{
        opacity:0;
        transform:translateY(-16px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes afadein{
    0%{
        right:-50%;
        opacity:0;
        visibility:hidden;
        transform:translateX(80px);
    }
    10%,90%{
        right:2%;
        opacity:1;
        visibility:visible;
        transform:translateX(0);
    }
    100%{
        right:2%;
        opacity:0;
        visibility:hidden;
        transform:translateX(80px);
    }
}

/* ================== ریسپانسیو ================== */

/* تبلت و موبایل */
@media (max-width:900px){
    .lc-main-continer .lc-second-col{
        display:none;
    }

    .lc-main-continer .lc-one-col{
        width:100%;
        padding:12px;
    }

    .lc-main-continer .lc-box-continer{
        max-width:440px;
        width:100%;
        padding:30px 25px 25px;
        border-radius:32px;
    }
}

/* موبایل کوچک */
@media (max-width:480px){
    .lc-main-continer .lc-box-continer{
        padding:26px 18px 22px;
        border-radius:26px;
        border-width:4px;
    }

    .modal .modal-head{
        font-size:21px;
        padding:5px 0 18px;
    }

    .inp input{
        height:54px!important;
        font-size:15px!important;
    }

    .lc-main-continer .lc-form-btn,
    .lc-main-continer .pass-login,
    a.g-login-a{
        height:48px;
    }

    .lc-main-continer #li-massage>div{
        max-width:96%;
        right:2%;
        padding:14px 18px;
        font-size:14px;
    }
}

/* کاهش انیمیشن برای کاربرانی که ترجیح می‌دهند */
@media (prefers-reduced-motion:reduce){
    .lc-main-continer,
    .lc-main-continer *{
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
    }
}

/* ================== باکس‌های OTP (طراحی مینیمال، ساده و زیبا) ================== */

.lc-form .otp-instruction,
.lc-main-continer .otp-instruction {
    display: block;
    text-align: center;
    font-family: vazir, sans-serif;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.8;
}

.lc-form .otp-inputs-wrapper,
.lc-main-continer .otp-inputs-wrapper {
    display: flex;
    direction: ltr;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 28px;
    width: 100%;
}

.lc-form .otp-box,
.lc-main-continer .otp-box,
.lc-main-continer .otp-input-box {
    flex: 0 0 auto;
    width: 52px !important;
    height: 60px !important;
    text-align: center !important;
    font-family: vazir, shabnam, sans-serif !important; /* برای نمایش زیبای اعداد فارسی */
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: #f8fafc !important; /* پس‌زمینه خاکستری بسیار روشن و ملایم */
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important; /* گوشه‌های گرد و استاندارد */
    transition: all 0.2s ease-in-out !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* حذف فلش‌های مزاحم بالا/پایین در مرورگرها */
.lc-main-continer .otp-box::-webkit-inner-spin-button, 
.lc-main-continer .otp-box::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* حالت فوکوس (وقتی کاربر در حال تایپ است) - کادر آبی تمیز و ملایم */
.lc-form .otp-box:focus,
.lc-main-continer .otp-box:focus,
.lc-main-continer .otp-input-box:focus {
    border-color: #1089d3 !important;
    background: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(16, 137, 211, 0.12) !important;
}

/* حالت پر شده (عددی وارد شده است) */
.lc-form .otp-box.filled,
.lc-main-continer .otp-box.filled,
.lc-main-continer .otp-input-box.filled {
    border-color: #12b1d1 !important;
    background: #ffffff !important;
    color: #1089d3 !important;
}

/* حالت خطای کد اشتباه - قرمز مینیمال */
.lc-form .otp-inputs-wrapper.has-error .otp-box,
.lc-main-continer .otp-inputs-wrapper.has-error .otp-box,
.lc-main-continer .otp-inputs-wrapper.has-error .otp-input-box {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
    animation: simpleShake 0.3s ease-in-out;
}

@keyframes simpleShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ریسپانسیو برای موبایل‌های مختلف */
@media (max-width: 480px) {
    .lc-form .otp-inputs-wrapper,
    .lc-main-continer .otp-inputs-wrapper {
        gap: 8px;
    }
    .lc-form .otp-box,
    .lc-main-continer .otp-box,
    .lc-main-continer .otp-input-box {
        width: 46px !important;
        height: 54px !important;
        font-size: 22px !important;
        border-radius: 10px !important;
    }
}
/* ================== پیام زیر دکمه ================== */

.lc-main-continer .otp-message{
    display:none;
    margin-top:10px;
    padding:10px 14px;
    border-radius:12px;
    font-family:vazir;
    font-size:13px;
    line-height:22px;
    text-align:center;
    animation:fadeInDown .3s ease-out;
}

.lc-main-continer .otp-message.show{
    display:block;
}

.lc-main-continer .otp-message.error{
    background:rgba(236,84,69,.1);
    color:#ec5445;
    border:1px solid rgba(236,84,69,.3);
}

.lc-main-continer .otp-message.success{
    background:rgba(18,177,209,.1);
    color:#1089d3;
    border:1px solid rgba(18,177,209,.3);
}

/* ================== دکمه اصلاح شماره (مربع) ================== */

.lc-main-continer .otp-footer-actions{
    display:flex;
    justify-content:flex-start;
    margin-top:14px;
}

.lc-main-continer .otp-edit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:auto;
    min-height:40px;
    padding:0 14px;
    border-radius:14px;
    font-size:13px;
}

/* حالت آیکون‌تنها: کاملاً مربع */
.lc-main-continer .otp-edit-btn.icon-only{
    width:40px;
    padding:0;
    aspect-ratio:1/1;
    gap:0;
}

.lc-main-continer .otp-edit-btn svg{
    stroke:currentColor;
    fill:none;
    transition:transform .3s ease;
}

.lc-main-continer .otp-edit-btn:hover svg{
    transform:translateX(-4px);
}

/* ================== ریسپانسیو OTP ================== */

@media (max-width:480px){
    .lc-form .otp-inputs-wrapper,
    .lc-main-continer .otp-inputs-wrapper{
        gap:8px;
    }

    .lc-form .otp-box,
    .lc-main-continer .otp-box,
    .lc-main-continer .otp-input-box{
        width:52px !important;
        height:52px !important;
        font-size:21px!important;
        border-radius:14px !important;
    }
}

@media (max-width:360px){
    .lc-form .otp-box,
    .lc-main-continer .otp-box,
    .lc-main-continer .otp-input-box{
        width:46px !important;
        height:46px !important;
        font-size:19px!important;
    }
}