/* Container: flex, spaced, padding */
#pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 64px;
}

/* Left side: items per page */
.projects-list-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}

.projects-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.projects-per-page-label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;    /* font-medium */
    color: #4b5563;      /* gray-700 */
}

/* Select */
.projects-per-page-select {
    border: 1px solid #d1d5db;        /* border-gray-300 */
    border-radius: 0.375rem;          /* rounded-md */
    padding: 0.25rem 0.5rem;          /* py-1 px-2 */
    font-size: 0.875rem;              /* text-sm */
    background-color: #ffffff;
    color: #111827;
}

/* Right side: page controls */
.projects-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}

/* Shared button/number styles */
.pagination-prev,
.pagination-next,
.pagination-page {
    width: 2.25rem;   /* w-9 */
    height: 2.25rem;  /* h-9 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;  /* rounded-lg */
    font-size: 0.875rem;    /* text-sm */
    transition: background-color 0.15s ease, color 0.15s ease;
    background-color: #f1f1ec;
    color: #2b2f29;
    text-decoration: none;
}

/* Prev/Next icons a bit larger */
.pagination-prev,
.pagination-next {
    font-size: 1.25rem; /* text-xl */
}

/* Hover state */
.pagination-prev:not(.is-disabled):hover,
.pagination-next:not(.is-disabled):hover,
.pagination-page:not(.is-active):hover {
    background-color: #e7e5df;
}

/* Disabled (first/last) */
.pagination-prev.is-disabled,
.pagination-next.is-disabled {
    background-color: #f1f1ec;
    color: #bcbcbc;
    cursor: not-allowed;
}

/* Active page */
.pagination-page.is-active {
    background-color: #35342e;
    color: #ffffff;
}

/* Ellipsis (if you add it later) */
.pagination-page.is-ellipsis {
    color: #898989;
    cursor: default;
}