/* ==========================================================
    Pagination
========================================================== */

.pagination-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:50px 0 10px;

    flex-wrap:wrap;

}

/* ==========================================================
    Pages
========================================================== */

.pagination-pages{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex-wrap:wrap;

}

/* ==========================================================
    Buttons
========================================================== */

.pagination-btn,
.pagination-link{

    width:44px;

    height:44px;

    border:1px solid var(--border);

    background:var(--surface);

    color:var(--text);

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    user-select:none;

}

.pagination-btn i{

    font-size:15px;

}

/* ==========================================================
    Hover
========================================================== */

.pagination-btn:hover,
.pagination-link:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

/* ==========================================================
    Active
========================================================== */

.pagination-link.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

    cursor:default;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

/* ==========================================================
    Disabled
========================================================== */

.pagination-btn.disabled{

    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;

    background:var(--surface-alt);

}

/* ==========================================================
    Dots
========================================================== */

.pagination-dots{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--text-muted);

    font-weight:700;

    user-select:none;

}

/* ==========================================================
    Focus
========================================================== */

.pagination-btn:focus,
.pagination-link:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(var(--primary-rgb), .15);

}

/* ==========================================================
    Loading
========================================================== */

.pagination-btn[disabled],
.pagination-link[disabled]{

    pointer-events:none;

    opacity:.6;

}

/* ==========================================================
    Mobile
========================================================== */

@media(max-width:768px){

    .pagination-wrapper{

        gap:8px;

        margin-top:35px;

    }

    .pagination-pages{

        gap:6px;

    }

    .pagination-btn,
    .pagination-link,
    .pagination-dots{

        width:38px;

        height:38px;

        border-radius:10px;

        font-size:13px;

    }

}

@media(max-width:480px){

    .pagination-wrapper{

        justify-content:space-between;

    }

    .pagination-pages{

        flex:1;

        justify-content:center;

    }

}