/* Mobile-only layout tweaks for the forgot-password flow
   (choice, email, whatsapp, confirm, done, complete pages).
   Everything here is scoped to max-width: 767.98px (Bootstrap's md breakpoint)
   so tablet/desktop layouts are left exactly as they are. */
@media (max-width: 767.98px) {
  .pwreset-wrapper {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .pwreset-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 20px;
    border-radius: 10px;
  }

  .pwreset-card h1 {
    font-size: 1.3rem;
    padding-top: 0.5rem !important;
  }

  .pwreset-card h5 {
    font-size: 1.05rem;
  }

  .pwreset-card label {
    font-size: 0.9rem;
  }

  .pwreset-card .btn,
  .pwreset-card .form-control {
    font-size: 1rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .pwreset-alert {
    margin-left: 12px;
    margin-right: 12px;
    padding: 16px;
  }

  .pwreset-alert .lead {
    font-size: 0.95rem;
  }
}