/*
  EZ-Login Front Styles v1.7.18
  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-google-bg: rgba(255,255,255,.08);
  --ez-google-fg: #e2e8f0;
  --ez-info-fg: #bbf7d0;
  --ez-info-bg: rgba(34,197,94,.12);
  --ez-info-bd: rgba(74,222,128,.28);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(239,68,68,.12);
  --ez-error-bd: rgba(248,113,113,.28);
  --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;
}



/* ===================== EZ-Login 1.7.11: logo, shortcode styles and white-gold ===================== */
.ez-login-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  direction: rtl;
}
.ez-login-site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  background: var(--ez-sc-logo-bg, transparent);
  border-style: var(--ez-sc-logo-bd-style, none);
  border-width: var(--ez-sc-logo-bd-width, 0);
  border-color: var(--ez-sc-logo-bd-color, transparent);
  border-radius: var(--ez-sc-logo-radius, 0);
  padding: var(--ez-sc-logo-padding, 0 0 16px);
}
.ez-login-site-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(130px, 38vw);
  max-height: 130px;
  object-fit: contain;
}
.ez-login-site-logo--inside { margin: 0 auto; }
.ez-login-form > .ez-login-site-logo--inside { padding: var(--ez-sc-logo-padding, 16px 22px 0) !important; }

.ez-shortcode-styled {
  background: var(--ez-sc-box-bg, var(--ez-card));
  border-style: var(--ez-sc-box-bd-style, solid);
  border-width: var(--ez-sc-box-bd-width, 1px);
  border-color: var(--ez-sc-box-bd-color, var(--ez-border));
  border-radius: var(--ez-sc-box-radius, var(--ez-radius));
}
.ez-shortcode-styled .ez-auth-panel,
.ez-shortcode-styled .ez-auth-panel--single { padding: var(--ez-sc-box-padding, 22px); }
.ez-shortcode-styled .ez-auth-tab {
  padding: var(--ez-sc-auth-padding, 14px 16px);
  border-style: var(--ez-sc-auth-bd-style, solid);
  border-width: var(--ez-sc-auth-bd-width, 0);
  border-color: var(--ez-sc-auth-bd-color, var(--ez-auth-tab-border));
  border-radius: var(--ez-sc-auth-radius, 0);
  color: var(--ez-sc-auth-fg, var(--ez-auth-tab-fg));
  font-size: var(--ez-sc-auth-fs, 14px);
  font-weight: var(--ez-sc-auth-fw, 700);
  line-height: var(--ez-sc-auth-lh, 1.6);
}
.ez-shortcode-styled .ezf-method-tab {
  padding: var(--ez-sc-method-padding, 10px 8px);
  border-style: var(--ez-sc-method-bd-style, solid);
  border-width: var(--ez-sc-method-bd-width, 0);
  border-color: var(--ez-sc-method-bd-color, transparent);
  border-radius: var(--ez-sc-method-radius, 999px);
  color: var(--ez-sc-method-fg, var(--ez-method-fg));
  font-size: var(--ez-sc-method-fs, 13px);
  font-weight: var(--ez-sc-method-fw, 700);
  line-height: var(--ez-sc-method-lh, 1.5);
}
.ez-shortcode-styled .ezf-label {
  color: var(--ez-sc-label-fg, var(--ez-label-fg));
  font-size: var(--ez-sc-label-fs, 13px);
  font-weight: var(--ez-sc-label-fw, 700);
  line-height: var(--ez-sc-label-lh, 1.6);
  margin: var(--ez-sc-label-margin, 0 0 7px);
}
.ez-shortcode-styled .ezf-input,
.ez-shortcode-styled .ezf-phone-wrap {
  color: var(--ez-sc-input-fg, var(--ez-input-fg));
  font-size: var(--ez-sc-input-fs, 15px);
  font-weight: var(--ez-sc-input-fw, 400);
  line-height: var(--ez-sc-input-lh, 1.5);
  margin: var(--ez-sc-input-margin, 0);
  background: var(--ez-sc-input-bg, var(--ez-input-bg));
  border-style: var(--ez-sc-input-bd-style, solid);
  border-width: var(--ez-sc-input-bd-width, 1px);
  border-color: var(--ez-sc-input-bd-color, var(--ez-input-bd));
  border-radius: var(--ez-sc-input-radius, 12px);
}
.ez-shortcode-styled .ezf-phone-wrap .ezf-input { margin: 0; border: 0; border-radius: 0; background: transparent; }
.ez-shortcode-styled .ezf-phone-wrap input {
  color: var(--ez-sc-input-fg, var(--ez-input-fg));
  font-size: var(--ez-sc-input-fs, 15px);
  font-weight: var(--ez-sc-input-fw, 400);
  line-height: var(--ez-sc-input-lh, 1.5);
}
.ez-shortcode-styled .ezf-phone-wrap input::placeholder,
.ez-shortcode-styled .ezf-input::placeholder { color: var(--ez-placeholder-fg); }
.ez-shortcode-styled .ez-send-otp {
  color: var(--ez-sc-send-fg, var(--ez-btn-fg));
  font-size: var(--ez-sc-send-fs, 15px);
  font-weight: var(--ez-sc-send-fw, 800);
  line-height: var(--ez-sc-send-lh, 1.5);
  margin: var(--ez-sc-send-margin, 6px 0 0);
  background: var(--ez-sc-send-bg, var(--ez-btn-bg));
  border-style: var(--ez-sc-send-bd-style, solid);
  border-width: var(--ez-sc-send-bd-width, 2px);
  border-color: var(--ez-sc-send-bd-color, var(--ez-btn-border));
  border-radius: var(--ez-sc-send-radius, 12px);
}
.ez-shortcode-styled .ez-verify-otp {
  color: var(--ez-sc-verify-fg, var(--ez-btn-fg));
  font-size: var(--ez-sc-verify-fs, 15px);
  font-weight: var(--ez-sc-verify-fw, 800);
  line-height: var(--ez-sc-verify-lh, 1.5);
  margin: var(--ez-sc-verify-margin, 6px 0 0);
  background: var(--ez-sc-verify-bg, var(--ez-btn-bg));
  border-style: var(--ez-sc-verify-bd-style, solid);
  border-width: var(--ez-sc-verify-bd-width, 2px);
  border-color: var(--ez-sc-verify-bd-color, var(--ez-btn-border));
  border-radius: var(--ez-sc-verify-radius, 12px);
}
.ez-hide-auth-tabs > .ez-auth-tabs { display: none !important; }
.ez-hide-method-tabs .ezf-method-tabs { display: none !important; }

