/* === PAGINATION STYLES === */
/* Shared pagination styles for all pages using pagination-new-theme.php */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 20px 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    background: transparent;
    border: 1px solid #131313;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
}

.theme-dark .pagination a,
.theme-dark .pagination span {
    border-color: var(--border);
}

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

.pagination .active {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

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

.pagination .pagination-prev,
.pagination .pagination-next {
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.pagination .pagination-prev img,
.pagination .pagination-next img {
    width: 48px;
}

.pagination .pagination-prev:hover,
.pagination .pagination-next:hover {
    border: none;
    background: transparent;
}

/* === RESPONSIVE === */

/* 426-575 Mobile */
@media (min-width: 426px) and (max-width: 575px) {
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* 375-425 Mobile Small */
@media (max-width: 425px) {
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 0;
    }
}

/* Mobile pagination - hide extra pages up to 520px */
@media (max-width: 520px) {
    .pagination {
        flex-wrap: nowrap;
    }

    /* Hide pages beyond 3rd (prev + 3 pages = 4 items, hide from 5th) */
    .pagination a:not(.pagination-prev):not(.pagination-next):nth-child(n+5),
    .pagination span:not(.pagination-prev):not(.pagination-next):nth-child(n+5) {
        display: none;
    }
}