/**
 * فرم ورود پیامکی (Phone_Login_Form::render، شورت‌کد [ez-login]).
 *
 * کارت فقط‌حاشیه و همیشه وسط ظرفش (فرم کلاسیک قبلی کنار صفحه می‌چسبید). فیلد، برچسب و دکمه همان اجزای
 * واحدند (.fap-input، .fap-label، .fap-btn در fap-msg.css)؛ این‌جا فقط کارت، عنوان، خط شماره،
 * زمان‌سنج و کاشی‌های «از راه دیگری بگیرید». عنوان هر مرحله: .fap-pl2__s1 مرحله شماره و
 * .fap-pl2__s2 مرحله کد (phone-login.js روی ریشه is-step-verify می‌گذارد).
 * شکل دوکلاسه (زره قالب)، جا و چیدمان تک‌کلاسه.
 */

.fap-pl2 {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

.fap-pl2 *,
.fap-pl2 *::before,
.fap-pl2 *::after {
    box-sizing: border-box;
}

.fap-pl2 [hidden] {
    display: none !important;
}

.fap-pl2.fap-pl2 {
    padding: 28px 28px 24px;
    background: var(--fap-c-surface, #fff);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--fap-r-lg, 16px);
    color: var(--fap-c-text, #34494d);
    font-family: var(--fap-font, inherit);
    direction: rtl;
    text-align: start;
}

/* ---------- عنوان و جمله زمینه ---------- */
.fap-pl2 .fap-pl2__head {
    margin: 0 0 20px;
}

.fap-pl2 .fap-pl2__title.fap-pl2__title {
    margin: 0;
    padding: 0;
    color: var(--fap-c-ink, #13292d);
    font-family: inherit;
    font-size: var(--fap-fs-2xl, 22px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}

.fap-pl2 .fap-pl2__lead.fap-pl2__lead {
    margin: 6px 0 0;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-md, 14px);
    line-height: 1.9;
}

.fap-pl2 .fap-pl2__s2,
.fap-pl2.is-step-verify .fap-pl2__s1 {
    display: none;
}

.fap-pl2.is-step-verify .fap-pl2__s2 {
    display: inline;
}

/* ---------- پیام‌ها (fapMsg) ---------- */
.fap-pl2 .ez-login-message:empty {
    display: none;
}

.fap-pl2 .ez-login-message .fap-mbx {
    margin: 0 0 14px;
}

/* ---------- فیلدها ---------- */
.fap-pl2 .fap-field {
    margin: 0 0 14px;
}

/* شماره: ارقام چپ‌به‌راست ولی هم‌راستای برچسب (راست) */
.fap-pl2 .ez-phone-number.fap-input.fap-input.fap-input {
    text-align: right;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

/* کد: درشت و وسط؛ فاصله حروف آخرین رقم را هم جابه‌جا می‌کند، پس همان اندازه از شروع جبران می‌شود */
.fap-pl2 .fap-pl2__otp.fap-input.fap-input.fap-input.fap-input--lg {
    padding-inline: calc(14px + .5em) 14px;
    font-size: var(--fap-fs-2xl, 22px);
    font-weight: 700;
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fap-pl2 .ez-hp {
    position: absolute !important;
    inset-inline-start: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- قوانین ---------- */
.fap-pl2 .fap-pl2__terms.fap-pl2__terms {
    margin: 14px 0 0;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-xs, 12px);
    line-height: 1.8;
    text-align: center;
}

.fap-pl2.fap-pl2 .fap-pl2__terms a {
    color: var(--fap-brand-600, #0d8276);
    font-weight: 700;
    text-decoration: none;
}

.fap-pl2.fap-pl2 .fap-pl2__terms a:hover {
    color: var(--fap-brand-700, #0b6c62);
    text-decoration: underline;
}

/* ---------- مرحله کد: شماره و ویرایش ---------- */
.fap-pl2 .fap-pl2__phone.fap-pl2__phone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 12px;
    background: var(--fap-c-bg, #f3f7f7);
    border-radius: var(--fap-r-md, 12px);
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-sm, 13px);
    line-height: 1.6;
}

.fap-pl2 .fap-pl2__phone b {
    margin-inline-start: 4px;
    color: var(--fap-c-ink, #13292d);
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    letter-spacing: .04em;
    unicode-bidi: isolate;
}

.fap-pl2 .fap-pl2__phone .fap-btn {
    flex: 0 0 auto;
}

.fap-pl2 .fap-pl2__timer.fap-pl2__timer {
    margin: 12px 0 0;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-sm, 13px);
    line-height: 1.7;
    text-align: center;
}

.fap-pl2 .ez-remaining-time {
    color: var(--fap-c-ink, #13292d);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------- کد نرسید: پیامک، بله، تماس صوتی ---------- */
.fap-pl2 .fap-pl-resend {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.fap-pl2 .fap-pl-resend-q.fap-pl-resend-q {
    margin: 0 0 10px;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-sm, 13px);
    line-height: 1.7;
    text-align: center;
}

.fap-pl2 .fap-pl-resend-options {
    display: flex;
    gap: 8px;
}

.fap-pl2 .fap-pl-resend-btn.fap-pl-resend-btn {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 12px 6px 10px;
    background: var(--fap-c-surface, #fff);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--fap-r-md, 12px);
    box-shadow: none;
    color: var(--fap-c-ink, #13292d);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--fap-dur-fast, .15s) ease, background-color var(--fap-dur-fast, .15s) ease;
}

.fap-pl2 .fap-pl-resend-btn.fap-pl-resend-btn:hover,
.fap-pl2 .fap-pl-resend-btn.fap-pl-resend-btn.is-suggested {
    border-color: var(--fap-brand-200, #c6e9e4);
    background: var(--fap-brand-50, #eef8f6);
    color: var(--fap-c-ink, #13292d);
}

.fap-pl2 .fap-pl-resend-btn.fap-pl-resend-btn:focus-visible {
    outline: 2px solid var(--fap-brand-600, #0d8276);
    outline-offset: 2px;
}

.fap-pl2 .fap-pl-resend-btn.fap-pl-resend-btn:disabled {
    opacity: .55;
    cursor: default;
}

.fap-pl2 .fap-pl-rs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 3px;
    border-radius: 50%;
    background: var(--fap-brand-50, #eef8f6);
    color: var(--fap-brand-600, #0d8276);
    line-height: 0;
}

.fap-pl2 .fap-pl-rs-icon svg {
    width: 18px;
    height: 18px;
}

.fap-pl2 .fap-pl-rs-label {
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    line-height: 1.5;
}

.fap-pl2 .fap-pl-rs-hint {
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-2xs, 11px);
    line-height: 1.5;
}

/* ---------- جای فرم ---------- */
/* پنجره ورود (fapModal، صفحه آگهی): قاب و عنوان پنجره کافی است */
.fap-mdl-body .fap-pl2.fap-pl2 {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.fap-mdl-body .fap-pl2 .fap-pl2__head {
    display: none;
}

/* دروازه ورود صفحه‌ها (خرید سفارشی، فروش در شعبه، بخش‌های حساب) */
.fap-login-required-wrapper {
    padding: 24px 0 48px;
}

@media (max-width: 480px) {
    .fap-pl2.fap-pl2 {
        padding: 22px 18px 20px;
    }

    .fap-pl2 .fap-pl2__title.fap-pl2__title {
        font-size: var(--fap-fs-xl, 18px);
    }

    .fap-login-required-wrapper {
        padding: 16px 10px 40px;
    }
}