/* =========================================================================
 * مودال ورود / ثبت‌نام — بازطراحی مطابق Figma (node 1093:67178)
 * CSS مستقل (نه Tailwind کامپایل‌شده) با توکن‌های تم؛ مارک‌آپ در
 * template-parts/layout/login-register.php و رفتار در assets/js/auth.js.
 * idها/کلاس‌های عملکردی (تب‌ها، مراحل، فیلدها) دست‌نخورده‌اند.
 * ====================================================================== */

/* بالای نوارِ پایینِ موبایل (z-[10000]) باشد تا کاملاً بپوشاندش */
#login-backdrop { z-index: 10000; }
#login-form-container { z-index: 10001; }

/* ---- پوسته و موقعیت (display را دست نمی‌زنیم؛ hidden + jQuery مدیریتش می‌کنند) ---- */
/* موبایل: تمام‌صفحه (مطابق فیگما) */
#login-form-content {
    position: absolute;
    z-index: 10001;
    padding: 0;
    inset: 0;
    width: 100%;
}

@media (min-width: 768px) {
    /* دسکتاپ: کارتِ وسط‌چین */
    #login-form-content {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 760px;
        max-width: calc(100vw - 32px);
    }
}

/* ---- کارت: دسکتاپ دوستونه (فرم راست، تصویر چپ در RTL) / موبایل تک‌ستونه ---- */
.bjauth-card {
    display: flex;
    flex-direction: row-reverse;     /* RTL: فرم سمت چپ، تصویر سمت راست (مطابق فیگما) */
    background: rgb(var(--c-neutral-0));
    border-radius: 0;                /* موبایل: تمام‌صفحه، بدون گردی */
    height: 100%;                    /* موبایل: کلِ ارتفاع */
    overflow: hidden;
}

@media (min-width: 768px) {
    .bjauth-card {
        border-radius: 16px;
        height: auto;
        box-shadow: 0 12px 40px rgba(17, 22, 18, .18);
    }
}

/* موبایل تمام‌صفحه: محتوای فرم از بالا، متنِ قوانین چسبیده به پایین */
@media (max-width: 767px) {
    .bjauth-body { flex: 1 1 auto; display: flex; flex-direction: column; }
    .bjauth-body > .bjauth-terms { margin-top: auto; }  /* > برای غلبه بر margin شورت‌هندِ پایین‌ترِ فایل */
}

.bjauth-form {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    /* حداقل‌ارتفاعِ ثابت تا ارتفاعِ دو تب یکی بماند و تصویر با سوییچ کِش نیاید */
    .bjauth-form { min-height: 479px; }
}

.bjauth-side { display: none; }

@media (min-width: 768px) {
    .bjauth-side {
        display: block;
        width: 340px;
        flex: none;
        align-self: stretch;
        object-fit: cover;
    }
}

/* ---- دکمهٔ بستن ---- */
.bjauth-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    color: rgb(var(--c-neutral-90) / .45);
    transition: background-color .2s;
    z-index: 2;
}
.bjauth-close:hover { background: rgb(var(--c-neutral-90) / .08); }

/* ---- سرتیتر ---- */
.bjauth-header { padding: 24px 24px 12px; text-align: right; }
.bjauth-title {
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: rgb(var(--c-neutral-90) / .9);
    margin: 0;
}

/* ---- تب‌ها (زیرخط‌دار) ---- */
.bjauth-tabs {
    display: flex;
    border-bottom: 1px solid rgb(var(--c-neutral-90) / .12);
    padding: 0 12px;
}
.bjauth-tabs .tab-btn {
    flex: 1 1 0;
    height: 48px;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: rgb(var(--c-neutral-90) / .6);
    transition: color .2s;
}
.bjauth-tabs .tab-btn.active { color: rgb(var(--c-primary-oncontainer)); }
.bjauth-tabs .tab-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 6px;
    right: 6px;
    height: 3px;
    border-radius: 3px;
    background: rgb(var(--c-primary));
    opacity: 0;
    transition: opacity .2s;
}
.bjauth-tabs .tab-btn.active::after { opacity: 1; }

/* ---- بدنهٔ فرم ---- */
.bjauth-body { padding: 24px; }

