@import '../helpers/helpers';

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

    .form-row {
      padding: 0;

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

      &__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 {
      &__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: .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: .75rem;
          line-height: 1rem;
        }
      }
    }

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

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

@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: 560px;
      }
    }
  }
}

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