/* Container for the pagination component, used for centering */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    list-style: none;
    margin: 0;
    /* Ensuring it doesn't inherit other ul/li styles that might conflict */
    padding-left: 0; 
}

/* The main pagination list */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    overflow: hidden; 
}

.pagination li {
    margin: 0;
}

/* Style for individual page links (<a>) and static items (<span>) */
.pagination li a,
.pagination li span {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--color-primary-light);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap; /* Prevents text like "Previous" from wrapping */
}

/* Remove left border for subsequent items to prevent double borders */
.pagination li:not(:first-child) a,
.pagination li:not(:first-child) span {
    border-left: none;
}

/* Hover effect for page links */
.pagination li a:hover {
    background-color: var(--color-primary-light);
    color: var(--bg-secondary);
    border-color: var(--color-primary-light);
}

/* Style for the active page item */
.pagination li.active span,
.pagination li.active a {
    background-color: var(--color-primary);
    color: var(--bg-secondary);
    border-color: var(--color-primary);
    cursor: default;
}

/* Prevent hover effect on active 'a' if it's a link but styled as active */
.pagination li.active a:hover {
    background-color: var(--color-primary);
    color: var(--bg-secondary);
    border-color: var(--color-primary);
}

/* Style for disabled page items */
.pagination li.disabled span,
.pagination li.disabled a {
    color: var(--text-lighter);
    background-color: var(--bg-primary);
    border-color: var(--color-secondary-light);
    cursor: not-allowed;
}

/* Prevent hover effects on disabled items */
.pagination li.disabled a:hover,
.pagination li.disabled span:hover {
    background-color: var(--bg-primary);
    color: var(--text-lighter);
    border-color: var(--color-secondary-light);
}