/* ============================================================
   Moshtariat — Login V2 (isolated brand-book redesign)
   Scoped entirely under .mv2 so it inherits nothing from the app
   and leaks nothing back into it. No app CSS is loaded on v2 pages.
   ============================================================ */

@font-face {
    font-family: "Vazirmatn V2";
    src: url("../../../ModernTheme/assets/fonts/vazirmatn/Vazirmatn.woff2?v=1786118181") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
.mv2, .mv2 *, .mv2 *::before, .mv2 *::after { box-sizing: border-box; }

.mv2-body {
    margin: 0;
    background: #EEF1F7;
}

.mv2 {
    --indigo: #4F46E5;
    --indigo-dark: #3730A3;
    --lav: #EEF2FF;
    --lav2: #F5F7FF;
    --navy: #0F172A;
    --ink: #1E293B;
    --muted: #64748B;
    --faint: #94A3B8;
    --border: #E5EAF2;
    --surface: #F5F7FA;
    --white: #fff;
    --green: #16A34A;
    --red: #DC2626;
    --red-bg: #FEF2F2;
    --red-bd: #FBD5D5;
    --info-bg: #EFF6FF;
    --info-bd: #BFDBFE;
    --info: #1D4ED8;
    --mono: "Roboto Mono", ui-monospace, monospace;

    display: block;
    min-height: 100vh;
    margin: 0;
    padding: 32px 20px;
    font-family: "Vazirmatn V2", Tahoma, Arial, sans-serif;
    color: var(--navy);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(79,70,229,.10), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(55,48,163,.08), transparent 55%),
        #EEF1F7;
}

.mv2 img { max-width: 100%; display: block; }

/* ---- shell: split hero + card ---- */
.mv2-shell {
    width: 100%;
    max-width: 980px;
    min-height: calc(100vh - 64px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 30px 70px -30px rgba(15,23,42,.30);
}

/* ---- hero ---- */
.mv2-hero {
    position: relative;
    color: #fff;
    background: linear-gradient(160deg, #4338CA 0%, #4F46E5 48%, #6366F1 100%);
    overflow: hidden;
}
/* سه ردیف: دو فضای مساوی بالا و پایین، پس بلوک برند دقیقاً وسط ستون می‌نشیند و
   نکته‌ها همچنان به کف می‌چسبند. اگر ارتفاع کم بیاید ردیف‌های ۱fr جمع می‌شوند. */
.mv2-hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 44px 40px;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
}
.mv2-hero-top {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* هیرو زمینهٔ بنفش دارد، پس نشانِ سفید مستقیم رویش می‌نشیند. قاب شیشه‌ای قبلی
   مربع بود و نشان ۸۶۷:۴۵۶ داخلش فشرده می‌شد. */
.mv2-logo { display: flex; align-items: center; }
.mv2-logo svg { height: 34px; width: auto; display: block; }
.mv2-hero h1 { margin: 6px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.mv2-hero .mv2-hero-top > p { margin: 0; font-size: 15px; color: rgba(255,255,255,.82); }

.mv2-hero-points {
    list-style: none;
    margin: 0;
    grid-row: 3;
    align-self: end;
    padding: 0;
    display: grid;
    gap: 12px;
}
.mv2-hero-points li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    color: rgba(255,255,255,.90);
}
.mv2-hero-points svg {
    width: 20px; height: 20px; flex: 0 0 20px;
    padding: 3px;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    color: #fff;
}
.mv2-hero-glow {
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    top: -120px; inset-inline-start: -110px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
    z-index: 1;
}

/* ---- card ---- */
.mv2-card {
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.mv2-brandline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
/* کارت روشن است، پس نشان بنفشِ بدون کاشی. */
.mv2-mark { display: flex; align-items: center; }
.mv2-mark svg { height: 28px; width: auto; display: block; }
.mv2-brandtext strong { display: block; font-size: 17px; font-weight: 800; }
.mv2-brandtext span { display: block; font-size: 13px; color: var(--muted); }

/* ---- tabs ---- */
.mv2-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 22px;
    background: var(--lav2);
    border: 1px solid var(--border);
    border-radius: 13px;
}
.mv2-tab {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: .15s;
}
.mv2-tab:hover { color: var(--indigo-dark); }
.mv2-tab.is-active {
    background: var(--white);
    color: var(--indigo-dark);
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
    cursor: default;
}

/* ---- form ---- */
.mv2-form { display: block; margin: 0; }
.mv2-field { margin-bottom: 16px; }
.mv2-field label,
.mv2-otp-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--ink);
}
.mv2-hint { margin: -3px 0 9px; font-size: 12px; color: var(--muted); }

