@import '../helpers/helpers';

.design-appointment {
  .consultant-form {
    &__wrap {
      .row {
        flex-wrap: inherit;
      }

      .your-details__wrap,
      .next-actions__wrap {
        display: block;
        width: 100%;
        flex: inherit;
        max-width: inherit;
        padding: 15px;
      }

      .next-actions__wrap {
        & + .your-details__wrap {
          .your-details {
            padding-left: 60px;
            padding-right: 60px;
          }
        }
      }

      .form-container-fix {
        & + .next-actions__wrap {
          display: none;
        }
      }
    }
  }

  .dc-header {
    display: none;
    color: #fff;
    background: #2f8196;
    text-align: center;
    margin: 0 -15px;
    padding: 24px 15px;

    h2 {
      font-weight: 700;
    }
  }

  .dc-button-wrap {
    display: none;
    margin-top: 20px;
    text-align: center;

    & .btn {
      width: 100%;
    }
  }

  .dc-intro {
    text-align: center;
    font-size: 20px;
    font-weight: 500;

    a {
      text-decoration: none;
    }
  }

  .page-header {
    text-align: center;
    max-width: 800px;
    margin: auto;

    p {
      font-size: 1rem;
      margin-bottom: 8px;
    }
  }

  &--jrni {
    main {
      padding-bottom: 0;
    }
  }
}

@include media-breakpoint-up(lg) {
  .design-appointment {
    .consultant-form {
      &__wrap {
        .your-details__wrap {
          padding-top: 0;
        }

        .next-actions__wrap {
          border: 1px solid $gray-light;
        }
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .design-appointment {
    .page-header {
      margin-bottom: 0;

      &_border-all {
        border-bottom: 0;
      }
    }

    .design-appt-aside {
      &__title {
        text-align: center;
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .design-appointment {
    .consultant-form {
      &__wrap {
        .row {
          flex-wrap: wrap-reverse;
          flex-direction: column;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .design-appointment {
    .consultant-form {
      &__wrap {
        .row {
          .your-details__wrap {
            .your-details {
              padding-left: 15px;
              padding-right: 15px;
            }
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(xs) {
  .design-appointment {
    .img-fluid {
      display: none;
    }

    .dc-header,
    .dc-button-wrap {
      display: block;
    }
  }
}