/*
  EZ-Login Front Styles v1.5.5
  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:   #1d4ed8;
  --ez-primary-fg:  #ffffff;
  --ez-bale:        #00916D;
  --ez-bale-h:      #007a5c;
  --ez-telegram:    #229ED9;
  --ez-telegram-h:  #168AC2;
  --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-bg:    #f8fafc;
  --ez-input-bd:    rgba(15,23,42,.12);
  --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-primary) 0%, var(--ez-bale) 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-border);
  margin-bottom: 0;
  padding: 0 !important;
}

.ez-auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ez-muted);
  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-primary);
  transform: scaleX(0);
  transition: transform .2s ease;
  border-radius: 2px 2px 0 0;
}

.ez-auth-tab.is-active { color: var(--ez-primary); }
.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-soft);
  border: 1px solid var(--ez-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-muted);
  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-text); }

.ezf-method-tab.is-active {
  background: var(--ez-card);
  color: var(--ez-text);
  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-primary); }
/* Bale active */
.ezf-method-tab.is-active[data-ezf-tab="bale"] { color: var(--ez-bale); }
/* Telegram active */
.ezf-method-tab.is-active[data-ezf-tab="telegram"] { color: var(--ez-telegram); }
/* Google active */
.ezf-method-tab.is-active[data-ezf-tab="google"] { color: #ea4335; }

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

/* ===================== Bale / Telegram badges ===================== */
.ez-bale-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  background: var(--ez-bale);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}

.ez-telegram-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  background: var(--ez-telegram);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}

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

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

.ezf-req { color: var(--ez-danger); 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:focus-within {
  border-color: var(--ez-primary);
  box-shadow: 0 0 0 4px var(--ez-ring);
  background: #fff;
}

.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-border); /* RTL: left in ltr = right in rtl */
  height: 100%;
  background: var(--ez-soft);
  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-border);
}


.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-text);
  outline: none;
  direction: ltr;
  text-align: right;
  font-family: var(--ez-font);
}

.ezf-phone-wrap input::placeholder { color: rgba(100,116,139,.65); 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-text);
  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: rgba(37,99,235,.25); background: #fff; }

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

.ezf-input::placeholder { color: rgba(100,116,139,.65); }

/* 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-border);
  border-radius: 12px;
  background: var(--ez-soft);
}

.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: rgba(0,145,109,.07);
  border: 1px solid rgba(0,145,109,.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ez-text);
  margin-bottom: 16px;
}

/* ===================== 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-primary);
  background: var(--ez-primary);
  color: var(--ez-primary-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);
  box-shadow: 0 10px 28px rgba(37,99,235,.30);
}

.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-border);
  background: var(--ez-soft);
  color: var(--ez-text);
  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-card); 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-muted); 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-border);
  background: #fff;
  color: var(--ez-text);
  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 {
  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: #7f1d1d;
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.15);
}
.ez-login-message--error::before { content: "⚠️"; flex-shrink: 0; }

.ez-login-message--info {
  color: #064e3b;
  background: rgba(22,163,74,.07);
  border-color: rgba(22,163,74,.15);
}
.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-muted);
  background: var(--ez-soft);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 10px;
}

/* Instance toggle */
.ez-login-instance .ez-login-verify-form  { display: none; }
.ez-login-instance.is-step-verify .ez-login-verify-form { display: block; }
.ez-login-instance.is-step-verify .ez-login-sms-form    { display: none; }

/* ===================== 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-shadow: 0 20px 64px rgba(0,0,0,.44);
}
.ez-preset-dark .ez-login-message--error { color: #fecaca; }
.ez-preset-dark .ez-login-message--info  { color: #bbf7d0; }
.ez-preset-dark .ezf-google-btn { background: rgba(255,255,255,.08); color: #e2e8f0; }

/* 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%; }
}