/* =============================================================================
   ACCEPTED PAYMENT METHODS — the footer card row.

   WHY ITS OWN SHEET AND NOT layout.css
   layout.css is being edited by another worker in this same pass. Two writers on one file loses
   one of them, so these rules live here and the stylesheet is enqueued WITH gr-layout AS A
   DEPENDENCY - that puts it after layout.css in the cascade, so these win at equal specificity
   without a single !important.

   The marks are now the source's own 38x24 card artwork (see footer.php), which already carries
   its own white rounded card, border and brand colours. So this sheet does almost nothing on
   purpose: it CENTRES the row and sizes the cards. Any border, background or padding added here
   would double up on artwork that already has them.
   ============================================================================= */

/* Centred, as asked. layout.css sets justify-content:flex-end, and its 767 media query resets it
   to flex-start - BOTH have to be answered or the row snaps left on a phone. */
.gr-payments { justify-content: center; }
@media (max-width: 767px) {
	.gr-footer-bottom .gr-payments { justify-content: center; }
}

/* Native size. These are vector cards drawn on a 38x24 canvas, which is the size the source
   renders them at; scaling them up only softens the logo inside. */
.gr-pay-card {
	display: block;
	width: 38px;
	height: 24px;
	border-radius: 3px;   /* matches the card path's own corner, so the lazy-load placeholder
	                         does not flash as a hard-cornered box */
}

/* The text fallback, for a gateway with no card on file, has to sit on the same baseline as the
   cards rather than floating above them. */
.gr-payments .gr-pay-mark { align-self: center; }