/*
  EZ-Login Front Styles v1.7.4
  Presets: modern | minimal | glass | dark | aurora | soft
*/

/* ===================== Reset ===================== */
.ez-login-form,
.ez-login-form * { box-sizing: border-box; }
.ez-login-form [hidden] { display: none !important; }

/* ===================== Variables ===================== */
.ez-login-form {
  --ez-card:        #ffffff;
  --ez-bg:          #f8fafc;
  --ez-soft:        rgba(15,23,42,.05);
  --ez-border:      rgba(15,23,42,.10);
  --ez-text:        #0f172a;
  --ez-muted:       #64748b;
  --ez-primary:     #2563eb;
  --ez-primary-h:   var(--ez-primary);
  --ez-primary-fg:  #ffffff;
  --ez-danger:      #dc2626;
  --ez-success:     #16a34a;
  --ez-radius:      18px;
  --ez-shadow:      0 20px 64px rgba(2,6,23,.13), 0 4px 18px rgba(2,6,23,.07);
  --ez-ring:        rgba(37,99,235,.25);
  --ez-input-focus-bg: var(--ez-input-bg);
  --ez-method-bg:   var(--ez-soft);
  --ez-method-active-bg: var(--ez-card);
  --ez-btn-bg:      var(--ez-primary);
  --ez-btn-border:  var(--ez-primary);
  --ez-btn-fg:      var(--ez-primary-fg);
  --ez-btn-hover-bg: var(--ez-primary-h);
  --ez-btn-hover-fg: var(--ez-primary-fg);
  --ez-input-bg:    #f8fafc;
  --ez-input-bd:    rgba(15,23,42,.12);
  --ez-top-bar:     var(--ez-primary);

  /* Auth tabs */
  --ez-auth-tabs-bg:       transparent;
  --ez-auth-tab-border:    var(--ez-border);
  --ez-auth-tab-fg:        var(--ez-muted);
  --ez-auth-tab-bg:        transparent;
  --ez-auth-tab-active-fg: var(--ez-primary);
  --ez-auth-tab-active-bg: transparent;
  --ez-auth-indicator:     var(--ez-primary);

  /* Method tabs */
  --ez-method-border:        var(--ez-border);
  --ez-method-fg:            var(--ez-muted);
  --ez-method-hover-fg:      var(--ez-text);
  --ez-method-active-fg:     var(--ez-primary);
  --ez-google-tab-active-fg: #ea4335;

  /* Fields */
  --ez-label-fg:        var(--ez-text);
  --ez-required-fg:     var(--ez-danger);
  --ez-input-fg:        var(--ez-text);
  --ez-placeholder-fg:  var(--ez-muted);
  --ez-phone-flag-bg:   var(--ez-soft);
  --ez-phone-flag-bd:   var(--ez-border);
  --ez-input-hover-bg:  var(--ez-input-focus-bg);
  --ez-input-hover-bd:  var(--ez-primary);
  --ez-input-focus-bd:  var(--ez-primary);

  /* Buttons */
  --ez-btn-hover-border: var(--ez-btn-hover-bg);
  --ez-ghost-bg:         var(--ez-soft);
  --ez-ghost-fg:         var(--ez-text);
  --ez-ghost-bd:         var(--ez-border);
  --ez-ghost-hover-bg:   var(--ez-card);
  --ez-ghost-hover-fg:   var(--ez-text);
  --ez-ghost-hover-bd:   var(--ez-border);
  --ez-google-bg:        var(--ez-card);
  --ez-google-fg:        var(--ez-text);
  --ez-google-bd:        var(--ez-border);
  --ez-google-hover-bg:  var(--ez-card);
  --ez-google-hover-fg:  var(--ez-text);
  --ez-google-hover-bd:  var(--ez-border);
  --ez-google-hint-fg:   var(--ez-muted);

  /* Feedback and register box */
  --ez-info-fg:     #064e3b;
  --ez-info-bg:     rgba(22,163,74,.07);
  --ez-info-bd:     rgba(22,163,74,.15);
  --ez-error-fg:    #7f1d1d;
  --ez-error-bg:    rgba(220,38,38,.08);
  --ez-error-bd:    rgba(220,38,38,.15);
  --ez-timer-fg:    var(--ez-muted);
  --ez-timer-bg:    var(--ez-soft);
  --ez-badge-fg:    var(--ez-text);
  --ez-badge-bg:    rgba(0,145,109,.07);
  --ez-badge-bd:    rgba(0,145,109,.20);
  --ez-register-bg: var(--ez-soft);
  --ez-register-bd: var(--ez-border);

  --ez-font:        inherit;

  width: 100%;
  max-width: 480px;
  direction: rtl;
  text-align: right;
  font-family: var(--ez-font);
  background: var(--ez-card);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  box-shadow: var(--ez-shadow);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* ===================== Gradient top bar ===================== */
.ez-login-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ez-top-bar) 0%, var(--ez-primary-h) 100%);
  z-index: 2;
}

