/* Checkout checkbox reset */
.woocommerce-checkout input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;

    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;

    transform: none;
    scale: 1;
    zoom: 1;

    margin-right: 8px;
    vertical-align: middle;
    cursor: pointer;
}

/* Align checkbox */
.woocommerce-checkout label:has(input[type="checkbox"]),
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* All WooCommerce payment method radios */
.woocommerce-checkout #payment input[type="radio"][name="payment_method"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;

    width: 16px !important;
    height: 16px !important;

    transform: none !important;
    margin-right: 10px !important;
    cursor: pointer;
    vertical-align: middle !important;
}

/* Adds spacing around the entire checkout content on desktop */
.woocommerce-checkout .woocommerce {
  padding: 50px;
  box-sizing: border-box;
}

/* Adds a payment methods image below the Smile & Pay label */
.woocommerce-checkout label[for="payment_method_smile_and_pay"]::after {
    content: "";
    display: block;

    height: 40px;
    margin-top: 4px;

    background-image: url("../images/smile_pay.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

/* Reduces padding for tablets */
@media (max-width: 768px) {
  .woocommerce-checkout .woocommerce {
    padding: 25px;
  }
}

/* Further adjusts sizing for small mobile screens */
@media (max-width: 480px) {
  .woocommerce-checkout .woocommerce {
    padding: 15px;
  }

  .woocommerce-checkout input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }

  .woocommerce-checkout #payment input[type="radio"][name="payment_method"] {
    width: 18px !important;
    height: 18px !important;
  }

  .woocommerce-checkout .woocommerce-form__label-for-checkbox {
    gap: 6px;
  }

  .woocommerce-checkout label[for="payment_method_smile_and_pay"]::after {
    height: 32px;
  }
}