/* ==========================================================================
   Auth — ورود / ثبت‌نام  (Layout مستقل — بدون وابستگی به استایل‌های سایت)
   پالت: سفید / سبز (#0A9A73) / طوسی
   ========================================================================== */

:root {
    --af-green:        #0A9A73;
    --af-green-dark:   #07795B;
    --af-green-deep:   #055943;
    --af-green-soft:   #e6f7f1;
    --af-green-softer: #f2fbf8;
    --af-gray-900:     #22302c;
    --af-gray-700:     #46554f;
    --af-gray-500:     #6b7a74;
    --af-gray-300:     #cfd8d4;
    --af-gray-100:     #eef2f0;
    --af-bg:           #edf1ef;
    --af-white:        #ffffff;
    --af-danger:       #d64545;
    --af-danger-soft:  #fdeeee;
}

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

html, body { margin: 0; padding: 0; }

/* ---------- صفحه ---------- */
.af-body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(10, 154, 115, .10), transparent 60%),
        radial-gradient(700px 420px at 0% 110%, rgba(10, 154, 115, .08), transparent 60%),
        var(--af-bg);
    font-family: vazir, IRANSans, Tahoma, sans-serif;
    color: var(--af-gray-900);
    -webkit-font-smoothing: antialiased;
}

.af-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

/* ---------- کارت اصلی ---------- */
.af-card {
    width: 100%;
    max-width: 1000px;
    flex: 0 1 1000px;
    background: var(--af-white);
    border-radius: 26px;
    box-shadow: 0 24px 60px -18px rgba(8, 68, 52, .28);
    display: flex;
    overflow: hidden;
}

/* ---------- ستون برندینگ (سمت راست) ---------- */
.af-brand {
    position: relative;
    flex: 0 0 42%;
    max-width: 42%;
    background:
        radial-gradient(480px 300px at 120% 110%, rgba(255, 255, 255, .14), transparent 55%),
        linear-gradient(165deg, var(--af-green) 0%, var(--af-green-dark) 55%, var(--af-green-deep) 100%);
    color: #fff;
    padding: 44px 38px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.af-brand::before,
.af-brand::after {
    content: "";
    position: absolute;
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    pointer-events: none;
}
.af-brand::before { width: 280px; height: 280px; top: -100px; left: -80px; }
.af-brand::after  { width: 190px; height: 190px; bottom: -70px; left: 46px; }

.af-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    padding: 8px 14px;
}
.af-brand-logo img { height: 40px; width: auto; display: block; }
.af-brand-logo span { font-size: 15px; font-weight: bold; letter-spacing: .3px; }

.af-brand-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: bold;
    margin-top: 26px;
}

.af-brand-title {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.7;
    margin: 24px 0 10px;
    position: relative;
}
.af-brand-text {
    font-size: 14px;
    line-height: 2.1;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 26px;
    position: relative;
}

.af-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}
.af-features li { display: flex; align-items: center; gap: 14px; }
.af-feature-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.af-feature-body b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.af-feature-body span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

.af-brand-secure {
    margin-top: auto;
    padding-top: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    position: relative;
}

/* ---------- ستون فرم‌ها (سمت چپ) ---------- */
.af-form-side {
    flex: 1;
    min-width: 0;
    padding: 40px 46px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--af-white);
}
.af-form-head h2 { margin: 0 0 6px; font-size: 21px; font-weight: bold; }
.af-form-head p {
    margin: 0 0 22px;
    font-size: 13.5px;
    color: var(--af-gray-500);
    line-height: 1.9;
}

/* ---------- تب‌ها ---------- */
.af-tabs {
    display: flex;
    gap: 6px;
    background: var(--af-gray-100);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 24px;
}
.af-tab-btn {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: var(--af-gray-500);
    padding: 11px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}
.af-tab-btn:hover { color: var(--af-gray-900); }
.af-tab-btn.active {
    background: var(--af-white);
    color: var(--af-green);
    box-shadow: 0 4px 14px -4px rgba(8, 68, 52, .3);
}
.af-tab-btn p{
    margin: 0;
}

