/* Payment method logos. Uses the tokens defined in app.css. */

/* <x-payment-logos>: caption + a wrapping, centred row of card-shaped plates.
   Each SVG already contains its own white 38x24 rounded card (faint edge
   included), so the <li> only sizes and clips it and adds a soft clay lift.
   Logical properties only, so the row works the same in RTL. */

.payment-logos {
    --pl-h: 24px;                      /* plate height; width keeps the 38:24 card ratio */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
    max-width: 100%;
}

.payment-logos--md { --pl-h: 32px; }

.payment-logos__caption {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.payment-logos--md .payment-logos__caption { font-size: var(--text-sm); }

.payment-logos__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-logos__item {
    display: block;
    flex: none;
    block-size: var(--pl-h);
    inline-size: calc(var(--pl-h) * 38 / 24);
    border-radius: calc(var(--pl-h) / 8); /* = the artwork's own corner (3 of 24) */
    background: #fff;
    box-shadow: 0 3px 6px -3px rgba(16, 64, 150, .35);
    overflow: hidden;
}

.payment-logos__item img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

/* Under the "Continue to Payment" button: the form grid gap is 24px, so pull
   the row a little closer to the button it belongs to. */
.topup-form > .payment-logos { margin-block-start: calc(var(--space-3) * -1); }

/* Wider screens: a little more presence for the form row. */
@media (min-width: 960px) {
    .payment-logos--sm { --pl-h: 26px; }
}

/* Footer variant on --blue-deep: light caption, deeper shadow (plates stay white). */
.payment-logos--on-dark .payment-logos__caption { color: #CFE0FA; }
.payment-logos--on-dark .payment-logos__item { box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); }

/* Footer placement */
.footer-payments { margin-top: var(--space-8); }