.page_checkout-confirmation-new {
  overflow-x: hidden;

  // sass-lint:disable no-ids
  #new-address-placeholder {
    padding: 0;
  }

  .row-center {
    display: flex;
    justify-content: center;
  }

  .header {
    &-wrap {
      @include make-col(12);
      padding-right: 15px;
      padding-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    &__title {
      margin-bottom: 16px;
      font-size: 1.625rem;
      line-height: 1.875rem;
      font-weight: 400;
    }

    &__order-block {
      font-size: 1rem;
      line-height: 1.125rem;
      margin: 0;
    }

    &__order-number {
      font-size: 1rem;
      line-height: 1.125rem;
      font-weight: bold;
    }
  }

  .confirmation-result {
    &__notif {
      display: flex;
      align-items: center;
      flex-direction: column;
      border: 1px solid $gray-middle;
      padding: 35px 0;

      .notif-check {
        display: flex;
        color: $blue;
        padding: 12px;
        margin-bottom: 18px;
        border: 3px solid $blue;
        border-radius: 50%;

        .fa-check {
          font-size: 1rem;
        }
      }

      .notif-info {
        font-size: 1.25rem;
        line-height: 1.5rem;
      }
    }

    &__info {
      text-align: center;
      font-size: 0.875rem;
      max-width: 500px;
      margin: 0 auto;
      padding: 44px 0 50px;
    }

    &__action {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 25px 0;
      background-color: $gray-bg;

      .btn {
        margin: 7px 15px;
      }
    }
  }

  .right-aside {
    .checkout-widget {
      .heading-3 {
        color: $blue-ocean;
        font-size: 1.5rem;
        line-height: 1.75rem;

        .fa-info-circle {
          color: $gray-middle;
          font-size: 1.875rem;
        }
      }

      &__subscribe-message {
        font-size: 0.875rem;
      }
    }
  }

  .heading-3 {
    display: block;
    font-size: 1.5rem;
    line-height: 1.75rem;
    color: $blue-ocean;
    font-weight: 400;
    margin-bottom: 15px;
    margin-top: 40px;
  }

  .checkout-info-wrap {
    background-color: $gray-bg;
    padding: 25px;

    .order-block {
      .schedule-item {
        &__time {
          text-align: right;
          padding-right: 15px;
        }
      }
    }
  }

  .order-block {
    &__address-wrap {
      .show-info,
      .edit-address {
        text-align: left;
        margin-top: 15px;
      }
    }
  }

  .confirmation-ready-register {
    .checkout-info-wrap {
      .checkout-register {
        &__paragraph {
          margin-bottom: 50px;
          font-size: 1rem;
          line-height: 1.125rem;
        }

        &__title {
          color: $blue-ocean;
          font-size: 1.25rem;
          line-height: 1.5rem;
          margin-bottom: 12px;
          font-weight: 400;
        }

        &__form-row {
          @include make-col(12);

          .form-row__label {
            font-size: 0.875rem;
            line-height: 1rem;
          }

          .form-row {
            padding: 0;
          }
        }

        &__create-account {
          width: 100%;
          margin: 30px 0 40px;
        }
      }

      .warning-required {
        margin: 12px 0 32px;
      }
    }
  }

  .content .checkout-widget {
    &_order-summary,
    &.checkout-payment {
      display: block;
      background-color: initial;
      padding: 0;
      margin: 0;
    }

    &_order-summary {
      .checkout-widget {
        &__item {
          display: flex;
          justify-content: space-between;
          font-size: 1rem;
          line-height: 1.125rem;
          font-weight: 400;
          margin-bottom: 20px;

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

          &-vat {
            font-size: 0.75rem;
            margin-top: -15px;
          }
        }

        &__total {
          display: flex;
          justify-content: space-between;
          margin: 0;
          padding: 23px 62px;
          color: $white;
          background-color: $blue-ocean;
          font-size: 1.375rem;
          line-height: 1.5rem;
        }
      }
    }

    &.checkout-payment {
      .checkout-widget {
        &__details {
          margin-bottom: 50px;

          &__item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          }

          &__address {
            .heading {
              color: $blue-ocean;
              font-size: 1.5rem;
              line-height: 2.75rem;
              margin-bottom: 40px;
            }
          }
        }
      }

      .checkout-payment {
        &__paypal,
        &__klarna,
        &__apple,
        &__google,
        &__clearpay,
        &__billie {
          display: flex;
          flex-direction: column;
        }

        &__paypal,
        &__apple,
        &__google {
          margin-bottom: 15px;
        }

        &__apple,
        &__google {
          img {
            height: 28px;
            width: 46px;
          }
        }

        &__klarna,
        &__clearpay,
        &__billie {
          margin-bottom: 0;
        }
      }
    }
  }

  [data-is-logged-in='true'] {
    body {
      background: #f00 !important;
    }
  }

  [data-is-logged-in='false'] {
    body {
      background: #00f !important;
    }
  }
}

