@php
    $steps = [1 => 'Kosár', 2 => 'Adatok és fizetés', 3 => 'Visszaigazolás'];
@endphp
<ol class="flex flex-wrap items-center gap-3 sm:gap-4 text-xs sm:text-sm mb-8">
    @foreach ($steps as $number => $label)
        <li class="flex items-center gap-2 {{ $number < $current ? 'text-emerald-600' : ($number === $current ? 'text-brand-700 font-semibold' : 'text-slate-400') }}">
            <span class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border {{ $number <= $current ? 'border-current' : 'border-slate-300' }} text-xs">
                {{ $number < $current ? '✓' : $number }}
            </span>
            {{ $label }}
        </li>
        @if (! $loop->last)
            <li class="text-slate-300">→</li>
        @endif
    @endforeach
</ol>