@if ($paginator->hasPages())
    <style>
        .pagination-nav {
            display: flex;
            justify-content: center;
        }

        .pagination-mobile {
            display: none;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 12px;
        }

        .pagination-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            text-decoration: none;
            transition: all 0.15s ease;
        }

        .pagination-btn i {
            font-size: 14px;
        }

        .pagination-btn:hover {
            background: var(--accent-subtle);
            border-color: var(--accent);
            color: var(--accent);
        }

        .pagination-btn-disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .pagination-desktop {
            display: flex;
            align-items: center;
            flex-direction: column-reverse;
            justify-content: space-between;
            width: 100%;
            gap: 24px;
        }

        .pagination-info {
            flex-shrink: 0;
        }

        .pagination-info-text {
            font-size: 13px;
            color: var(--text-muted);
        }

        .pagination-info-text strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .pagination-controls {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pagination-item {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            padding: 0 12px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            text-decoration: none;
            transition: all 0.15s ease;
            cursor: pointer;
        }

        .pagination-item i {
            font-size: 14px;
        }

        .pagination-item:hover {
            background: var(--accent-subtle);
            border-color: var(--accent);
            color: var(--accent);
        }

        .pagination-item-active {
            background: var(--accent);
            border-color: var(--accent);
            color: #ffffff;
            font-weight: 600;
            cursor: default;
        }

        .pagination-item-active:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: #ffffff;
        }

        .pagination-item-disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .pagination-item-dots {
            background: transparent;
            border-color: transparent;
            cursor: default;
            min-width: 32px;
            padding: 0;
        }

        .pagination-item-dots:hover {
            background: transparent;
            border-color: transparent;
            color: var(--text-muted);
        }

        .pagination-item-dots i {
            font-size: 12px;
            color: var(--text-muted);
        }

        @media (max-width: 768px) {
            .pagination-mobile {
                display: flex;
            }

            .pagination-desktop {
                display: none;
            }
        }

        @media (max-width: 1024px) {
            .pagination-desktop {
                flex-direction: column;
                gap: 16px;
            }

            .pagination-info {
                order: 2;
            }

            .pagination-controls {
                order: 1;
            }
        }
    </style>

    <nav class="pagination-nav" role="navigation" aria-label="Navegação de páginas">

        <div class="pagination-mobile">
            @if ($paginator->onFirstPage())
                <span class="pagination-btn pagination-btn-disabled">
                    <i class="bi bi-chevron-left"></i>
                    <span>Anterior</span>
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="pagination-btn" rel="prev">
                    <i class="bi bi-chevron-left"></i>
                    <span>Anterior</span>
                </a>
            @endif

            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="pagination-btn" rel="next">
                    <span>Próximo</span>
                    <i class="bi bi-chevron-right"></i>
                </a>
            @else
                <span class="pagination-btn pagination-btn-disabled">
                    <span>Próximo</span>
                    <i class="bi bi-chevron-right"></i>
                </span>
            @endif
        </div>

        <div class="pagination-desktop">

            <div class="pagination-info">
                <span class="pagination-info-text">
                    Exibindo
                    <strong>{{ $paginator->firstItem() }}</strong>
                    a
                    <strong>{{ $paginator->lastItem() }}</strong>
                    de
                    <strong>{{ $paginator->total() }}</strong>
                    resultados
                </span>
            </div>

            <div class="pagination-controls">

                @if ($paginator->onFirstPage())
                    <span class="pagination-item pagination-item-disabled" aria-disabled="true">
                        <i class="bi bi-chevron-left"></i>
                    </span>
                @else
                    <a href="{{ $paginator->previousPageUrl() }}" 
                       class="pagination-item" 
                       rel="prev" 
                       aria-label="Página anterior">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                @endif

                @foreach ($elements as $element)

                    @if (is_string($element))
                        <span class="pagination-item pagination-item-dots" aria-disabled="true">
                            <i class="bi bi-three-dots"></i>
                        </span>
                    @endif

                    @if (is_array($element))
                        @foreach ($element as $page => $url)
                            @if ($page == $paginator->currentPage())
                                <span class="pagination-item pagination-item-active" aria-current="page">
                                    {{ $page }}
                                </span>
                            @else
                                <a href="{{ $url }}" class="pagination-item">
                                    {{ $page }}
                                </a>
                            @endif
                        @endforeach
                    @endif

                @endforeach

                @if ($paginator->hasMorePages())
                    <a href="{{ $paginator->nextPageUrl() }}" 
                       class="pagination-item" 
                       rel="next" 
                       aria-label="Próxima página">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                @else
                    <span class="pagination-item pagination-item-disabled" aria-disabled="true">
                        <i class="bi bi-chevron-right"></i>
                    </span>
                @endif
            </div>
        </div>
    </nav>
@endif