/*
 * EM Auth - Frontend CSS
 * فارسی / RTL
 */

:root {
    --em-primary:        #1a5c3a;
    --em-primary-light:  #2d8055;
    --em-primary-dark:   #0f3d27;
    --em-accent:         #f0a500;
    --em-bg:             #f4f7f5;
    --em-card:           #ffffff;
    --em-text:           #1a2e24;
    --em-muted:          #6b8578;
    --em-border:         #d0e4d9;
    --em-input-bg:       #f8fbf9;
    --em-error:          #d93025;
    --em-success:        #1e7e44;
    --em-warning:        #e67e00;
    --em-radius:         16px;
    --em-radius-sm:      10px;
    --em-shadow:         0 8px 32px rgba(26,92,58,.10);
}

/* Generated by script */
@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ══════════════════════════════════════
   Layout
══════════════════════════════════════ */
.em-auth-wrap {
    display: grid;
    grid-template-columns: 1fr 420px;
    min-height: 100vh;
    direction: rtl;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    color: var(--em-text);
    background: var(--em-bg);
}

.em-auth-fullpage-body .em-auth-wrap {
    min-height: 100vh;
}

/* نمایش به صورت شورت‌کد */
.em-auth-wrap.shortcode-mode {
    grid-template-columns: 1fr;
    min-height: unset;
    box-shadow: var(--em-shadow);
    border-radius: var(--em-radius);
    overflow: hidden;
}

.em-auth-wrap.shortcode-mode .em-auth-panel-left {
    display: none;
}

/* ══════════════════════════════════════
   پنل چپ تزئینی
══════════════════════════════════════ */
.em-auth-panel-left {
    background: linear-gradient(145deg, var(--em-primary-dark) 0%, var(--em-primary) 50%, var(--em-primary-light) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}

.em-auth-panel-left::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
    top: -100px; right: -100px;
    border-radius: 50%;
}

.em-auth-brand-logo {
    width: 80px; height: 80px;
    background: rgba(255,255,255,.12);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2);
}

.em-auth-brand-logo svg { width: 40px; height: 40px; stroke: white; }

.em-auth-brand-title {
    color: #fff; font-size: 26px; font-weight: 800;
    text-align: center; margin-bottom: 10px;
}

.em-auth-brand-subtitle {
    color: rgba(255,255,255,.7); font-size: 14px;
    text-align: center; line-height: 1.8;
    max-width: 300px;
}

.em-auth-brand-features {
    margin-top: 40px;
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; max-width: 320px;
}

.em-auth-feature {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.08);
    border-radius: 12px; padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.1);
}