/* ---------- پن‌ها ---------- */
.af-pane { display: none; }
.af-pane.active { display: block; animation: afFade .3s ease; }
@keyframes afFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- فیلدها ---------- */
.af-field { margin-bottom: 16px; }
.af-label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: var(--af-gray-700);
    margin-bottom: 8px;
}
.af-input {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--af-gray-900);
    background: #f7f9f8;
    border: 1.5px solid var(--af-gray-300);
    border-radius: 12px;
    padding: 13px 16px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.af-input::placeholder { color: #a9b6b0; }
.af-input:focus {
    background: #fff;
    border-color: var(--af-green);
    box-shadow: 0 0 0 4px rgba(10, 154, 115, .12);
}
.af-input.ltr { direction: ltr; text-align: center; }
.af-input.otp {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 12px;
    padding: 12px 8px;
}

/* حذف فلش‌های input[type=number] */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.af-input.is-invalid {
    border-color: var(--af-danger);
    background: var(--af-danger-soft);
}
.af-field-error {
    display: none;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--af-danger);
    font-weight: bold;
}
.af-field-error.show { display: block; }

.af-alert-error {
    display: none;
    background: var(--af-danger-soft);
    border: 1px solid #f3c6c6;
    color: var(--af-danger);
    font-size: 13px;
    font-weight: bold;
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 16px;
}
.af-alert-error.show { display: block; }

/* خطای سرور (تب رمز عبور) */
.af-input-error-text {
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--af-danger);
    font-weight: bold;
}

/* ---------- دکمه‌ها ---------- */
.af-btn {
    display: block;
    width: 100%;
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, var(--af-green), var(--af-green-dark));
    border-radius: 12px;
    padding: 13px 18px;
    transition: filter .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 10px 22px -10px rgba(10, 154, 115, .55);
}
.af-btn:hover { filter: brightness(1.06); }
.af-btn:active { transform: translateY(1px); }
.af-btn:disabled { opacity: .65; cursor: not-allowed; }

.af-btn-ghost {
    display: block;
    width: 100%;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: var(--af-green);
    background: #fff;
    border: 1.5px solid var(--af-green);
    border-radius: 12px;
    padding: 11px 18px;
    transition: background .2s;
}
.af-btn-ghost:hover { background: var(--af-green-soft); }

.af-timer {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--af-gray-500);
    margin-bottom: 14px;
    min-height: 20px;
}
.af-timer b { color: var(--af-gray-900); }

.af-mt-10 { margin-top: 10px; }
.af-hidden { display: none !important; }

/* ---------- یادداشت‌ها ---------- */
.af-note-box {
    background: var(--af-green-softer);
    border: 1px solid #cdeadd;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 22px;
}
.af-note-box p {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--af-gray-700);
}
.af-note-box p:last-child { margin: 0; }
.af-note-box b { color: var(--af-gray-900); }
.af-note-box a { color: var(--af-green); font-weight: bold; text-decoration: none; }
.af-note-box a:hover { text-decoration: underline; }

.af-terms {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--af-gray-500);
}
.af-terms a { color: var(--af-green); font-weight: bold; text-decoration: none; }

.af-switch-link {
    margin-top: 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--af-gray-500);
}
.af-switch-link a { color: var(--af-green); font-weight: bold; cursor: pointer; text-decoration: none; }
.af-switch-link a:hover { text-decoration: underline; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 900px) {
    /* موبایل: فقط فرم، بدون ستون برندینگ و اضافات */
    .af-brand { display: none; }
    .af-card { max-width: 470px; border-radius: 20px; }
    .af-page { padding: 24px 14px; }
    .af-form-side { padding: 28px 22px 22px; }
    .af-form-head h2 { font-size: 18px; }
    .af-tabs { margin-bottom: 18px; }
}
@media (max-width: 400px) {
    .af-page { padding: 14px 10px; }
    .af-form-side { padding: 22px 14px 18px; }
    .af-tab-btn { font-size: 12.5px; padding: 10px 4px; }
    .af-input.otp { letter-spacing: 8px; }
}