/**
 * Pagination Styles - RTL Support for Arabic
 * Optimized for mobile and desktop devices
 */

/* Base Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    direction: rtl;
}

.pagination .page-item .page-link {
    background-color: var(--bg-color, #ffffff);
    color: var(--text-color-dark, #333333);
    border-color: var(--border-color, #e5e5e5);
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 42px;
    text-align: center;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color, #0d6efd);
    color: var(--text-color-light, #ffffff);
    border-color: var(--primary-color, #0d6efd);
}

.pagination .page-item .page-link:hover {
    background-color: var(--primary-color, #0d6efd);
    color: var(--text-color-light, #ffffff);
    border-color: var(--primary-color, #0d6efd);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-color, #ffffff);
    color: #a0a0a0;
    border-color: var(--border-color, #e5e5e5);
    cursor: not-allowed;
}

/* RTL Specific Styles */
.rtl-pagination {
    direction: rtl !important;
    flex-direction: row-reverse !important;
    padding-right: 0;
}

.rtl-pagination .page-item {
    list-style-type: none;
}

.rtl-pagination .page-item:first-child .page-link,
.pagination .page-item:first-child .page-link {
    border-radius: 0 0.25rem 0.25rem 0 !important;
}

.rtl-pagination .page-item:last-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 0.25rem 0 0 0.25rem !important;
}

/* Disable margin-left for the default Bootstrap behavior */
.rtl-pagination .page-item + .page-item {
    margin-right: 3px;
    margin-left: 0;
}

/* Pagination Container */
.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    width: 100%;
}

.pagination-info {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-color-dark, #555555);
    text-align: center;
}

/* Responsive Styles - Tablets */
@media (max-width: 767.98px) {
    .pagination {
        gap: 3px;
    }
    
    .pagination .page-item .page-link {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 36px;
    }
    
    /* Arrow navigation buttons on mobile */
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        padding: 8px;
    }
}

/* Responsive Styles - Mobile */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination .page-item .page-link {
        padding: 6px 10px;
        font-size: 0.85rem;
        min-width: 32px;
        margin-bottom: 5px;
    }
    
    /* Show all page numbers on small screens */
    .pagination .page-item.d-none {
        display: block !important;
    }
    
    /* Reduce font size for info text on very small screens */
    .pagination-info {
        font-size: 0.8rem;
    }
}

/* Extra RTL helper classes */
.pagination-rtl {
    direction: rtl;
    justify-content: center;
}

/* Fix for Bootstrap's default margin which can cause issues with RTL */
.pagination {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Make current page stand out more */
.pagination .page-item.active .page-link {
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Fix hover effect for disabled links */
.pagination .page-item.disabled .page-link:hover {
    transform: none;
    box-shadow: none;
    background-color: var(--bg-color, #ffffff);
    color: #a0a0a0;
}

/* Make sure RTL works in all browsers */
html[dir="rtl"] .pagination,
body[dir="rtl"] .pagination,
.rtl-pagination {
    flex-direction: row-reverse;
}

/* Wrapper for RTL pagination */
.rtl-pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.rtl-pagination-wrapper nav {
    width: auto;
}