@import '../helpers/helpers';
@import '../components/id-type-modal';
@import '../components/capture-modal';

.page_signup-tradepro {
  .page-header {
    &__info {
      font-size: .875rem;
      margin-top: 1rem;
      margin-bottom: 0;

      @include media-breakpoint-up(sm) {
        &:not(:last-child) {
          margin-top: 0;
        }
      }

      @include media-breakpoint-down(sm) {
        &:not(:last-child) {
          margin-top: 0;
        }
      }

    }

    &__intro {
      .img-responsive {
        margin-bottom: 15px;
      }
    }
  }

  .st-loc-link {
    padding-top: 1rem;
    margin-bottom: 2rem;

    @include media-breakpoint-down(sm) {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  .small-print {
    @include additional-text;
  }

  .choose-id {
    display: block;

    .actions__link {
      text-decoration: underline;
      font-weight: 500;
    }

    .btn {
      color: $white;
      margin-right: 10px;
    }

    &:hover,
    .btn:hover {
      .btn {
        background-color: $white;
        border-color: $blue;
        color: $blue;
      }
    }
  }

  .tradePro-card {
    &-wrap {
      .col {
        @include media-breakpoint-down(sm) {
          padding-right: 0;
        }
      }
    }

    @include media-breakpoint-down(sm) {
      min-width: 100%;
    }

    .card {
      &__title {
        font-size: 1.125rem;
      }

      &__descr,
      &__list {
        @include primary-text;
      }

      &__list {
        &-link {
          display: none;
        }
      }

      &__actions {
        @include media-breakpoint-down(sm) {
          .btn {
            width: 100%;
            white-space: inherit;
          }
        }
      }
    }

    &:first-of-type {
      .card__actions-wrap {
        display: none;
      }
    }
  }

  .left-aside {
    @include media-breakpoint-down(sm) {
      margin-bottom: 60px;
    }
  }

  .divider {
    &-desk {
      display: block;
      @include media-breakpoint-down(sm) {
        display: none;
      }
    }

    &-mob {
      display: none;
      @include media-breakpoint-down(sm) {
        display: block;
      }
    }
  }

  .content {
    .container {
      @include media-breakpoint-up(md) {
        padding-right: 0;
      }
    }
  }

  .notification_warning {
    width: 100%;
    margin: 0;
    margin-bottom: 25px;
  }

  .fill-remaining {
    @include media-breakpoint-down(sm) {
      margin-right: -15px;
      width: auto;
    }
  }
}

.signup-tradepro {
  padding-top: 5px;
  @include media-breakpoint-down(sm) {
    padding: 20px 15px 30px;
    margin-right: -15px;

    &-wrap {
      padding: 0;
    }
  }

  &__attach {
    &_id {
      margin-top: 15px;
    }

    .btn-primary {

      .btn__text {
        font-size: 1rem;
      }
    }

    a {
      font-size: 1rem;
    }
  }

  &__title {
    font-size: 1.25rem;

    &:nth-of-type(4) {
      margin-top: 30px;
    }
  }

  &__row {
    &:nth-child(2) {
      .signup-tradepro {
        &__paragraph {
          &:first-of-type {
            margin-top: 20px;

            @include media-breakpoint-down(sm) {
              margin-top: 20px;
            }
          }
        }

        &__descr {
          &:nth-child(2) {
            @include media-breakpoint-up(md) {
              border-top: 1px solid $gray;
              padding-top: 15px;
            }
          }
        }
      }
    }
  }

  .form-row {
    &__action {
      margin-top: 10px;
      padding-top: 0;

      &::before {
        content: none;
      }

      @include media-breakpoint-down(sm) {
        margin-top: 20px;
      }

      .tradepro-submit {
        @include media-breakpoint-up(md) {
          width: 160px;
        }

        @include media-breakpoint-up(lg) {
          width: 260px;
        }
      }
    }

    &__col-btn {
      @include media-breakpoint-down(sm) {
        padding-left: 30px;
      }
    }

    @include media-breakpoint-down(sm) {
      padding: 0;
    }
  }

  &__descr {
    .warning-required {
      @include normal-text;
      font-weight: normal;

      @include media-breakpoint-down(sm) {
        margin: 20px 0;
      }

      &:first-of-type {
        font-size: .75rem;
        margin-bottom: 10px;
        font-weight: 500;
      }
    }

    .row-title {
      .ddn {
        width: 160px;
      }
    }

    .tradepro-terms {
      .warning-required {
        font-size: inherit;
        font-weight: 400;
      }

      @include media-breakpoint-down(sm) {
        border-top: 1px solid $gray;
        padding-top: 20px;
      }
    }

    .chosen-form-container {
      .chosen-form {
        position: relative;
        display: flex;
        justify-content: space-between;
        line-height: 30px;

        img {
          width: 30px;
          height: 30px;
        }

        &-wrap {
          margin: 0;
          margin-top: 10px;
          display: table;

          .form-row__error {
            margin-top: 0;
            padding: 5px 0;
          }
        }

        .icon__notification {
          position: inherit;
          top: 3px;
          min-width: 24px;
        }
      }
    }

    .chosen-proofs-error {
      margin: 0;
      display: flex;
    }

    .form-row.chosen-proofs-error {
      .form-row__error {
        padding-left: 0;
        margin-bottom: 15px;
      }
    }
  }

  &__paragraph {
    @include media-breakpoint-down(sm) {
      padding-right: 15px;
    }
  }

  &__paragraph.warning-required {
    // sass-lint:disable no-important
    font-size: .875rem;
    margin-top: 0;
    font-weight: normal !important;
  }

  .icon {
    &__notification {
      position: absolute;
      right: 0;
      color: $green;

      svg {
        vertical-align: middle;
      }
    }
  }
}

.notification.fill-remaining {
  margin: 0 16px 24px;

  @include media-breakpoint-up(sm) {
    margin: 0 0 24px;
  }

  &--local {
    @include media-breakpoint-only(xs) {
      margin-right: 0;
      width: auto;
    }

    @include media-breakpoint-only(sm) {
      margin-right: -15px;
      width: auto;
    }
  }
}