/* Pagination — compact, wraps cleanly on narrow viewports.
   Works with Laravel/bootstrap markup:
       <div class="pagination">
           <ul class="pagination">
               <li class="page-item [active|disabled]">
                   <a class="page-link" href="…">2</a>
               </li>
           </ul>
       </div>
*/

.pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 16px 0 20px;
    padding: 0;
    box-sizing: border-box;
}

.pagination ul.pagination {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(18, 14, 30, 0.04);
    box-sizing: border-box;
}

.pagination .page-item {
    display: inline-flex;
    margin: 0;
}

.pagination .page-item .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 13px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #3f3a4c;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .16s ease, color .16s ease;
}

.pagination .page-item .page-link:hover {
    background: #f4f4f7;
    color: #1D1929;
}
.pagination .page-item .page-link:focus-visible {
    outline: 2px solid #FAA31C;
    outline-offset: 1px;
}

.pagination .page-item.active .page-link {
    background: #E9540E;
    color: #fff;
    cursor: default;
}
.pagination .page-item.active .page-link:hover {
    background: #E9540E;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #c8c7ce;
    cursor: not-allowed;
}
.pagination .page-item.disabled .page-link:hover {
    background: transparent;
    color: #c8c7ce;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child  .page-link {
    font-size: 15px;
    padding: 0 10px;
    color: #6b6777;
}

@media (max-width: 640px) {
    .pagination { margin: 12px 0 16px; }
    .pagination ul.pagination { gap: 2px; padding: 3px; }
    .pagination .page-item .page-link {
        min-width: 30px;
        height: 30px;
        padding: 0 7px;
        font-size: 12.5px;
    }
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child  .page-link {
        font-size: 14px;
        padding: 0 8px;
    }
}