/**
 * AsanWP Auth page integration for PSDFA.
 * Theme-only visual layer: the authentication plugin remains untouched.
 */

body.asanwp-auth-page {
  --psdfa-auth-card: color-mix(in srgb, var(--psdfa-surface) 94%, transparent);
  --psdfa-auth-card-strong: var(--psdfa-surface);
  /* Keep light-mode form controls visibly separate from the white card. */
  --psdfa-auth-field: color-mix(in srgb, var(--psdfa-surface-2) 82%, #e7ebf0 18%);
  --psdfa-auth-border: color-mix(in srgb, var(--psdfa-border) 76%, #b8c0ca 24%);
  --psdfa-auth-border-strong: color-mix(in srgb, var(--psdfa-ink) 22%, var(--psdfa-border));
  --psdfa-auth-muted: var(--psdfa-muted);
  --psdfa-auth-success: var(--psdfa-success);
  --psdfa-auth-success-soft: color-mix(in srgb, var(--psdfa-success) 8%, var(--psdfa-surface));
  --psdfa-auth-danger: var(--psdfa-danger);
  --psdfa-auth-danger-soft: color-mix(in srgb, var(--psdfa-danger) 7%, var(--psdfa-surface));
  --psdfa-auth-focus-surface: var(--psdfa-surface);
  --psdfa-auth-shadow: 0 28px 80px rgba(17, 19, 24, .12), 0 8px 24px rgba(17, 19, 24, .06);
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--psdfa-primary) 26%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--psdfa-primary) 16%, transparent), transparent 25%),
    radial-gradient(circle at 18% 84%, rgba(17, 19, 24, .07), transparent 28%),
    linear-gradient(135deg, #fffdf3 0%, #f7f8fa 48%, #eef1f4 100%) !important;
  background-size: 24px 24px, auto, auto, auto;
  color: var(--psdfa-ink);
  font-family: var(--psdfa-font);
}

body.asanwp-auth-page::before,
body.asanwp-auth-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
}

body.asanwp-auth-page::before {
  width: min(38vw, 520px);
  aspect-ratio: 1;
  inset-block-start: -18%;
  inset-inline-end: -9%;
  background: radial-gradient(circle, color-mix(in srgb, var(--psdfa-primary) 24%, transparent), transparent 68%);
}

body.asanwp-auth-page::after {
  width: min(44vw, 620px);
  aspect-ratio: 1;
  inset-block-end: -24%;
  inset-inline-start: -14%;
  background: radial-gradient(circle, rgba(17, 19, 24, .08), transparent 70%);
}

body.asanwp-auth-page .asanwp-auth-page__content {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(28px, 6vh, 72px) 16px;
}

body.asanwp-auth-page .asanwp-auth {
  /* Bridge PSDFA colors into AsanWP Auth's own variables. This also wins over
   * saved plugin appearance values that may have been suitable for a dark
   * layout but make entered text disappear on PSDFA's light auth page. */
  --asanwp-auth-title-color: var(--psdfa-ink);
  --asanwp-auth-muted-color: var(--psdfa-auth-muted);
  --asanwp-auth-input-bg: var(--psdfa-auth-field);
  --asanwp-auth-input-border: var(--psdfa-auth-border);
  --asanwp-auth-surface: var(--psdfa-auth-card-strong);
  --asanwp-auth-surface-soft: var(--psdfa-auth-field);
  --asanwp-auth-button-color: var(--psdfa-primary);
  --asanwp-auth-button-text-color: #111318;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 0;
}

body.asanwp-auth-page .asanwp-auth,
body.asanwp-auth-page .asanwp-auth input,
body.asanwp-auth-page .asanwp-auth button,
body.asanwp-auth-page .asanwp-auth form {
  font-family: var(--psdfa-font) !important;
  font-feature-settings: var(--psdfa-font-features, normal);
}

body.asanwp-auth-page .asanwp-auth__wrapper {
  position: relative;
  overflow: hidden;
  padding: 38px 34px 32px;
  border: 1px solid var(--psdfa-auth-border);
  border-radius: 28px;
  background: var(--psdfa-auth-card);
  box-shadow: var(--psdfa-auth-shadow);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

body.asanwp-auth-page .asanwp-auth__wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent 3%, var(--psdfa-primary) 28% 72%, transparent 97%);
}

