/* ==========================================================================
   Payment Method Icons
   Styles for trust badge rows rendered in footer, cart, and checkout.
   ========================================================================== */

.st-payment-icons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0 0;
}

/* Alignment variants */
.st-payment-icons--align-left  { align-items: flex-start; }
.st-payment-icons--align-center { align-items: center; }
.st-payment-icons--align-right { align-items: flex-end; }

/* ── Label ── */
.st-payment-icons__label {
	font-size: 0.6875rem; /* 11px */
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	line-height: 1;
}

/* ── Icon list ── */
.st-payment-icons__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-payment-icons--align-left  .st-payment-icons__list { justify-content: flex-start; }
.st-payment-icons--align-center .st-payment-icons__list { justify-content: center; }
.st-payment-icons--align-right .st-payment-icons__list { justify-content: flex-end; }

.st-payment-icons__item {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

.st-payment-icons__item svg,
.st-payment-icons__item img {
	display: block;
	border-radius: 4px;
}

/* ── Size variants ── */
.st-payment-icons--small .st-payment-icons__item {
	height: 22px;
}
.st-payment-icons--small .st-payment-icons__item svg,
.st-payment-icons--small .st-payment-icons__item img {
	height: 22px;
	width: auto;
}

.st-payment-icons--medium .st-payment-icons__item {
	height: 28px;
}
.st-payment-icons--medium .st-payment-icons__item svg,
.st-payment-icons--medium .st-payment-icons__item img {
	height: 28px;
	width: auto;
}

.st-payment-icons--large .st-payment-icons__item {
	height: 36px;
}
.st-payment-icons--large .st-payment-icons__item svg,
.st-payment-icons--large .st-payment-icons__item img {
	height: 36px;
	width: auto;
}

/* ── Footer wrapper ── */
.footer-payment-icons-wrap {
	padding: 0 0 1.25rem;
}

/* ── Footer context ── */
.st-payment-icons--footer {
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	margin-top: 1rem;
	width: 100%;
}

/* For dark footer backgrounds, invert mono icons like Visa */
.site-footer .st-payment-icons__item svg {
	filter: brightness(0) invert(1) opacity(0.75);
}

/* But NOT colored brand badges (tabby, tamara, mada, stc-pay, cod) */
.site-footer .st-payment-icons__item svg[aria-label="Tabby"],
.site-footer .st-payment-icons__item svg[aria-label="Tamara"],
.site-footer .st-payment-icons__item svg[aria-label="Mada"],
.site-footer .st-payment-icons__item svg[aria-label="STC Pay"],
.site-footer .st-payment-icons__item svg[aria-label="Cash on Delivery"] {
	filter: none;
	opacity: 0.9;
}

/* ── Cart context ── */
.st-payment-icons--cart {
	padding: 1rem 0 0.5rem;
	border-top: 1px solid var( --color-border, #e5e7eb );
	margin-top: 0.75rem;
}

/* ── Checkout context ── */
.st-payment-icons--checkout {
	padding: 0.75rem 0 0;
	border-top: 1px solid var( --color-border, #e5e7eb );
	margin-top: 0.75rem;
}

/* ── Responsive: tighten gap on very small screens ── */
@media ( max-width: 400px ) {
	.st-payment-icons__list {
		gap: 0.25rem;
	}
}