.page-header {
  &__order-number {
    @include heading-2;
    text-align: center;
    margin-top: 20px;

    &_strong {
      font-weight: 700;
    }

    @include media-breakpoint-down(sm) {
      text-align: left;
    }
  }
}

.checkout-confirmation-shopping-card {
  margin-bottom: 40px;

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

.shopping-card-container {
  &_bordered {
    margin-top: 20px;
    border: 1px solid $gray;
  }

  .delivery-details-option__delivery-info {
    margin: 0;
    padding: 20px 0;

    @include media-breakpoint-up(lg) {
      padding: 20px 20px 20px 0;
    }
  }

  .delivery-details-option__delivery-info-left {
    @include media-breakpoint-down(md) {
      margin-bottom: 20px;
    }
  }

  .order-line {
    margin-top: 0;
    padding: 20px;
  }
}

.product-delivery-table {
  margin-bottom: 40px;
  border: 1px solid $gray;

  @include media-breakpoint-down(sm) {
    margin-bottom: 30px;
  }

  &__delivery-info {
    padding: 20px 0;
  }

  h4 {
    margin-bottom: 10px;

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

  &__content {
    @include primary-text;
  }

  &__date {
    @include make-col(2, 9);
    @include make-col-ready;
    text-align: center;

    @include media-breakpoint-down(md) {
      @include make-col(6);
    }
  }

  &__date-inner {
    margin-top: 10px;
    color: $warm-grey;
    border-right: 1px solid $gray;
  }

  .checkout-address-time__time-additional {
    font-size: .625rem;

    @include media-breakpoint-up(lg) {
      display: none;
    }
  }

  &__time {
    @include make-col-offset(1, 9);
    @include make-col(3, 9);
    @include make-col-ready;

    @include media-breakpoint-down(md) {
      display: none;
    }
  }

  &__address {
    @include make-col(3, 9);
    @include make-col-ready;

    @include media-breakpoint-down(md) {
      @include make-col(6);
    }
  }

  &__charity {
    .order-line {
      border-top: 0;

      &__calc_quant {
        display: none;
      }

      &__calc.area-total {
        display: none;
      }

      &__img-static img {
        padding: 20px;
      }

      &__title {
        padding-top: 20px;
      }
    }

    @include media-breakpoint-down(sm) {
      .order-line {
        &__img-static img {
          padding: 10px 10px 0;
        }

        &__title {
          padding-top: 10px;
        }
      }
    }
  }
}

.product-supplier-delivery {
  border-top: 0;
}

.c {
  margin-top: 40px;
  padding-bottom: 40px;

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

  .checkout-register__row:first-child {
    .checkout-register__descr:first-child {
      padding-bottom: 10px;

      &::after {
        position: absolute;
        content: '';
        height: 1px;
        background: $gray-light;
        left: 15px;
        right: 15px;
        bottom: 0;
      }
    }
  }

  &__paragraph {
    @include primary-text;
    margin-bottom: 0;
  }

  &__row {
    @include make-row;
  }

  &__title {
    margin: 30px 0;
  }

  &__descr {
    @include make-col-ready;
    @include make-col(12);

    @include media-breakpoint-up(md) {
      @include make-col(7, 9);
      @include make-col-offset(1, 9);
    }

    @include media-breakpoint-up(lg) {
      @include make-col(5, 9);
      @include make-col-offset(2, 9);
    }
  }

  &__card-title {
    margin: 30px 0 20px;
  }

  &__card-holder {
    @include make-col(12);

    @include media-breakpoint-down(md) {
      @include make-col-ready;
    }
  }

  &__card {
    @include make-col(12);
    @include make-col-ready;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid $gray;
  }

  &__card-info {
    @include make-row;
    margin: 0;
    padding: 0;
    line-height: 1.375rem;
    color: $warm-grey;

    dt {
      @include make-col(6);
      color: $gray-dark;
      font-weight: 700;

      @include media-breakpoint-down(sm) {
        @include make-col(12);
      }
    }

    dd {
      @include make-col(6);
      text-align: right;

      @include media-breakpoint-down(sm) {
        @include make-col(12);
        text-align: left;
      }

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

  .row-title {
    .form-row__field {
      @include media-breakpoint-down(sm) {
        @include make-col(12);
      }

      @include media-breakpoint-only(md) {
        @include make-col(4, 9);
      }

      @include media-breakpoint-up(lg) {
        @include make-col(2, 5);
      }
    }
  }

  .form-row__action {
    .form-row__col-btn {
      min-width: 190px;

      @include media-breakpoint-only(md) {
        @include make-col(6);

        .btn,
        .btn-secondary {
          padding-left: 0;
          padding-right: 0;
          max-width: 145px;
        }

        .btn-secondary {
          margin-left: 50px;
        }
      }

      @include media-breakpoint-up(lg) {
        @include make-col(2, 9);

        &:first-child {
          @include make-col-offset(2, 9);
        }
      }
    }

    &_custom,
    &_device-customized {
      margin-top: 20px;

      @include media-breakpoint-only(md) {
        &::before {
          left: 65px;
          right: 65px;
        }
      }

      @include media-breakpoint-up(lg) {
        &::before {
          left: 8.33333%;
          right: 8.33333%;
        }
      }
    }

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

.page_checkout-confirmation {
  @include media-breakpoint-up(md) {
    .content {
      .header-descr {
        max-width: 153%;
        width: 153%;
      }
    }

    .right-aside {
      top: 100px;
      margin-bottom: 100px;
    }
  }
  @include media-breakpoint-up(lg) {
    .content {
      .header-descr {
        max-width: 135%;
        width: 135%;
      }
    }

    .right-aside {
      top: 78px;
      margin-bottom: 78px;
    }
  }

  .right-aside {

    .form-row__action {
      @include media-breakpoint-up(sm) {
        display: none;
      }

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

      .form-row__col-btn {
        @include media-breakpoint-down(sm) {
          @include make-col(12);
          margin-bottom: 20px;
        }
      }
    }

    .form-row__action_custom {
      @include media-breakpoint-down(sm) {
        margin-top: 0;
        padding-top: 0;

        &::before {
          background: none;
        }
      }
    }
  }
}