body.asanwp-auth-page .asanwp-auth__wrapper::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  inset-block-start: -118px;
  inset-inline-end: -70px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--psdfa-primary) 10%, transparent);
  pointer-events: none;
}

body.asanwp-auth-page .asanwp-auth__logo {
  margin-bottom: 22px;
}

body.asanwp-auth-page .asanwp-auth__logo a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--psdfa-primary) 28%, var(--psdfa-auth-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--psdfa-surface) 82%, transparent);
  box-shadow: 0 7px 20px rgba(17, 19, 24, .045);
  width: 130px;
}

body.asanwp-auth-page .asanwp-auth__logo img {
  display: block;
  max-height: 54px;
  object-fit: contain;
}

/* AsanWP Auth stores its own theme/mode attributes and marks its logo display
 * rules !important. PSDFA's root theme is authoritative, so force the matching
 * uploaded logo even if the plugin attribute is temporarily stale. */
html[data-psdfa-theme="light"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__logo-image--light {
  display: inline-block !important;
}

html[data-psdfa-theme="light"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__logo-image--dark {
  display: none !important;
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__logo-image--light {
  display: none !important;
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__logo-image--dark {
  display: inline-block !important;
}

/* Keep external SVG paint/media-query behavior from overriding the selected
 * light brand variant on the light auth surface. */
body.asanwp-auth-page .asanwp-auth__logo-image--light {
  color-scheme: light !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth__logo-image--dark {
  color-scheme: dark !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

body.asanwp-auth-page .asanwp-auth h2.asanwp-auth__title {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  color: var(--psdfa-ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.7;
  letter-spacing: -.02em;
}

body.asanwp-auth-page .asanwp-auth__form,
body.asanwp-auth-page .asanwp-auth form {
  gap: 14px;
}

body.asanwp-auth-page .asanwp-auth input:not(.unset) {
  height: 54px;
  padding-inline: 16px;
  border: 1px solid var(--psdfa-auth-border) !important;
  border-radius: 14px;
  background: var(--psdfa-auth-field) !important;
  color: var(--psdfa-ink) !important;
  -webkit-text-fill-color: var(--psdfa-ink);
  caret-color: var(--psdfa-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .78) inset, 0 1px 2px rgba(17, 19, 24, .025) !important;
  font-size: 14px;
  font-family: var(--psdfa-font);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.asanwp-auth-page .asanwp-auth input:not(.unset)::placeholder {
  color: var(--psdfa-auth-muted) !important;
  -webkit-text-fill-color: var(--psdfa-auth-muted);
  opacity: .88;
}

body.asanwp-auth-page .asanwp-auth input:not(.unset):hover {
  border-color: var(--psdfa-auth-border-strong) !important;
}

body.asanwp-auth-page .asanwp-auth input:not(.unset):focus {
  border-color: color-mix(in srgb, var(--psdfa-primary) 75%, var(--psdfa-auth-border)) !important;
  background: var(--psdfa-auth-focus-surface) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--psdfa-primary) 14%, transparent) !important;
}

body.asanwp-auth-page .asanwp-auth input:-webkit-autofill,
body.asanwp-auth-page .asanwp-auth input:-webkit-autofill:hover,
body.asanwp-auth-page .asanwp-auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--psdfa-ink);
  box-shadow: 0 0 0 1000px var(--psdfa-auth-field) inset !important;
  transition: background-color 9999s ease-out 0s;
}

body.asanwp-auth-page .asanwp-auth button.button:not(.unset),
body.asanwp-auth-page .asanwp-auth a.button:not(.unset) {
  min-height: 52px;
  height: auto;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--psdfa-primary-hover) 40%, var(--psdfa-primary));
  border-radius: 14px;
  background: var(--psdfa-primary);
  color: #111318;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--psdfa-primary) 24%, transparent), 0 1px 0 rgba(255,255,255,.42) inset;
  font-family: var(--psdfa-font);
  font-size: 13px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

body.asanwp-auth-page .asanwp-auth button.button:not(.unset):hover,
body.asanwp-auth-page .asanwp-auth a.button:not(.unset):hover {
  background: var(--psdfa-primary-hover);
  box-shadow: 0 13px 28px color-mix(in srgb, var(--psdfa-primary) 28%, transparent), 0 1px 0 rgba(255,255,255,.42) inset;
  filter: none;
  transform: translateY(-1px);
}

body.asanwp-auth-page .asanwp-auth button.button:not(.unset):active,
body.asanwp-auth-page .asanwp-auth a.button:not(.unset):active {
  transform: translateY(0);
}

body.asanwp-auth-page .asanwp-auth button:not(.unset).button.button-secondary {
  border-color: var(--psdfa-auth-border);
  background: var(--psdfa-auth-field);
  color: var(--psdfa-ink);
  box-shadow: none;
}

body.asanwp-auth-page .asanwp-auth button:not(.unset).button.button-secondary:hover {
  border-color: var(--psdfa-auth-border-strong);
  background: color-mix(in srgb, var(--psdfa-auth-field) 72%, var(--psdfa-primary) 7%);
  color: var(--psdfa-ink);
}

body.asanwp-auth-page .asanwp-auth a.button.asanwp-auth__google {
  border: 1px solid var(--psdfa-auth-border);
  background: var(--psdfa-surface);
  color: var(--psdfa-ink);
  box-shadow: 0 5px 16px rgba(17, 19, 24, .045);
}

body.asanwp-auth-page .asanwp-auth a.button.asanwp-auth__google:hover {
  border-color: var(--psdfa-auth-border-strong);
  background: var(--psdfa-auth-field);
  color: var(--psdfa-ink);
  box-shadow: 0 8px 20px rgba(17, 19, 24, .07);
}

body.asanwp-auth-page .asanwp-auth__divider {
  gap: 14px;
  color: var(--psdfa-muted);
  font-size: 11px;
}

body.asanwp-auth-page .asanwp-auth__divider::before,
body.asanwp-auth-page .asanwp-auth__divider::after {
  background: var(--psdfa-auth-border);
}

body.asanwp-auth-page .asanwp-auth__message,
body.asanwp-auth-page .asanwp-auth__description,
body.asanwp-auth-page .asanwp-auth__resend,
body.asanwp-auth-page .asanwp-auth__term {
  color: var(--psdfa-muted);
}

body.asanwp-auth-page .asanwp-auth__message strong {
  margin-inline: 3px;
  color: var(--psdfa-ink);
  font-weight: 900;
}

body.asanwp-auth-page .asanwp-auth__notice {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--psdfa-auth-border);
  border-radius: 12px;
  background: var(--psdfa-auth-field);
  text-align: center;
  line-height: 1.8;
}

body.asanwp-auth-page .asanwp-auth__notice--error {
  border-color: color-mix(in srgb, var(--psdfa-auth-danger) 28%, var(--psdfa-auth-border));
  background: var(--psdfa-auth-danger-soft);
  color: var(--psdfa-auth-danger);
}

body.asanwp-auth-page .asanwp-auth__notice--success,
body.asanwp-auth-page .asanwp-auth__success {
  border: 1px solid color-mix(in srgb, var(--psdfa-auth-success) 28%, var(--psdfa-auth-border));
  border-radius: 12px;
  background: var(--psdfa-auth-success-soft);
  color: var(--psdfa-auth-success);
}

body.asanwp-auth-page .asanwp-auth__success {
  padding: 12px 14px;
}

body.asanwp-auth-page .asanwp-auth__otp {
  gap: 7px;
  margin-block: 2px;
}

body.asanwp-auth-page .asanwp-auth input.asanwp-auth__otp-input {
  width: clamp(42px, 12vw, 50px);
  height: 54px;
  padding: 0;
  border-radius: 13px;
  font-size: 21px !important;
  font-weight: 900 !important;
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__otp-input.error,
body.asanwp-auth-page .asanwp-auth .asanwp-auth__input.error {
  border-color: color-mix(in srgb, var(--psdfa-auth-danger) 62%, var(--psdfa-auth-border)) !important;
  background: var(--psdfa-auth-danger-soft) !important;
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__password-toggle {
  inset-inline-end: 14px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--psdfa-muted);
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__password-toggle:hover {
  background: color-mix(in srgb, var(--psdfa-primary) 11%, transparent);
  color: var(--psdfa-ink);
  filter: none;
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__remember {
  min-height: 34px;
  padding: 2px 1px;
  color: var(--psdfa-muted);
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__remember input[type="checkbox"] {
  width: 19px;
  height: 19px;
  border-color: var(--psdfa-auth-border-strong);
  border-radius: 6px;
  background: var(--psdfa-surface);
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__remember input[type="checkbox"]:checked {
  border-color: var(--psdfa-primary);
  background: var(--psdfa-primary);
}

body.asanwp-auth-page .asanwp-auth a#asanwp-forgot-password,
body.asanwp-auth-page .asanwp-auth a#asanwp-login-with-password,
body.asanwp-auth-page .asanwp-auth #asanwp-resend-counter a,
body.asanwp-auth-page .asanwp-auth .asanwp-auth__term a {
  color: color-mix(in srgb, var(--psdfa-primary-hover) 82%, #5f4b00);
  font-weight: 850;
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__term a {
  border-bottom-color: color-mix(in srgb, var(--psdfa-primary) 55%, transparent);
}

body.asanwp-auth-page .asanwp-auth__links {
  margin-top: 10px;
  text-align: center;
}

body.asanwp-auth-page .asanwp-password-policy {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--psdfa-auth-border);
  border-radius: 14px;
  background: var(--psdfa-auth-field);
}

body.asanwp-auth-page .asanwp-password-policy__title {
  color: var(--psdfa-ink);
}

body.asanwp-auth-page .asanwp-password-policy__item {
  color: var(--psdfa-muted);
}

body.asanwp-auth-page .asanwp-auth__captcha img,
body.asanwp-auth-page #asanwp-captcha-image {
  border: 1px solid var(--psdfa-auth-border);
  background: var(--psdfa-surface);
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__back {
  inset-block-start: 30px;
  inset-inline-start: 28px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--psdfa-auth-border);
  border-radius: 11px;
  background: var(--psdfa-auth-field);
  color: var(--psdfa-ink);
  fill: currentColor;
  box-shadow: 0 4px 12px rgba(17, 19, 24, .04);
}

/* The plugin back icon is a filled path. Keep the theme's global SVG stroke
 * defaults from turning it into an invisible outline on the auth page. */
body.asanwp-auth-page .asanwp-auth .asanwp-auth__back svg,
body.asanwp-auth-page .asanwp-auth .asanwp-auth__back svg path {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__back svg {
  width: 20px;
  height: 20px;
  color: inherit;
}

body.asanwp-auth-page .asanwp-auth .asanwp-auth__back:hover {
  border-color: color-mix(in srgb, var(--psdfa-primary) 40%, var(--psdfa-auth-border));
  background: color-mix(in srgb, var(--psdfa-primary) 10%, var(--psdfa-auth-field));
  color: var(--psdfa-ink);
  fill: currentColor;
  filter: none;
  transform: translateX(2px);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page {
  --psdfa-auth-card: color-mix(in srgb, var(--psdfa-dark-surface) 92%, transparent);
  --psdfa-auth-card-strong: var(--psdfa-dark-surface);
  --psdfa-auth-field: color-mix(in srgb, var(--psdfa-dark-surface-2) 94%, var(--psdfa-dark-surface));
  --psdfa-auth-border: color-mix(in srgb, var(--psdfa-dark-border) 88%, transparent);
  --psdfa-auth-border-strong: color-mix(in srgb, var(--psdfa-primary) 22%, var(--psdfa-dark-border));
  --psdfa-auth-success: var(--psdfa-dark-success);
  --psdfa-auth-success-soft: var(--psdfa-dark-success-soft);
  --psdfa-auth-danger: var(--psdfa-dark-danger);
  --psdfa-auth-danger-soft: var(--psdfa-dark-danger-soft);
  --psdfa-auth-focus-surface: var(--psdfa-dark-surface-3);
  --psdfa-auth-shadow: 0 30px 90px var(--psdfa-dark-shadow), 0 10px 32px rgba(0, 0, 0, .22);
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--psdfa-primary) 20%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--psdfa-primary) 13%, transparent), transparent 25%),
    radial-gradient(circle at 18% 86%, color-mix(in srgb, var(--psdfa-dark-surface-3) 62%, transparent), transparent 30%),
    linear-gradient(135deg, var(--psdfa-dark-bg) 0%, color-mix(in srgb, var(--psdfa-dark-bg) 76%, var(--psdfa-dark-surface-2)) 52%, var(--psdfa-dark-bg) 100%) !important;
  background-size: 24px 24px, auto, auto, auto;
  color: var(--psdfa-ink);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--psdfa-dark-surface-3) 62%, transparent), transparent 70%);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth__wrapper {
  border-color: var(--psdfa-auth-border);
  background: var(--psdfa-auth-card);
  box-shadow: var(--psdfa-auth-shadow);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth__logo a {
  border-color: color-mix(in srgb, var(--psdfa-primary) 18%, var(--psdfa-dark-border));
  background: color-mix(in srgb, var(--psdfa-dark-surface-2) 88%, var(--psdfa-dark-surface));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .03);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth a.button.asanwp-auth__google,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth button:not(.unset).button.button-secondary {
  border-color: var(--psdfa-auth-border);
  background: var(--psdfa-auth-field);
  color: var(--psdfa-ink);
  box-shadow: none;
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth a.button.asanwp-auth__google:hover,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth button:not(.unset).button.button-secondary:hover {
  border-color: var(--psdfa-auth-border-strong);
  background: var(--psdfa-dark-surface-3);
  color: var(--psdfa-ink);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth__notice,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-password-policy,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__back {
  border-color: var(--psdfa-auth-border);
  background: var(--psdfa-auth-field);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__remember input[type="checkbox"] {
  border-color: var(--psdfa-auth-border-strong);
  background: var(--psdfa-dark-surface-2);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__remember input[type="checkbox"]:checked {
  border-color: var(--psdfa-primary);
  background: var(--psdfa-primary);
}

html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth a#asanwp-forgot-password,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth a#asanwp-login-with-password,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth #asanwp-resend-counter a,
html[data-psdfa-theme="dark"] body.asanwp-auth-page .asanwp-auth .asanwp-auth__term a {
  color: var(--psdfa-primary);
}

@media (max-width: 560px) {
  body.asanwp-auth-page .asanwp-auth-page__content {
    align-items: center;
    padding: 18px 12px;
  }

  body.asanwp-auth-page .asanwp-auth {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body.asanwp-auth-page .asanwp-auth__wrapper {
    padding: 32px 20px 24px;
    border-radius: 22px;
  }

  body.asanwp-auth-page .asanwp-auth h2.asanwp-auth__title {
    margin-bottom: 20px;
    font-size: 20px;
  }

  body.asanwp-auth-page .asanwp-auth__logo {
    margin-bottom: 18px;
  }

  body.asanwp-auth-page .asanwp-auth .asanwp-auth__back {
    inset-block-start: 24px;
    inset-inline-start: 18px;
  }

  body.asanwp-auth-page .asanwp-auth input.asanwp-auth__otp-input {
    width: min(12vw, 46px);
    min-width: 38px;
    height: 50px;
    border-radius: 11px;
    font-size: 19px !important;
  }
}

@media (max-width: 390px) {
  body.asanwp-auth-page .asanwp-auth__wrapper {
    padding-inline: 16px;
  }

  body.asanwp-auth-page .asanwp-auth__otp {
    gap: 5px;
  }

  body.asanwp-auth-page .asanwp-auth input.asanwp-auth__otp-input {
    min-width: 34px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.asanwp-auth-page .asanwp-auth *,
  body.asanwp-auth-page .asanwp-auth *::before,
  body.asanwp-auth-page .asanwp-auth *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}