/* ======================================================
   CRMAAAAC MODERN LOGIN — 2026
   ====================================================== */

:root{
    --crm-red:#ef2029;
    --crm-red-dark:#8f1118;
    --crm-red-soft:rgba(239,32,41,.16);
    --crm-bg:#070707;
    --crm-text:#111827;
    --crm-muted:#64748b;
}

/* ---------- Background ---------- */

html,
body{
    min-height:100%;
}

body{
    position:relative;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 18% 10%,rgba(239,32,41,.20),transparent 30%),
        radial-gradient(circle at 84% 82%,rgba(153,27,27,.16),transparent 32%),
        radial-gradient(circle at 50% 45%,rgba(255,255,255,.025),transparent 42%),
        linear-gradient(145deg,#030303 0%,#130606 46%,#050505 100%)!important;
    background-attachment:fixed!important;
}

/* شبکه بسیار ظریف */

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.52;
    background-image:
        linear-gradient(rgba(239,68,68,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(239,68,68,.025) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
}

/* نور متحرک پس‌زمینه */

body:after{
    content:"";
    position:fixed;
    width:460px;
    height:460px;
    top:-180px;
    right:-150px;
    pointer-events:none;
    z-index:0;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(239,32,41,.18),
        rgba(239,32,41,.05) 42%,
        transparent 70%
    );
    filter:blur(8px);
    animation:crmAmbientGlow 9s ease-in-out infinite alternate;
}

@keyframes crmAmbientGlow{
    0%{
        transform:translate3d(0,0,0) scale(.92);
        opacity:.55;
    }
    100%{
        transform:translate3d(-70px,75px,0) scale(1.16);
        opacity:.95;
    }
}

/* ---------- Main Login Card ---------- */

.crm-login-card,
.logincontainer,
.loginbox{
    position:relative!important;
    z-index:2!important;
    overflow:visible!important;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.985),
            rgba(255,250,250,.965)
        )!important;

    border:1px solid rgba(255,255,255,.70)!important;
    border-radius:30px!important;

    box-shadow:
        0 32px 90px rgba(0,0,0,.52),
        0 0 0 1px rgba(239,32,41,.08),
        inset 0 1px 0 rgba(255,255,255,.95)!important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    animation:crmCardEntrance .65s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes crmCardEntrance{
    from{
        opacity:0;
        transform:translateY(25px) scale(.975);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* نور باریک بالای کادر */

.crm-login-card:before,
.logincontainer:before,
.loginbox:before{
    content:"";
    position:absolute;
    top:-1px;
    right:15%;
    left:15%;
    height:2px;
    border-radius:99px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(239,32,41,.85),
        rgba(255,255,255,.95),
        rgba(239,32,41,.85),
        transparent
    );
    box-shadow:0 0 22px rgba(239,32,41,.55);
}

/* ---------- Logo Area ---------- */

.crm-custom-brand{
    position:relative;
    width:100%;
    margin:0 auto 23px;
    padding:7px 0 21px;
    text-align:center;
    border-bottom:1px solid rgba(148,163,184,.16);
    isolation:isolate;
}

/* هاله نور پشت لوگو */

.crm-custom-brand:before{
    content:"";
    position:absolute;
    z-index:-2;
    width:270px;
    height:270px;
    top:47%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(239,32,41,.22) 0%,
            rgba(239,32,41,.08) 40%,
            transparent 70%
        );
    filter:blur(9px);
    animation:crmLogoGlow 3.8s ease-in-out infinite;
}

/* حلقه متحرک دور لوگو */

.crm-custom-brand:after{
    content:"";
    position:absolute;
    z-index:-1;
    width:210px;
    height:210px;
    top:47%;
    left:50%;
    border-radius:50%;
    border:
        1px solid rgba(239,32,41,.20);
    border-top-color:rgba(239,32,41,.72);
    border-right-color:rgba(255,255,255,.62);
    transform:translate(-50%,-50%);
    animation:crmOrbit 14s linear infinite;
    box-shadow:
        0 0 24px rgba(239,32,41,.10),
        inset 0 0 20px rgba(239,32,41,.05);
}

@keyframes crmOrbit{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes crmLogoGlow{
    0%,100%{
        opacity:.58;
        transform:translate(-50%,-50%) scale(.92);
    }
    50%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.08);
    }
}

/* خود لوگو؛ بدون حالت کادری */

.crm-custom-brand-logo{
    position:relative;
    z-index:2;
    display:block;

    width:min(100%,360px);
    height:205px;
    margin:0 auto;

    object-fit:contain;
    object-position:center;

    border:0!important;
    border-radius:0!important;
    background:transparent!important;

    /*
      قسمت مشکی تصویر با پس‌زمینه تیره صفحه ترکیب می‌شود
      و حس تصویر مستطیلی از بین می‌رود.
    */
    mix-blend-mode:screen;

    filter:
        contrast(1.10)
        saturate(1.10)
        drop-shadow(0 12px 22px rgba(0,0,0,.28))
        drop-shadow(0 0 14px rgba(239,32,41,.18));

    animation:crmLogoFloat 4.8s ease-in-out infinite;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        filter .35s ease;
}

.crm-custom-brand-logo:hover{
    transform:translateY(-4px) scale(1.025);
    filter:
        contrast(1.14)
        saturate(1.16)
        drop-shadow(0 17px 28px rgba(0,0,0,.30))
        drop-shadow(0 0 22px rgba(239,32,41,.30));
}

@keyframes crmLogoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-7px);
    }
}

/* مخفی کردن لوگوی قدیمی یا تکراری */

.crm-login-logo{
    display:none!important;
}

/* ---------- Titles ---------- */

.crm-custom-brand-title{
    position:relative;
    z-index:3;
    margin:10px 0 4px;
    color:#111827;
    font-size:22px;
    line-height:1.7;
    font-weight:900;
    letter-spacing:-.55px;
}

.crm-custom-brand-subtitle{
    position:relative;
    z-index:3;
    margin:0;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    line-height:1.9;
}

/* ---------- Labels ---------- */

.crm-login-card label,
.logincontainer label,
.loginbox label{
    display:block;
    margin-bottom:8px!important;
    color:#1e293b!important;
    font-size:13px!important;
    font-weight:850!important;
}

/* ---------- Inputs ---------- */

.crm-login-card input[type="text"],
.crm-login-card input[type="email"],
.crm-login-card input[type="password"],
.logincontainer input[type="text"],
.logincontainer input[type="email"],
.logincontainer input[type="password"],
.loginbox input[type="text"],
.loginbox input[type="email"],
.loginbox input[type="password"]{
    width:100%!important;
    height:55px!important;

    padding:0 18px!important;
    margin:0!important;

    color:#111827!important;
    caret-color:var(--crm-red);

    font-size:15px!important;
    font-weight:700!important;

    border:1px solid #dce3ec!important;
    border-radius:17px!important;

    background:
        linear-gradient(180deg,#ffffff,#fafcfe)!important;

    outline:none!important;

    box-shadow:
        0 5px 15px rgba(15,23,42,.035),
        inset 0 1px 2px rgba(15,23,42,.025)!important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background .22s ease!important;
}

.crm-login-card input:hover,
.logincontainer input:hover,
.loginbox input:hover{
    border-color:#cbd5e1!important;
    background:#fff!important;
}

.crm-login-card input:focus,
.logincontainer input:focus,
.loginbox input:focus{
    border-color:rgba(220,38,38,.82)!important;
    background:#fff!important;

    transform:translateY(-1px);

    box-shadow:
        0 0 0 4px rgba(220,38,38,.105),
        0 10px 24px rgba(15,23,42,.07)!important;
}

.crm-login-card input::placeholder,
.logincontainer input::placeholder,
.loginbox input::placeholder{
    color:#9aa5b4!important;
    font-weight:600!important;
}

/* فاصله استاندارد فرم */

.crm-login-card .form-group,
.logincontainer .form-group,
.loginbox .form-group{
    margin-bottom:16px!important;
}

/* ---------- Remember Me ---------- */

.crm-login-card input[type="checkbox"],
.logincontainer input[type="checkbox"],
.loginbox input[type="checkbox"]{
    width:17px!important;
    height:17px!important;
    min-height:17px!important;
    accent-color:var(--crm-red);
    cursor:pointer;
}

/* ---------- Login Button ---------- */

.crm-login-card button[type="submit"],
.crm-login-card input[type="submit"],
.crm-login-card .btn-primary,
.logincontainer button[type="submit"],
.logincontainer input[type="submit"],
.logincontainer .btn-primary,
.loginbox button[type="submit"],
.loginbox input[type="submit"],
.loginbox .btn-primary{
    position:relative!important;
    overflow:hidden!important;

    width:100%!important;
    min-height:55px!important;

    margin-top:4px!important;

    border:0!important;
    border-radius:17px!important;

    color:#fff!important;
    font-size:15px!important;
    font-weight:900!important;

    background:
        linear-gradient(
            120deg,
            #8f1118 0%,
            #d91f28 46%,
            #f0444c 100%
        )!important;

    box-shadow:
        0 15px 32px rgba(190,24,33,.30),
        inset 0 1px 0 rgba(255,255,255,.26)!important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease!important;
}

.crm-login-card button[type="submit"]:hover,
.crm-login-card input[type="submit"]:hover,
.crm-login-card .btn-primary:hover,
.logincontainer button[type="submit"]:hover,
.logincontainer input[type="submit"]:hover,
.logincontainer .btn-primary:hover,
.loginbox button[type="submit"]:hover,
.loginbox input[type="submit"]:hover,
.loginbox .btn-primary:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);

    box-shadow:
        0 20px 38px rgba(190,24,33,.38),
        inset 0 1px 0 rgba(255,255,255,.30)!important;
}

