/*
 * rira-login.css — فرم ورود افزونهٔ «Rira Multi Login» با زبان طراحی شاهکار ذهن
 *
 * افزونه دو جا خودش را نشان می‌دهد:
 *   ۱) صفحهٔ ورودِ مهمان روی /my-account/ — که includes/rira-login.php آن را
 *      از دست قالبِ خامِ افزونه در می‌آورد و مارک‌آپ .rml-login-page را می‌سازد.
 *   ۲) پاپ‌آپ ورود پیش از ثبت کامنت در ریلز (.shorts-login-box).
 *
 * هر دو جا کلاس .rml-skin روی ظرفِ فرم می‌نشیند و همهٔ قانون‌های این فایل زیر
 * همان اسکوپ‌اند؛ پس اگر روزی [rml-form] جای دیگری هم گذاشته شد، تا وقتی
 * .rml-skin نگیرد ظاهر پیش‌فرض افزونه را دارد و چیزی به‌هم نمی‌ریزد.
 *
 * دارک‌مود جدا نوشته نشده: رنگ‌ها همه از توکن‌های :root/بدنه می‌آیند و همان‌جا
 * ری‌مپ می‌شوند (style.css §«حالت تیره»). !important ها هم دلبخواهی نیستند —
 * rml.min.css خودش با !important روی input/border/background نشسته است.
 */

/* فلت‌سام همین را برای کل سایت می‌گوید، ولی روی صفحه‌های بی‌کروم (پشتیبانی
   دوره، مسیر EFT) CSSِ فلت‌سام بار نمی‌شود. آن‌جا فیلدِ width:100% با پدینگ
   و حاشیه‌اش از پاپ‌آپ بیرون می‌زد و کادر کد یکبارمصرف اسکرول افقی می‌ساخت
   (۲۶ مهر ۱۴۰۵). */
.rml-skin,
.rml-skin *,
.rml-skin *::before,
.rml-skin *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════
   ۱) صفحهٔ ورود — چیدمان بیرونی
   ══════════════════════════════════════════ */
.rml-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--text-1);
    padding: var(--page-pad);
    direction: rtl;
}

.rml-login-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.rml-login-home {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-meta);
    font-weight: 700;
    color: var(--text-2);
    text-decoration: none;
}

.rml-login-home:hover { color: var(--text-1); }

.rml-login-home svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* باتم‌نو روی wp_footer رندر می‌شه و همین‌جا هم می‌آد — که خوبه، چون راه
   خروج از صفحه‌ی ورود رو باز نگه می‌داره. ولی fixed هست، پس روی صفحه‌های
   کوتاه پایین کارت زیرش گیر می‌کنه؛ این پدینگ همون ارتفاع رو خالی می‌ذاره. */
.rml-login-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-bottom: calc(64px + var(--nav-safe-bottom));
}

.rml-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--r-sheet);
    box-shadow: var(--shadow-card);
    padding: var(--space-6) var(--space-5) var(--space-5);
}

.rml-login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.rml-login-brand img {
    max-height: 46px;
    width: auto;
}

.rml-login-brand .rml-login-wordmark {
    font-size: var(--t-section);
    font-weight: 800;
    color: var(--text-1);
}

.rml-login-title {
    margin: 0 0 var(--space-2);
    text-align: center;
    font-size: var(--t-article-h1);
    font-weight: 800;
    line-height: var(--lh-title);
    color: var(--text-1);
}

.rml-login-sub {
    margin: 0 0 var(--space-5);
    text-align: center;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--text-2);
}

/* پیام «برای تکمیل خرید وارد شوید» و هم‌خانواده‌هایش */
.rml-login-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 10px var(--space-3);
    border-radius: var(--r-control);
    background: var(--coral-soft);
    color: var(--coral-soft-text);
    font-size: var(--t-meta);
    font-weight: 700;
    line-height: 1.6;
}

.rml-login-note svg { width: 16px; height: 16px; flex: none; }

.rml-login-terms {
    margin: var(--space-4) 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.8;
    color: var(--text-3);
}

@media (min-width: 850px) {
    .rml-login-page { padding: var(--space-5) 44px; }
    .rml-login-card { padding: var(--space-6) var(--space-6) var(--space-5); }
}

/* از ۹۹۲ به بالا باتم‌نو مخفی می‌شه (bottom-nav.css)، پس جای خالیِ پایین هم لازم نیست */
@media (min-width: 992px) {
    .rml-login-shell { padding-bottom: var(--space-6); }
}

/* ══════════════════════════════════════════
   ۲) خودِ فرم افزونه — پاک‌سازی کارت داخلی
   افزونه دور فرم کارت سفیدِ گردِ خودش را می‌کشد؛ اینجا هر دو جا (صفحه و
   پاپ‌آپ) ظرفِ بیرونی خودش کارت است، پس این یکی صاف می‌شود.
   ══════════════════════════════════════════ */
