/* ════════════════════════════════════════
   modal.css — مودال احراز هویت و toast
   ════════════════════════════════════════ */

/* ─── Overlay ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.show { opacity: 1; pointer-events: all; }

/* ─── کارت مودال ─── */
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  padding: 32px;
  width: 360px; max-width: 90vw;
  animation: slideUp 0.25s ease;
}

.modal-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.modal-logo-icon {
  width: 36px; height: 36px;
  background: var(--text-primary); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.modal-logo-icon i { font-size: 20px; color: #000; }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ─── تب‌های مودال ─── */
.modal-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.modal-tab {
  flex: 1; text-align: center; padding: 10px;
  font-size: 13px; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.modal-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* ─── فرم‌ها ─── */
.form-group  { margin-bottom: 14px; }
.form-label  { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; display: block; }
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 14px;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  outline: none; direction: rtl; transition: border-color 0.15s;
}
.form-input:focus        { border-color: var(--border-hover); }
.form-input::placeholder { color: var(--text-muted); }

.form-btn {
  width: 100%;
  background: var(--text-primary); color: #000;
  border: none; border-radius: 9px;
  padding: 11px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s; margin-top: 6px;
}
.form-btn:hover    { opacity: 0.85; }
.form-btn:disabled { opacity: 0.4; cursor: default; }

/* ─── پیام‌های خطا / موفق ─── */
.modal-err {
  background: rgba(224,92,92,0.1);
  border: 1px solid rgba(224,92,92,0.2);
  color: var(--danger);
  border-radius: 8px; padding: 9px 12px;
  font-size: 12px; margin-bottom: 14px; display: none;
}
.modal-err.show { display: block; }

.modal-ok {
  background: rgba(76,175,134,0.1);
  border: 1px solid rgba(76,175,134,0.2);
  color: var(--success);
  border-radius: 8px; padding: 9px 12px;
  font-size: 12px; margin-bottom: 14px; display: none;
}
.modal-ok.show { display: block; }

/* ─── OTP ─── */
.otp-inputs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.otp-digit {
  width: 48px; height: 52px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px; text-align: center;
  font-size: 22px; font-weight: 700;
  color: var(--text-primary); font-family: monospace;
  outline: none; transition: border-color 0.15s;
}
.otp-digit:focus { border-color: var(--border-hover); }

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  color: var(--text-primary); border-radius: 10px;
  padding: 10px 18px; font-size: 13px;
  z-index: 2000; opacity: 0; pointer-events: none;
  transition: all 0.3s; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { border-color: rgba(224,92,92,0.4); background: rgba(20,10,10,0.95); }