/* MKP Pagination Redesign v4.4.0
   Rounded square buttons -- overrides theme border-radius: 50%
   Website colors: #1f383d (dark teal), Cairo font
   RTL: next arrow points LEFT, prev arrow points RIGHT
   direction: ltr on ::after to prevent character mirroring
*/

.pagination-wrap {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 40px 0 24px;
    width: 100%;
}

.pagination-wrap nav.project-pagination {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    direction: ltr;
}

[dir="rtl"] .pagination-wrap nav.project-pagination {
    direction: rtl;
}

.pagination-wrap .page-numbers,
.project-pagination .page-numbers,
.pagination-wrap ul li a,
.pagination-wrap ul li .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background-color: #f0f0f0 !important;
    color: #202020 !important;
    font-family: "Cairo", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.pagination-wrap .page-numbers:hover,
.project-pagination .page-numbers:hover {
    background-color: #e0e0e0 !important;
    color: #1f383d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(31, 56, 61, 0.14) !important;
}

.pagination-wrap .page-numbers.current,
.project-pagination .page-numbers.current {
    background-color: #1f383d !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(31, 56, 61, 0.35) !important;
    transform: scale(1.08) !important;
    cursor: default !important;
}

/* Next arrow */
.pagination-wrap .page-numbers.next,
.project-pagination .page-numbers.next {
    background-color: #f0f0f0 !important;
    color: transparent !important;
    font-size: 0 !important;
    position: relative;
}

.pagination-wrap .page-numbers.next i,
.project-pagination .page-numbers.next i {
    display: none !important;
}

.pagination-wrap .page-numbers.next::after,
.project-pagination .page-numbers.next::after {
    content: "\203A";
    font-size: 24px !important;
    font-weight: 700;
    color: #1f383d;
    line-height: 1;
    display: block;
    font-family: Arial, sans-serif;
    direction: ltr;
}

.pagination-wrap .page-numbers.next:hover,
.project-pagination .page-numbers.next:hover {
    background-color: #1f383d !important;
}

.pagination-wrap .page-numbers.next:hover::after,
.project-pagination .page-numbers.next:hover::after {
    color: #ffffff;
}

/* Prev arrow */
.pagination-wrap .page-numbers.prev,
.project-pagination .page-numbers.prev {
    background-color: #f0f0f0 !important;
    color: transparent !important;
    font-size: 0 !important;
    position: relative;
}

.pagination-wrap .page-numbers.prev i,
.project-pagination .page-numbers.prev i {
    display: none !important;
}

.pagination-wrap .page-numbers.prev::after,
.project-pagination .page-numbers.prev::after {
    content: "\2039";
    font-size: 24px !important;
    font-weight: 700;
    color: #1f383d;
    line-height: 1;
    display: block;
    font-family: Arial, sans-serif;
    direction: ltr;
}

.pagination-wrap .page-numbers.prev:hover,
.project-pagination .page-numbers.prev:hover {
    background-color: #1f383d !important;
}

.pagination-wrap .page-numbers.prev:hover::after,
.project-pagination .page-numbers.prev:hover::after {
    color: #ffffff;
}

/* RTL: flip arrow characters */
[dir="rtl"] .pagination-wrap .page-numbers.next::after,
[dir="rtl"] .project-pagination .page-numbers.next::after {
    content: "\2039";
    direction: ltr;
}

[dir="rtl"] .pagination-wrap .page-numbers.prev::after,
[dir="rtl"] .project-pagination .page-numbers.prev::after {
    content: "\203A";
    direction: ltr;
}

/* Dots */
.pagination-wrap .page-numbers.dots,
.project-pagination .page-numbers.dots {
    background: transparent !important;
    box-shadow: none !important;
    color: #aaa !important;
    font-size: 18px !important;
    cursor: default !important;
    width: auto !important;
    min-width: 32px !important;
    letter-spacing: 2px;
}

.pagination-wrap .page-numbers.dots:hover,
.project-pagination .page-numbers.dots:hover {
    background: transparent !important;
    color: #aaa !important;
    transform: none !important;
    box-shadow: none !important;
}