/* Approved personal welcome + matching password form, on all modern themes.
 * Keep the existing auth nodes and route handlers; this layer owns presentation. */
.phone.next-ui-theme #login-step-returning {
  --entry-ink: var(--biz-ink, #202422);
  --entry-muted: var(--biz-muted, #5d655f);
  --entry-icon: var(--biz-icon, #404b44);
  --entry-brand: var(--biz-brand, #0056f5);
  --entry-surface: var(--biz-surface, #fff);
  --entry-line: var(--biz-line, #e1e6e2);
  --entry-control-line: var(--biz-control-line, #89938c);
  --entry-shadow: var(--biz-shadow-card, var(--modern-shadow, 0 8px 24px #141e2b0f));
  --entry-gutter: 24px;
  --entry-title-size: 30px;
  padding: 24px var(--entry-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--biz-canvas, #fafaf9);
  color: var(--entry-ink);
  font-family: "Vazirmatn Regular", Tahoma, sans-serif;
  font-synthesis: none;
  gap: 0;
}
.phone.next-ui-theme #login-step-returning > * { flex-shrink: 0; min-width: 0; }
.phone.next-ui-theme #login-step-returning [hidden] { display: none !important; }
.phone.next-ui-theme #login-step-returning .login-lockup { min-height: 48px; gap: 10px; }
.phone.next-ui-theme #login-step-returning .brand-placeholder { width: 54px; height: 35px; }
.phone.next-ui-theme #login-step-returning .login-lockup strong {
  font: 16px/24px "Vazirmatn SemiBold", Tahoma, sans-serif !important;
  color: var(--entry-ink);
}
.phone.next-ui-theme #login-step-returning .login-lockup small.theme-next-only {
  display: block;
  font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif !important;
  color: var(--entry-muted);
}
.phone.next-ui-theme #login-step-returning .login-lockup > i {
  padding: 0 12px;
  min-height: 38px;
  flex-shrink: 0;
  gap: 6px;
  border: 1px solid #d5e0ff;
  border-radius: 999px;
  background: var(--entry-surface);
  box-shadow: var(--entry-shadow);
  backdrop-filter: none;
  color: #2b5484;
  font: 12px/20px "Vazirmatn SemiBold", Tahoma, sans-serif !important;
}
.phone.next-ui-theme #login-step-returning .login-lockup > i span { font: inherit !important; }
.phone.next-ui-theme #login-step-returning .login-lockup > i svg { color: var(--entry-brand); width: 16px; height: 16px; }
.phone.next-ui-theme #login-step-returning .login-welcome-copy { margin: 32px 0 24px; }
.phone.next-ui-theme #login-step-returning .login-welcome-copy h1,
.phone.next-ui-theme #login-step-returning .login-welcome-copy h1 > .theme-next-only {
  margin: 0;
  font: 24px/36px "Vazirmatn SemiBold", Tahoma, sans-serif !important;
  letter-spacing: 0;
  color: var(--entry-ink);
  overflow-wrap: anywhere;
}
.phone.next-ui-theme #login-step-returning .login-welcome-copy h1 em {
  font: inherit !important;
  color: var(--entry-brand);
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.phone.next-ui-theme #login-step-returning .login-welcome-copy h1 em::after { display: none; }
/* readability.css sizes every span as secondary copy. Explicit inheritance
 * keeps nested greeting/title spans at the heading's size in every theme. */
.phone.next-ui-theme #login-step-returning #returning-title :is(#login-generic-title, #login-personal-greeting) {
  font: inherit !important;
  letter-spacing: inherit;
}
.phone.next-ui-theme #login-step-returning #returning-title #login-generic-title {
  font: var(--entry-title-size)/1.5 "Vazirmatn Black", Tahoma, sans-serif !important;
}
.phone.next-ui-theme #login-step-returning[data-auth-view="biometric"] .login-welcome-copy {
  text-align: center;
  margin: 32px 0 24px;
}
.phone.next-ui-theme #login-step-returning .login-personal-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--biz-surface-soft, #f3f5f3);
  color: var(--entry-icon);
}
.phone.next-ui-theme #login-step-returning .login-personal-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.phone.next-ui-theme #login-step-returning .login-personal-avatar svg { width: 32px; height: 32px; }
.phone.next-ui-theme #login-step-returning .login-personal-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--entry-ink);
  font: 14px/24px "Vazirmatn Medium", Tahoma, sans-serif !important;
  letter-spacing: 0;
  word-spacing: normal;
  direction: rtl;
  text-align: center;
}
/* Keep the business name out of the legacy small-span typography. */
.phone.next-ui-theme #login-step-returning .login-personal-context span {
  min-width: 0;
  overflow-wrap: anywhere;
  font: inherit !important;
  letter-spacing: 0;
  word-spacing: normal;
  color: inherit;
}
.phone.next-ui-theme #login-step-returning .login-personal-context svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--entry-icon); }
.phone.next-ui-theme #login-step-returning .biometric-login-entry { margin: 0; width: 100%; }
.phone.next-ui-theme #login-step-returning .login-biometric-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px 0;
  margin-bottom: 24px;
  border-block: 1px solid var(--entry-line);
}
.phone.next-ui-theme #login-step-returning .login-biometric-intro > span { color: var(--entry-icon); line-height: 0; }
.phone.next-ui-theme #login-step-returning .login-biometric-intro svg { width: 40px; height: 40px; stroke-width: 1.5; }
.phone.next-ui-theme #login-step-returning .login-biometric-intro h2 { margin: 0; color: var(--entry-ink); font: 16px/24px "Vazirmatn SemiBold", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning .login-biometric-intro p { margin: 0; color: var(--entry-muted); font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning :is(#biometric-login-submit, #customer-login-submit) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  color: var(--entry-surface);
  background: var(--entry-brand);
  box-shadow: none;
  font: 14px/24px "Vazirmatn SemiBold", Tahoma, sans-serif;
  text-align: center;
}
.phone.next-ui-theme #login-step-returning #biometric-login-submit :is(small, b),
.phone.next-ui-theme #login-step-returning #biometric-login-submit > svg { display: none; }
.phone.next-ui-theme #login-step-returning #biometric-login-title { margin: 0; font: inherit; line-height: 24px; color: inherit; }
.phone.next-ui-theme #login-step-returning #biometric-login-submit > span:nth-child(2) { display: block; min-width: 0; }
.phone.next-ui-theme #login-step-returning #biometric-login-submit .biometric-login-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.phone.next-ui-theme #login-step-returning :is(#biometric-login-submit, #customer-login-submit) svg {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  stroke-width: 1.75;
}
.phone.next-ui-theme #login-step-returning #biometric-login-submit.is-loading { opacity: 1; filter: none; transform: none; }
.phone.next-ui-theme #login-step-returning #biometric-login-submit .button-loading-label { font: 14px/24px "Vazirmatn SemiBold", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning #use-password-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: var(--entry-brand);
}
.phone.next-ui-theme #login-step-returning #use-password-login :is(small, svg) { display: none; }
.phone.next-ui-theme #login-step-returning #use-password-login strong { color: inherit; font: 14px/24px "Vazirmatn Medium", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning :is(.login-biometric-secure, .login-secure-note) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--entry-muted);
  font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif;
}
.phone.next-ui-theme #login-step-returning :is(.login-biometric-secure, .login-secure-note) svg { width: 16px; height: 16px; color: var(--entry-icon); }
.phone.next-ui-theme #login-step-returning .recognized-user-actions {
  min-height: 48px;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: auto 0 0;
  padding-top: 24px;
  color: var(--entry-muted);
  font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif;
}
.phone.next-ui-theme #login-step-returning .recognized-user-actions button { min-height: 48px; padding: 8px; color: var(--entry-brand); font: 12px/20px "Vazirmatn Medium", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning .customer-login-form {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--biz-card-line, #e9ede9);
  border-radius: 24px;
  background: var(--entry-surface);
  box-shadow: var(--entry-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.phone.next-ui-theme #login-step-returning .login-form-heading { flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 20px; }
.phone.next-ui-theme #login-step-returning .login-form-heading strong { font: 14px/24px "Vazirmatn Medium", Tahoma, sans-serif; color: var(--entry-ink); }
.phone.next-ui-theme #login-step-returning .login-form-heading small { font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif; color: var(--entry-muted); }
.phone.next-ui-theme #login-step-returning #return-to-biometric-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--entry-control-line);
  border-radius: 16px;
  background: var(--entry-surface);
  color: var(--entry-ink);
}
.phone.next-ui-theme #login-step-returning #return-to-biometric-login > span { width: 20px; height: 20px; border: 0; background: transparent; color: inherit; }
.phone.next-ui-theme #login-step-returning #return-to-biometric-login svg { width: 20px; height: 20px; }
.phone.next-ui-theme #login-step-returning #return-to-biometric-login b { color: inherit; font: 12px/20px "Vazirmatn Medium", Tahoma, sans-serif !important; white-space: normal; }
.phone.next-ui-theme #login-step-returning .field { margin: 0 0 16px; }
.phone.next-ui-theme #login-step-returning .field > span,
.phone.next-ui-theme #login-step-returning .login-password-heading > span { margin: 0 0 8px; color: var(--entry-ink); font: 12px/20px "Vazirmatn Medium", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning .field > div {
  display: flex;
  align-items: center;
  min-height: 56px;
  height: 56px;
  padding: 0 12px;
  gap: 8px;
  border: 1px solid var(--entry-control-line);
  border-radius: 16px;
  background: var(--entry-surface);
  box-shadow: none;
}
.phone.next-ui-theme #login-step-returning .field > div > svg:first-child { width: 20px; height: 20px; color: var(--entry-icon); stroke-width: 1.75; }
.phone.next-ui-theme #login-step-returning .field input {
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--entry-ink);
  font: 16px/24px "Vazirmatn Regular", Tahoma, sans-serif !important;
  letter-spacing: 0;
}
/* Only the rounded container owns field focus, including pointer and keyboard focus.
 * Keep this after every theme's generic input/button :focus-visible rule. */
