.recovery-page {
  padding: 24px;
}

.recovery-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.14) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.1) 0 10px, transparent 11px),
    radial-gradient(circle at 66% 18%, rgba(255,255,255,.08) 0 5px, transparent 6px);
}

.recovery-card {
  max-width: 460px;
  max-height: none;
  overflow: visible;
  padding: 2.5rem;
}

.recovery-header {
  margin-bottom: 1.8rem;
}

.recovery-header .auth-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 1.2rem;
  animation: none;
}

.recovery-header .auth-title {
  font-size: 1.85rem;
}

.recovery-header .auth-subtitle {
  margin: 0 auto;
  max-width: 330px;
}

.recovery-alert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border: 1px solid;
  border-radius: 13px;
  font-size: .9rem;
  line-height: 1.35;
}

.recovery-alert-success {
  color: #137044;
  background: #eaf8f0;
  border-color: #bce6ce;
}

.recovery-alert-danger {
  color: #a12622;
  background: #fff0ef;
  border-color: #f3c3c0;
}

.recovery-password-field .form-control {
  padding-right: 3.4rem;
}

.recovery-password-field .form-control.is-invalid {
  padding-right: 3.4rem;
  background-image: none;
}

.recovery-password-field .form-icon,
.recovery-password-field .password-toggle {
  top: 29px;
}

.recovery-field-error {
  margin-top: .4rem;
  padding-left: .25rem;
  color: var(--danger);
  font-size: .82rem;
}

.recovery-hint,
.recovery-note {
  color: var(--muted);
  font-size: .86rem;
}

.recovery-hint {
  margin: -.15rem 0 1.25rem;
  text-align: center;
}

.recovery-note {
  margin: 1.4rem 0 0;
  text-align: center;
}

.recovery-page .back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .recovery-page {
    align-items: center;
    padding: 72px 14px 18px;
    overflow-y: auto;
  }

  .recovery-card {
    margin: 0 auto;
    padding: 2rem 1.35rem;
    border-radius: 20px;
  }

  .recovery-header .auth-logo {
    width: 64px;
    height: 64px;
  }

  .recovery-header .auth-title {
    font-size: 1.6rem;
  }
}