/* ==========================================
   JOBS PAGE - PAGINATION
========================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.pagination-prev,
.pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-white, #FFFFFF);
    border-radius: 40px;
    font-size: var(--font-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #1A1A1A);
    text-decoration: none;
    transition: all var(--transition-fast, 0.2s ease);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pagination-prev:hover,
.pagination-next:hover {
    background: var(--color-primary, #4D6AFF);
    color: var(--color-white, #FFFFFF);
    border-color: transparent;
}

.pagination-numbers {
    display: flex;
    gap: 8px;
}

.pagination-number,
.pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: var(--font-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
    transition: all var(--transition-fast, 0.2s ease);
}

.pagination-number {
    background: var(--color-white, #FFFFFF);
    color: var(--color-text, #1A1A1A);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pagination-number:hover {
    background: var(--color-primary, #4D6AFF);
    color: var(--color-white, #FFFFFF);
    border-color: transparent;
}

.pagination-current {
    background: var(--color-primary, #4D6AFF);
    color: var(--color-white, #FFFFFF);
}

/* Responsive */
@media (max-width: 767px) {
    .pagination {
        gap: 12px;
    }
    
    .pagination-prev,
    .pagination-next {
        padding: 8px 16px;
        font-size: var(--font-xs, 0.75rem);
    }
    
    .pagination-number,
    .pagination-current {
        width: 36px;
        height: 36px;
        font-size: var(--font-xs, 0.75rem);
    }
}
