@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 {
    margin-top: 24px;

    .summary {
      .checkout-title__title {
        color: $blue-ocean;
        margin-bottom: 16px;
      }

      &__aside {
        padding: 0;

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

        .checkout-widget.checkout-widget_order-summary {
          padding: 0;
          margin: 0;
        }

        .checkout-widget {
          background-color: $white;

          &__details {
            padding: 16px;
            font-size: 1rem;
            display: flex;
            flex-direction: column;
            background-color: $white;
            border: 1px solid $gray;
            border-bottom: 0;

            .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;
                }

                &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
                  margin-bottom: 0;
                }

                &-delivery-cost-message {
                  margin-top: 4px;
                  justify-content: flex-end;

                  #order-delivery-cost-message {
                    @include font-size(10);
                    @include line-height(12);

                    font-weight: 700;
                    color: $squant;
                  }
                }
              }

              &__voucher-accordion,
              &__item {
                margin-top: 12px;
                margin-bottom: 0;
              }

              &__item:first-child {
                margin-top: 0;
              }

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

              &__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;
            padding: 16px;
            color: #fff;
            background-color: #0a3055;
            font-size: 1.375rem;
            line-height: 1.5rem;
            font-weight: 400;
            margin: 0;
          }
        }
      }

      &__basked-id {
        padding: 16px 0;
        text-align: center;
        font-size: 1rem;
        border: 1px solid $gray;
        border-top: 0;

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

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

  .delivery-block,
  .click-collect-block,
  .billing-payment-block {
    &__heading {
      color: $blue-ocean;
      margin-bottom: 16px;
    }

    &__wrapper {
      .checkout-order {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .order-block {
          &__time-head {
            padding: 17px 13px;
          };

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

          &__address,
          &__product-line {
            border: 1px solid $gray;
            border-top: 0;
            margin: 0;
          };

          &__product-line {
            .show-products,
            .hide-products {
              padding: 16px;
            }
          };

          &__order-line {
            padding: 24px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-bottom: 1px solid $gray;

            .order-line {
              &__wrap,
              &__price,
              &__price-item {
                border-top: 0;
                padding: 0;
                margin: 0;
              };
            }
          }

          &:last-child,
          &:has(+ .delivery-block__heavy-banners-wrapper.d-none:last-child) {
            .order-block__product-line {
              .show-products {
                padding-bottom: 16px;
              }
            }
          }
        }
      }
    }
  }

  .delivery-block {
    margin-bottom: 24px;

    .banner-news {
      margin-bottom: 24px;
    }

    &__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 {
    &__wrapper {
      margin-bottom: 24px;
    };

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

      .head-info__wrapper {
        display: flex;
        flex-direction: column;

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

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

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

          p:last-child {
            margin: 0;
          }
        }
      }
    }
  }

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

  .oos-block {
    @include make-col(12);
    margin-bottom: 24px;

    &__wrapper {
      border: 1px solid $gray;
      padding: 16px;

      &-products {
        .checkout-info-wrap {
          padding: 0;
          background-color: $white;
        }
      }

      .remove-btn {
        display: flex;
        justify-content: flex-end;
      }

      .order-block {
        &__order-line {
          padding: 24px;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 16px;
          border-bottom: 1px solid $gray;

          &:last-child {
            margin-bottom: 16px;
          }
        }

        .order-line {
          &__wrap,
          &__price,
          &__price-item {
            border-top: 0;
            padding: 0;
            margin: 0;
          };
        }
      }
    }
  }

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

    .delivery-block__heavy-banners-wrapper {
      margin-top: 0;
    }
  }

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

  .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 {
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.125rem;
    font-weight: 400;

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

    & > p {
      margin-bottom: 24px;
    }

    &__form {
      @include make-row;
      align-items: flex-start;
      row-gap: 24px;

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

        &--locked {
          @include make-col(12);
          max-width: 100%;

          .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;
        }

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

  .simplify-collection {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid $gray;

    &__heading {
      color: $blue-ocean;
      margin: 0 0 16px;
    }

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

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

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

        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.25rem;
      font-weight: 400;
    }
  }

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

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

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

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

#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;
        }
      }
    }
  }
}

.tooltip {
  filter: drop-shadow(0 0 8px $black-transparent12);
  position: absolute;

  .tooltip-inner {
    background: $white;
    color: $gray-dark;
    padding: 8px 16px !important;
    border-radius: 4px;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .arrow:before {
    border-bottom-color: $white;
  }
}

@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 {
        .checkout-widget {
          &.checkout-widget_order-summary {
            .checkout-widget__total {
              font-weight: 400;
            }
          }
        }
      }
    }

    .delivery-block,
    .click-collect-block,
    .billing-payment-block {
      &__wrapper {
        .checkout-order {
          .order-block {
            &__order-line {
              border-top: 1px solid $gray;
              border-bottom: 0;
            }
          }
        }
      }
    }
  }
}

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

      &__wrapper {
        .checkout-order {
          gap: 24px;
        }
      }
    }

    .date-selection__wrapper {
      margin-bottom: 24px;
    }

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

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

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

    .oos-block {
      &__wrapper {
        padding: 24px;
      }

      .order-block {
        &__order-line:last-child {
          margin-bottom: 24px;
        }
      }
    }

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

    .add-contact-details {
      &__heading {
        margin-bottom: 24px;
      }
    }

    .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 {
        margin-bottom: 24px;

        .head-info__wrapper {
          flex-direction: row;

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

          &-text {
            max-width: 400px;

            p {
              margin-bottom: 24px;
            }
          }
        }
      }
    }

    .simplify-collection {
      &__heading,
      &__info {
        margin-bottom: 24px;
      }

      &__wrapper {
        margin: 24px 0;

        .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%;

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

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

          &:nth-child(2) {
            .form-row__field {
              padding-left: 12px;
            }
          }

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

    .click-collect-block {
      &__wrapper {
        margin-bottom: 40px;
      }
    }

    .oos-block,
    .simplify-collection,
    .delivery-block {
      margin-bottom: 40px;
    }

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

        &__payment {
          margin: 0;

          .footer-checkout-holder {
            background-color: $white;
            border: 1px solid $gray;
            border-top: 0;
            padding: 16px 0;
          }
        }
      }
    }
  }
}

@include media-breakpoint-only(xs) {
  .page_checkout-delivery-new {
    .delivery-block,
    .click-collect-block,
    .billing-payment-block {
      .order-block {
        &__time-head {
          font-size: 1.125rem;

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

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

        .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;
        }
      }

      &__wrapper {
        overflow-x: hidden;
      }
    }

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

    .right-aside {
      overflow-x: hidden;

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