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

.pagination .page-item .page-link {
    border: none;
    background: transparent;
    color: #161616;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 12px;
    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: 2px solid #161616;
    color: #161616;
    border-radius: 4px;
}

/* First and last page arrows */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    font-size: 12px;
    padding: 8px 10px;
}

/* Dropdown styles for pagination */
.pagination .dropdown-menu {
    min-width: 4rem;
    text-align: center;
    padding: 0.25rem 0;
}

.pagination .dropdown-item {
    padding: 0.25rem 0.75rem;
}

.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);
}