.mv2-input {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    font: inherit;
    font-size: 14px;
    background: var(--surface);
    color: var(--navy);
    outline: none;
    transition: .15s;
}
.mv2-input::placeholder { color: #9AA6B8; }
.mv2-input:focus {
    border-color: var(--indigo);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(79,70,229,.13);
}
.mv2-input.has-error {
    border-color: var(--red);
    background: var(--red-bg);
}
/* شماره از لبهٔ چپ فیلد شروع می‌شود و به راست رشد می‌کند — همان ترتیبی که خودِ
   عدد خوانده می‌شود، پس مکان‌نما هم از جایی شروع می‌کند که رقم اول می‌نشیند. */
.mv2-identifier {
    direction: ltr;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
}
.mv2-identifier::placeholder { font-weight: 400; letter-spacing: normal; }

.mv2-captcha-img {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.mv2-fielderr {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}

/* password + eye */
.mv2-pass { position: relative; }
.mv2-pass .mv2-input { padding-inline-start: 44px; }
.mv2-eye {
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; padding: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    transition: .15s;
}
.mv2-eye:hover { color: var(--indigo-dark); background: var(--lav); }
.mv2-eye svg { width: 18px; height: 18px; }
.mv2-eye.is-on { color: var(--indigo-dark); }

/* row: remember + forgot */
.mv2-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
}
.mv2-link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--indigo-dark);
    text-decoration: none;
}
.mv2-link:hover { text-decoration: underline; }

/* switch / checkbox */
.mv2-check {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}
.mv2-check-block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 2px 0 20px;
}
.mv2-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mv2-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px; height: 26px;
    border-radius: 999px;
    background: #CBD5E1;
    transition: background .2s ease;
}
.mv2-switch::after {
    content: "";
    position: absolute;
    top: 3px; inset-inline-start: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.3);
    transition: transform .2s ease;
}
.mv2-check input:checked + .mv2-switch { background: var(--indigo); }
.mv2-check input:checked + .mv2-switch::after { transform: translateX(18px); }
html[dir="rtl"] .mv2-check input:checked + .mv2-switch::after { transform: translateX(-18px); }
.mv2-check input:focus-visible + .mv2-switch { box-shadow: 0 0 0 3px rgba(79,70,229,.35); }

/* primary + ghost buttons */
.mv2-btn {
    width: 100%;
    padding: 13px;
    border: 1px solid var(--indigo);
    border-radius: 12px;
    background: var(--indigo);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 14.5px;
    cursor: pointer;
    transition: .15s;
}
.mv2-btn:hover { background: var(--indigo-dark); border-color: var(--indigo-dark); }
.mv2-btn:disabled { opacity: .5; cursor: default; }

.mv2-alt { margin-top: 14px; }
.mv2-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
    transition: .15s;
}
.mv2-btn-ghost:hover { background: var(--lav); color: var(--indigo-dark); border-color: #DDE3FB; }
.mv2-alt-split {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

/* trust line */
.mv2-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.mv2-trust svg { width: 15px; height: 15px; color: var(--faint); }

/* alerts */
.mv2-alert {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}
.mv2-alert-error { background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red); }
.mv2-alert-info {
    background: var(--info-bg);
    border: 1px solid var(--info-bd);
    color: var(--info);
    text-align: center;
    font-family: var(--mono);
    letter-spacing: .06em;
    font-weight: 700;
}
.mv2-delivery { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }

/* OTP boxes */
.mv2-otp {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 18px;
}
.mv2-otp input {
    width: 46px; height: 54px;
    text-align: center;
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--navy);
    outline: none;
    transition: .15s;
}
.mv2-otp input:focus {
    border-color: var(--indigo);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(79,70,229,.13);
}
.mv2-otp input.is-filled { border-color: var(--indigo); background: var(--white); }

/* ============================================================
   کارت «شروع دورهٔ رایگان» (login_trial_v2)
   همان ستون کارت است، فقط محتوایش عوض می‌شود؛ پس هیچ‌کدام از قاعده‌های
   بالا بازنویسی نمی‌شود و ورود عادی دست‌نخورده می‌ماند.
   ============================================================ */
