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

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

  .product-oos-inner {
    padding: 0 50px;

    .order-line:first-of-type {
      border-top: 0;
    }

    .order-line__info {

      a {
        color: $blue;
        text-decoration: underline;
      }

      a:hover {
        color: $blue-dark;
      }
    }

    p {
      display: inline-block;
      margin-right: 20px;
    }

    .fa-question-circle {
      color: $blue;
      font-size: 1.2rem;
      display: inline-block;
    }

    .btn {
      color: $white;
      position: absolute;
      bottom: 15px;
      width: calc(100% - 30px);
    }

    .btn-notify {
      bottom: 70px;

      &:focus {
        color: $blue-dark;
      }
    }

    .btn:hover {
      color: inherit;
    }
  }
}

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

.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: .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__payment-details_mobile {
    display: none;
  }

  .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(lg) {
  .delivery-details-product-oos {
    .product-oos-inner {
      padding: 0 30px;

      .content {
        width: 100%;
        flex: 100%;
        max-width: 100%;

        p {
          width: calc(90% - 20px);
          float: left;
        }

        .icon-info-component {
          float: right;
          width: 10%;
          text-align: center;
          margin-top: 5px;
        }

        .order-line:first-of-type {
          clear: both;
        }
      }

      .right-aside {
        width: 100%;
        flex: 100%;
        max-width: 100%;
        text-align: center;

        .btn {
          position: relative;
          bottom: auto;
          max-width: 280px;
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .delivery-details-product-oos {
    border: 0;
    border-top: 2px solid $gray;
    padding-top: 20px;
  }

  .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-product-oos {
    .product-oos-inner {
      .btn-notify {
        margin-bottom: 1rem;
      }
    }
  }

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

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