:root {
    /* Pagination Links */
    --pagination-link-color: #FFFFFF;
    --pagination-link-bg: #000000;
    --pagination-link-border: #FFFFFF;

    /* Pagination Active */
    --pagination-active-bg: #454545;
    --pagination-active-color: #FFFFFF;
    --pagination-active-border: #FFFFFF;

    /* Pagination Hover */
    --pagination-hover-bg: #575757;
    --pagination-hover-border: #FFFFFF;
    --pagination-hover-color: #000000;

    /* Prev / Next */
    --pagination-prev-next-bg: #9E9E9E;

    /* Dots */
    --pagination-dots-bg: #000000;
    --pagination-dots-border: #B5B5B5;
}

/* =========================================
   PAGINATION SECTION - FULL CSS
   ========================================= */
/* Container jo pagination ko center mein rakhta ha */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    padding: 0 15px;
    width: 100%;
}
/* Pagination Box */
.pagination {
    display: flex;
    flex-wrap: wrap; /* Mobile par buttons automatically neechay aa jayein gay agar jagah kam hui */
    gap: 8px; /* Buttons ke darmiyan spacing */
    list-style: none;
    padding: 0;
}
/* Individual Links Style */
.pagination a, 
.pagination .dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    text-decoration: none;
    color: var(--pagination-link-color);
    background-color: var(--pagination-link-bg);
    border: 1px solid var(--pagination-link-border);
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease-in-out;
}
/* Active Page (Jo select hua ho) */
.pagination a.active {
    background-color: var(--pagination-active-bg);
    color: var(--pagination-active-color);
    border-color: var(--pagination-active-border);
    cursor: default;
}
/* Hover Effect (Buttons par mouse le janay se) */
.pagination a:hover:not(.active) {
    background-color: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border);
    color: var(--pagination-hover-color);
    transform: translateY(-2px); /* Halki si movement */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Previous aur Next Buttons */
.pagination .prev, 
.pagination .next {
    background-color: var(--pagination-prev-next-bg);
    font-weight: 700;
}
/* Dots Styling (Jahan ... hota ha) */
.pagination .dots {
    border: var(--pagination-dots-border);
    background: var(--pagination-dots-bg);
    cursor: default;
    min-width: 30px;
}
/* =========================================
   MOBILE RESPONSIVE SETTINGS
   ========================================= */
/* Tablets aur Choti Screens ke liye (max-width: 768px) */
@media (max-width: 768px) {
    .pagination a, 
    .pagination .dots {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 14px;
        gap: 5px;
    }
    
    .pagination-wrapper {
        margin: 30px 0;
    }
}
/* Mobile Screens ke liye (max-width: 480px) */
@media (max-width: 480px) {
    .pagination {
        gap: 4px;
    }
    .pagination a, 
    .pagination .dots {
        min-width: 35px;
        height: 35px;
        font-size: 13px;
        padding: 0 8px;
    }
    /* Mobile par unnecessary numbers hide karne ke liye (Optional) */
    /* .pagination a.hide-on-mobile { display: none; } */
}