/* Pagination styles - compact version */
#pagination .btn {
    /* Reset from circle to rectangle */
    border-radius: 0;
    width: auto;
    height: auto;
    display: inline-block;
    padding: .25rem .35rem; /* Reduced padding for more compact buttons */

    /* Create the connected look */
    position: relative; /* Needed for z-index to work on hover */
    margin-left: -1px; /* Overlap borders for a connected feel */
    transition: all 0.3s ease;
    min-width: 32px; /* Ensure minimum width for buttons */
}

/* Round the corners of the very first and very last buttons */
#pagination .btn:first-child {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
#pagination .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* When a button is next to a '...' span, give it back its corner */
#pagination span + .btn {
    margin-left: 0; /* Don't overlap with the span */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#pagination .btn.active {
    background-color: #004c91;
    color: white;
    border-color: #004c91;
    z-index: 2; /* Bring active button to the front */
}

#pagination .btn:hover {
    background-color: #004c91;
    color: white;
    z-index: 3; /* Bring hovered button even more to the front */
}

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

#pagination .align-self-center {
    /* Keep the dots separated */
    padding: 0 0.5rem;
    align-self: center;
}