/* Pagination Styles */
.pagination {
    margin: 0;
}

.pagination .page-item .page-link {
    border: none;
    background: transparent;
    color: #161616;
    font-size: 14px;
    font-weight: 400;
    min-width: 26px;
    min-height: 40px;
    padding: 8px;
    margin: 0 2px;
    transition: all 0.2s ease;
    position: relative;
}

.pagination .page-item.active .page-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 60%;
    margin: 0 auto;
    height: 3px;
    background-color: #B87B02;
    border-radius: 99999px;
}

.pagination .page-item .page-link.selected::after,
.pagination .page-item .page-link:not(.btn-prev):not(.btn-next):focus::after,
.pagination .page-item .page-link:not(.btn-prev):not(.btn-next):active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    right: 0;
    height: 3px;
    margin: 0 auto;
    background-color: #B87B02;
    border-radius: 99999px;
}

.pagination .page-item .page-link:hover {
    background-color: #f3f4f6;
    border-radius: 10px;
    color: #161616;
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus,
.pagination .page-item .page-link:active {
    color: #161616;
    box-shadow: none;
}

/* Border styling for ellipsis (...) when selected */
.pagination .page-link.selected {
    border: 1px solid #161616;
    color: #161616;
    border-radius: 4px !important;
    padding: 8px 13px;
    text-align: center;
}

.page-item:not(:first-child) .page-link {
    margin-left: 0 !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    margin: 0 !important;
}

/* Dropdown styles for pagination */
.pagination .dropdown-menu {
    min-width: 4rem;
    text-align: center;
    padding: 0.25rem 0;
    max-height: 250px;
    overflow-y: auto;
}

.pagination .dropdown-menu::-webkit-scrollbar {
    width: 4px;
}

.pagination .dropdown-menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.pagination .dropdown-item {
    padding: 0.25rem 0.75rem;
    text-align: center;
    font-size: 14px;
}

.pagination .dropdown-item.active,
.pagination .dropdown-item:active {
    background-color: transparent;
    color: inherit;
}

.pagination .dropdown-toggle::after {
    display: none;
    /* Hide Bootstrap caret arrow */
}

/* Utility margin class */
.margin-top-16 {
    margin-top: 16px;
}

[dir="ltr"] .page-link.btn-prev img,
[dir="ltr"] .page-link.btn-next img {
    transform: rotate(180deg);
}