@import '../components/date-selection';

.delivery-details-product-oos {
  border: 1px solid $gray;
  width: 100%;
  max-width: 100%;
  padding: 16px;

  .product-oos-inner {
    .row {
      margin: 0;
    }

    .content {
      padding: 0;

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

.component-date-selection {
  padding-top: 0;
  padding-bottom: 16px;
}

.delivery-details__payment-details {
  margin-top: 40px;
  min-width: 210px;
}

.delivery-details__payment-details_mobile {
  @include button-full;
  margin-bottom: 20px;
}

.delivery-details-option {
  margin-top: 40px;
  margin-bottom: 20px;

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

  &__delivery-info {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 10px;
  }

  &__delivery-info-left {
    width: 50%;
    margin-right: 10%;

    .checkout-address-time {
      height: 100%;
    }
  }

  &__delivery-info-right {
    width: 40%;

    .schedule-item {
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.5rem;

      &:nth-child(odd) {
        background: $gray-light;
      }

      &:nth-child(even) {
        background: none;
      }
    }
  }

  &__contact-details {
    margin-top: 40px;

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

    .your-contact-details {
      &__row {
        @include make-row;
      }

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

      .row-tel {
        margin-bottom: 30px;
      }

      h3 {
        &:not(:first-child) {
          padding-top: 30px;
          border-top: 1px solid $gray;
        }
      }

      .order-update {
        margin: 30px 0 40px;
      }

      .form-row__action {
        margin-top: 0;
      }

      .form-row__col-btn {
        @include make-col-ready;
      }

      &__checkbox {
        span:first-of-type {
          @include heading-5;
        }

        .distance {
          @include heading-5;
          color: $warm-grey;
          padding-left: 10px;
        }

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

          &__postcode {
            text-transform: uppercase;
          }
        }

        @include make-container;

        &-wrap {
          @include make-row;
        }
      }

      .btn {
        @include button-min160;
      }
    }
  }
}

.right-aside {
  display: flex;
  flex-direction: column;
}

@include media-breakpoint-up(sm) {
  .page_checkout-delivery-details {
    .right-aside {
      .checkout-widget__actions {
        display: none;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .delivery-details-product-oos {
    padding: 24px;
  }

  .delivery-details__payment-details_mobile {
    display: none;
  }

  .component-date-selection {
    padding-bottom: 24px;
  }

  .delivery-details-option {
    &__contact-details {
      .your-contact-details {
        &__descr {
          @include make-col(7, 9);
          @include make-col-offset(1, 9);
        }

        .form-row__action {
          &::before {
            left: 70px;
            right: 70px;
          }
        }
      }
    }
  }

  .right-aside {
    .checkout-voucher {
      order: 0;
    }
  }
}

@include media-breakpoint-up(lg) {
  .delivery-details__payment-details_mobile {
    display: none;
  }

  .delivery-details-option {
    &__contact-details {
      .your-contact-details {
        &__descr {
          @include make-col(5, 9);
          @include make-col-offset(2, 9);
        }

        .form-row__action {
          &::before {
            left: 8.33333%;
            right: 8.33333%;
          }
        }

        .form-row__col-btn {
          @include make-col-offset(2, 9);
        }

        &__checkbox {
          @include make-col(6);
        }
      }
    }
  }

  .right-aside {
    .checkout-voucher {
      order: 0;
    }
  }
}

@include media-breakpoint-only(md) {
  .delivery-details-option {
    &__contact-details {
      .your-contact-details {
        .form-row__col-btn {
          @include make-col-offset(1, 9);
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .delivery-details-option {
    &__delivery-info {
      flex-direction: column;

      &-left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
      }

      &-right {
        width: 100%;
      }
    }

    &__contact-details {
      .your-contact-details {
        &__checkbox {
          &:not(:last-child) {
            padding-bottom: 10px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .delivery-details__payment-details {
    display: none;
  }

  .delivery-details-option {
    &_time-slot {
      margin-top: 30px;
    }

    &__contact-details {
      .your-contact-details {
        .form-row__action {
          &::before {
            left: 15px;
            right: 15px;
          }
        }

        .form-row__col-btn {
          margin-bottom: 20px;
        }
      }
    }
  }

  .continue-to-payment {
    padding-bottom: 20px;
    width: 100%;

    a {
      width: 100%;
    }
  }

  .right-aside {
    .checkout-voucher {
      order: -1;

      .accordion {
        &__content {
          .form-row__field {
            padding: 0;
          }
        }
      }
    }
  }
}