@import '../helpers/helpers';
@import '../components/delivery-address-form-new';
@import '../components/date-selection-add-new-styles';
@import '../components/user-address-delivery';
@import '../components/marketing-preferences';

.page_checkout-delivery-new {
  .right-aside {
    .summary {
      .checkout-title__title {
        color: $blue-ocean;
        font-weight: 400;
        line-height: 1.75rem;
      }

      &__aside {
        padding: 12px 30px 0;

        .checkout-info-wrap {
          padding: 0;
        }

        .checkout-widget.checkout-widget_order-summary {
          padding: 25px 20px 0;
        }

        .checkout-widget {
          &__details {
            font-size: 1rem;
            display: flex;
            flex-direction: column;

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

                &-bold {
                  font-weight: 500;
                  margin-bottom: 20px;
                }

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

              &__details-discount {
                order: 1;
              }

              &__gift-card {
                order: 2;
                margin-bottom: 0;
                margin-top: 20px;
                font-weight: 700;

                .checkout-widget__item-value {
                  ::first-letter {
                    font-size: 1rem;
                  }
                }
              }
            }
          }

          &__total {
            border: 0;
            display: flex;
            justify-content: space-between;
            margin-left: -25px;
            margin-right: -25px;
            margin-bottom: 0;
            padding: 20px 25px;
            color: #fff;
            background-color: #0a3055;
            font-size: 1.375rem;
            line-height: 1.5rem;
            font-weight: 400;
          }
        }
      }

      &__basked-id {
        padding: 26px 0;
        background: #f8f8f8;
        text-align: center;
        font-size: 1rem;

        .id-number {
          font-weight: 700;
        }
      }

      .accordion__header-icon-small {
        left: 85px;
      }
    }
  }

  .delivery-block,
  .click-collect-block,
  .billing-payment-block {
    &__heading {
      color: $blue-ocean;
      font-weight: 400;
      margin-bottom: 24px;
      font-size: 1.5rem;
      line-height: 1.75rem;
    }

    &__wrapper {
      background: $gray-bg;
      padding: 30px 15px;
    }
  }

  .delivery-block {
    &__wrapper.customer-journey-block {
      background: inherit;
      padding: 0;

      .add-new-address-block {
        margin: 25px 0 0 20px;

        .btn-new-address {
          font-size: 1rem;
          padding: 0;
          text-decoration: underline;

          .fa-plus {
            margin-right: 10px;
          }
        }
      }
    }

    .customer-journey-block {
      .user-address {
        &__content {
          .selected-address {
            display: flex;
            justify-content: space-between;

            .default-mark-full {
              font-weight: 400;
              font-size: inherit;
            }
          }
        }
      }
    }
  }

  .click-collect-block {
    margin-top: 40px;

    &__head-info {
      font-size: 1rem;
      line-height: 1.125rem;
      font-weight: 400;

      .head-info__wrapper {
        display: flex;
        flex-direction: column;
        margin: 0 0 50px;

        &-exclamation {
          border: 1px solid $gray;
          padding: 38px 22px;
          display: flex;
          align-items: center;
          flex: 0;
          margin-bottom: 20px;

          .fa-exclamation-circle {
            color: $blue;
            margin-right: 21px;
            width: 53px;
            height: 53px;
          }
        }

        &-text {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          p {
            margin: 0;

            &:first-of-type {
              margin-bottom: 26px;
            }
          }
        }
      }
    }
  }

  .billing-payment-block {
    margin: 40px 0;
  }

  .loader-wrapper.page-loader {
    position: fixed;
  }

  .oos-block {
    @include make-col(12);

    &__wrapper {
      background: $gray-bg;
      margin: 25px 0;

      &-products {
        .checkout-info-wrap {
          padding: 25px;
        }
      }

      .remove-btn {
        display: flex;
        justify-content: flex-end;
        margin: 0 25px;
        padding-bottom: 25px;
      }
    }

    &__info-block {
      padding: 25px 25px 0;
    }
  }

  .checkout-order {
    display: block;
    margin: 0;
  }

  .content,
  .right-aside {
    @include make-col(12);
  }

  .right-aside {
    .checkout-title__title {
      margin-bottom: 24px;
    }
  }

  .content {
    display: flex;
    flex-direction: column;

    .checkout-title {
      &__title {
        color: $blue-ocean;
        font-weight: 400;
        margin-top: 40px;
        margin-bottom: 24px;
        font-size: 1.5rem;
        line-height: 1.75rem;
      }
    }
  }

  .basket__voucher {
    border: 1px solid $border-grey;

    &-hide {
      display: none;
    }

    & .form-row__field {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .add-contact-details {
    border-top: 1px solid $gray;
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.125rem;
    font-weight: 400;

    &__heading {
      color: $blue-ocean;
      font-weight: 400;
      margin-top: 40px;
    }

    &__form {
      @include make-row;
      align-items: flex-start;
      margin-top: 40px;

      .form-row {
        @include make-col-ready;
        @include make-col(12);
        padding-right: 0;

        &--locked {
          @include make-col(12);
          max-width: 100%;
          margin-bottom: 24px;
          margin-top: 4px;

          .form-row__field {
            .tbx {
              border: 0;
              background-color: $light-blue;
            }
          }
        }

        &__field {
          padding-right: 0;
        }

        .break-desktop {
          display: none;
        }

        &.checkbox-form-row {
          flex: 1;
          max-width: 100%;
          margin-bottom: 0;
        }
      }
    }
  }

  .simplify-collection {
    background: $gray-bg;
    padding: 0 15px;
    margin: 0 0 10px;

    &__heading {
      color: $blue-ocean;
      font-weight: 400;
      margin-top: 40px;
    }

    &__wrapper {
      @include make-row;
      margin: 20px 0;

      .your-contact-details__checkbox {
        @include make-col-ready;
        @include make-col(12);

        label:first-of-type {
          margin-bottom: 10px;
        }

        span:first-of-type {
          font-size: 1rem;
          font-weight: 500;
          line-height: 1.5rem;
        }

        .distance {
          font-size: 1rem;
          font-weight: 500;
          line-height: 1.5rem;
          color: $warm-grey;
          padding-left: 10px;
        }

        .store-address {
          color: $warm-grey;
        }
      }
    }

    &__info {
      font-size: 1rem;
      line-height: 1.125rem;
      font-weight: 400;
    }

    &__btn {
      margin: 10px 0 40px;
    }
  }

  .continue-btn {
    background: $gray-bg;
    padding: 35px;
    margin-top: 20px;

    .btn-action {
      height: 50px;
      width: 100%;
    }
  }

  .date-selection {
    &__wrapper {
      font-size: 0.875rem;
      line-height: 1.125rem;
      font-weight: 400;
      margin-bottom: 23px;
    }

    &__header {
      color: $blue-ocean;
      font-weight: 400;
      margin-bottom: 13px;
    }
  }

  .notification {
    &:only-child,
    &:last-child {
      margin-bottom: 30px;
    }
  }
}

#modalDeliveryEdit,
#modalEditAddress {
  .modal-box__header::after {
    left: 0;
    right: 0;
  }

  .modal-box__header .close {
    right: 0.6875rem;
    top: 1.625rem;
  }

  .form-wrapper {
    padding-top: 40px;
  }

  .edit-address-modal-block {
    margin: 20px 0;

    .notification {
      margin-bottom: 20px;
    }

    .btn-choose-address {
      margin-bottom: 20px;
    }

    .btn-action {
      margin-top: 20px;
    }
  }
}