.rml-skin div#rml-data {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* سربرگ افزونه وقتی فقط «موبایل» فعال است یک تبِ تک‌تایی است که همان حرفِ
   تیتر را تکرار می‌کند — تیتر خودمان بالای فرم نشسته، پس این حذف می‌شود */
.rml-skin .rml-head.rml-col-100 { display: none; }

/* اگر روزی ورود با ایمیل هم روشن شد، تبِ دوتایی به شکل چیپِ طرح در می‌آید */
.rml-skin .rml-content-container .rml-head.rml-col-50 {
    background: var(--surface-2);
    padding: 4px;
    border-radius: var(--r-pill);
    margin-bottom: var(--space-5);
}

.rml-skin .rml-content-container .rml-head.rml-col-50 .rml-head-item label {
    margin: 0;
    padding: 9px var(--space-3);
    border-radius: var(--r-pill);
    font-size: var(--t-meta);
    font-weight: 700;
    color: var(--text-2);
    transition: color var(--dur-color) var(--ease);
}

.rml-skin .rml-content-container .rml-head.rml-col-50 .rml-head-item label:after {
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-2);
}

.rml-skin .rml-content-container .rml-head.rml-col-50 .rml-head-item input:checked + label {
    color: var(--text-1);
}

/* لوگوی اختیاری خودِ افزونه — وقتی توی تنظیماتش تصویری ست نشده، این div
   خالی می‌ماند و فقط فاصلهٔ بی‌دلیل می‌سازد */
.rml-skin .rml-field .rml-logo:empty { display: none; }

.rml-skin .rml-field .rml-logo img {
    display: block;
    max-height: 44px;
    width: auto;
    margin: 0 auto var(--space-3);
}

/* ══════════════════════════════════════════
   ۳) فیلدها
   ══════════════════════════════════════════ */
.rml-skin .rml-field { margin-bottom: var(--space-4); }

.rml-skin .rml-field label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--t-meta);
    font-weight: 700;
    color: var(--text-2);
    text-transform: none;
    letter-spacing: 0;
}

.rml-skin .rml-field input,
.rml-skin .rml-field select {
    width: 100% !important;
    height: 48px;
    margin: 0;
    /* عمداً بدون !important: intl-tel-input روی فیلد موبایل padding-left را
       inline و بر اساس عرضِ واقعیِ «+۹۸» حساب می‌کند. با !important آن را
       می‌کشتیم و شماره می‌رفت زیر کد کشور. */
    padding: 0 14px;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-control) !important;
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 600;
    transition: border-color var(--dur-color) var(--ease), background var(--dur-color) var(--ease);
}

.rml-skin .rml-field input:focus,
.rml-skin .rml-field select:focus {
    border-color: var(--gold-500) !important;
    background: var(--surface) !important;
    outline: none;
}

.rml-skin .rml-field input::placeholder { color: var(--text-3); font-weight: 500; }

/* شماره و کد یک‌بارمصرف عددِ لاتینِ چپ‌چین‌اند، ولی بقیهٔ فیلدها (نام و
   نام خانوادگی در فرم تکمیل اطلاعات) فارسی و راست‌چین */
.rml-skin .rml-field input[type="text"]:not(.rml-digits-field),
.rml-skin .rml-field select {
    direction: rtl;
    text-align: right;
}

/* اسم سلکتور عمداً یک پله سنگین‌تر از حد لازم است: افزونهٔ persian-flatsome
   داخل yekanbakh-fa-font.css با body.rtl input[type="tel"] همه‌ی اینپوت‌ها را
   rtl می‌کند و از .rml-digits-fieldِ تنها قوی‌تر است. با rtl، ستاره‌های
   پلیس‌هولدرِ «09********» خنثی‌اند و ۰۹ می‌افتد سمت راستِ ستاره‌ها. */
.rml-skin .rml-field input.rml-digits-field,
.rml-skin .rml-field input[type="tel"] {
    direction: ltr;
    text-align: left;
    letter-spacing: 1px;
}

/* کد OTP — درشت و وسط‌چین، چون تک‌کارِ آن گام است */
.rml-skin #rml-field-otp {
    text-align: center;
    letter-spacing: 6px;
    font-size: 20px;
    font-weight: 800;
}

/* ══════════════════════════════════════════
   ۴) انتخابگر کشور (intl-tel-input)
   ══════════════════════════════════════════ */
.rml-skin .rml-field .iti.iti--allow-dropdown {
    width: 100%;
    display: block;
    margin-bottom: 0;
}

/* فالبکِ همان جای خالی، برای فریمِ پیش از اینکه اسکریپت iti مقدار دقیق را
   inline بگذارد (inline از این قوی‌تر است، پس رویش نمی‌نشیند) */
