/* UI v24: robust Password Recovery layout loaded after the framework. */
.auth-page__panel--password-recovery {
  position: relative !important;
  align-items: center !important;
  width: 416px !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

/* Notifications must not participate in the centered shell's height.
 * Otherwise the card jumps upward whenever an error appears below it. */
.auth-page__panel--password-recovery > .auth-page__alert {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
}

.auth-card--password-recovery {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 416px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 347px !important;
  padding: 24px !important;
  gap: 24px !important;
  border-radius: var(--radius-lg, 12px) !important;
  overflow: visible !important;
}

.auth-card__header--password-recovery {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 368px !important;
  max-width: 100% !important;
  height: auto !important;
  gap: 16px !important;
}

.auth-card__title--password-recovery {
  width: 100% !important;
  height: auto !important;
  min-height: 92px !important;
  margin: 0 !important;
  text-align: center !important;
}

.auth-card__description--password-recovery {
  width: 100% !important;
  height: auto !important;
  min-height: 51px !important;
  margin: 0 !important;
  color: var(--color-black-base, #0F172A) !important;
  font-family: var(--font-family-base, "Inter", Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 120% !important;
  text-align: center !important;
}

.auth-recovery-form {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 368px !important;
  max-width: 100% !important;
  height: auto !important;
  gap: 20px !important;
}

.auth-recovery-form__input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
}

.auth-recovery-form__actions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  gap: 16px !important;
  margin: 0 !important;
}

.auth-recovery-form__actions > .auth-recovery-form__back,
.auth-recovery-form__actions > .auth-recovery-form__submit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  text-decoration: none !important;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease !important;
}

.auth-recovery-form__actions > .auth-recovery-form__back:hover,
.auth-recovery-form__actions > .auth-recovery-form__back:focus,
.auth-recovery-form__actions > .auth-recovery-form__back:active {
  text-decoration: none !important;
}

@media (max-width: 460px) {
  .auth-page__panel--password-recovery,
  .auth-card--password-recovery,
  .auth-card__header--password-recovery,
  .auth-recovery-form,
  .auth-recovery-form__actions {
    width: 100% !important;
  }

  .auth-recovery-form__actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}