@import url("/css/design_v2/color.css");
@import url("/css/design_v2/font.css");
@import url("/css/design_v2/standards.css");
@import url("/css/design_v2/breakpoints.css");


.signup-form__title {
  margin-block-end: var(--Space-S);
  margin-top: var(--Space-L);
  margin-bottom: var(--Space-M);
}

.signup-password-criteria {
  color: var(--Color-Text-Navy-700);
}

/* Submit button extra padding (signup-specific) */
.pp-v2-submit {
  padding-top: var(--Space-M) !important;
  padding-bottom: var(--Space-M) !important;
}

/* Field spacing overrides for signup */
.signup-form .pp-v2-field {
  margin-bottom: var(--Space-M);
}

.signup-form .pp-v2-field.select-field {
  margin-top: var(--Space-M);
  margin-bottom: var(--Space-M);
}

.signup-form .pp-v2-field.role-select {
  margin-bottom: var(--Space-M);
}

.signup-form .pp-v2-field.st-select {
  margin-bottom: var(--Space-L);
}

/* Criteria helper text */
.signup-form .signup-password-criteria {
  color: var(--Color-Text-Navy-700);
  margin-top: var(--Space-XS);
  margin-bottom: var(--Space-M);
}

/* Override legacy SCSS fixed width for role-select */
.signup-form select#role-select {
  width: 100% !important;
}

/* Responsive layout for select pair */
@media (min-width: 600px) {
  .signup-form__title {
    margin-top: var(--Space-XL);
  }

  .signup-form fieldset {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--Space-M);
  }

  .signup-form fieldset > .pp-v2-field {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .signup-password-criteria {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .pp-v2-error-state {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .pp-v2-two-col {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .pp-v2-field.role-select,
  .signup-form fieldset > .pp-v2-field.st-select {
    grid-column: span 6;
  }

  .signup-form .pp-v2-two-col {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--Space-M);
  }

  .signup-form .pp-v2-two-col > .pp-v2-field {
    grid-column: span 6;
  }
}

/* Select caret styling is centralized in FormValidationHelper.css for all V2 forms */

@media (min-width: 1240px) {
  .signup-form__title {
    margin-top: var(--Space-XL);
  }

  .signup-form fieldset {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--Space-M);
  }

  .signup-form fieldset > .pp-v2-field {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .signup-password-criteria {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .pp-v2-error-state {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .pp-v2-two-col {
    grid-column: 1 / -1;
  }

  .signup-form fieldset > .pp-v2-field.role-select,
  .signup-form fieldset > .pp-v2-field.st-select {
    grid-column: span 6;
  }

  .signup-form .pp-v2-two-col {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--Space-M);
  }

  .signup-form .pp-v2-two-col > .pp-v2-field {
    grid-column: span 6;
  }
}