/* ===================== Inner padding ===================== */
.ez-login-form > * { padding: 0 22px; }
.ez-login-form > *:first-child { padding-top: 22px; }
.ez-login-form > *:last-child  { padding-bottom: 22px; }

/* ===================== Honeypot ===================== */
.ez-hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ===================== Auth tabs (ورود / ثبت‌نام) ===================== */
.ez-auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ez-auth-tab-border);
  margin-bottom: 0;
  padding: 0 !important;
  background: var(--ez-auth-tabs-bg);
}

.ez-auth-tab {
  flex: 1;
  border: 0;
  background: var(--ez-auth-tab-bg);
  color: var(--ez-auth-tab-fg);
  font-family: var(--ez-font);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: color .16s;
}

.ez-auth-tab::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--ez-auth-indicator);
  transform: scaleX(0);
  transition: transform .2s ease;
  border-radius: 2px 2px 0 0;
}

.ez-auth-tab.is-active { color: var(--ez-auth-tab-active-fg); background: var(--ez-auth-tab-active-bg); }
.ez-auth-tab.is-active::after { transform: scaleX(1); }

/* ===================== Auth panels ===================== */
.ez-auth-panel { padding: 0 22px 22px; }
.ez-auth-panel.is-active { display: block; }
.ez-auth-panel[hidden]   { display: none !important; }
.ez-auth-panel--single   { padding: 22px; }

/* ===================== Method tabs (پیامک / گوگل) ===================== */
.ezf-method-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--ez-method-bg);
  border: 1px solid var(--ez-method-border);
  margin: 18px 0 18px;
}

.ezf-method-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--ez-method-fg);
  font-family: var(--ez-font);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .17s ease;
  white-space: nowrap;
}

.ezf-method-tab:hover { color: var(--ez-method-hover-fg); }

.ezf-method-tab.is-active {
  background: var(--ez-method-active-bg);
  color: var(--ez-method-active-fg);
  box-shadow: 0 3px 12px rgba(2,6,23,.10);
  font-weight: 800;
}

/* SMS active: رنگ اصلی */
.ezf-method-tab.is-active[data-ezf-tab="sms"] { color: var(--ez-method-active-fg); }
/* Google active */
.ezf-method-tab.is-active[data-ezf-tab="google"] { color: var(--ez-google-tab-active-fg); }

.ezf-method-panel[hidden] { display: none !important; }


/* ===================== Field group ===================== */
.ezf-field-group { margin: 0 0 14px; }

.ezf-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ez-label-fg);
  margin-bottom: 7px;
  letter-spacing: -.1px;
}

.ezf-req { color: var(--ez-required-fg); font-weight: 900; margin-right: 2px; }

/* ===================== Phone wrap ===================== */
.ezf-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ez-input-bg);
  border: 1.5px solid var(--ez-input-bd);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.ezf-phone-wrap:hover { border-color: var(--ez-input-hover-bd); background: var(--ez-input-hover-bg); }

.ezf-phone-wrap:focus-within {
  border-color: var(--ez-input-focus-bd);
  box-shadow: 0 0 0 4px var(--ez-ring);
  background: var(--ez-input-focus-bg);
}

.ezf-phone-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
  border-left: 1.5px solid var(--ez-phone-flag-bd); /* RTL: left in ltr = right in rtl */
  height: 100%;
  background: var(--ez-phone-flag-bg);
  flex-shrink: 0;
  /* In RTL, the flag should be on the right side */
  order: 2;
  border-left: none;
  border-right: 1.5px solid var(--ez-phone-flag-bd);
}


.ezf-phone-flag-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15,23,42,.10);
}
.ezf-phone-flag-svg svg { display: block; width: 28px; height: 19px; }

.ezf-phone-wrap input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 13px 14px !important;
  font-size: 15px;
  color: var(--ez-input-fg);
  outline: none;
  direction: ltr;
  text-align: right;
  font-family: var(--ez-font);
}

.ezf-phone-wrap input::placeholder { color: var(--ez-placeholder-fg); opacity: .72; direction: rtl; text-align: right; }

