/* ============================================================================
   payment-badges.css — accepted-payment marks.  v2.2.7.114

   The card marks are inline SVG data URIs rather than image files, for three
   reasons: no extra HTTP requests on every page, no hotlinking to Stripe or
   to the card schemes (links that break the moment they reorganise their
   asset hosts), and no CSP change — img-src already allows data:.

   TRADEMARK NOTE
   These are simplified marks drawn to sit correctly in this layout. Showing
   which cards you accept is ordinary, permitted merchant practice, but the
   schemes do publish exact artwork with spacing and colour rules. If you want
   pixel-exact official marks, download them from the Visa, Mastercard and
   American Express brand centres and swap the data URIs for local files —
   the class names and layout below will not need to change.
   ========================================================================== */

.pay-badges {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin: 22px 0 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.pay-badges .pay-note {
  flex: 0 0 100%;
  text-align: center;
  margin: 0 0 4px;
  color: var(--pe-ink-soft, #94a3b8);
  font-size: 12.5px;
  letter-spacing: .01em;
}
.pay-badges .pay-note strong { color: var(--pe-ink, #e2e8f0); font-weight: 700; }

/* Each mark is a fixed 40x26 card rectangle so the row stays optically even
   however different the logos are inside it. */
.pay-badges i {
  display: block;
  width: 40px; height: 26px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 26px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.25);
  /* Slightly held back so a row of logos never outshouts the content above
     it — trust marks are reassurance, not decoration. */
  opacity: .92;
}
.pay-badges i.visa { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'><rect width='40' height='26' rx='4' fill='%23fff'/><text x='20' y='18' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='11' font-weight='700' font-style='italic' fill='%231A1F71'>VISA</text></svg>"); }
.pay-badges i.mc   { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'><rect width='40' height='26' rx='4' fill='%23fff'/><circle cx='16' cy='13' r='7.5' fill='%23EB001B'/><circle cx='24' cy='13' r='7.5' fill='%23F79E1B'/><path d='M20 7.4a7.5 7.5 0 0 0 0 11.2 7.5 7.5 0 0 0 0-11.2z' fill='%23FF5F00'/></svg>"); }
.pay-badges i.amex { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'><rect width='40' height='26' rx='4' fill='%23fff'/><rect x='2' y='2' width='36' height='22' rx='3' fill='%23006FCF'/><text x='20' y='16' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='7.5' font-weight='700' fill='%23fff'>AMEX</text></svg>"); }
.pay-badges i.disc { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'><rect width='40' height='26' rx='4' fill='%23fff'/><text x='20' y='17' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='6.5' font-weight='700' fill='%23231F20'>DISCOVER</text><circle cx='31' cy='20' r='3.2' fill='%23F76B1C'/></svg>"); }

/* The Stripe lockup is text, not a logo: "Powered by Stripe" as an image is
   the kind of thing that gets stale, and Stripe's own guidance is happy with
   a plain textual credit. */
.pay-badges .pay-stripe {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: var(--pe-ink-soft, #cbd5e1);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}
.pay-badges .pay-stripe:hover { background: rgba(255,255,255,.1); }
.pay-badges .pay-stripe svg { width: 12px; height: 12px; flex: 0 0 12px; }

/* The larger variant used beside a Buy button, where the marks are doing
   real work rather than sitting quietly in a footer. */
.pay-badges.is-checkout {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.pay-badges.is-checkout i { width: 46px; height: 30px; background-size: 46px 30px; opacity: 1; }
.pay-badges.is-checkout .pay-note { font-size: 13px; }

@media (max-width: 480px) {
  .pay-badges { gap: 7px; }
  .pay-badges i { width: 34px; height: 22px; background-size: 34px 22px; }
  .pay-badges.is-checkout i { width: 38px; height: 25px; background-size: 38px 25px; }
}

/* Light pages, if any: the marks sit on white cards already, so only the
   surrounding chrome needs to flip. */
@media (prefers-color-scheme: light) {
  .pay-badges { border-top-color: rgba(0,0,0,.1); }
  .pay-badges .pay-stripe {
    background: rgba(0,0,0,.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    color: #475569;
  }
}