.crm-login-card button[type="submit"]:active,
.logincontainer button[type="submit"]:active,
.loginbox button[type="submit"]:active{
    transform:translateY(0) scale(.99);
}

/* ---------- Links ---------- */

.crm-login-card a,
.logincontainer a,
.loginbox a{
    color:#b91c1c!important;
    font-weight:750!important;
    text-decoration:none!important;
    transition:color .2s ease,opacity .2s ease;
}

.crm-login-card a:hover,
.logincontainer a:hover,
.loginbox a:hover{
    color:#7f1d1d!important;
}

/* ---------- Mobile ---------- */

@media(max-width:768px){

    body{
        background:
            radial-gradient(circle at 50% 5%,rgba(239,32,41,.19),transparent 34%),
            linear-gradient(160deg,#050505,#140606,#050505)!important;
    }

    body:after{
        width:320px;
        height:320px;
        top:-120px;
        right:-120px;
    }

    .crm-login-card,
    .logincontainer,
    .loginbox{
        width:94%!important;
        max-width:440px!important;

        margin:16px auto!important;
        padding:22px 18px 24px!important;

        border-radius:25px!important;

        box-shadow:
            0 23px 55px rgba(0,0,0,.48),
            0 0 0 1px rgba(239,32,41,.07)!important;
    }

    .crm-custom-brand{
        margin-bottom:18px;
        padding:0 0 17px;
    }

    .crm-custom-brand-logo{
        width:min(100%,305px);
        height:170px;
    }

    .crm-custom-brand:before{
        width:220px;
        height:220px;
    }

    .crm-custom-brand:after{
        width:172px;
        height:172px;
    }

    .crm-custom-brand-title{
        margin-top:7px;
        font-size:20px;
    }

    .crm-custom-brand-subtitle{
        padding:0 8px;
        font-size:12px;
    }

    .crm-login-card input[type="text"],
    .crm-login-card input[type="email"],
    .crm-login-card input[type="password"],
    .logincontainer input[type="text"],
    .logincontainer input[type="email"],
    .logincontainer input[type="password"],
    .loginbox input[type="text"],
    .loginbox input[type="email"],
    .loginbox input[type="password"]{
        height:52px!important;
        padding:0 15px!important;
        font-size:14px!important;
        border-radius:15px!important;
    }

    .crm-login-card button[type="submit"],
    .crm-login-card input[type="submit"],
    .crm-login-card .btn-primary,
    .logincontainer button[type="submit"],
    .logincontainer input[type="submit"],
    .logincontainer .btn-primary,
    .loginbox button[type="submit"],
    .loginbox input[type="submit"],
    .loginbox .btn-primary{
        min-height:52px!important;
        border-radius:15px!important;
        font-size:14px!important;
    }
}

@media(max-width:390px){

    .crm-login-card,
    .logincontainer,
    .loginbox{
        width:95%!important;
        padding:19px 15px 22px!important;
        border-radius:22px!important;
    }

    .crm-custom-brand-logo{
        width:100%;
        height:150px;
    }

    .crm-custom-brand:before{
        width:190px;
        height:190px;
    }

    .crm-custom-brand:after{
        width:150px;
        height:150px;
    }

    .crm-custom-brand-title{
        font-size:18px;
    }
}

/* ---------- Accessibility ---------- */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
    }
}