/* ===================== Generic input ===================== */
.ezf-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ez-input-bd);
  border-radius: 12px;
  background: var(--ez-input-bg);
  color: var(--ez-input-fg);
  font-size: 15px;
  font-family: var(--ez-font);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.ezf-input:hover:not(:focus) { border-color: var(--ez-input-hover-bd); background: var(--ez-input-hover-bg); }

.ezf-input:focus {
  border-color: var(--ez-input-focus-bd);
  background: var(--ez-input-focus-bg);
  box-shadow: 0 0 0 4px var(--ez-ring);
}

.ezf-input::placeholder { color: var(--ez-placeholder-fg); opacity: .72; }

/* OTP input */
.ezf-otp-input {
  text-align: center;
  font-size: 22px !important;
  letter-spacing: 6px;
  font-weight: 700;
  direction: ltr;
}

/* ===================== Register fields ===================== */
.ez-login-register-fields {
  margin: 14px 0;
  padding: 14px;
  border: 1.5px dashed var(--ez-register-bd);
  border-radius: 12px;
  background: var(--ez-register-bg);
}

.ez-login-register-fields .ezf-field-group { margin-bottom: 12px; }
.ez-login-register-fields .ezf-field-group:last-of-type { margin-bottom: 0; }

/* ===================== Sent badge ===================== */
.ezf-sent-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ez-badge-bg);
  border: 1px solid var(--ez-badge-bd);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ez-badge-fg);
  margin-bottom: 16px;
}
.ezf-sent-badge svg { stroke: currentColor !important; }

/* ===================== Buttons ===================== */
.ezf-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 2px solid var(--ez-btn-border);
  background: var(--ez-btn-bg);
  color: var(--ez-btn-fg);
  font-family: var(--ez-font);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .13s, box-shadow .15s, filter .13s;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}

.ezf-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--ez-btn-hover-bg);
  color: var(--ez-btn-hover-fg);
  border-color: var(--ez-btn-hover-border);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ez-primary) 30%, transparent);
}

.ezf-btn-primary:active  { transform: translateY(0); box-shadow: none; }
.ezf-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ===================== Action row ===================== */
.ezf-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ezf-btn-ghost {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid var(--ez-ghost-bd);
  background: var(--ez-ghost-bg);
  color: var(--ez-ghost-fg);
  font-family: var(--ez-font);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .14s;
}

.ezf-btn-ghost:hover { background: var(--ez-ghost-hover-bg); color: var(--ez-ghost-hover-fg); border-color: var(--ez-ghost-hover-bd); box-shadow: 0 4px 14px rgba(2,6,23,.08); }
.ezf-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

/* ===================== Google panel ===================== */
.ezf-google-wrap { text-align: center; padding: 10px 0 4px; }
.ezf-google-hint { font-size: 13px; color: var(--ez-google-hint-fg); margin: 0 0 14px; }

.ezf-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1.5px solid var(--ez-google-bd);
  background: var(--ez-google-bg);
  color: var(--ez-google-fg);
  font-family: var(--ez-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow .15s, transform .12s;
  width: 100%;
}

.ezf-google-btn:hover {
  background: var(--ez-google-hover-bg);
  color: var(--ez-google-hover-fg);
  border-color: var(--ez-google-hover-bd);
  box-shadow: 0 8px 22px rgba(234,67,53,.15);
  transform: translateY(-1px);
}

/* ===================== Feedback messages ===================== */
.ez-login-feedback { padding: 0; }

.ez-login-message {
  margin: 0 0 10px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
}

.ez-login-message:empty { display: none; }

.ez-login-message--error {
  color: var(--ez-error-fg);
  background: var(--ez-error-bg);
  border-color: var(--ez-error-bd);
}
.ez-login-message--error::before { content: "⚠️"; flex-shrink: 0; }

.ez-login-message--info {
  color: var(--ez-info-fg);
  background: var(--ez-info-bg);
  border-color: var(--ez-info-bd);
}
.ez-login-message--info::before { content: "✅"; flex-shrink: 0; }

.ez-login-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ez-timer-fg);
  background: var(--ez-timer-bg);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 10px;
}

/* فرم‌ها فقط با ویژگی hidden و JavaScript جابه‌جا می‌شوند.
   وابستگی به کلاس پویا حذف شده تا Remove Unused CSS مرحله OTP را نشکند. */
.ez-login-sms-form,
.ez-login-verify-form { display: block; }
.ez-login-form [hidden] { display: none !important; }

