// Checkout
.#{$prefix}-checkout {
  .#{$prefix}-message {
    margin-bottom: 1.25rem;
  }
  form {
    .#{$prefix}-form-right {
      order: 2;
      .#{$prefix}-checkout-block {
        h3 {
          font-weight: 500;
          font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem);
          color: rgb(var(--wpt-lms-black));
          margin-bottom: 1.25rem;
        }
        .#{$prefix}-order-table {
          border: 0.063rem solid rgb(var(--wpt-lms-box-border));
          background-color: rgb(var(--wpt-lms-white));
          box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-950), 0.06);
          border-radius: 0.188rem;
          .course-total {
            display: unset;
          }
        }
      }
    }
    .#{$prefix}-form-left {
      order: 1;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      .#{$prefix}-checkout-block {
        p {
          display: flex;
          gap: 0.313rem;
          a {
            font-weight: 500;
          }
        }
      }
      .#{$prefix}-checkout-comment {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        h4 {
          font-weight: 500;
        }
      }
      .#{$prefix}-checkout-payment {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        h4 {
          font-size: 0.938rem;
          color: rgb(var(--wpt-lms-black));
        }
        .#{$prefix}-payment-methods {
          li {
            label {
              display: flex;
              align-items: center;
              gap: 0.313rem;
            }
          }
        }
      }
      .#{$prefix}-checkout-form {
        h4 {
          font-weight: 500;
          font-size: clamp(1.1rem, 1.1rem + (1vw - 0.2rem) * 0.767, 1.5rem);
          color: rgb(var(--wpt-lms-black));
          margin-bottom: 1.25rem;
        }

        .#{$prefix}-remember {
          display: flex;
          align-items: center;
          gap: 0.625rem;
        }
      }
      input[name="checkout-account-switch-form"] {
        display: none;
      }
      input[name="checkout-account-switch-form"]:not(:checked) + .#{$prefix}-checkout-form {
        display: none;
        overflow: hidden;
        height: 0;
        opacity: 0;
      }
      input[name="checkout-account-switch-form"]:checked + .#{$prefix}-checkout-form {
        display: block;
        overflow: auto;
        height: auto;
      }
    }
  }
}

// Responsive

@media (max-width: 992px) {
  .#{$prefix}-checkout {
    form {
      .#{$prefix}-form-right {
        .#{$prefix}-checkout-form {
          .#{$prefix}-grid {
            column-gap: 0;
          }
        }
      }
    }
  }
}