/*
 * Accepted payment logos shortcode.
 *
 * [nps_accepted_payments]
 * See public/shortcodes/nps-accepted-payments.php
 *
 * Matches the spacing of the WoodMart Images Gallery widget this shortcode
 * replaces in the footer.
 *
 * That widget is a 4-column grid with a 0px gap, pinned to 200px wide in
 * Elementor — so each cell is 50px holding a 39-40px logo aligned left, which
 * is what produces the ~10px gap between the badges.
 *
 * Copying the 4-column grid instead of that gap would tie the spacing to the
 * container: our <ul> fills the whole footer column, making every cell far
 * wider and pushing the logos apart. A flex row with the gap stated outright
 * looks the same, and keeps looking the same at any width and any number of
 * payment methods.
 *
 * There is deliberately no card here — the logo SVGs draw their own white
 * rounded background.
 */

.nps-accepted-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nps-accepted-payments__item {
	display: flex;
	align-items: center;
	justify-content: left;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/*
 * Natural size. The logos are 39-40 x 28, and an SVG carries its own
 * dimensions, so nothing here should force a height.
 */
.nps-accepted-payments__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}