/* shared-pagination — extracted from v1-category-18.html
   Source of truth — based on baseline file. */

.pgn-context {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary, #9CA3AF);
    margin-bottom: 10px;
}

.pagination {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pgn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary, #1F2937);
    text-decoration: none;
    border: 1px solid var(--color-border-secondary, #D1D5DB);
    background: white;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    cursor: pointer;
}

a.pgn-btn:hover {
    background: var(--green-light, #EAF3DE);
    border-color: var(--green, #149A49);
    color: var(--green-dark, #0D6E36);
}

/* Current page */
.pgn-btn.active {
    background: var(--green, #149A49);
    border-color: var(--green, #149A49);
    color: white;
    font-weight: 700;
    pointer-events: none;
    cursor: default;
}

/* Disabled prev on page 1 / next on last page */
.pgn-btn.disabled {
    color: var(--color-text-tertiary, #9CA3AF);
    border-color: var(--color-border-tertiary, #E5E7EB);
    background: var(--color-bg-secondary, #F9FAFB);
    pointer-events: none;
    cursor: default;
}

/* Ellipsis */
.pgn-info {
    color: var(--color-text-tertiary, #9CA3AF);
    padding: 0 4px;
    font-size: 0.875rem;
    line-height: 36px;
}