/* Shared pagination component (_Pagination.cshtml).
   Self-contained — no dependency on page-specific CSS variables, so it can be dropped
   onto any listing view. */

.vgp-pagination {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Bottom spacing for a listing grid must not depend on the pagination block: search hides
   pagination, and on pages 2+ there is no editorial content after it either, so without this
   the last row of cards butts straight against the footer. */
.vgp-listing-end {
    padding-bottom: 3rem;
}

.vgp-pagination .pagination {
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.vgp-pagination .page-link {
    border-radius: 8px;
    border: 1px solid #e2e5ea;
    background: #fff;
    color: #4a5262;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.vgp-pagination .page-link:hover {
    background: rgba(254, 80, 1, 0.08);
    border-color: rgba(254, 80, 1, 0.3);
    color: #fe5001;
}

.vgp-pagination .page-link:focus-visible {
    outline: 2px solid #fe5001;
    outline-offset: 2px;
    box-shadow: none;
}

.vgp-pagination .page-item.active .page-link {
    background: #fe5001;
    border-color: #fe5001;
    color: #fff;
    box-shadow: 0 2px 8px rgba(254, 80, 1, 0.3);
}

.vgp-pagination .page-item.disabled .page-link,
.vgp-pagination .vgp-ellipsis {
    background: #f6f7f9;
    border-color: #e2e5ea;
    color: #9aa1ae;
    cursor: default;
}

@media (max-width: 575.98px) {
    .vgp-pagination .page-link {
        padding: 0.4rem 0.7rem;
        font-size: 0.8125rem;
    }
}