/* Parent Hierarchy */
.pagination-container {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Individual Button Styling */
.pagination-container .pagination-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #7070703b;
    border-radius: 50%;
    color: #4a5568;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    aspect-ratio: 1/1;
}

/* Hover effect */
.pagination-container .pagination-btn:hover:not(:disabled) {
    border-color: #808080;
    color: #808080;
    background-color: #f7fafc;
}

/* Active Page State */
.pagination-container .pagination-btn.active {
    background-color: #303030;
    border-color: transparent;
    color: #fff;
}

/* Navigation Arrows (Previous/Next) */
.pagination-container .pagination-nav-btn {
    background-color: #ffffff;
    color: #808080;
}

/* Disabled State */
.pagination-container .pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #edf2f7;
    color: #4a5568;
}

/* Responsive adjustment for small screens */
@media (max-width: 576px) {
    .pagination-container .pagination-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .pagination-container {
        margin-top: 25px;
    }
}