/**
 * برگه ورود /login/ (public/templates/login-page.php، Login_Page نسخه ۲).
 *
 * فرم خودش کارت است (phone-login.css)؛ این‌جا فقط چیدمان: فرم سمت شروع (راست) و کنارش سطح تیره
 * با نگاره «پیامک کد» (.fap-art، fap_cta_art('login')) و آنچه حساب می‌دهد. زیر ۹۰۰ یک ستون، فرم اول.
 */

.fap-lgn {
    box-sizing: border-box;
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 16px 56px;
}

/* دو کارت هم‌عرض و هم‌قد (خواست کاربر: توازن)؛ فرم وسط کارت خودش */
.fap-lgn__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.fap-lgn__main {
    display: flex;
}

.fap-lgn__main .fap-pl2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
}

.fap-lgn__main .fap-pl2.fap-pl2 {
    padding: 40px 48px;
    border-radius: var(--fap-r-xl, 20px);
}

.fap-lgn__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 32px 36px 36px;
    background: var(--fap-c-dark, #1d212b);
    border-radius: var(--fap-r-xl, 20px);
    color: color-mix(in srgb, var(--fap-c-surface, #fff) 78%, transparent);
}

.fap-lgn__art svg {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 4px;
}

/*
 * لحظه یک‌باره نگاره (cta-art.php نوع login، کلاس‌های x-l-*؛ js توضیح‌گرها نوع print): پیامک کد می‌رسد،
 * کد خانه‌به‌خانه پر می‌شود، «ورود» زده می‌شود و روشنی ریموت از قفل به باز می‌رود. هر بار که نگاره به دید
 * می‌آید یک بار، بی حلقه؛ قاب آخر همان نگاره ثابت است (بی js و با «کاهش حرکت» همان دیده می‌شود).
 */
.fap-lgn__art .x-l-btn,
.fap-lgn__art .x-l-open,
.fap-lgn__art .x-l-was {
    transform-box: fill-box;
    transform-origin: center;
}

.fap-lgn__art.is-play .x-l-sms { animation: fap-lgn-sms .5s cubic-bezier(.45, .05, .25, 1) .2s both; }
.fap-lgn__art.is-play .x-l-d { animation: fap-lgn-d .2s ease-out both; animation-delay: calc(.95s + var(--i, 0) * 170ms); }
.fap-lgn__art.is-play .x-l-btn { animation: fap-lgn-press .32s ease-in-out 2.05s both; }
.fap-lgn__art.is-play .x-l-was { animation: fap-lgn-was .3s ease-out 2.45s both; }
.fap-lgn__art.is-play .x-l-open { animation: fap-lgn-open .4s cubic-bezier(.45, .05, .25, 1) 2.5s both; }

.fap-lgn__art.is-wait .x-l-sms,
.fap-lgn__art.is-wait .x-l-d,
.fap-lgn__art.is-wait .x-l-btn,
.fap-lgn__art.is-wait .x-l-was,
.fap-lgn__art.is-wait .x-l-open {
    animation-play-state: paused;
}

@keyframes fap-lgn-sms {
    from { opacity: 0; transform: translateY(-26px); }
}

@keyframes fap-lgn-d {
    from { opacity: 0; transform: translateY(4px); }
}

@keyframes fap-lgn-press {
    50% { transform: scale(.93); }
}

@keyframes fap-lgn-was {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fap-lgn-open {
    from { opacity: 0; transform: scale(.4); }
}

@media (prefers-reduced-motion: reduce) {
    .fap-lgn__art .x-l-sms,
    .fap-lgn__art .x-l-d,
    .fap-lgn__art .x-l-btn,
    .fap-lgn__art .x-l-was,
    .fap-lgn__art .x-l-open {
        animation: none !important;
    }
}

.fap-lgn .fap-lgn__side-title {
    margin: 0;
    color: var(--fap-brand-100, #e3f4f1);
    font-size: var(--fap-fs-xl, 18px);
    font-weight: 800;
    line-height: 1.6;
}

.fap-lgn .fap-lgn__perks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fap-lgn .fap-lgn__perks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: var(--fap-fs-md, 14px);
    line-height: 1.9;
}

.fap-lgn .fap-lgn__perk-ic {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: var(--fap-r-sm, 10px);
    background: color-mix(in srgb, var(--fap-c-surface, #fff) 8%, transparent);
    color: var(--fap-brand-300, #9fd9d1);
}

.fap-lgn .fap-lgn__perk-ic .fap-i {
    width: 18px;
    height: 18px;
}

@media (max-width: 900px) {
    .fap-lgn {
        max-width: 560px;
        padding: 16px 10px 40px;
    }

    .fap-lgn__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .fap-lgn__main .fap-pl2.fap-pl2 {
        padding: 22px 18px 20px;
        border-radius: var(--fap-r-lg, 16px);
    }

    .fap-lgn__side {
        padding: 24px 20px;
    }

    .fap-lgn__art svg {
        max-width: 320px;
    }
}