.em-auth-feature-icon {
    width: 34px; height: 34px;
    background: var(--em-accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.em-auth-feature-icon svg { width: 18px; height: 18px; stroke: white; }
.em-auth-feature span { color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500; }

/* ══════════════════════════════════════
   پنل راست: فرم‌ها
══════════════════════════════════════ */
.em-auth-panel-right {
    background: var(--em-card);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,.06);
    overflow-y: auto;
    scroll-padding-top: 0;
}

.em-auth-form-wrap {
    padding: 40px 36px;
    flex: 1;
}

/* ══════════════════════════════════════
   Alert
══════════════════════════════════════ */
.em-auth-alert {
    margin: 16px 36px 0;
    padding: 12px 16px;
    border-radius: var(--em-radius-sm);
    font-size: 13px;
    line-height: 1.7;
    border: 1px solid transparent;
    /* sticky در بالای پنل تا همیشه دیده شود */
    position: sticky;
    top: 0;
    z-index: 10;
}

.em-auth-alert.success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.em-auth-alert.error   { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.em-auth-alert.info    { background: #e8f4fd; border-color: #bee3f8; color: #1a5276; }

/* ══════════════════════════════════════
   تب‌ها
══════════════════════════════════════ */
.em-auth-tabs {
    display: flex;
    background: var(--em-bg);
    border-radius: var(--em-radius-sm);
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid var(--em-border);
}

.em-auth-tab {
    flex: 1; padding: 10px;
    text-align: center; font-size: 13px; font-weight: 600;
    cursor: pointer; border-radius: 8px;
    transition: all .2s; color: var(--em-muted);
}

.em-auth-tab.active {
    background: white; color: var(--em-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════
   Heading
══════════════════════════════════════ */
.em-auth-heading { text-align: center; margin-bottom: 26px;margin-top: 26px; }
.em-auth-heading h2 { font-size: 22px; font-weight: 800; color: var(--em-text); margin: 0 0 6px; }
.em-auth-heading p  { font-size: 13px; color: var(--em-muted); margin: 0; line-height: 1.7; }

/* ══════════════════════════════════════
   فیلدهای فرم
══════════════════════════════════════ */
.em-auth-form-group { margin-bottom: 16px; }
.em-auth-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.em-auth-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--em-text); margin-bottom: 7px;
}

.em-auth-label .req     { color: var(--em-error); }
.em-auth-optional       { color: var(--em-muted); font-weight: 400; font-size: 12px; }

.em-auth-input,
.em-auth-select,
.em-auth-textarea {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    font-size: 14px; font-family: inherit;
    background: var(--em-input-bg); color: var(--em-text);
    direction: rtl; transition: all .2s;
    outline: none; box-sizing: border-box;
}

.em-auth-input:focus,
.em-auth-select:focus,
.em-auth-textarea:focus {
    border-color: var(--em-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(26,92,58,.1);
}

.em-auth-input.has-error  { border-color: var(--em-error); background: #fff5f5; }
.em-auth-textarea         { resize: vertical; line-height: 1.7; }
.em-auth-select           {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b8578' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
}

.em-auth-input-wrap { position: relative; }

.em-auth-input-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none; opacity: .5;
}

.em-auth-input-icon svg { width: 18px; height: 18px; stroke: var(--em-text); }
.em-auth-input-wrap .em-auth-input { padding-left: 44px; }

.em-auth-pw-wrap { position: relative; }
.em-auth-pw-wrap .em-auth-input { padding-left: 44px; }

.em-auth-pw-toggle {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    padding: 4px; color: var(--em-muted);
}

.em-auth-pw-toggle svg { width: 18px; height: 18px; }

.em-auth-field-error {
    font-size: 12px; color: var(--em-error);
    margin-top: 5px; display: none;
}

.em-auth-field-error:not(:empty) { display: block; }

/* ══════════════════════════════════════
   OTP Inputs
══════════════════════════════════════ */
.em-auth-otp-inputs {
    display: flex; gap: 10px;
    justify-content: center;
    direction: ltr; margin: 18px 0;
}

.em-auth-otp-digit {
    width: 52px; height: 58px;
    border: 2px solid var(--em-border);
    border-radius: 12px; text-align: center;
    font-size: 22px; font-weight: 700;
    font-family: inherit; color: var(--em-primary-dark);
    background: var(--em-input-bg);
    outline: none; transition: all .2s;
    caret-color: var(--em-primary);
}

.em-auth-otp-digit:focus { border-color: var(--em-primary); background: white; box-shadow: 0 0 0 3px rgba(26,92,58,.1); }
.em-auth-otp-digit.filled { border-color: var(--em-primary); background: rgba(26,92,58,.05); }

.em-auth-otp-timer { text-align: center; font-size: 13px; color: var(--em-muted); }
.em-auth-otp-timer span { color: var(--em-primary); font-weight: 700; }
.em-auth-otp-resend { text-align: center; margin-top: 8px; font-size: 13px; }

/* ══════════════════════════════════════
   دکمه‌ها
══════════════════════════════════════ */
.em-auth-btn-primary {
    display: block; width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--em-primary), var(--em-primary-light));
    color: white; border: none; border-radius: var(--em-radius-sm);
    font-size: 15px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all .2s; margin-top: 8px;
}

.em-auth-btn-primary:hover   { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,92,58,.35); }
.em-auth-btn-primary:active  { transform: translateY(0); }
.em-auth-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.em-auth-btn-text {
    background: none; border: none; color: var(--em-primary);
    font-size: 13px; font-family: inherit;
    cursor: pointer; font-weight: 600; padding: 0;
}

.em-auth-back-btn { display: block; text-align: center; margin-top: 12px; }

/* ══════════════════════════════════════
   اطلاعات تکمیلی
══════════════════════════════════════ */
.em-auth-info-box {
    display: flex; align-items: flex-start; gap: 10px;
    background: #e8f4fd; border: 1px solid #bee3f8;
    border-radius: var(--em-radius-sm);
    padding: 12px 16px; margin-bottom: 16px;
    font-size: 13px; color: #1a5276; line-height: 1.7;
}

.em-auth-info-box svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.em-auth-phone-badge {
    background: rgba(26,92,58,.06);
    border: 1px solid rgba(26,92,58,.15);
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}

.em-auth-phone-badge .em-auth-phone-num { font-size: 16px; font-weight: 700; direction: ltr; color: var(--em-primary-dark); }

/* ══════════════════════════════════════
   آپلود
══════════════════════════════════════ */
.em-auth-upload-guide {
    background: linear-gradient(135deg, #fffbf0, #fff8e8);
    border: 1px solid #ffe4a0;
    border-radius: var(--em-radius-sm);
    padding: 16px; margin-bottom: 14px;
}

.em-auth-upload-guide-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #7a4f00; margin-bottom: 10px;
}

.em-auth-upload-guide-title svg { width: 18px; height: 18px; stroke: #7a4f00; }

.em-auth-upload-guide-text {
    font-size: 12px; color: #7a4f00; line-height: 1.8; margin-bottom: 10px;
}

.em-auth-upload-guide-sample img {
    max-width: 100%; max-height: 120px;
    border-radius: 8px; border: 1px solid #e0b060;
}

.em-auth-upload-zone {
    border: 2px dashed var(--em-border);
    border-radius: var(--em-radius-sm);
    padding: 28px 20px; text-align: center;
    cursor: pointer; transition: all .2s; background: var(--em-input-bg);
    position: relative;
}

.em-auth-upload-zone:hover,
.em-auth-upload-zone.dragging { border-color: var(--em-primary); background: rgba(26,92,58,.03); }
.em-auth-upload-zone.has-file { border-color: var(--em-success); }

.em-auth-upload-placeholder svg { width: 36px; height: 36px; stroke: var(--em-muted); margin-bottom: 8px; }
.em-auth-upload-placeholder p   { font-size: 13px; color: var(--em-muted); margin: 0 0 4px; }
.em-auth-upload-placeholder strong { color: var(--em-primary); }
.em-auth-upload-placeholder span { font-size: 12px; color: var(--em-muted); }

.em-auth-upload-preview { position: relative; display: inline-block; }
.em-auth-upload-preview img { max-width: 120px; max-height: 100px; border-radius: 10px; border: 2px solid var(--em-success); }
.em-auth-upload-remove {
    position: absolute; top: -8px; left: -8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--em-error); color: white;
    border: none; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}

.em-auth-upload-zone-sm { padding: 16px; }

/* ══════════════════════════════════════
   نشانگر مراحل
══════════════════════════════════════ */
.em-auth-progress {
    height: 3px; background: var(--em-border);
    border-radius: 2px; margin-bottom: 28px; overflow: hidden;
}

.em-auth-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--em-primary), var(--em-accent));
    border-radius: 2px; transition: width .4s ease;
}

