/*
 * Bonzai Payment Gateway — REDIRECT VARIANT
 * Responsive sizing for the accepted brand logos (Visa / Mastercard / Amex / Apple Pay)
 * shown next to the single Bonzai payment method, on classic checkout and Checkout Blocks.
 *
 * The logos shrink smoothly on small screens (clamp) and never overflow their container.
 */

.bonzai-pm-icons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(3px, 1.4vw, 6px);
  vertical-align: middle;
}

/* Classic checkout: icons sit just after the method title. */
.payment_methods .bonzai-pm-icons,
li.wc_payment_method .bonzai-pm-icons {
  margin-left: 8px;
}

/* Checkout Blocks: push the logos to the right edge of the label row. */
.wc-block-components-payment-method-label .bonzai-pm-icons,
.bonzai-pm-label .bonzai-pm-icons {
  margin-left: auto;
}

/*
 * The logos themselves. Height scales fluidly: 24px on desktop, down to a 16px floor on small
 * phones. !important guards against theme rules (e.g. `.payment_methods img { max-width: ... }`)
 * that would otherwise distort or oversize the icons.
 */
.bonzai-pm-icons img,
img.bonzai-pm-icon {
  height: clamp(16px, 4.6vw, 24px) !important;
  width: auto !important;
  max-height: 24px !important;
  border-radius: 3px;
  vertical-align: middle;
  display: inline-block;
  box-shadow: none;
}