@if ($paginator->hasPages())
    @once
        <style>
            .sf-pagination {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                margin-top: 16px;
            }

            .sf-pagination__summary {
                font-size: 11px;
                color: var(--fm-text-secondary, #6b7280);
            }

            .sf-pagination__list {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 6px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .sf-pagination__item {
                margin: 0;
            }

            .sf-pagination__link,
            .sf-pagination__label {
                min-width: 34px;
                height: 34px;
                padding: 0 10px;
                border: 1px solid var(--fm-border, #e5e7eb);
                border-radius: var(--fm-radius-full, 9999px);
                background: var(--fm-card-bg, #ffffff);
                color: var(--fm-text-secondary, #6b7280);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 700;
                line-height: 1;
                text-decoration: none;
                box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
            }

            .sf-pagination__link:hover {
                border-color: var(--fm-primary, #2daa37);
                color: var(--fm-primary, #2daa37);
            }

            .sf-pagination__item.is-active .sf-pagination__label {
                border-color: var(--fm-primary, #2daa37);
                background: var(--fm-primary, #2daa37);
                color: #ffffff;
            }

            .sf-pagination__item.is-disabled .sf-pagination__label {
                opacity: 0.45;
                box-shadow: none;
            }

            @media (max-width: 420px) {
                .sf-pagination__link,
                .sf-pagination__label {
                    min-width: 30px;
                    height: 30px;
                    padding: 0 8px;
                    font-size: 11px;
                }
            }
        </style>
    @endonce

    <nav class="sf-pagination" role="navigation" aria-label="Pagination Navigation">
        @if ($paginator instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)
            <div class="sf-pagination__summary">
                Showing {{ $paginator->firstItem() ?? 0 }}-{{ $paginator->lastItem() ?? 0 }} of {{ $paginator->total() }}
            </div>
        @endif

        <ul class="sf-pagination__list">
            @if ($paginator->onFirstPage())
                <li class="sf-pagination__item is-disabled" aria-disabled="true">
                    <span class="sf-pagination__label" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="sf-pagination__item">
                    <a class="sf-pagination__link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="Previous page">&lsaquo;</a>
                </li>
            @endif

            @foreach ($elements as $element)
                @if (is_string($element))
                    <li class="sf-pagination__item is-disabled" aria-disabled="true">
                        <span class="sf-pagination__label">{{ $element }}</span>
                    </li>
                @endif

                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="sf-pagination__item is-active" aria-current="page">
                                <span class="sf-pagination__label">{{ $page }}</span>
                            </li>
                        @else
                            <li class="sf-pagination__item">
                                <a class="sf-pagination__link" href="{{ $url }}" aria-label="Go to page {{ $page }}">{{ $page }}</a>
                            </li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            @if ($paginator->hasMorePages())
                <li class="sf-pagination__item">
                    <a class="sf-pagination__link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="Next page">&rsaquo;</a>
                </li>
            @else
                <li class="sf-pagination__item is-disabled" aria-disabled="true">
                    <span class="sf-pagination__label" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif