@import '../global/variables';
@import '../global/mixins';
@import '../components/intlTelInput.min';
#place_order,
.payment_methods,
.woocommerce-checkout .global_wr footer .flex,
.woocommerce-form-coupon-toggle,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-info,
.product_subtotal,
  //#billing_first_name_field,
  //#billing_last_name_field,
.woocommerce-privacy-policy-text {
  display: none;
}
.woocommerce-checkout {
  #payment {
    background: none;
    border-radius: 0;
    div.form-row {
      padding: 0;
      margin: 0;
    }
  }
  &.logged-in {
    #billing_email_field {
      display: none;
    }
  }
}
.checkout {
  background: $bg-light-gray;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: 60px 30px;
  gap: 30px;
  @media screen and (max-width: $desktop) {
    padding: 70px 30px;
  }
  @media screen and (max-width: $phones-big) {
    padding: 40px 16px;
    gap: 20px;
  }
  .checkout-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    @media screen and (max-width: $tablets) {
      flex-direction: column;
    }
    @media screen and (max-width: $phones-big) {
      gap: 20px;
    }
    &:before, &:after {
      display: none;
    }
    .column-checkout {
      padding: 28px;
      border-radius: 12px;
      background: $white;
      flex: 1;
      @media screen and (max-width: $phones-big) {
        padding: 20px;
      }
      &-info {
        color: $dark-blue;
        .title {
          font: normal 400 14px / 1.2em $font-almoni;
          margin: 0;
          padding-bottom: 30px;
        }
        .product-name {
          font: normal 400 14px / 1.2em $font-almoni;
          margin: 0;
        }
        .product-total {
          margin: 0;
          padding: 4px 0 8px;
          .subscription-price {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            bdi {
              font: normal 700 32px / 1em $font-almoni;
              display: flex;
            }
            .subscription-details {
              font: normal 700 22px / 1em $font-almoni;
            }
          }
        }
        .cancel-sub {
          font: normal 400 16px / 1.2em $font-almoni;
          color: $dark-gray;
        }
      }
      &-payment {
        .woocommerce-billing-fields {
          .form-row .input-text {
            padding-right: 12px !important;
          }
          h3 {
            display: none;
          }
          input {
            border: 1px solid $light-blue;
            background: $white;
            padding: 12px !important;
            font: normal 400 14px / 1em $font-almoni;
            border-radius: 8px;
          }
          #billing_phone_field {
            display: none;
          }
          #billing_phone_field, #billing_phone_visible_field {
            .woocommerce-input-wrapper, .iti {
              width: 100%;
              display: block;
            }
            #billing_phone, #billing_phone_visible {
              text-align: left;
            }
            .iti {
              display: flex;
              flex-direction: row-reverse;
              gap: 10px;
              .iti__flag-container {
                position: static;
                &:hover {
                  .iti__selected-flag {
                    background-color: $white;
                  }
                }
                .iti__selected-flag {
                  border: 1px solid $light-blue;
                  background: $white;
                  padding: 12px;
                  border-radius: 8px;
                }
                .iti__selected-flag, .iti__country {
                  display: flex;
                  .iti__flag, {
                    order: 1;
                  }
                  .iti__arrow {
                    order: -1;
                    border: none;
                    width: 20px;
                    height: 20px;
                    position: relative;
                    &:before {
                      content: '\f078';
                      font-family: $font-awesome;
                      font-size: 14px;
                      color: $dark-gray;
                      position: absolute;
                      top: -2px;
                      @media screen and (max-width: $tablets) {
                        top: 0;
                      }
                    }
                  }
                  .iti__selected-dial-code {
                    direction: ltr;
                    font: normal 400 15px / 1em $font-almoni;
                    color: $dark-blue;
                    @media screen and (max-width: $tablets) {
                      font-size: 16px;
                    }
                  }
                }
                .iti__country-list {
                  max-width: 440px;
                  left: 0;
                  .iti__country {
                    flex-direction: row-reverse;
                    font: normal 400 16px / 1em $font-almoni;
                  }
                }
              }
            }
          }
        }
        .checkout_submit {
          margin-top: 20px;
        }
        .woocommerce-checkout-payment {
          .wc_payment_methods {
            border: none !important;
            padding: 0 !important;
            .wc_payment_method {
              label {
                font: normal 400 14px / 1em $font-almoni;
                img {
                  display: none;
                }
              }
              .payment_box {
                background-color: transparent !important;
                &:before, &.payment_method_payplus-payment-gateway {
                  display: none !important;
                }
              }
            }
          }
        }
      }
    }
  }
  .support {
    width: 100%;
    max-width: 960px;
    margin-top: auto;
    background: $white;
    border: 1px solid $blue;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font: normal 400 18px / 1em $font-almoni;
    @media screen and (max-width: $phones-big) {
      font-size: 14px;
    }
    a {
      color: $blue;
    }
    i {
      font-size: 20px;
      margin-left: 10px;
      @media screen and (max-width: $phones-big) {
        font-size: 16px;
      }
    }
  }
}
.confetti-box {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9999;
  .confetti {
    position: absolute;
    top: -150px;
    transform-origin: center;
    animation-name: fall;
    animation-timing-function: linear;
    @media screen and (max-width: $phones-big) {
      svg {
        max-width: 20px;
        max-height: 20px;
      }
    }
  }
  @keyframes fall {
    to {
      transform: translateY(150vh);
    }
  }
}
.woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select {
  border-color: #e5e7eb;
}
.subscription-product-description {
  padding-top: 25px;
  li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: $dark-gray;
  }
  ul li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro", sans-serif;
    font-size: 20px;
    color: #1a6fee;
    font-weight: 700;
  }
  ol li:before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro", sans-serif;
    color: #455376;
  }
}