/* ==========================================================================
   Payment badges: "Secure checkout with PayMongo" plus the accepted methods.
   Markup: inc/payment-badges.php. Used under the PDP buy buttons and under
   the cart drawer's checkout button (the --compact variant).
   ========================================================================== */

/* WooCommerce's `.woocommerce div.product form.cart { margin-bottom: 2em }`
   doubled the space above the strip on the PDP. Reset it there so the
   parent's gap alone separates the two; `form.pdp-form.cart` is what it takes
   to outrank Woo's (0,3,2) selector. */
.pdp-info > form.pdp-form.cart:has(+ .pay-badges) { margin-block-end: 0; }

.pay-badges {
  container-type: inline-size;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Title sits between two hairlines, like a label set into a rule. */
.pay-badges-title {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-strong);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.2;
}

.pay-badges-title::before,
.pay-badges-title::after {
  content: '';
  border-top: var(--border-hair) solid var(--hairline);
}

.pay-badges-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.pay-badges-label .icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--brand-support);
}

/* Equal tiles, three to a row in narrow spaces (phone PDP, cart drawer), all
   six in one row once the column is wide enough to keep each logo legible. */
.pay-badges-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3xs);
}

@container (min-width: 34em) {
  .pay-badges-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.pay-badges-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--white);
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
}

.pay-badges-item img {
  display: block;
  width: 100%;
  height: 1.25rem;
  object-fit: contain;
}

.pay-badges--compact .pay-badges-item img { height: 1.1rem; }

/* Optical balance: these two are pure wordmarks that fill their whole box, so
   at the shared height they read heavier than the icon-plus-text logos. */
.pay-badges-item--billease img,
.pay-badges-item--maya img { height: 0.95rem; }

.pay-badges--compact .pay-badges-item--billease img,
.pay-badges--compact .pay-badges-item--maya img { height: 0.85rem; }