.em-auth-steps {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
}

.em-auth-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.em-auth-step-circle {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid var(--em-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--em-muted);
    background: white; transition: all .3s; z-index: 1;
}

.em-auth-step-circle svg { width: 16px; height: 16px; }

.em-auth-step.done  .em-auth-step-circle { background: var(--em-success); border-color: var(--em-success); color: white; }
.em-auth-step.active .em-auth-step-circle { background: var(--em-primary); border-color: var(--em-primary); color: white; box-shadow: 0 0 0 4px rgba(26,92,58,.15); }

.em-auth-step-label    { font-size: 11px; color: var(--em-muted); white-space: nowrap; }
.em-auth-step.active .em-auth-step-label { color: var(--em-primary); font-weight: 700; }
.em-auth-step.done .em-auth-step-label   { color: var(--em-success); }

.em-auth-step-line { width: 44px; height: 2px; background: var(--em-border); margin-bottom: 18px; transition: background .3s; }
.em-auth-step-line.done { background: var(--em-success); }

/* ══════════════════════════════════════
   Footer link
══════════════════════════════════════ */
.em-auth-footer-link {
    text-align: center; font-size: 13px; color: var(--em-muted);
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--em-border);
}

.em-auth-footer-link a { color: var(--em-primary); font-weight: 700; text-decoration: none; }
.em-auth-forgot-link { text-align: left; margin-bottom: 16px; margin-top: -8px; }

