@import '../helpers/helpers';

.book-consultant-thank-you-page {

  .card-block {
    position: relative;
    text-align: center;

    &.center {
      text-align: center;
    }

    &.left {
      text-align: left;
    }

    &.right {
      text-align: right;
    }

    &.no-divider:not(:last-child):after {
      content: none;
      padding-bottom: 0;
    }

    &__info {
      @include primary-text;
      padding-top: 15px;
    }

    &:not(:last-child) {
      padding-bottom: 80px;

      &::after {
        content: '';
        position: absolute;
        left: calc(50% - 555px/2);
        bottom: 36px;
        height: 8px;
        width: 555px;
        background-color: $blue-dark;
      }
    }

    &.thank-you-block {
      h1 {
        text-transform: none;
        margin: 0;
      }
    }

    &.home-visit-checklist-block {
      h2 {
        font-weight: 500;
        margin: 0;
      }

      h3 {
        margin: 30px 0 20px;
      }

      .home-visit-steps {
        @include make-row;
        padding: 0;
        margin-bottom: 0;
        overflow: hidden;
        counter-reset: step;

        &__item {
          @include make-col-ready;
          flex-basis: 0;
          flex-grow: 1;
          max-width: 100%;
          list-style-type: none;

          &::before {
            content: counter(step);
            counter-increment: step;
            width: 50px;
            height: 50px;
            background: $white;
            display: block;
            font-size: 2rem;
            line-height: 2.5rem;
            font-weight: bold;
            margin: 0 auto;
          }

          &::after {
            content: '';
            width: 100%;
            height: 1px;
            background: $gray-dark;
            position: absolute;
            left: -50%;
            top: 20px;
            z-index: -1;
          }

          &:first-child::after {
            content: none;
          }
        }
      }
    }

    &.gather-your-ideas-block {
      h2 {
        font-weight: 500;
        margin: 0;
      }

      .gather-your-ideas {
        @include make-row;
        text-align: left;
        padding-top: 30px;

        &__item {
          @include make-col-ready;
          @include make-col(4);
          margin-bottom: 30px;

          &-info {
            display: flex;
            flex-direction: column;
            height: 100%;

            &__img img {
              width: 100%;
              margin-bottom: 15px;
            }

            &-content {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: inherit;
            }
          }
        }
      }

      &:not(:last-child) {
        padding-bottom: 0;
      }

      & .gather-your-ideas--col2 .gather-your-ideas__item {
        flex: 0 0 50%;
        max-width: 50%;
      }

      & .gather-your-ideas--col1 .gather-your-ideas__item {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
    }

    & .gather-your-ideas--floring {
      .home-visit-checklist-block {
        display: none;
      }

      .gather-your-ideas__item {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

    &.social-media-block {
      .social-media {
        @include make-row;
        margin: 26px auto 0;
        width: 400px;

        &__item {
          @include make-col-ready;
          @include make-col(4);
          display: block;
          text-decoration: none;
          color: $gray-dark;

          &:hover {
            .social-media__svg {
              opacity: .7;
            }
          }
        }

        &__svg {
          width: 50px;
          height: 50px;
          opacity: 1;
        }

        &__title {
          font-size: 18px;
          line-height: 21px;
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }

  .widget-gallery-block {
    // sass-lint:disable no-ids
    & .olapic #olapic-slider-widget.olapic-slider-widget {
      margin: 0 auto;
    }

    // sass-lint:disable no-ids
    & .olapic #olapic-slider-widget .olapic-slider-header {
      padding: 0;
    }
  }
}

@include media-breakpoint-down(sm) {
  .book-consultant-thank-you-page {
    .card-block {
      &:not(:last-child) {
        padding-bottom: 68px;

        &::after {
          left: calc(50% - 200px/2);
          bottom: 30px;
          width: 200px;
        }
      }

      &.thank-you-block {
        h1 {
          text-align: center;
        }
      }

      &.home-visit-checklist-block {
        h2 {
          text-align: center;
        }

        h3 {
          text-align: center;
        }

        .home-visit-steps {
          text-align: left;


          &__item {
            @include make-col(12);

            &-text {
              display: block;
              margin-left: 50px;
              padding: 10px 0 15px;
            }

            &::before {
              position: absolute;
              text-align: center;
              top: 5px;
              height: 40px;
            }

            &::after {
              width: 1px;
              height: 100%;
              left: 40px;
              top: 10px;
            }

            &:first-child::after {
              content: '';
            }

            &:last-child::after {
              content: none;
            }
          }
        }
      }

      .gather-your-ideas__item:last-child {
        margin-bottom: 0;
      }

      &.gather-your-ideas-block {
        h2 {
          text-align: center;
        }

        &:not(:last-child) {
          padding-bottom: 30px;
        }

        .gather-your-ideas {
          padding-top: 20px;

          &__item {
            @include make-col(12);

            &:not(:last-child) {
              margin-bottom: 30px;
            }
          }
        }

        & .gather-your-ideas--col2 .gather-your-ideas__item {
          flex: 0 0 100%;
          max-width: 100%;
        }
      }

      &.social-media-block {
        h3 {
          text-align: center;
        }

        .social-media {
          text-align: center;
          width: 300px;
        }
      }
    }

    .map-container {
      margin-left: 0;
      margin-right: 0;
    }
  }
}