.rml-skin .rml-field .iti--separate-dial-code input {
    padding-left: 62px;
}

.rml-skin .rml-field .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    border-radius: var(--r-control) 0 0 var(--r-control);
    padding: 0 10px;
}

.rml-skin .iti__selected-dial-code,
.rml-skin .iti__selected-flag {
    color: var(--text-2) !important;
    font-size: var(--t-body);
    font-weight: 700;
}

.rml-skin .iti__arrow { border-top-color: var(--text-3); }

.rml-skin .iti__arrow--up { border-bottom-color: var(--text-3); }

.rml-skin .iti__country-list {
    direction: ltr;
    background: var(--surface);
    color: var(--text-1);
    border: 1px solid var(--divider);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-2);
    padding: var(--space-1);
}

.rml-skin .iti__country {
    border-radius: var(--r-chip);
    font-size: var(--t-body);
}

.rml-skin .iti__country.iti__highlight { background: var(--surface-2); }

.rml-skin .iti__dial-code { color: var(--text-3); }

.rml-skin .iti__divider { border-bottom-color: var(--divider); }

/* ══════════════════════════════════════════
   ۵) دکمهٔ اصلی
   افزونه سبزِ #49c668 را با !important می‌نشاند؛ در طرح، دکمهٔ اصلی
   var(--ink) است که خودش در پوستهٔ تیره طلایی می‌شود.
   ══════════════════════════════════════════ */
.rml-skin .rml-content-container button,
.rml-skin #rml-form button[type="submit"] {
    width: 100%;
    margin: var(--space-2) 0 0;
    min-height: 48px;
    padding: 12px 18px !important;
    border: 0;
    border-radius: var(--r-control) !important;
    background: var(--ink) !important;
    color: var(--ink-text) !important;
    font-size: var(--t-card-title);
    font-weight: 800;
    line-height: 1.5;
    cursor: pointer;
    transition: background var(--dur-color) var(--ease), transform var(--dur-press) var(--ease), opacity var(--dur-color) var(--ease);
}

.rml-skin .rml-content-container button:hover {
    background: var(--hover-ink) !important;
}

.rml-skin .rml-content-container button:active {
    transform: scale(var(--press-scale));
}

.rml-skin .rml-content-container button.disabled {
    opacity: .45;
    cursor: not-allowed;
}

.rml-skin .rml-content-container button.disabled:hover {
    background: var(--ink) !important;
}

/* ══════════════════════════════════════════
   ۶) گام دوم — کد یک‌بارمصرف
   ══════════════════════════════════════════ */
.rml-skin .mobile-login[data-login-mobile-step="two"] .otp-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    font-size: var(--t-section);
    font-weight: 800;
    color: var(--text-1);
}

.rml-skin .mobile-login[data-login-mobile-step="two"] .otp-head .otp-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-1);
    top: 50%;
    transform: translateY(-50%);
    transition: background var(--dur-color) var(--ease);
}

.rml-skin .otp-back:hover { background: var(--hover-surface); }

/* همان باگ SVG-توی-فلکس: بدون flex:none آیکون تا چند پیکسل جمع می‌شود */
.rml-skin .otp-back svg { width: 18px; height: 18px; flex: none; }

.rml-skin label[for="rml-field-otp"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rml-skin .rml-counter-box {
    font-size: var(--t-meta);
    font-weight: 700;
    color: var(--text-3);
    direction: ltr;
}

.rml-skin .rml-counter-box a#rml-resend-otp {
    color: var(--gold-700);
    text-decoration: none;
    direction: rtl;
    display: inline-block;
}

.rml-skin .rml-counter-box a#rml-resend-otp:hover { text-decoration: underline; }

/* اسپینرِ blockUI افزونه آبیِ فلت‌سام است؛ به لهجهٔ طلایی طرح برمی‌گردد
   و پردهٔ سفیدش هم در پوستهٔ تیره سطحِ تیره می‌شود */
.rml-skin #rml-form .blockUI.blockOverlay {
    background: var(--surface) !important;
}

.rml-skin #rml-form .blockUI.blockOverlay::before {
    border-top-color: var(--divider) !important;
    border-right-color: var(--divider) !important;
    border-bottom-color: var(--divider) !important;
    border-left-color: var(--gold-500) !important;
}

/* ══════════════════════════════════════════
   ۷) نوتیس‌های jBox (خطا/موفقیتِ افزونه)
   ══════════════════════════════════════════ */
.jBox-Notice .jBox-container {
    border-radius: var(--r-control) !important;
    font-family: inherit;
    font-size: var(--t-body);
    font-weight: 700;
}

.jBox-Notice-color.jBox-Notice-red .jBox-container {
    background: var(--danger-500) !important;
    color: #fff !important;
}

.jBox-Notice-color.jBox-Notice-green .jBox-container {
    background: var(--success) !important;
    color: #fff !important;
}