/* =====================================================
   CRMAAAAC SOFT LOGIN ANIMATION
   ===================================================== */

/* ورود نرم کادر */
.crm-login-card,
.logincontainer,
.loginbox{
    animation:
        crmLoginSoftEnter .75s cubic-bezier(.22,.8,.28,1) both!important;
    transform-origin:center center;
    will-change:transform,opacity;
}

@keyframes crmLoginSoftEnter{
    0%{
        opacity:0;
        transform:translateY(24px) scale(.975);
        filter:blur(5px);
    }
    60%{
        opacity:1;
        transform:translateY(-2px) scale(1.005);
        filter:blur(0);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

/* آماده‌سازی بخش لوگو */
.crm-custom-brand{
    position:relative!important;
    isolation:isolate;
    overflow:visible!important;
}

/* حلقه نورانی آرام */
.crm-custom-brand::before{
    content:"";
    position:absolute;
    z-index:-2;
    top:50%;
    left:50%;

    width:225px;
    height:225px;

    transform:translate(-50%,-50%);
    border-radius:50%;

    border:1px solid rgba(239,32,41,.24);

    box-shadow:
        0 0 22px rgba(239,32,41,.18),
        0 0 48px rgba(239,32,41,.10),
        inset 0 0 24px rgba(239,32,41,.07);

    background:
        radial-gradient(
            circle,
            rgba(239,32,41,.08) 0%,
            rgba(239,32,41,.035) 40%,
            transparent 72%
        );

    animation:
        crmLogoRingBreath 4.6s ease-in-out infinite;
}

/* حلقه دوم بسیار ظریف برای حس مدرن */
.crm-custom-brand::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;

    width:255px;
    height:255px;

    transform:translate(-50%,-50%);
    border-radius:50%;

    border:
        1px dashed rgba(239,32,41,.13);

    animation:
        crmLogoRingRotate 22s linear infinite;
}

@keyframes crmLogoRingBreath{
    0%,100%{
        opacity:.48;
        transform:translate(-50%,-50%) scale(.94);
        box-shadow:
            0 0 18px rgba(239,32,41,.14),
            0 0 38px rgba(239,32,41,.08),
            inset 0 0 18px rgba(239,32,41,.05);
    }

    50%{
        opacity:.90;
        transform:translate(-50%,-50%) scale(1.04);
        box-shadow:
            0 0 28px rgba(239,32,41,.24),
            0 0 58px rgba(239,32,41,.13),
            inset 0 0 27px rgba(239,32,41,.09);
    }
}

@keyframes crmLogoRingRotate{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

/* خود لوگو کمی شناور شود */
.crm-custom-brand-logo{
    position:relative;
    z-index:2;
    animation:
        crmLogoSoftFloat 5.5s ease-in-out infinite!important;
    will-change:transform;
}

@keyframes crmLogoSoftFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }
}

/* در موبایل حلقه کوچک‌تر */
@media(max-width:768px){

    .crm-custom-brand::before{
        width:185px;
        height:185px;
    }

    .crm-custom-brand::after{
        width:212px;
        height:212px;
    }

    .crm-login-card,
    .logincontainer,
    .loginbox{
        animation-duration:.62s!important;
    }
}

@media(max-width:390px){

    .crm-custom-brand::before{
        width:160px;
        height:160px;
    }

    .crm-custom-brand::after{
        width:185px;
        height:185px;
    }
}

/* رعایت تنظیمات کاهش حرکت کاربر */
@media(prefers-reduced-motion:reduce){

    .crm-login-card,
    .logincontainer,
    .loginbox,
    .crm-custom-brand::before,
    .crm-custom-brand::after,
    .crm-custom-brand-logo{
        animation:none!important;
    }
}