/* Square wallet container - hidden by default, shown only when wallets are available */
.square-wallets-container {
  display: none;
  /* One gap for both axes, so a wrapped row is spaced like an unwrapped one. */
  gap: var(--sws-wallet-gap, 0.75rem);
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Show container when it has active wallet buttons */
.square-wallets-container.has-wallets {
  display: flex;
}

/* Individual wallet button containers */
.square-wallets-container > div {
  display: none;
}

/*
 * Every wallet is the same height and shares the row evenly. Each of the three
 * SDKs sizes its own button differently (Apple Pay from -webkit-appearance,
 * Google from its injected iframe, Afterpay from .sq-ap__button), so the row
 * is only even if the CONTAINER owns the box and the injected button is made
 * to fill it — see the per-wallet rules below.
 */
.square-wallets-container > div.wallet-active {
  display: block;
  height: var(--sws-wallet-height, 40px);
  flex: 1 1 200px;
  /* Shrinkable: a hard 240px floor overflows narrow theme columns. */
  min-width: 140px;
  max-width: 100%;
  box-sizing: border-box;
}

#apple-pay-button {
  display: none; /* Hidden by default */
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
}

#apple-pay-button.wallet-active {
  display: block;
}
.sq-card-iframe-container {
  height: auto !important;
}
.sq-card-iframe-container iframe {
}

#afterpay-button {
  display: none; /* Hidden by default */
}

/* Afterpay/Clearpay: Square renders .sq-ap__button inside the container. */
#afterpay-button .sq-ap__button {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

#afterpay-button.wallet-active {
  display: block;
}

#google-pay-button {
  display: none; /* Hidden by default */
}

#google-pay-button.wallet-active {
  display: block;
}

/*
 * Pin the Google Pay button and its logo iframe to 40px.
 *
 * Diagnosed by comparing this checkout against a working (non-Elementor) one
 * in the same browser: Google's iframe declares `height: 100%`, which resolves
 * to 40px on the working site but collapses to 12px here, so only a sliver of
 * the logo showed. Forcing the iframe to 40px restores the logo, and the
 * button's UA line-height/padding then left empty space above it — zeroing
 * those and pinning the button to 40px closes the gap. vertical-align: top
 * removes the inline baseline gap under the iframe. Scoped to #google-pay-button.
 */
#google-pay-button #gpay-button-online-api-id,
#google-pay-button button.gpay-button {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
}
#google-pay-button .gpay-card-info-iframe,
#google-pay-button iframe {
  height: 100% !important;
  vertical-align: top !important;
}
/* Static (non-card-info) button: keep the artwork proportionate when the
 * button is stretched to match its neighbours. */
#google-pay-button button.gpay-button:not(.gpay-card-info-container) {
  background-size: auto 50% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Ensure proper spacing only when wallet buttons are visible */
.square-wallets-container:empty,
.square-wallets-container:not(.has-wallets) {
  display: none !important;
  margin: 0 !important;
}