/* ---- فیلد + لیبل ---- */
.bjauth-field { margin-bottom: 16px; }
.bjauth-label {
    display: block;
    text-align: right;
    padding: 0 4px 4px;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: rgb(var(--c-neutral-90) / .9);
}
.bjauth-input-wrap { position: relative; }
.bjauth-input {
    width: 100%;
    height: 48px;
    border: 1px solid rgb(var(--c-neutral-90) / .12);
    border-radius: 8px;
    background: rgb(var(--c-neutral-0));
    padding: 0 12px;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-size: 14px;
    line-height: 24px;
    color: rgb(var(--c-neutral-90) / .9);
    text-align: right;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.bjauth-input::placeholder { color: rgb(var(--c-neutral-90) / .6); }
.bjauth-input:focus {
    border-color: rgb(var(--c-primary));
    box-shadow: inset 0 0 0 1px rgb(var(--c-primary));
}
/* فیلد رمز: جا برای دکمهٔ چشم */
.bjauth-input--pw { padding-left: 44px; }
.bjauth-eye {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    color: rgb(var(--c-neutral-90) / .34);
    transition: background-color .2s;
}
.bjauth-eye:hover { background: rgb(var(--c-neutral-90) / .08); }

/* ---- دکمهٔ اصلی ---- */
.bjauth-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: rgb(var(--c-primary));
    color: rgb(var(--c-primary-on));
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    cursor: pointer;
    transition: opacity .2s, background-color .2s;
}
.bjauth-btn:hover { opacity: .9; }
.bjauth-btn:disabled,
.bjauth-btn.is-disabled {
    background: rgb(var(--c-neutral-90) / .08);
    color: rgb(var(--c-neutral-90) / .34);
    cursor: not-allowed;
    opacity: 1;
}

/* ---- کد تأیید (OTP) ---- */
.bjauth-otp-note {
    text-align: right;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-size: 14px;
    line-height: 24px;
    color: rgb(var(--c-neutral-90) / .9);
    margin-bottom: 8px;
}
.bjauth-otp-note span { font-weight: 700; color: rgb(var(--c-primary-oncontainer)); }
.bjauth-otp {
    display: flex;
    gap: 9px;
    justify-content: center;
    padding: 8px 24px;
    direction: ltr;             /* code-1 در چپ، مطابق فیگما */
    margin-bottom: 8px;
}
.bjauth-otp input {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    border: 1px solid rgb(var(--c-neutral-90) / .12);
    border-radius: 8px;
    background: rgb(var(--c-neutral-0));
    text-align: center;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-weight: 700;
    font-size: 20px;
    color: rgb(var(--c-neutral-90) / .9);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.bjauth-otp input:focus {
    border-color: rgb(var(--c-primary));
    box-shadow: inset 0 0 0 1px rgb(var(--c-primary));
}

/* ---- ردیف اصلاح شماره / ارسال مجدد ---- */
.bjauth-otp-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}
.bjauth-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: rgb(var(--c-primary-oncontainer));
}
.bjauth-link:hover { text-decoration: underline; }
/* کلاس hidden باید بر display این کامپوننت‌ها غلبه کند (JS تایمر/ارسال‌مجدد را با hidden سوییچ می‌کند) */
.bjauth-link.hidden,
.bjauth-timer.hidden { display: none; }
.bjauth-timer {
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-size: 14px;
    line-height: 24px;
    color: rgb(var(--c-neutral-90) / .6);
}
.bjauth-timer span { font-weight: 700; color: rgb(var(--c-primary-oncontainer)); }

/* ---- خبرنامه (مرحلهٔ ثبت‌نام) ---- */
.bjauth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-size: 14px;
    color: rgb(var(--c-neutral-90) / .6);
}
.bjauth-check input { width: 18px; height: 18px; accent-color: rgb(var(--c-primary)); }

/* ---- متن قوانین ---- */
.bjauth-terms {
    text-align: right;
    font-family: var(--font-sans, 'Dana', IRANSans, sans-serif);
    font-size: 12px;
    line-height: 26px;
    color: rgb(var(--c-neutral-90) / .9);
    margin: 12px 0 0;
}
.bjauth-terms a {
    color: rgb(var(--c-primary-oncontainer));
    font-weight: 700;
    text-decoration: underline;
}

/* گذارِ ورودِ مراحل */
.bjauth-fade { animation: bjauth-fade .25s ease; }
@keyframes bjauth-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}