#modalEditAddress {
  .user-address {
    &__content {
      .selected-address {
        display: flex;
        justify-content: space-between;

        .default-mark-full {
          font-weight: 400;
          font-size: inherit;
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .page_checkout-delivery-new {
    .add-contact-details {
      &__form {
        .form-row {
          .break-desktop {
            display: inline;
          }

          &.checkbox-form-row {
            flex: 0 0 auto;
            width: 479px;
          }

          &.checkbox-form-row--full-width {
            flex: 1;
            max-width: 100%;
          }
        }
      }
    }

    .right-aside {
      .summary {
        &__aside {
          .checkout-widget.checkout-widget_order-summary {
            padding: 20px 0 0;
          }
        }

        .checkout-widget {
          &.checkout-widget_order-summary {
            .checkout-widget__total {
              font-weight: 400;
              margin-left: -20px;
              margin-right: -20px;
            }
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .page_checkout-delivery-new {
    .delivery-block,
    .click-collect-block,
    .billing-payment-block {
      &__wrapper {
        padding: 55px 50px 50px;
      }
    }

    .right-aside {
      @include make-col(12);
      margin-top: 20px;
    }

    .content {
      flex: 1;
      max-width: 100%;
      padding-right: 5px;
    }

    .basket__voucher {
      & form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;

        & .voucher__btn {
          max-width: 115px;
          height: 40px;
        }

        .form-row {
          @include make-col(6);
          margin-bottom: 0;
        }
      }

      & .form-row__field {
        padding-left: 15px;
        padding-right: 15px;
      }
    }

    .click-collect-block {
      &__head-info {
        .head-info__wrapper {
          flex-direction: row;

          &-exclamation {
            flex: 0 0 277px;
            margin-right: 34px;
            margin-bottom: 0;
          }

          &-text {
            max-width: 400px;
          }
        }
      }
    }

    .simplify-collection {
      padding: 0 50px;

      &__wrapper {
        margin-top: 40px;

        .your-contact-details__checkbox {
          @include make-col(6);

          label:first-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  #modalEditAddress {
    .user-address {
      &__phone {
        @include make-col(4);
      }

      &__links {
        @include make-col(3);
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .page_checkout-delivery-new {
    .right-aside {
      @include make-col(4);
      padding-left: 5px;
      max-width: 325px;
      margin-top: 0;
    }

    .basket__voucher.checkout-widget {
      padding: 40px 35px;
      margin-bottom: 30px;

      .heading-3 {
        margin-bottom: 0;
      }

      #form-checkout-voucher,
      #form-checkout-voucher0 {
        align-items: flex-start;
      }
    }

    .add-contact-details {
      &__form {
        .form-row {
          @include make-col(6);
          margin-left: 0;
          margin-right: 0;
          padding-left: 0;
          padding-right: 0;

          &.form-row--locked {
            @include make-col(12);
            max-width: 100%;
            margin-bottom: 24px;
            margin-top: 4px;

            .form-row__field {
              .tbx {
                border: 0;
                background-color: $light-blue;
              }
            }
          }

          &:first-child {
            .form-row__field {
              padding-right: 5px;
            }
          }

          &__field {
            padding-right: 15px;
          }
        }
      }
    }

    .right-aside {
      .summary {
        .checkout-widget {
          &.checkout-widget_order-summary {
            .checkout-widget__total {
              font-weight: 400;
              margin-left: -30px;
              margin-right: -30px;
            }
          }
        }

        .summary__basked-id {
          margin-top: 13px;
        }
      }
    }
  }
}

@include media-breakpoint-only(xs) {
  .page_checkout-delivery-new {
    .delivery-block,
    .click-collect-block,
    .billing-payment-block {
      &__heading {
        margin-bottom: 18px;
      }

      &__wrapper {
        padding: 25px 15px;
        margin: 0 -15px;
      }

      .order-block {
        &__time-head {
          font-size: 1.125rem;
          padding: 17px 13px;

          &-info {
            font-size: 0.875rem;
            margin-left: 30px;
          }
        }

        &__address {
          padding: 20px 15px;
          margin: 0;
        }

        &__product-line {
          display: flex;
          flex-direction: column-reverse;
          align-items: flex-start;

          .show-products,
          .hide-products {
            padding: 15px 15px 25px;
          }
        }

        .order-line__product {
          flex-direction: row;
        }
      }
    }

    .delivery-block {
      .delivery-address-block {
        &__info {
          margin-bottom: 32px;
        }

        &__form {
          &-item {
            padding: 0;
          }
        }
      }

      .customer-journey-block {
        .user-address {
          &__content {
            padding-bottom: 30px;

            .selected-address {
              padding-bottom: 25px;
            }
          }

          &__delete {
            margin-top: 36px;
          }
        }

        .add-new-address-block {
          margin: 15px 0 0 20px;
        }
      }

      .date-selection__wrapper {
        .date-selection__header {
          font-size: 1.125rem;
        }
      }

      .oos-block__wrapper {
        margin: 10px -15px;
      }

      &__wrapper {
        overflow-x: hidden;
      }
    }

    .add-contact-details {
      &__heading {
        margin-top: 27px;
        font-size: 1.5rem;
        line-height: 1.75rem;
      }

      .marketing-preferences {
        &__content {
          .marketing-preferences,
          p:nth-of-type(2),
          p:nth-of-type(3) {
            display: inline;
            margin-bottom: 0;
          }
        }
      }
    }

    .continue-btn {
      margin: 0 -15px;
      margin-top: 20px;
    }

    .billing-payment-block {
      margin-bottom: 0;
    }

    .simplify-collection {
      margin: 0 -15px;

      &__heading {
        margin-top: 27px;
        font-size: 1.5rem;
        line-height: 1.75rem;
      }
    }

    .right-aside {
      overflow-x: hidden;

      .summary {
        .checkout-title__title {
          margin-bottom: 16px;
          font-size: 1.5rem;
          line-height: 1.75rem;
        }

        &__aside {
          margin: 0 -15px 10px;
          padding: 0;

          .checkout-widget {
            &_order-summary {
              padding: 25px 20px 0;
              margin: 0;
            }

            &__details {
              padding: 0;
            }

            &__item-bold {
              .checkout-widget__item-value {
                font-size: 1.125rem;
              }
            }
          }
        }

        &__basked-id {
          margin: 0 -15px;
        }
      }
    }
  }
}