{{-- Reduced top bar for checkout: logo, stepper, exit. No sidebar (design: Checkout). --}}
@extends('layouts.base')
@section('noindex', true)

@section('body')
<div style="background:var(--surface-0);min-height:100vh">
  <header class="iq-topbar" style="padding:0 clamp(16px,4vw,40px);background:var(--surface-0)">
    <a href="{{ route('dashboard') }}"><x-iq.logo /></a>
    <span class="grow"></span>
    <ol class="iq-row app-stepper app-hide-sm" id="stepper" style="list-style:none;margin:0;padding:0;gap:8px">
      @foreach (['Select plan', 'Confirm billing', 'Pay with Paystack', 'Done'] as $i => $label)
        <li class="iq-row" data-step="{{ $i }}" style="gap:8px;font-size:13px;font-weight:500"><span class="app-step-dot iq-num">{{ $i + 1 }}</span>{{ $label }}@unless($loop->last)<span style="width:32px;height:1px;background:var(--border-strong);margin-left:8px"></span>@endunless</li>
      @endforeach
    </ol>
    <span class="grow"></span>
    <a class="iq-btn iq-btn-quiet iq-btn-sm" href="{{ route('billing.index') }}"><x-iq.icon name="x" /> Exit checkout</a>
  </header>
  @yield('content')
</div>
<x-iq.toasts />
@endsection