.phone.next-ui-theme #login-step-returning .field input,
.phone.next-ui-theme #login-step-returning .field input:focus,
.phone.next-ui-theme #login-step-returning .field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.phone.next-ui-theme #login-step-returning .field > div:focus-within {
  border-color: var(--entry-brand);
  box-shadow: 0 0 0 3px var(--biz-selected, #edf3ff);
  outline: none;
}
.phone.next-ui-theme #login-step-returning button:focus-visible { outline: 2px solid var(--entry-brand); outline-offset: 3px; }
.phone.next-ui-theme #login-step-returning .field > small { margin: 8px 0 0; color: var(--entry-muted); font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif; }
.phone.next-ui-theme #login-step-returning .login-password-heading { min-height: 44px; align-items: center; gap: 8px; margin-bottom: 8px; }
.phone.next-ui-theme #login-step-returning .login-password-heading > span { margin: 0; }
.phone.next-ui-theme #login-step-returning .login-password-heading button { min-height: 44px; padding: 8px 0; font: 12px/20px "Vazirmatn Medium", Tahoma, sans-serif; color: var(--entry-brand); }
.phone.next-ui-theme #login-step-returning .login-password-field { margin-bottom: 20px; }
.phone.next-ui-theme #login-step-returning #toggle-customer-password { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 44px; color: var(--entry-icon); }
.phone.next-ui-theme #login-step-returning .login-error { font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif; margin: 0 0 16px; }
.phone.next-ui-theme #login-step-returning .new-account-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid var(--entry-line);
  border-radius: var(--biz-radius-card, 24px);
  background: var(--biz-surface-soft, #f3f5f3);
  box-shadow: var(--entry-shadow);
  text-align: right;
}
.phone.next-ui-theme #login-step-returning .new-account-entry > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.phone.next-ui-theme #login-step-returning .new-account-entry strong.theme-next-only {
  display: block;
  margin: 0;
  color: var(--entry-ink);
  font: 14px/24px "Vazirmatn SemiBold", Tahoma, sans-serif !important;
  white-space: normal;
}
.phone.next-ui-theme #login-step-returning .new-account-entry small {
  margin: 0;
  font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif !important;
  color: var(--entry-muted);
}
.phone.next-ui-theme #login-step-returning .new-account-entry button {
  /* Appearance and typography come from the app's shared secondary-button. */
  width: auto;
  margin: 0;
  padding-inline: var(--biz-space-5, 20px);
  gap: var(--biz-space-2, 8px);
  white-space: nowrap;
}
.phone.next-ui-theme #login-step-returning .new-account-entry button svg { width: var(--biz-icon-glyph, 20px); height: var(--biz-icon-glyph, 20px); flex-shrink: 0; }
@media (max-width: 390px) {
  .phone.next-ui-theme #login-step-returning { --entry-gutter: 16px; }
  .phone.next-ui-theme #login-step-returning .customer-login-form { padding: 16px; }
}
@media (max-width: 359px) {
  .phone.next-ui-theme #login-step-returning { --entry-title-size: 24px; }
  .phone.next-ui-theme #login-step-returning .brand-placeholder { width: 40px; height: 30px; }
  .phone.next-ui-theme #login-step-returning .login-lockup { column-gap: 8px; }
  .phone.next-ui-theme #login-step-returning .login-lockup > i { padding-inline: 8px; gap: 4px; }
  .phone.next-ui-theme #login-step-returning .login-lockup small.theme-next-only { font-size: 11px !important; }
  .phone.next-ui-theme #login-step-returning .new-account-entry { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .phone.next-ui-theme #login-step-returning .new-account-entry button { width: 100%; }
}
@media (max-height: 740px) {
  .phone.next-ui-theme #login-step-returning { padding-top: 20px; }
  .phone.next-ui-theme #login-step-returning[data-auth-view="biometric"] .login-welcome-copy { margin-top: 24px; margin-bottom: 16px; }
  .phone.next-ui-theme #login-step-returning .login-biometric-intro { padding-block: 20px; margin-bottom: 20px; }
}

/* Keep the biometric verification animation free of a surrounding badge. */
.phone #login-screen button.is-loading .button-loading-biometric {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.phone #login-screen button.is-loading .button-loading-biometric svg,
.phone #login-screen #login-step-returning button.is-loading .button-loading-biometric svg {
  width: 28px;
  height: 28px;
}

/* Match the resting biometric action to its verification icon. */
.phone #login-screen #login-step-returning #biometric-login-submit .biometric-login-mark svg {
  width: 28px;
  height: 28px;
}