.em-auth-checkbox-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--em-muted); cursor: pointer;
    margin-bottom: 6px;
}

/* ══════════════════════════════════════
   صفحه وضعیت کاربر
══════════════════════════════════════ */
.em-auth-status-wrap { padding: 0; }

.em-auth-status-banner {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px; border-radius: var(--em-radius-sm);
    margin-bottom: 20px; border: 1px solid transparent;
}

.em-auth-status-banner svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.em-auth-status-banner strong { display: block; margin-bottom: 4px; font-size: 14px; }
.em-auth-status-banner p  { margin: 0; font-size: 13px; line-height: 1.7; }

.em-auth-status-banner.approved { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.em-auth-status-banner.approved svg { stroke: #14532d; }
.em-auth-status-banner.info { background: #e8f4fd; border-color: #bee3f8; color: #1a5276; }
.em-auth-status-banner.info svg { stroke: #1a5276; }
.em-auth-status-banner.warning { background: #fffbeb; border-color: #fde68a; color: #7c2d12; }
.em-auth-status-banner.warning svg { stroke: #7c2d12; }

.em-auth-status-cards { display: flex; flex-direction: column; gap: 12px; }

.em-auth-status-card {
    border: 1.5px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    padding: 16px; background: white;
    transition: border-color .2s;
}

.em-auth-status-card.approved { border-color: #bbf7d0; background: #f0fdf4; }
.em-auth-status-card.rejected { border-color: #fecaca; background: #fef2f2; }

.em-auth-status-card-header {
    display: flex; align-items: center; gap: 14px;
}

.em-auth-status-card-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    background: rgba(26,92,58,.08);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}

.em-auth-status-card-icon svg { width: 22px; height: 22px; stroke: var(--em-primary); }
.em-auth-status-card.approved .em-auth-status-card-icon { background: rgba(30,126,68,.1); }
.em-auth-status-card.approved .em-auth-status-card-icon svg { stroke: var(--em-success); }
.em-auth-status-card.rejected .em-auth-status-card-icon { background: rgba(217,48,37,.1); }
.em-auth-status-card.rejected .em-auth-status-card-icon svg { stroke: var(--em-error); }

.em-auth-status-card-info { flex: 1; }
.em-auth-status-card-title { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.em-auth-status-card-value { font-size: 13px; color: var(--em-muted); }

.em-auth-badge {
    font-size: 11px; font-weight: 700; padding: 4px 12px;
    border-radius: 20px; white-space: nowrap;
}

.em-auth-badge.pending  { background: #fde68a; color: #7c2d12; }
.em-auth-badge.approved { background: #bbf7d0; color: #14532d; }
.em-auth-badge.rejected { background: #fecaca; color: #7f1d1d; }
.em-auth-badge.not-sent { background: #e5e7eb; color: #374151; }

.em-auth-status-rejection-reason {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 12px; padding: 12px;
    background: rgba(217,48,37,.06); border-radius: 8px;
    font-size: 13px; color: #7f1d1d; line-height: 1.7;
}

.em-auth-status-rejection-reason svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.em-auth-image-thumb img { width: 60px; height: 50px; object-fit: cover; border-radius: 8px; border: 2px solid var(--em-border); }

/* ══════════════════════════════════════
   Responsive
══════════════════════════════════════ */
@media (max-width: 800px) {
    .em-auth-wrap {
        grid-template-columns: 1fr;
    }

    .em-auth-panel-left {
        display: none;
    }

    .em-auth-form-wrap {
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .em-auth-form-row { grid-template-columns: 1fr; }
    .em-auth-otp-digit { width: 44px; height: 50px; font-size: 18px; }
}