{{--
    "We Accept" row — Visa, Mastercard, JazzCash, Easypaisa, Cash on Delivery.
    These are original simplified wordmark/monogram badges, not downloaded
    official logo artwork (none was supplied and exact brand marks are
    trademarked) — swap the SVGs below for real logo assets any time; the
    surrounding chip markup and hover treatment won't need to change.
--}}
<div>
    <p class="heading-accent text-xs font-semibold uppercase tracking-wider text-cream/40">We Accept</p>
    <div class="mt-4 flex flex-wrap items-center gap-2">
        <span class="payment-badge" title="Visa">
            <svg viewBox="0 0 44 28" class="h-full w-auto" role="img" aria-label="Visa">
                <rect width="44" height="28" rx="5" fill="#fff" />
                <text x="22" y="19" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-style="italic" font-weight="700" font-size="13" fill="#1A1F71">VISA</text>
            </svg>
        </span>

        <span class="payment-badge" title="Mastercard">
            <svg viewBox="0 0 44 28" class="h-full w-auto" role="img" aria-label="Mastercard">
                <rect width="44" height="28" rx="5" fill="#fff" />
                <circle cx="19" cy="14" r="8" fill="#EB001B" />
                <circle cx="27" cy="14" r="8" fill="#F79E1B" fill-opacity="0.92" />
            </svg>
        </span>

        <span class="payment-badge" title="JazzCash">
            <svg viewBox="0 0 60 28" class="h-full w-auto" role="img" aria-label="JazzCash">
                <rect width="60" height="28" rx="5" fill="#fff" />
                <text x="30" y="18.5" text-anchor="middle" font-family="Arial, sans-serif" font-weight="800" font-size="10.5" fill="#D7192D">Jazz<tspan fill="#652D90">Cash</tspan></text>
            </svg>
        </span>

        <span class="payment-badge" title="Easypaisa">
            <svg viewBox="0 0 64 28" class="h-full w-auto" role="img" aria-label="Easypaisa">
                <rect width="64" height="28" rx="5" fill="#fff" />
                <text x="32" y="18.5" text-anchor="middle" font-family="Arial, sans-serif" font-weight="800" font-size="10" fill="#128C3F">easy<tspan fill="#00A651">paisa</tspan></text>
            </svg>
        </span>

        <span class="payment-badge payment-badge--cod" title="Cash on Delivery">
            <x-icon name="banknote" class="h-3.5 w-3.5" />
            <span class="text-[0.65rem] font-semibold uppercase tracking-wide">COD</span>
        </span>
    </div>
</div>