/* Preset inspired by the provided black/gold login design. */
.ez-preset-white-gold {
  --ez-card: #171717;
  --ez-soft: #2b2b2b;
  --ez-border: #c99835;
  --ez-text: #ffffff;
  --ez-muted: #d9d9d9;
  --ez-primary: #c99835;
  --ez-primary-h: #d7ab4a;
  --ez-primary-fg: #111111;
  --ez-ring: rgba(201,152,53,.28);
  --ez-input-bg: #3b3b3b;
  --ez-input-bd: #3b3b3b;
  --ez-input-fg: #ffffff;
  --ez-placeholder-fg: #a9b0bb;
  --ez-label-fg: #ffffff;
  --ez-method-bg: #c99835;
  --ez-method-active-bg: #c99835;
  --ez-method-border: #c99835;
  --ez-method-fg: #111111;
  --ez-method-active-fg: #111111;
  --ez-auth-tabs-bg: transparent;
  --ez-auth-tab-border: #c99835;
  --ez-auth-tab-fg: #111111;
  --ez-auth-tab-bg: #c99835;
  --ez-auth-tab-active-fg: #111111;
  --ez-auth-tab-active-bg: #d7ab4a;
  --ez-auth-indicator: transparent;
  --ez-btn-bg: #c99835;
  --ez-btn-border: #c99835;
  --ez-btn-fg: #111111;
  --ez-btn-hover-bg: #d7ab4a;
  --ez-btn-hover-fg: #111111;
  --ez-btn-hover-border: #d7ab4a;
  --ez-google-bg: #c99835;
  --ez-google-fg: #111111;
  --ez-google-bd: #c99835;
  --ez-shadow: 0 24px 70px rgba(0,0,0,.34);
  --ez-info-fg: #d1fae5;
  --ez-info-bg: rgba(16,185,129,.12);
  --ez-info-bd: rgba(52,211,153,.28);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(239,68,68,.12);
  --ez-error-bd: rgba(248,113,113,.28);
  background: var(--ez-sc-box-bg, var(--ez-card));
  border-color: var(--ez-sc-box-bd-color, var(--ez-border));
}
.ez-preset-white-gold::before { display: none; }
.ez-preset-white-gold .ez-auth-tabs { gap: 8px; border-bottom: 0; padding: 0 22px !important; margin-top: 22px; }
.ez-preset-white-gold .ez-auth-tab { border-radius: var(--ez-sc-auth-radius, 16px); padding: var(--ez-sc-auth-padding, 12px 16px); }
.ez-preset-white-gold .ez-auth-tab::after { display: none; }
.ez-preset-white-gold .ezf-method-tabs { border-radius: 16px; padding: 0; overflow: hidden; }
.ez-preset-white-gold .ezf-method-tab { color: var(--ez-sc-method-fg, var(--ez-method-fg)); border-radius: var(--ez-sc-method-radius, 16px); padding: var(--ez-sc-method-padding, 12px 10px); }
.ez-preset-white-gold .ezf-method-tab.is-active { box-shadow: none; color: var(--ez-sc-method-fg, var(--ez-method-active-fg)); }
.ez-preset-white-gold .ezf-phone-wrap,
.ez-preset-white-gold .ezf-input { background: var(--ez-sc-input-bg, var(--ez-input-bg)); border-color: var(--ez-sc-input-bd-color, var(--ez-input-bd)); color: var(--ez-sc-input-fg, var(--ez-input-fg)); }
.ez-preset-white-gold .ezf-phone-wrap input { color: var(--ez-sc-input-fg, var(--ez-input-fg)); }
.ez-preset-white-gold .ezf-phone-flag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

