/* ============================================
   PAGINATION.CSS - Pagination Component
   MobLand.Pro
   ============================================ */

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

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 15px;
    font-family: var(--font-headline);
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pagination-btn:hover {
    border-color: var(--harrigan-gold);
    color: var(--harrigan-gold);
}

.pagination-btn.active {
    background: var(--harrigan-gold);
    color: var(--midnight-black);
    border-color: var(--harrigan-gold);
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.disabled:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.pagination-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.pagination-ellipsis {
    color: var(--text-secondary);
    padding: 0 5px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .pagination-btn {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
    }
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
[data-theme="light"] .pagination-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="light"] .pagination-btn.active {
    background: var(--harrigan-gold);
    color: var(--midnight-black);
}