.signup-wrapper {
  flex-grow: 1;
  max-width: sizeToRem(972);
  background-color: $light-background;
  padding: sizeToRem(54) sizeToRem(16) sizeToRem(40);

  @include media-breakpoint-up(sm) {
    @include box-border;

    padding: sizeToRem(82) sizeToRem(60) sizeToRem(60);
    margin: sizeToRem(30) sizeToRem(25);
  }

  @include media-breakpoint-up(md) {
    padding-left: sizeToRem(86);
    padding-right: sizeToRem(86);
  }

  @include media-breakpoint-up(lg) {
    margin: sizeToRem(30) auto;
    width: sizeToRem(958);
    padding-left: sizeToRem(186);
    padding-right: sizeToRem(186);
  }

  @include media-breakpoint-up(xl) {
    width: sizeToRem(972);
  }
}

.signup-logo {
  text-align: center;
  margin-bottom: sizeToRem(40);

  svg {
    width: sizeToRem(174);
    height: sizeToRem(48);
  }

  @include media-breakpoint-up(sm) {
    margin-bottom: sizeToRem(50);

    svg {
      width: sizeToRem(212);
      height: sizeToRem(58);
    }
  }
}

.signup-title {
  span {
    font-size: sizeToRem(24);
    font-weight: 400;
  }
}

.signup-language {
  margin-bottom: sizeToRem(40);

  @include media-breakpoint-up(sm) {
    margin-bottom: sizeToRem(50);
  }
}

.signup-buttons {
  margin-top: sizeToRem(10);

  @include media-breakpoint-up(sm) {
    margin-top: sizeToRem(30);
  }

  .signup-btn {
    min-width: sizeToRem(120);

    &.cancel {
      margin-right: sizeToRem(30);
    }
  }
}

// SIGNUP STEP 1

.signup-intro {
  @include box-border;

  padding: sizeToRem(20) sizeToRem(16);
  margin-bottom: sizeToRem(30);

  @include media-breakpoint-up(sm) {
    padding: sizeToRem(30);
    margin-bottom: sizeToRem(50);
  }
}

.signup-terms-header {
  margin-bottom: sizeToRem(20);
  font-weight: 500;

  @include media-breakpoint-up(sm) {
    margin-bottom: sizeToRem(30);
  }
}

.signup-terms-content h1 {
  text-align: center;
  margin-bottom: sizeToRem(32);
}

.signup-terms-content h2 {
  margin-top: sizeToRem(32);
}

.signup-terms-content ul {
  list-style-type: none;
  counter-reset: terms-counter;
  padding-left: sizeToRem(30);
  margin-bottom: 0;

  li {
    margin-bottom: sizeToRem(16);
    counter-increment: terms-counter;
    position: relative;

    &::before {
      content: counter(terms-counter) '.';
      position: absolute;
      left: sizeToRem(-30);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.signup-terms-checkbox {
  margin-top: sizeToRem(30);

  @include media-breakpoint-up(sm) {
    margin-top: sizeToRem(50);
  }
}

// SIGNUP STEP 2

%signup-form-radio {
  margin: sizeToRem(12) 0;

  .form-radio-main-label {
    font-weight: 500;
  }

  .form-radio-option-wrapper {
    min-width: sizeToRem(170);
  }
}

.signup-form-radio {
  @extend %signup-form-radio;
}

.signup-input-wrapper {
  display: flex;
  align-items: flex-start;

  & > :first-child {
    flex-grow: 1;
  }

  @include media-breakpoint-up(sm) {
    display: block;
    position: relative;
  }

  .input-field {
    border: #dadada solid 1px;
    background-color: #f5f5f5 !important;
    transition: background-color 0.2s ease;

    &:focus {
      background-color: $light-background !important;
      color: black;
    }

    &:not([value='']) {
      background-color: $light-background !important;
      border-color: black;
      color: black;
    }
  }

  .input-label {
    color: gray;
  }
}

.signup-tooltip {
  margin-top: sizeToRem(9);

  @include media-breakpoint-up(sm) {
    margin-top: 0;
    position: absolute;
    top: sizeToRem(9);
    right: sizeToRem(-40);
  }

  @include media-breakpoint-up(md) {
    right: sizeToRem(-50);
  }
}

.signup-custom-field-array-wrapper {
  margin-bottom: 1rem;
  position: relative;
  padding: 0 sizeToRem(40) 0 0;

  @include media-breakpoint-up(md) {
    padding: 0;
  }

  .form-control.is-invalid {
    background-image: none;
  }
}

.signup-field-array-wrapper {
  @include media-breakpoint-up(sm) {
    display: flex;
    align-items: flex-start;
    position: relative;

    & > :first-child {
      flex-grow: 1;
    }
  }

  .signup-field-array-btn-add {
    padding: sizeToRem(14) sizeToRem(10);
  }

  .signup-field-array-btn-remove {
    padding: sizeToRem(14) 0;
  }

  .signup-field-array-btn-add,
  .signup-field-array-btn-remove {
    @include media-breakpoint-up(sm) {
      width: sizeToRem(107);
      margin-left: sizeToRem(8);
    }

    @include media-breakpoint-up(md) {
      width: sizeToRem(130);
      margin-left: sizeToRem(20);
    }
  }
}

// SIGNUP SUCCESS

.signup-success-icon {
  color: rgba($dark-lighter, 0.3);
  width: sizeToRem(150);

  @include media-breakpoint-up(lg) {
    width: sizeToRem(225);
  }
}

.signup-success-title {
  font-size: sizeToRem(20);

  @include media-breakpoint-up(lg) {
    font-size: sizeToRem(30);
  }
}
