/* Square wallet container - hidden by default, shown only when wallets are available */
.square-wallets-container {
  display: none;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* 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;
}

/* Show only wallet buttons that are successfully initialized */
.square-wallets-container > div.wallet-active {
  display: block;
}

#apple-pay-button {
  height: 40px;
  width: 240px;
  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: inline-block;
}
.sq-card-iframe-container {
  height: auto !important;
}
.sq-card-iframe-container iframe {
}

#afterpay-button {
  min-width: 240px;
  display: none; /* Hidden by default */
}

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

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

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

/* 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;
}