@include media-breakpoint-up(sm) {
  .page_checkout-confirmation-new {
    .header {
      &__title {
        margin-bottom: 8px;
      }
    }

    .confirmation-result {
      &__action {
        &-full-width {
          display: flex;
          flex-direction: row;

          .btn {
            width: 231px;
            margin: 0 10px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .page_checkout-confirmation-new {
    .header {
      &__title {
        margin-bottom: 0;
      }
    }

    .content .checkout-widget {
      &.checkout-payment {
        .checkout-widget {
          &__details {
            &__item {
              justify-content: space-between;
              margin-bottom: 0;

              span,
              div {
                margin-right: 10px;
              }
            }

            &.checkout-payment__paypal,
            &.checkout-payment__klarna,
            &.checkout-payment__apple,
            &.checkout-payment__google {
              &__item {
                justify-content: flex-start;
              }
            }
          }
        }

        .checkout-payment {
          &__paypal,
          &__klarna,
          &__apple,
          &__google,
          &__clearpay,
          &__billie {
            flex-direction: row;
            justify-content: space-between;
          }

          &__billie {
            align-items: center;
          }

          &__paypal,
          &__apple,
          &__google {
            margin-bottom: 30px;
          }
        }
      }
    }

    .order-block {
      &__address-wrap {
        .show-info {
          text-align: left;
          margin-top: 0;
        }
      }
    }

    .confirmation-ready-register {
      .checkout-info-wrap {
        .checkout-register {
          &__form-row {
            @include make-col(9);
          }

          &__create-account {
            width: 205px;
          }
        }
      }
    }

    .confirmation-result {
      &__action {
        &-full-width {
          padding: 48px 0;

          .btn {
            width: 220px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .page_checkout-confirmation-new {
    .header {
      &-wrap {
        @include make-col(9);
        flex-direction: row;
        align-items: center;
        margin-bottom: 50px;
      }
    }

    .header {
      &-wrap__full-width {
        @include make-col(12);
        flex-direction: row;
        align-items: center;
        margin-bottom: 50px;
      }
    }

    .container-center {
      max-width: 830px;
    }

    .content .checkout-widget {
      &_order-summary,
      &.checkout-payment {
        display: block;
        background-color: initial;
        padding: 0;
        margin: 0 0 32px;
      }
    }

    .confirmation-result {
      &__notif {
        padding: 62px 0;

        .notif-check {
          padding: 15px;

          .fa-check {
            font-size: 1.5rem;
          }
        }
      }

      &__action {
        display: flex;
        flex-direction: row;
        padding: 50px 0;

        .btn {
          width: 218px;
          margin: 0 10px;
        }
      }
    }

    .checkout-info-wrap {
      padding: 55px 60px 50px;
    }
  }
}

@include media-breakpoint-only(md) {
  .page_checkout-confirmation-new {
    .header {
      &-wrap {
        @include make-col(8);
        flex-direction: row;
        align-items: center;
        margin-bottom: 50px;
      }
    }

    .header {
      &-wrap__full-width {
        @include make-col(12);
        flex-direction: row;
        align-items: center;
        margin-bottom: 50px;
      }
    }

    .content .checkout-widget {
      &_order-summary,
      &.checkout-payment {
        display: block;
        background-color: initial;
        padding: 0;
        margin: 0 0 32px;
      }
    }

    .content-center {
      @include make-col(12);
    }
  }
}