/* ===================== EZ-Login Advanced Elementor Widget ===================== */
/* Keep the advanced widget inside its Elementor column at every breakpoint. */
.elementor-widget-ez-login-advanced,
.elementor-widget-ez-login-advanced .elementor-widget-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.elementor-widget-ez-login-advanced .elementor-widget-container {
  overflow-x: hidden;
  overflow-x: clip;
}
.ezl-advanced-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  direction: rtl;
  overflow-x: hidden;
  overflow-x: clip;
}
.ezl-advanced-shell,
.ezl-advanced-shell * { box-sizing: border-box; }
.ezl-advanced-shell > *,
.ezl-advanced-shell .ez-auth-panel,
.ezl-advanced-shell .ez-auth-panel--single,
.ezl-advanced-shell form { min-width: 0; max-width: 100%; }
.ezl-advanced-shell .ez-login-site-logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0 solid transparent;
  transition: .22s ease;
}
.ezl-advanced-shell .ez-login-site-logo--inside {
  margin: 0 0 var(--ez-adv-gap, 22px);
  padding: 0 !important;
}
.ezl-advanced-shell .ez-login-site-logo img {
  width: 110px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.ez-login-form.ezl-advanced {
  --ez-adv-gap: 22px;
  width: 100%;
  max-width: min(100%, 520px);
  min-width: 0;
  padding: 28px;
  background: var(--ez-card);
  border-style: solid;
  border-width: var(--ez-adv-border-width, 1px);
  border-color: var(--ez-border);
  border-radius: var(--ez-radius, 24px);
  box-shadow: var(--ez-shadow);
  overflow: hidden;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.ez-login-form.ezl-advanced::before { display: none; }
.ez-login-form.ezl-advanced > * { padding: 0; }
.ez-login-form.ezl-advanced > *:first-child,
.ez-login-form.ezl-advanced > *:last-child { padding-top: 0; padding-bottom: 0; }
.ez-login-form.ezl-advanced .ez-auth-panel,
.ez-login-form.ezl-advanced .ez-auth-panel--single { padding: 0; }
.ez-login-form.ezl-advanced .ez-auth-tabs,
.ez-login-form.ezl-advanced .ezf-method-tabs,
.ez-login-form.ezl-advanced .ezf-field-group,
.ez-login-form.ezl-advanced .ez-login-feedback,
.ez-login-form.ezl-advanced .ezf-actions,
.ez-login-form.ezl-advanced .ez-login-register-fields,
.ez-login-form.ezl-advanced .ezf-google-wrap { margin-bottom: var(--ez-adv-gap); }
.ez-login-form.ezl-advanced .ez-auth-tabs,
.ez-login-form.ezl-advanced .ezf-method-tabs,
.ez-login-form.ezl-advanced .ezf-actions,
.ez-login-form.ezl-advanced .ezf-field-group,
.ez-login-form.ezl-advanced .ezf-phone-wrap,
.ez-login-form.ezl-advanced .ezf-input,
.ez-login-form.ezl-advanced .ezf-btn-primary,
.ez-login-form.ezl-advanced .ezf-btn-ghost {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.ez-login-form.ezl-advanced .ez-auth-tab,
.ez-login-form.ezl-advanced .ezf-method-tab {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ez-login-form.ezl-advanced input,
.ez-login-form.ezl-advanced select,
.ez-login-form.ezl-advanced textarea { min-width: 0; max-width: 100%; }

/* Auth tabs are real buttons, not an underline navigation. */
.ez-login-form.ezl-advanced .ez-auth-tabs {
  display: flex;
  gap: 12px;
  padding: 0 !important;
  border: 0;
  background: transparent;
}
.ez-login-form.ezl-advanced .ez-auth-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--ez-auth-tab-border);
  border-radius: 14px;
  background: var(--ez-auth-tab-bg);
  color: var(--ez-auth-tab-fg);
  transition: .18s ease;
}
.ez-login-form.ezl-advanced .ez-auth-tab::after { display: none; }
.ez-login-form.ezl-advanced .ez-auth-tab:hover { transform: translateY(-1px); }
.ez-login-form.ezl-advanced .ez-auth-tab.is-active {
  color: var(--ez-auth-tab-active-fg);
  background: var(--ez-auth-tab-active-bg);
  border-color: var(--ez-auth-indicator);
  box-shadow: 0 8px 22px rgba(2,6,23,.10);
}

/* Method tabs are visually separate from auth tabs. */
.ez-login-form.ezl-advanced .ezf-method-tabs {
  padding: 6px;
  gap: 8px;
  border-radius: 16px;
  background: var(--ez-method-bg);
  border: 1px solid var(--ez-method-border);
}
.ez-login-form.ezl-advanced .ezf-method-tab {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ez-method-fg);
}
.ez-login-form.ezl-advanced .ezf-method-tab:hover { color: var(--ez-method-hover-fg); }
.ez-login-form.ezl-advanced .ezf-method-tab.is-active {
  color: var(--ez-method-active-fg);
  background: var(--ez-method-active-bg);
  border-color: var(--ez-method-border);
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}
.ez-login-form.ezl-advanced .ezf-method-tab.is-active[data-ezf-tab="google"] { color: var(--ez-method-active-fg); }
.ez-login-form.ezl-advanced.ez-hide-method-tabs .ezf-method-tabs { display: none !important; }

.ez-login-form.ezl-advanced .ezf-field-group { margin-top: 0; }
.ez-login-form.ezl-advanced .ezf-label { margin: 0 0 8px; }
.ez-login-form.ezl-advanced .ezf-phone-wrap,
.ez-login-form.ezl-advanced .ezf-input {
  min-height: 52px;
  border-radius: 13px;
}
.ez-login-form.ezl-advanced .ezf-phone-wrap input,
.ez-login-form.ezl-advanced .ezf-input { padding: 13px 15px; }
.ez-login-form.ezl-advanced .ezf-btn-primary {
  min-height: 50px;
  margin-top: 0;
  border-radius: 13px;
  transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.ez-login-form.ezl-advanced .ezf-btn-primary:hover { transform: translateY(-2px); }
.ez-login-form.ezl-advanced .ezf-btn-primary.is-loading {
  position: relative;
  cursor: wait;
  opacity: .82;
}
.ez-login-form.ezl-advanced .ezf-btn-primary.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ezAdvSpin .75s linear infinite;
}
@keyframes ezAdvSpin { to { transform: rotate(360deg); } }
.ez-login-form.ezl-advanced .ezf-actions { margin-top: 12px; margin-bottom: 0; }
.ez-login-form.ezl-advanced .ezf-btn-ghost { border-radius: 11px; }
.ez-login-form.ezl-advanced .ez-login-message,
.ez-login-form.ezl-advanced .ez-login-timer,
.ez-login-form.ezl-advanced .ezf-sent-badge { border-radius: 12px; }

/* --------------------- Preset: Golden --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-golden {
  --ez-card: #171717;
  --ez-soft: #2d2d2d;
  --ez-border: #c99a38;
  --ez-text: #ffffff;
  --ez-muted: #c8c8c8;
  --ez-primary: #c99a38;
  --ez-primary-h: #ddb24e;
  --ez-primary-fg: #111111;
  --ez-ring: rgba(201,154,56,.26);
  --ez-input-bg: #3b3b3b;
  --ez-input-bd: #474747;
  --ez-input-fg: #ffffff;
  --ez-placeholder-fg: #aab2bf;
  --ez-label-fg: #ffffff;
  --ez-phone-flag-bg: #333333;
  --ez-phone-flag-bd: #4d4d4d;
  --ez-auth-tab-border: #c99a38;
  --ez-auth-tab-fg: #111111;
  --ez-auth-tab-bg: #c99a38;
  --ez-auth-tab-active-fg: #111111;
  --ez-auth-tab-active-bg: #e1b653;
  --ez-auth-indicator: #e1b653;
  --ez-method-bg: #c99a38;
  --ez-method-border: #c99a38;
  --ez-method-fg: #111111;
  --ez-method-hover-fg: #111111;
  --ez-method-active-bg: #e1b653;
  --ez-method-active-fg: #111111;
  --ez-btn-bg: #c99a38;
  --ez-btn-border: #c99a38;
  --ez-btn-fg: #111111;
  --ez-btn-hover-bg: #e1b653;
  --ez-btn-hover-border: #e1b653;
  --ez-btn-hover-fg: #111111;
  --ez-ghost-bg: #292929;
  --ez-ghost-fg: #f4f4f4;
  --ez-ghost-bd: #444444;
  --ez-ghost-hover-bg: #333333;
  --ez-ghost-hover-fg: #ffffff;
  --ez-ghost-hover-bd: #c99a38;
  --ez-register-bg: #222222;
  --ez-register-bd: #494949;
  --ez-badge-bg: rgba(201,154,56,.10);
  --ez-badge-bd: rgba(201,154,56,.35);
  --ez-badge-fg: #f3dfb2;
  --ez-info-fg: #d1fae5;
  --ez-info-bg: rgba(16,185,129,.12);
  --ez-info-bd: rgba(52,211,153,.28);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(239,68,68,.12);
  --ez-error-bd: rgba(248,113,113,.28);
  --ez-google-bg: #242424;
  --ez-google-fg: #ffffff;
  --ez-google-bd: #4a4a4a;
  --ez-google-hover-bg: #303030;
  --ez-google-hover-fg: #ffffff;
  --ez-google-hover-bd: #c99a38;
  --ez-adv-border-width: 2px;
  --ez-radius: 24px;
  --ez-shadow: 0 28px 80px rgba(0,0,0,.34);
}
.ezl-advanced-shell.ezl-shell-preset-golden .ez-login-site-logo img {
  filter: sepia(.2) saturate(1.18);
}
.ez-login-form.ezl-advanced.ezl-preset-golden .ezf-method-tabs { padding: 0; }

/* --------------------- Preset: Ocean light --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-ocean {
  --ez-card: #ffffff;
  --ez-soft: #eaf4ff;
  --ez-border: #cfe3f9;
  --ez-text: #10243e;
  --ez-muted: #5e7189;
  --ez-primary: #1677ff;
  --ez-primary-h: #0e63dc;
  --ez-primary-fg: #ffffff;
  --ez-ring: rgba(22,119,255,.20);
  --ez-input-bg: #f7fbff;
  --ez-input-bd: #c9dcf1;
  --ez-input-fg: #10243e;
  --ez-placeholder-fg: #8191a5;
  --ez-label-fg: #17304f;
  --ez-auth-tab-border: #cfe3f9;
  --ez-auth-tab-fg: #42617f;
  --ez-auth-tab-bg: #f5faff;
  --ez-auth-tab-active-fg: #ffffff;
  --ez-auth-tab-active-bg: #1677ff;
  --ez-auth-indicator: #1677ff;
  --ez-method-bg: #eaf4ff;
  --ez-method-border: #cfe3f9;
  --ez-method-fg: #42617f;
  --ez-method-active-bg: #ffffff;
  --ez-method-active-fg: #1677ff;
  --ez-btn-bg: linear-gradient(135deg,#1677ff,#43a4ff);
  --ez-btn-border: #1677ff;
  --ez-btn-fg: #ffffff;
  --ez-btn-hover-bg: linear-gradient(135deg,#0e63dc,#278de8);
  --ez-btn-hover-border: #0e63dc;
  --ez-radius: 24px;
  --ez-shadow: 0 24px 70px rgba(22,119,255,.13);
}

/* --------------------- Preset: Mint light --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-mint {
  --ez-card: #fbfffd;
  --ez-soft: #e9f8f0;
  --ez-border: #c7ead7;
  --ez-text: #15372a;
  --ez-muted: #638071;
  --ez-primary: #159a63;
  --ez-primary-h: #0d7f50;
  --ez-primary-fg: #ffffff;
  --ez-ring: rgba(21,154,99,.20);
  --ez-input-bg: #f6fcf8;
  --ez-input-bd: #c7ead7;
  --ez-input-fg: #15372a;
  --ez-placeholder-fg: #7f968b;
  --ez-label-fg: #1b4b37;
  --ez-auth-tab-border: #c7ead7;
  --ez-auth-tab-fg: #527361;
  --ez-auth-tab-bg: #f2fbf6;
  --ez-auth-tab-active-fg: #ffffff;
  --ez-auth-tab-active-bg: #159a63;
  --ez-auth-indicator: #159a63;
  --ez-method-bg: #e9f8f0;
  --ez-method-border: #c7ead7;
  --ez-method-fg: #527361;
  --ez-method-active-bg: #ffffff;
  --ez-method-active-fg: #159a63;
  --ez-btn-bg: #159a63;
  --ez-btn-border: #159a63;
  --ez-btn-fg: #ffffff;
  --ez-btn-hover-bg: #0d7f50;
  --ez-btn-hover-border: #0d7f50;
  --ez-radius: 24px;
  --ez-shadow: 0 24px 70px rgba(21,154,99,.12);
}

/* --------------------- Preset: Minimal white --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-minimal {
  --ez-card: #ffffff;
  --ez-soft: #f5f5f5;
  --ez-border: #e5e7eb;
  --ez-text: #111827;
  --ez-muted: #6b7280;
  --ez-primary: #111827;
  --ez-primary-h: #000000;
  --ez-primary-fg: #ffffff;
  --ez-ring: rgba(17,24,39,.14);
  --ez-input-bg: #ffffff;
  --ez-input-bd: #d9dde5;
  --ez-input-fg: #111827;
  --ez-placeholder-fg: #9ca3af;
  --ez-label-fg: #1f2937;
  --ez-auth-tab-border: #e5e7eb;
  --ez-auth-tab-fg: #6b7280;
  --ez-auth-tab-bg: #f9fafb;
  --ez-auth-tab-active-fg: #111827;
  --ez-auth-tab-active-bg: #ffffff;
  --ez-auth-indicator: #111827;
  --ez-method-bg: #f5f5f5;
  --ez-method-border: #e5e7eb;
  --ez-method-fg: #6b7280;
  --ez-method-active-bg: #ffffff;
  --ez-method-active-fg: #111827;
  --ez-btn-bg: #111827;
  --ez-btn-border: #111827;
  --ez-btn-fg: #ffffff;
  --ez-btn-hover-bg: #000000;
  --ez-btn-hover-border: #000000;
  --ez-radius: 18px;
  --ez-shadow: 0 14px 42px rgba(17,24,39,.08);
}

/* --------------------- Preset: Midnight --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-midnight {
  --ez-card: #0e1830;
  --ez-soft: #162442;
  --ez-border: #263b63;
  --ez-text: #eef5ff;
  --ez-muted: #a8b8d1;
  --ez-primary: #4a8cff;
  --ez-primary-h: #76a9ff;
  --ez-primary-fg: #ffffff;
  --ez-ring: rgba(74,140,255,.24);
  --ez-input-bg: #14223d;
  --ez-input-bd: #2a426e;
  --ez-input-fg: #f1f6ff;
  --ez-placeholder-fg: #7f93b3;
  --ez-label-fg: #e7effc;
  --ez-auth-tab-border: #2a426e;
  --ez-auth-tab-fg: #b1c1da;
  --ez-auth-tab-bg: #14223d;
  --ez-auth-tab-active-fg: #ffffff;
  --ez-auth-tab-active-bg: #326fd8;
  --ez-auth-indicator: #4a8cff;
  --ez-method-bg: #14223d;
  --ez-method-border: #2a426e;
  --ez-method-fg: #b1c1da;
  --ez-method-active-bg: #20375e;
  --ez-method-active-fg: #ffffff;
  --ez-btn-bg: linear-gradient(135deg,#326fd8,#5b9cff);
  --ez-btn-border: #5b9cff;
  --ez-btn-fg: #ffffff;
  --ez-btn-hover-bg: linear-gradient(135deg,#4b83e5,#77adff);
  --ez-btn-hover-border: #77adff;
  --ez-ghost-bg: #14223d;
  --ez-ghost-fg: #dce8fb;
  --ez-ghost-bd: #2a426e;
  --ez-ghost-hover-bg: #20375e;
  --ez-ghost-hover-fg: #ffffff;
  --ez-ghost-hover-bd: #4a8cff;
  --ez-info-fg: #bbf7d0;
  --ez-info-bg: rgba(34,197,94,.12);
  --ez-info-bd: rgba(74,222,128,.28);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(239,68,68,.12);
  --ez-error-bd: rgba(248,113,113,.28);
  --ez-radius: 24px;
  --ez-shadow: 0 30px 90px rgba(1,7,20,.38);
}

/* --------------------- Preset: Graphite --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-graphite {
  --ez-card: #202225;
  --ez-soft: #2a2d31;
  --ez-border: #3a3e44;
  --ez-text: #f5f6f7;
  --ez-muted: #b3b8c0;
  --ez-primary: #8b5cf6;
  --ez-primary-h: #a78bfa;
  --ez-primary-fg: #ffffff;
  --ez-ring: rgba(139,92,246,.24);
  --ez-input-bg: #2b2e33;
  --ez-input-bd: #41464d;
  --ez-input-fg: #ffffff;
  --ez-placeholder-fg: #8d949e;
  --ez-label-fg: #f0f1f3;
  --ez-auth-tab-border: #41464d;
  --ez-auth-tab-fg: #c0c4ca;
  --ez-auth-tab-bg: #2b2e33;
  --ez-auth-tab-active-fg: #ffffff;
  --ez-auth-tab-active-bg: #7c3aed;
  --ez-auth-indicator: #8b5cf6;
  --ez-method-bg: #292c30;
  --ez-method-border: #41464d;
  --ez-method-fg: #c0c4ca;
  --ez-method-active-bg: #373b41;
  --ez-method-active-fg: #ffffff;
  --ez-btn-bg: #7c3aed;
  --ez-btn-border: #8b5cf6;
  --ez-btn-fg: #ffffff;
  --ez-btn-hover-bg: #8b5cf6;
  --ez-btn-hover-border: #a78bfa;
  --ez-info-fg: #d1fae5;
  --ez-info-bg: rgba(16,185,129,.12);
  --ez-info-bd: rgba(52,211,153,.28);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(239,68,68,.12);
  --ez-error-bd: rgba(248,113,113,.28);
  --ez-radius: 22px;
  --ez-shadow: 0 28px 78px rgba(0,0,0,.34);
}

/* --------------------- Preset: Dark glass --------------------- */
.ez-login-form.ezl-advanced.ezl-preset-glass {
  --ez-card: rgba(15,23,42,.76);
  --ez-soft: rgba(255,255,255,.08);
  --ez-border: rgba(255,255,255,.16);
  --ez-text: #ffffff;
  --ez-muted: #c6d1e3;
  --ez-primary: #22d3ee;
  --ez-primary-h: #67e8f9;
  --ez-primary-fg: #06202a;
  --ez-ring: rgba(34,211,238,.24);
  --ez-input-bg: rgba(255,255,255,.08);
  --ez-input-bd: rgba(255,255,255,.16);
  --ez-input-fg: #ffffff;
  --ez-placeholder-fg: #9fb0c8;
  --ez-label-fg: #f5fbff;
  --ez-auth-tab-border: rgba(255,255,255,.16);
  --ez-auth-tab-fg: #d4deec;
  --ez-auth-tab-bg: rgba(255,255,255,.06);
  --ez-auth-tab-active-fg: #06202a;
  --ez-auth-tab-active-bg: #67e8f9;
  --ez-auth-indicator: #67e8f9;
  --ez-method-bg: rgba(255,255,255,.07);
  --ez-method-border: rgba(255,255,255,.15);
  --ez-method-fg: #d4deec;
  --ez-method-active-bg: rgba(255,255,255,.14);
  --ez-method-active-fg: #ffffff;
  --ez-btn-bg: linear-gradient(135deg,#22d3ee,#60a5fa);
  --ez-btn-border: rgba(255,255,255,.22);
  --ez-btn-fg: #06202a;
  --ez-btn-hover-bg: linear-gradient(135deg,#67e8f9,#93c5fd);
  --ez-btn-hover-border: rgba(255,255,255,.35);
  --ez-ghost-bg: rgba(255,255,255,.07);
  --ez-ghost-fg: #ffffff;
  --ez-ghost-bd: rgba(255,255,255,.15);
  --ez-info-fg: #d1fae5;
  --ez-info-bg: rgba(16,185,129,.13);
  --ez-info-bd: rgba(52,211,153,.30);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(239,68,68,.13);
  --ez-error-bd: rgba(248,113,113,.30);
  --ez-radius: 26px;
  --ez-shadow: 0 30px 90px rgba(2,6,23,.42);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

@media (max-width: 767px) {
  .ez-login-form.ezl-advanced { padding: 20px; border-radius: 18px; }
  .ez-login-form.ezl-advanced .ez-auth-tabs { gap: 8px; }
  .ez-login-form.ezl-advanced .ez-auth-tab { padding: 11px 10px; }
  .ez-login-form.ezl-advanced .ezf-method-tabs { gap: 5px; }
  .ezl-advanced-shell .ez-login-site-logo img { max-width: min(110px, 34vw); }
}

/* ===================== OTP digit boxes ===================== */
.ezf-otp-boxes {
  display: grid;
  grid-template-columns: repeat(var(--ez-otp-length, 6), minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  max-width: 100%;
  direction: ltr;
  overflow: hidden;
}

.ezf-otp-field-group[data-ez-otp-length="4"] .ezf-otp-boxes { --ez-otp-length: 4; }
.ezf-otp-field-group[data-ez-otp-length="5"] .ezf-otp-boxes { --ez-otp-length: 5; }
.ezf-otp-field-group[data-ez-otp-length="6"] .ezf-otp-boxes { --ez-otp-length: 6; }
.ezf-otp-field-group[data-ez-otp-length="7"] .ezf-otp-boxes { --ez-otp-length: 7; }
.ezf-otp-field-group[data-ez-otp-length="8"] .ezf-otp-boxes { --ez-otp-length: 8; }

.ezf-otp-digit {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 !important;
  border: 1.5px solid var(--ez-input-bd) !important;
  border-radius: 12px !important;
  background: var(--ez-input-bg) !important;
  color: var(--ez-input-fg) !important;
  box-shadow: none !important;
  outline: none;
  text-align: center !important;
  direction: ltr;
  font-family: var(--ez-font);
  font-size: 21px !important;
  font-weight: 800;
  line-height: 1;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
  appearance: textfield;
}

.ezf-otp-digit:hover {
  border-color: var(--ez-input-hover-bd) !important;
  background: var(--ez-input-hover-bg) !important;
}

.ezf-otp-digit:focus {
  border-color: var(--ez-input-focus-bd) !important;
  background: var(--ez-input-focus-bg) !important;
  box-shadow: 0 0 0 4px var(--ez-ring) !important;
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .ezf-otp-boxes { gap: 6px; }
  .ezf-otp-digit { height: 46px; border-radius: 10px !important; font-size: 18px !important; }
}

@media (max-width: 380px) {
  .ezf-otp-boxes { gap: 4px; }
  .ezf-otp-digit { height: 42px; font-size: 17px !important; }
}