.mv2-ts {
    --ts-line: #DBE3EF;
    --ts-line-soft: #E7EDF6;
    --ts-lav-bd: #D9DEFB;
    --ts-faint2: #CBD5E1;
    --ts-ring: 0 6px 16px rgba(79,70,229,.30);
    gap: 0;
}
/* نوار رنگی بالای کارت. روی دسکتاپ ستون سمت راستِ شل است و شل خودش
   overflow:hidden دارد، پس گوشه‌ها بریده می‌مانند. */
.mv2-ts { position: relative; }
.mv2-ts::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--indigo), #818CF8, #A5B4FC);
}

.mv2-ts-top {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.mv2-ts-badge {
    width: 52px; height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--indigo), #6366F1);
    box-shadow: var(--ts-ring);
}
.mv2-ts-badge svg { width: 26px; height: 26px; }
.mv2-ts-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--lav);
    border: 1px solid var(--ts-lav-bd);
    color: var(--indigo-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}
.mv2-ts-chip svg { width: 14px; height: 14px; flex: 0 0 14px; }

.mv2-ts-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.65;
}
.mv2-ts-title b { color: var(--indigo); font-weight: 800; }
.mv2-ts-sub {
    margin: 7px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
}

.mv2-ts-form { margin-top: 20px; }
.mv2-ts-label {
    display: block;
    margin: 0 2px 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink);
}
.mv2-ts-field {
    display: flex;
    align-items: stretch;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--ts-line);
    border-radius: 14px;
    background: var(--surface);
    transition: .15s;
}
.mv2-ts-field:focus-within {
    border-color: var(--indigo);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(79,70,229,.13);
}
.mv2-ts-field.has-error {
    border-color: var(--red);
    background: var(--red-bg);
    box-shadow: none;
}
/* فقط نشانهٔ تلفن: بدون کادر و جداکننده، چون دیگر چیزی جز آیکن داخلش نیست. */
.mv2-ts-prefix {
    display: flex;
    align-items: center;
    /* inline-end یعنی سمت چپ در RTL: همان لبه‌ای که شماره از آن شروع می‌شود. */
    padding-inline-end: 16px;
    color: var(--faint);
}
.mv2-ts-prefix svg { width: 17px; height: 17px; }
.mv2-ts-input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
    /* عدد از لبهٔ چپ شروع می‌شود و به راست پر می‌شود؛ direction: ltr هم ترتیب
       گروه‌های شماره را حفظ می‌کند (در RTL «۰۹۱۲ ۱۲۳ ۴۵۶۷» جابه‌جا می‌شد). */
    direction: ltr;
    text-align: left;
    outline: none;
}
.mv2-ts-input::placeholder {
    color: var(--ts-faint2);
    font-weight: 500;
    letter-spacing: normal;
}

.mv2-ts-hint {
    /* ارتفاع ثابت: پیام که عوض می‌شود دکمه بالا و پایین نپرد. */
    min-height: 18px;
    margin: 8px 2px 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--faint);
}
.mv2-ts-hint.has-error { color: var(--red); }

.mv2-ts-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 54px;
    margin-top: 16px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--indigo), #6366F1);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--ts-ring);
    transition: .18s;
}
.mv2-ts-cta svg { width: 19px; height: 19px; flex: 0 0 19px; }
.mv2-ts-cta:hover:not(:disabled) { box-shadow: 0 12px 26px rgba(79,70,229,.38); }
.mv2-ts-cta:disabled {
    background: #E2E8F0;
    color: #94A3B8;
    box-shadow: none;
    cursor: default;
}

.mv2-ts-foot {
    margin: 18px 0 0;
    padding-top: 15px;
    border-top: 1px solid var(--ts-line-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}
.mv2-ts-foot a { color: var(--indigo-dark); font-weight: 700; text-decoration: none; }
.mv2-ts-foot a:hover { text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 840px) {
    .mv2 { padding: 0; }
    .mv2-shell {
        grid-template-columns: 1fr;
        max-width: 460px;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .mv2-hero { display: none; }
    .mv2-card { padding: 34px 24px 30px; }
}
@media (min-width: 841px) and (max-width: 940px) {
    .mv2-card { padding: 34px 28px; }
    .mv2-hero-inner { padding: 36px 28px; }
}
@media (max-width: 400px) {
    .mv2-ts-title { font-size: 18px; }
}