{{-- $recipe, $active ('base' | 'steps' | 'finish') --}}
@once
<style>
    .recipe-stepper { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:1.2rem; }
    .stepper-chip {
        display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:34px;
        padding:0 12px; border-radius:18px; border:1.5px solid #e0d4c2; background:#fff; color:#6b5b45;
        font-weight:600; font-size:0.85rem; text-decoration:none; cursor:pointer; line-height:1;
    }
    .stepper-chip:hover { border-color:#c9b596; }
    .stepper-chip.active { background:#B07A2F; border-color:#B07A2F; color:#fff; }
    .stepper-sep { color:#c9b596; font-weight:700; }
    .stepper-add { color:#3A7A22; border-style:dashed; }
    .stepper-finish { color:#2f6b3e; }
    .stepper-finish.active { background:#3A7A22; border-color:#3A7A22; color:#fff; }
</style>
@endonce

<div class="recipe-stepper">
    <a href="{{ route('admin.recetas.wizard.basics', $recipe) }}"
       class="stepper-chip {{ $active === 'base' ? 'active' : '' }}">BASE</a>

    <span class="stepper-sep">›</span>
    <a href="{{ route('admin.recetas.wizard.steps', $recipe) }}"
       class="stepper-chip {{ $active === 'steps' ? 'active' : '' }}">PASOS</a>

    <span class="stepper-sep">›</span>
    <form method="POST" action="{{ route('admin.recetas.wizard.finish', $recipe) }}" class="d-inline m-0">
        @csrf
        <button type="submit" class="stepper-chip stepper-finish {{ $active === 'finish' ? 'active' : '' }}">FINISH ✓</button>
    </form>
</div>