/* ===================== Animations ===================== */
@keyframes ezFadeIn  { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes ezShake   { 0%,100%{transform:translateX(0)} 20%{transform:translateX(6px)} 40%{transform:translateX(-6px)} 60%{transform:translateX(4px)} 80%{transform:translateX(-4px)} }
@keyframes ezPulse   { 0%,100%{opacity:1} 50%{opacity:.5} }

.ez-login-instance.is-error { animation: ezShake .45s ease; }
.ezf-method-panel { animation: ezFadeIn .2s ease; }
.ez-auth-panel    { animation: ezFadeIn .2s ease; }

/* ===================== Captcha ===================== */
.ez-captcha    { margin: 12px 0 8px; }
.ez-captcha >* { max-width: 100%; }

/* ===================== Presets ===================== */

/* minimal */
.ez-preset-minimal {
  --ez-shadow: 0 4px 20px rgba(2,6,23,.07);
  --ez-radius: 14px;
  --ez-primary: #0f172a;
  --ez-ring: rgba(15,23,42,.18);
}
.ez-preset-minimal::before { display: none; }

/* glass */
.ez-preset-glass {
  --ez-card: rgba(255,255,255,.7);
  --ez-soft: rgba(255,255,255,.4);
  --ez-border: rgba(255,255,255,.55);
  --ez-input-bg: rgba(255,255,255,.75);
}
.ez-preset-glass { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* dark */
.ez-preset-dark {
  --ez-card: #0b1220;
  --ez-soft: rgba(148,163,184,.10);
  --ez-border: rgba(148,163,184,.16);
  --ez-text: #e2e8f0;
  --ez-muted: #94a3b8;
  --ez-primary: #38bdf8;
  --ez-ring: rgba(56,189,248,.24);
  --ez-input-bg: rgba(15,23,42,.6);
  --ez-input-bd: rgba(148,163,184,.22);
  --ez-info-fg: #bbf7d0;
  --ez-error-fg: #fecaca;
  --ez-google-bg: rgba(255,255,255,.08);
  --ez-google-fg: #e2e8f0;
  --ez-shadow: 0 20px 64px rgba(0,0,0,.44);
}

/* aurora */
.ez-preset-aurora { --ez-primary: #7c3aed; --ez-ring: rgba(124,58,237,.24); }
.ez-preset-aurora::before { background: linear-gradient(90deg, #7c3aed, #22c55e 50%, #0ea5e9); }

/* soft */
.ez-preset-soft { --ez-primary: #16a34a; --ez-ring: rgba(22,163,74,.22); }
.ez-preset-soft::before { background: linear-gradient(90deg, #16a34a, #0ea5e9); }

/* ===================== Admin Login Tabs ===================== */

body.login #login {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: 560px !important;
  padding: 32px 0 0 !important;
}

body.login #login .ez-admin-login,
.ez-login-loginpage.ez-admin-login {
  width: 100% !important;
}

.ez-admin-login .ez-login-form {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ez-admin-login .ez-login-form::before { display: none !important; }
.ez-admin-login .ez-login-form > * { padding-left: 0 !important; padding-right: 0 !important; }
.ez-admin-login .ez-auth-panel,
.ez-admin-login .ez-auth-panel--single {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ez-admin-method-form .ez-login-instance { margin: 0 !important; }
.ez-admin-method-form .ezf-field-group { margin-bottom: 14px !important; }
.ez-admin-method-form .ezf-btn-primary { width: 100%; }
.ez-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ez-admin-login {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(2,6,23,.12);
  font-family: inherit;
  direction: rtl;
}

.ez-admin-login-tabs {
  display: flex;
  gap: 5px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 20px;
}

.ez-admin-tab-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 8px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .17s;
}

.ez-admin-tab-btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(2,6,23,.09);
  font-weight: 800;
}

.ez-admin-tab-panel { animation: ezFadeIn .22s ease; }

/* ===================== Responsive ===================== */
@media (max-width: 500px) {
  .ez-login-form { border-radius: 14px; }
  .ez-auth-panel, .ez-auth-panel--single { padding: 16px; }
  .ezf-method-tabs { gap: 4px; padding: 4px; }
  .ezf-method-tab  { font-size: 12px; padding: 9px 6px; }
  .ezf-actions     { flex-direction: column; }
  .ezf-btn-ghost   { width: 100%; }
}

/* Elementor box alignment default: only the login box, not its inner text */
.ez-login-form.ezl-elementor {
  margin-left: auto;
  margin-right: auto;
}