@import '../helpers/helpers';
@import '../components/tooltip';
@import '../components/gift-cards';

.checkout-payment-details-v2 {
  .checkout-payment-details {
    margin: 0;

    .warning-required {
      margin: 16px 0;
    }

    .addr-billie.billie-form {
      margin-bottom: 24px;
    }

    .address-postcode {
      margin-bottom: 24px;
    }

    &__populated-address {
      display: block;
      margin-top: -11px;
    }

    &__populated-text {
      margin-right: 4px;
    }

    .radio-expanded-content {
      display: flex;
      flex-wrap: wrap;

      > .form-row {
        &:first-child {
          margin-top: 16px;
        }

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

    .radio-option-wrapper {
      position: relative;
    }

    .radio-group {
      display: flex;
      flex-direction: column;

      > .form-row:last-child {
        margin-bottom: 0;
      }
    }

    .billie-tooltip {
      right: auto;
      top: 0;
      transform: none;
      left: 252px;
    }

    .form-row.radio-group {
      margin-bottom: 0;
    }

    .form-row__field.radio-group {
      margin-top: 6px;
    }

    .rbn_align {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      vertical-align: top;
    }

    .form-row {
      padding: 0;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 24px;

      &__field-klarna {
        margin-bottom: -10px;
      }

      &__label,
      &__error,
      &__info,
      &__field {
        padding-left: 0;
        padding-right: 0;
      }

      &.first-name {
        flex: 0 0 100%;
        margin-top: 16px;
      }

      &.last-name {
        flex: 0 0 100%;
      }

      .registered-business {
        margin-top: 16px;
        padding-right: 0;
      }

      .reg-number {
        padding-left: 0;
      }

      .registered-label {
        margin-right: 8px;
      }

      &__action {
        &:before {
          content: none;
        }
      }
    }

    .form-row__save {
      .form-row__field {
        margin: 0;
      }
    }

    &__card-details {
      margin: 20px 0 0;
    }

    &__title {
      color: $blue-ocean;
      font-weight: 400;
      font-size: 1.25rem;
      line-height: 2rem;
    }

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

    .form-row__action {
      display: flex;
      margin: 0;

      .form-row__col-btn {
        @include make-col(12);
        margin: 0 0 20px;
        padding: 0;

        .paypal-button-container {
          width: 100%;
          min-width: inherit;
          max-width: inherit;
        }
      }

      .form-row__col-terms {
        @include make-col(12);
        margin: 0;
      }
    }

    .klarna-label,
    .clearpay-label {
      &__rbn {
        &.rbn ins {
          top: 3px;
        }
      }
    }

    &__klarna {
      .klarna-info {
        background: $white;
        margin-bottom: 32px;
        padding: 20px;

        &__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24px;
          padding-bottom: 20px;
          border-bottom: 1px solid $gray;

          &_title {
            margin: 0;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.5rem;
          }
        }

        &__list {
          padding: 0;
          margin: 0;
          list-style-type: none;

          &_item {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.375rem;

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

        &__learn-more {
          display: flex;
          align-items: center;
          border-bottom: 1px solid $gray;
        }

        &__accept-info {
          margin: 12px 0;
          color: $warm-grey;
          font-weight: 400;
          font-size: 0.75rem;
          line-height: 1rem;
        }
      }
    }

    &__billie {
      .billie-info {
        background: $white;
        margin-bottom: 20px;
        padding: 20px;

        &__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 20px;
          border-bottom: 1px solid $gray;

          &_title {
            margin: 0;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.5rem;
          }
        }

        &__list {
          padding: 0;
          margin: 0;
          list-style-type: none;
          border-bottom: 1px solid $gray;

          &_item {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.375rem;
            height: 30px;
            display: flex;
            align-items: center;

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

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

        &__learn-more {
          display: flex;
          align-items: center;
          border-bottom: 1px solid $gray;
        }

        &__accept-info {
          margin-top: 15px;
          margin-bottom: 10px;
          color: $warm-grey;
          font-weight: 400;
          font-size: 0.75rem;
          line-height: 1rem;
        }

        &__link {
          color: $black;
        }
      }
    }

    .apple {
      &-logo {
        height: 28px;
        width: 46px;
        margin-top: -2px;

        & img {
          width: 100%;
        }
      }

      &-wrap {
        flex-direction: column;
        margin-bottom: 0;
      }

      &__button {
        display: block;
        flex: 1;
        --apple-pay-button-width: 100%;
        --apple-pay-button-height: 40px;
        --apple-pay-button-border-radius: 3px;
        --apple-pay-button-padding: 0 0;
        --apple-pay-button-box-sizing: border-box;
      }

      &__terms {
        flex: 1;
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
      }
    }

    .google,
    .billie {
      &-logo,
      &-badge-container {
        margin: -3px 0;
      }
    }

    .clearpay,
    .google {
      &-logo {
        height: auto;
        width: 48px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &__button {
        display: block;
        flex: 1;

        button {
          width: 100%;
          outline: 0;
          background-color: $black;
        }
      }

      &__terms {
        flex: 1;
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
      }

      &-wrap {
        flex-direction: column;
        margin-bottom: 0;
      }
    }

    &__clearpay {
      padding-bottom: 24px;

      .clearpay-widget {
        max-width: 360px;
        background-color: $white;
      }

      .checkout-payment-details__row {
        .checkout-payment-details__descr {
          margin-bottom: 30px;

          .form-row.first-name {
            flex: 0 0 50%;
            max-width: 50%;
          }

          &::after {
            position: absolute;
            content: '';
            height: 2px;
            background: $gray-light;
            left: 15px;
            right: 15px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .checkout-payment-details-v2 {
    .checkout-payment-details {
      margin: 0;

      &__populated-address {
        display: flex;
      }

      .radio-expanded-content {
        align-items: baseline;
      }

      .form-row {
        &.first-name {
          flex: 0 0 50%;
          max-width: 50%;
          padding-right: 8px;

          .form-row__label,
          .form-row__field,
          .form-row__error {
            padding: 0;
          }
        }

        &.registered-business {
          flex: 0 0 50%;
          max-width: 50%;
          margin-bottom: 0;
        }

        &.reg-number {
          flex: 0 0 50%;
          max-width: 50%;
          margin-bottom: 0;
          padding-left: 8px;
        }

        &.registered-business {
          padding-right: 8px;
        }

        &.last-name {
          flex: 0 0 50%;
          max-width: 50%;
          padding-left: 8px;
          margin-top: 16px;

          .form-row__label,
          .form-row__field,
          .form-row__error {
            padding: 0;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .checkout-payment-details-v2 {
    .checkout-payment-details {
      &__title {
        font-size: 1.5rem;
      }

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

      .form-row__action {
        .form-row__col-btn {
          @include make-col(6);
          margin: 0;
        }

        .form-row__col-terms {
          @include make-col(6);
          padding-right: 15px;
          padding-left: 15px;
        }
      }

      .apple,
      .google {
        &-wrap {
          flex-direction: row;
          align-items: center;
          margin-bottom: 20px;
        }

        &__button {
          margin-bottom: 0;
        }

        &__terms {
          padding-right: 0;
          text-align: left;
        }
      }

      &__clearpay {
        padding-bottom: 32px;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .checkout-payment-details-v2 {
    .checkout-payment-details {
      &__descr {
        @include make-col(12);
        @include make-col-offset(0);
      }
    }
  }
}

@media screen and (max-width: 366px) {
  .checkout-payment-details-v2 {
    .checkout-payment-details {
      .hop-iframe__wrapper {
        height: 710px;
      }
    }
  }
}

@media screen and (min-width: 366.1px) {
  .checkout-payment-details-v2 {
    .checkout-payment-details {
      .hop-iframe__wrapper {
        height: 555px;
      }
    }
  }
}