.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination .page-item {
        display: flex;
    }

.pagination .page-item a {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
        color: var(--black);
        background: #fff;
        min-width: 40px;
        min-height: 40px;
        line-height: 1;
        margin: 0px !important;
        font-weight: 500;
        cursor: pointer;
        transition:
            border-color 0.2s ease, background 0.2s ease;
    }

.pagination .page-item a:hover {
        border-color: var(--primary-color);
    }

.pagination .page-item.active a:hover,
    .pagination .page-item:has(.page-link.disabled) a:hover {
        border-color: #e2e8f0;
    }

.pagination .page-item.active a {
        background: var(--primary-color);
        color: var(--cultured-white);
    }

.pagination .page-link.disabled {
        pointer-events: none;
        filter: grayscale(100%);
        opacity: 0.5;
    }

.pagination .page-item:has(span) {
        border-radius: 4px;
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: end;
        justify-content: center;
    }

.pagination .page-item:has(.page-link.disabled) a {
        cursor: default;
    }

@media (max-width: 767px) {
        .pagination .page-item.middle-page:not(.active) {
            display: none;
        }
}