/* =====================================================
   Venus Dashboard — Auth CSS
   RTL — بدون font-family — ارث‌بری از قالب
   ===================================================== */

.vud-auth-wrap *, .vud-auth-wrap *::before, .vud-auth-wrap *::after {
    box-sizing: border-box;
}

/* ─── Wrapper ─────────────────────────────────────── */
.vud-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 50vh;
    padding: 32px 16px;
    padding-top: calc(32px + var(--vud-sticky-header, 0px));
    direction: rtl;
    text-align: right;
}

/* ─── Box ─────────────────────────────────────────── */
.vud-auth-box {
    width: 100%;
    max-width: 420px;
    background: var(--vud-card-bg, #fff);
    border-radius: var(--vud-radius-lg, 16px);
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    overflow: hidden;
    direction: rtl;
}

/* ─── هدر — لوگو وسط ──────────────────────────────── */
.vud-auth-header {
    padding: 24px 28px 18px;
    text-align: center;
    border-bottom: 1px solid var(--vud-input-border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vud-auth-logo {
    max-height: 48px;
    max-width: 160px;
    display: block;
    margin: 0 auto;
}

.vud-auth-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--vud-primary, #6c5ce7);
    text-align: center;
}

/* ─── Progress ────────────────────────────────────── */
.vud-auth-progress {
    height: 3px;
    background: var(--vud-input-border, #e2e8f0);
}
.vud-auth-progress-bar {
    height: 100%;
    background: var(--vud-primary, #6c5ce7);
    transition: width .4s ease;
}

/* ─── Step ────────────────────────────────────────── */
.vud-step {
    padding: 22px 28px 26px;
    direction: rtl;
    text-align: right;
}

.vud-step-header {
    margin-bottom: 18px;
    position: relative;
    text-align: right;
    /* فضا برای دکمه برگشت سمت چپ در RTL */
    padding-left: 36px;
}

.vud-step-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--vud-text, #1e293b) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.3 !important;
    text-align: right !important;
    direction: rtl !important;
}

/* در step موفقیت، وسط‌چین */
#vud-step-success .vud-step-title,
#vud-step-success .vud-step-desc {
    text-align: center !important;
}

.vud-step-desc {
    font-size: 13px;
    color: var(--vud-muted, #64748b);
    margin: 0;
    line-height: 1.6;
    text-align: right;
    direction: rtl;
}

.vud-step-desc strong { color: var(--vud-text, #1e293b); }

/* ─── Back button ─────────────────────────────────── */
.vud-back-btn {
    position: absolute;
    left: 0; top: 2px;
    background: none; border: none;
    cursor: pointer; padding: 6px;
    color: var(--vud-muted, #64748b);
    border-radius: 8px; line-height: 1;
    transition: color .18s, background .18s, transform .18s;
    display: flex; align-items: center; justify-content: center;
}
.vud-back-btn:hover {
    color: var(--vud-primary, #6c5ce7);
    background: rgba(108,92,231,.08);
    transform: translateX(2px);
}
/* tooltip */
.vud-back-btn::after {
    content: 'مرحله قبل';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,27,75,.88);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    direction: rtl;
}
.vud-back-btn:hover::after {
    opacity: 1;
}

/* ─── Fields ──────────────────────────────────────── */
.vud-field-group {
    margin-bottom: 12px;
    direction: rtl;
}

.vud-field-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vud-input-wrap { position: relative; }

.vud-field {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 14px;
    border: 1.5px solid var(--vud-input-border, #e2e8f0);
    border-radius: var(--vud-radius, 12px);
    font-size: 14px;
    color: var(--vud-input-text, #1e293b);
    background: var(--vud-card-bg, #fff);
    transition: border-color .2s, box-shadow .2s;
    direction: rtl;
    text-align: right;
    outline: none;
}

/* فیلدهایی که دکمه نمایش/مخفی رمز دارند — دکمه سمت چپ است، پس فضای خالی هم باید سمت چپ باشد */
.vud-field--has-toggle {
    padding: 0 14px 0 42px;
}

.vud-field:focus {
    border-color: var(--vud-primary, #6c5ce7);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vud-primary,#6c5ce7) 12%, transparent);
}

.vud-field::placeholder {
    color: var(--vud-muted, #94a3b8);
    font-size: 13px;
    text-align: right;
}

.vud-field-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px; line-height: 1;
    pointer-events: none;
    color: var(--vud-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vud-eye-btn {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer;
    color: var(--vud-muted, #64748b);
    padding: 4px; line-height: 1;
    transition: color .2s;
}
.vud-eye-btn:hover { color: var(--vud-primary, #6c5ce7); }

/* ─── Errors ──────────────────────────────────────── */
.vud-field-error {
    font-size: 12px;
    color: #dc2626;
    margin-top: 5px;
    display: none;
    text-align: right;
    direction: rtl;
}

/* ─── Email suggest ───────────────────────────────── */
.vud-email-suggest {
    font-size: 12px;
    color: var(--vud-muted, #64748b);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 7px 12px;
    margin-top: 7px;
    direction: rtl;
    text-align: right;
}

.vud-email-domain-hint {
    font-size: 12px;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    direction: rtl;
    text-align: right;
}
.vud-hint-ok    { color: #16a34a; background: #f0fdf4; }
.vud-hint-warn  { color: #d97706; background: #fffbeb; }
.vud-hint-error { color: #dc2626; background: #fef2f2; }

/* ─── OTP — LTR داخلی ────────────────────────────── */
.vud-otp-inputs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 18px 0;
    direction: ltr; /* کادرهای OTP همیشه LTR */
}

.vud-otp-box {
    width: 46px; height: 54px;
    border: 1.5px solid var(--vud-input-border, #e2e8f0);
    border-radius: var(--vud-radius, 12px);
    font-size: 22px; font-weight: 700;
    text-align: center;
    color: var(--vud-primary, #6c5ce7);
    background: var(--vud-bg, #f8f9fa);
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
    caret-color: var(--vud-primary, #6c5ce7);
    direction: ltr;
}

.vud-otp-box:focus {
    border-color: var(--vud-primary, #6c5ce7);
    background: var(--vud-card-bg, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vud-primary,#6c5ce7) 12%, transparent);
}

.vud-otp-box:not(:placeholder-shown):not(:focus) {
    border-color: var(--vud-secondary, #a29bfe);
    background: var(--vud-card-bg, #fff);
}

@keyframes vud-shake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}
.vud-shake { animation: vud-shake .4s ease; }

/* ─── Timer ───────────────────────────────────────── */
.vud-resend-wrap {
    text-align: center;
    margin-top: 12px;
    direction: rtl;
}
.vud-resend-timer { font-size: 12px; color: var(--vud-muted, #64748b); }
#vud-timer-count {
    font-weight: 700;
    color: var(--vud-primary, #6c5ce7);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    display: inline-block;
}

.vud-otp-fallback {
    text-align: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--vud-input-border, #e2e8f0);
    font-size: 12px;
    color: var(--vud-muted, #64748b);
}

/* ─── User card ───────────────────────────────────── */
.vud-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    direction: rtl;
}
.vud-user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--vud-secondary, #a29bfe);
}
.vud-user-name {
    font-size: 14px; font-weight: 600;
    color: var(--vud-text, #1e293b);
}

/* ─── Buttons ─────────────────────────────────────── */
.vud-btn {
    width: 100%; height: 46px;
    border: none;
    border-radius: var(--vud-radius, 12px);
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    transition: opacity .2s, transform .1s;
    outline: none; margin-top: 4px;
    direction: rtl;
}
.vud-btn:hover:not(:disabled):not(.vud-btn-soft-disabled) { opacity: .88; }
.vud-btn:active:not(:disabled):not(.vud-btn-soft-disabled) { transform: scale(.98); }
.vud-btn:disabled { opacity: .55; cursor: not-allowed; }
.vud-btn-soft-disabled { opacity: .45; cursor: not-allowed; }
.vud-btn-primary { background: var(--vud-primary, #6c5ce7); color: #fff; }

.vud-btn-loader {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vud-spin .7s linear infinite;
}
@keyframes vud-spin { to { transform: rotate(360deg); } }

/* ─── Links ───────────────────────────────────────── */
.vud-link-btn {
    background: none; border: none;
    color: var(--vud-primary, #6c5ce7);
    cursor: pointer; font-size: 13px; font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .2s;
}
.vud-link-btn:hover { text-decoration-color: currentColor; }

.vud-forgot-link {
    display: inline-block; font-size: 12px;
    color: var(--vud-muted, #64748b);
    text-decoration: underline;
    text-decoration-color: transparent;
    background: none; border: none; cursor: pointer;
    padding: 0; margin-top: 6px;
    text-align: left;
    transition: color .2s;
}
.vud-forgot-link:hover { color: var(--vud-primary, #6c5ce7); text-decoration-color: currentColor; }

/* گزینه ورود با رمز (از صفحه identify) */
.vud-alt-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--vud-muted, #64748b);
}
.vud-alt-sep {
    padding: 0 4px;
}

.vud-hint {
    font-size: 11px;
    color: var(--vud-muted, #64748b);
    margin: 4px 0 0;
    text-align: right;
    direction: rtl;
}

/* ─── Success ─────────────────────────────────────── */
.vud-success-icon {
    width: 60px; height: 60px;
    background: #f0fdf4; border: 2px solid #86efac;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #16a34a;
    margin: 8px auto 16px;
    animation: vud-pop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes vud-pop {
    0%  { transform: scale(.5); opacity: 0; }
    100%{ transform: scale(1);  opacity: 1; }
}

/* ─── Dark theme ──────────────────────────────────── */
[data-theme="dark"] .vud-auth-box     { background: #1a1a2e; }
[data-theme="dark"] .vud-step-title   { color: #e2e8f0 !important; }
[data-theme="dark"] .vud-step-desc    { color: #8892b0; }
[data-theme="dark"] .vud-field        { background: #0f0e17; border-color: #2d2d4e; color: #ccd6f6; }
[data-theme="dark"] .vud-otp-box      { background: #0f0e17; border-color: #2d2d4e; }
[data-theme="dark"] .vud-auth-header  { border-color: #2d2d4e; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
    body.vud-auth-page .vud-auth-wrap { padding: 0; align-items: stretch; min-height: 100svh; }
    body.vud-auth-page .vud-auth-box  { border-radius: 0; box-shadow: none; min-height: 100svh; }
    .vud-step       { padding: 18px 20px 22px; }
    .vud-otp-box    { width: 40px; height: 48px; font-size: 18px; }
    .vud-otp-inputs { gap: 6px; }
    .vud-field-row-2{ grid-template-columns: 1fr; }
    .vud-field      { height: 44px; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .vud-auth-wrap { padding: 20px 16px; }
}

/* ─── عنوان گروه فیلدهای سفارشی در ثبت‌نام ───────── */
.vud-register-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--vud-muted,#64748b);
    margin: 16px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--vud-input-border,#e2e8f0);
}
.vud-register-group-title:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* ─── فیلدهای فرم مشترک (استفاده‌شده در VUD_Fields_Provider) ─── */
.vud-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.vud-form-group--full { grid-column: 1 / -1; }

.vud-form-label { font-size: 12px; font-weight: 600; color: var(--vud-muted,#475569); }
.vud-required { color: #ef4444; }

.vud-form-input {
    height: 44px; padding: 0 12px;
    border: 1.5px solid var(--vud-input-border,#e2e8f0);
    border-radius: var(--vud-radius,10px);
    font-size: 13px;
    color: var(--vud-input-text,#1e293b);
    background: var(--vud-card-bg,#fff);
    transition: border-color .2s, box-shadow .2s;
    direction: rtl; text-align: right; outline: none;
    width: 100%;
}
.vud-form-input:focus {
    border-color: var(--vud-primary,#6c5ce7);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vud-primary,#6c5ce7) 10%, transparent);
}
.vud-form-textarea { height: 80px; padding: 8px 12px; resize: vertical; }

.vud-form-select {
    height: 44px; padding: 0 12px;
    border: 1.5px solid var(--vud-input-border,#e2e8f0);
    border-radius: var(--vud-radius,10px);
    font-size: 13px;
    color: var(--vud-input-text,#1e293b);
    background: var(--vud-card-bg,#fff);
    outline: none; width: 100%; cursor: pointer;
}
.vud-form-select:focus { border-color: var(--vud-primary,#6c5ce7); }

.vud-checkbox-group, .vud-radio-group { display: flex; flex-direction: column; gap: 6px; }
.vud-checkbox-label, .vud-radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--vud-text,#1e293b); }

/* ─── فیلد با دکمه عملیات (تغییر موبایل/ایمیل) ──── */
.vud-field-with-action { display: flex; gap: 8px; align-items: center; }
.vud-field-with-action .vud-form-input { flex: 1; background: var(--vud-bg,#f8fafc); color: var(--vud-muted,#64748b); }
.vud-field-with-action .vud-btn-sm { flex-shrink: 0; white-space: nowrap; }

/* ─── Field validation states ─────────────────────── */
.vud-field-ok {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22,163,74,.12) !important;
}
.vud-field-err {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220,38,38,.12) !important;
}
.vud-field-inline-error {
    font-size: 11px;
    color: #dc2626;
    margin-top: 4px;
    padding-right: 2px;
}

/* دکمه ثبت‌نام وقتی غیرفعاله */
#vud-register-btn:disabled {
    cursor: not-allowed;
}

/* menu item sub row */
.vud-menu-item-fields { flex: 1; min-width: 0; }
.vud-menu-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.vud-menu-item-row--sub {
    background: rgba(0,0,0,.02);
    border: 1px dashed rgba(0,0,0,.1);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    margin-bottom: 0;
}
.vud-label-sm {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}
.vud-menu-slug { direction: ltr; text-align: left; width: 130px !important; }
.vud-menu-content-value { flex: 1; min-width: 120px; direction: ltr; text-align: left; }

/* mobile responsive داشبورد */
@media (max-width: 768px) {
    .vud-layout {
        flex-direction: column;
    }
    .vud-sidebar {
        width: 100%;
        height: auto;
        min-height: unset;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .vud-sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 6px;
        gap: 4px;
    }
    .vud-nav-item {
        flex-direction: column;
        padding: 8px 10px;
        font-size: 11px;
        gap: 4px;
        flex-shrink: 0;
    }
    .vud-nav-label { text-align: center; }
    .vud-sidebar-brand, .vud-sidebar-user,
    .vud-sidebar-alert, .vud-sidebar-footer { display: none; }
    .vud-main { padding: 12px; }
    .vud-welcome-banner { padding: 14px 16px; gap: 10px; }
    .vud-welcome-avatar img { width: 44px; height: 44px; }
    .vud-welcome-text h2 { font-size: 15px !important; }
}