/**
 * TapPay TPDirect card fields on the storefront (Classic and Blocks share the same markup).
 *
 * TPDirect mounts each field as a cross-origin iframe inside the element it is given, and that
 * iframe carries TapPay's own `width:100%; height:100%; float:left`. A container with no box of its
 * own therefore collapses to zero height while the iframe keeps the browser's default 150px — the
 * three fields end up unbounded and borderless, and the shopper has no card input to speak of.
 *
 * So the container owns the box. The look is not invented here: the element also carries
 * WooCommerce's own `input-text` class, so the active theme paints the border, background and radius
 * exactly as it paints every other checkout input. This file only fixes the geometry the SDK needs.
 *
 * Apple Pay has no TapPay button component, so its button is Apple's own -apple-pay-button
 * appearance (spec/13 wallet payment methods). The Apple Pay method stays hidden until the storefront
 * script confirms canMakePaymentWithActiveCard for this device and verified domain.
 *
 * Google Pay is the other way round: TapPay's setupGooglePayButton() renders Google's own branded
 * button into the container, so this file only owns the same device gate — the method stays hidden
 * until setupPaymentRequest() reports canUseGooglePay for this browser and merchant.
 */

.csq-payment-tappay-card {
  margin-bottom: 1em;
}

.csq-payment-tappay-card > .csq-payment-tpfield + .csq-payment-tpfield {
  margin-top: 0.5em;
}

.csq-payment-tpfield {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.75em;
  padding: 0;
  overflow: hidden;
}

/* Absolute children are laid out against the PADDING box, so the container's own padding cannot
   inset the iframe — the inset has to be on the iframe itself. */
.csq-payment-tpfield iframe {
  position: absolute;
  top: 0;
  left: 0.75em;
  width: calc(100% - 1.5em);
  height: 100%;
  border: 0;
}

.csq-payment-applepay {
  display: none;
  margin-top: 0.5em;
}

.csq-payment-applepay.is-available {
  display: block;
}

.wc_payment_method:has(.csq-payment-applepay:not(.is-available)) {
  display: none;
}

.csq-payment-applepay-button {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-style: black;
  -apple-pay-button-type: buy;
}

.csq-payment-applepay-button[data-style='white'] {
  -apple-pay-button-style: white;
}

.csq-payment-applepay-button[data-style='white-outline'] {
  -apple-pay-button-style: white-outline;
}

.csq-payment-applepay-button[data-type='plain'] {
  -apple-pay-button-type: plain;
}

.csq-payment-googlepay {
  display: none;
  margin-top: 0.5em;
}

.csq-payment-googlepay.is-available {
  display: block;
}

.wc_payment_method:has(.csq-payment-googlepay:not(.is-available)) {
  display: none;
}

.wc_payment_method.csq-payment-tappay-wallet-unavailable {
  display: none;
}

.csq-payment-googlepay-button > div {
  width: 100%;
}