/* BEGIN REGISTRATION & LOGIN FORMS */

/* Base: stack all fields (mobile-first) */

.ally-register-form,
.ally-login-form,
.ally-lostpassword-form {
    padding: 40px 50px;
    background-color: #ebf3f9;
    border-radius: 10px;
    }

.ally-register-form h2,
.ally-login-form h2,
.ally-lostpassword-form h2 {
    color: #0e2238;
    margin-bottom: 20px;
    width: 100%;
    }

.ally-register-form p,
.ally-login-form p,
.ally-lostpassword-form p {
    margin: 0 0 1rem;
    }

.ally-register-form button,
.ally-login-form button,
.ally-lostpassword-form button {
    padding: 10px 10px 11px 10px;
    background: black;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: all .25s;
    }

.ally-register-form button:hover,
.ally-login-form button:hover,
.ally-lostpassword-form button:hover {
    background: #fff;
    color: black;
    }

.ally-register-form .notice-error,
.ally-login-form .notice-error,
.ally-lostpassword-form .notice-error {
    width: 100%;
    color: #ba0000;
    margin: 0 0 20px;
    padding: 0;
    }

.ally-register-form .notice-error ul,
.ally-login-form .notice-error ul,
.ally-lostpassword-form ul {
    margin: 0 0 0px 15px;
    padding: 0;
    }

/* Over 500px: arrange username + email side by side,
   and confirm email + password side by side */
@media (min-width: 500px) {
  .ally-register-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* space between columns */
  }

  /* First row: username + email */
  .ally-register-form p:nth-of-type(1),
  .ally-register-form p:nth-of-type(2) {
    flex: 1 1 45%;
    min-width: 200px;
  }

  /* Second row: confirm email + password */
  .ally-register-form p:nth-of-type(3),
  .ally-register-form p:nth-of-type(4) {
    flex: 1 1 45%;
    min-width: 200px;
  }

  /* Make the submit button span full width */
  .ally-register-form p:last-of-type {
    flex: 1 1 100%;
  }
}

/* END REGISTRATION FORM */