/* ==========================================================================
   Kishoreganj University — paginator

   Its own component file, not part of listing.css, because pagination appears
   on pages that do not load listing.css (/all-event, /all-student-achievement)
   and inside roots other than .kiu-listing (/explore/.../notices). Living in
   listing.css left those paginators rendering as unstyled Bootstrap defaults.

   AppServiceProvider calls Paginator::useBootstrap(), so the markup is
   Bootstrap's .pagination / .page-item / .page-link. Include this file on any
   page that calls ->links().

   main.css sets `html { font-size: 10px }`, so 1rem = 10px — sizes are px.
   ========================================================================== */

.kiu-pagination {
    /* Palette fallbacks: this file may load on a page whose root class does
       not declare the KIU tokens. */

    margin-top: 44px;
}

.kiu-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kiu-pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 12px;
    border: 1px solid var(--kiu-border, #E1E7F0);
    border-radius: var(--kiu-radius-sm);
    background: var(--kiu-white, #FFFFFF);
    font-size: 14px;
    font-weight: 550;
    color: var(--kiu-body, #4B5768);
    text-decoration: none;
    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out), border-color var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-pagination .page-link:hover {
    border-color: var(--kiu-navy, #1B3A6B);
    color: var(--kiu-navy, #1B3A6B);
}

.kiu-pagination .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 58, 107, .12);
}

.kiu-pagination .page-item.active .page-link {
    background: var(--kiu-navy, #1B3A6B);
    border-color: var(--kiu-navy, #1B3A6B);
    color: var(--kiu-white, #FFFFFF);
}

.kiu-pagination .page-item.disabled .page-link {
    opacity: .45;
    pointer-events: none;
}

/* Bootstrap's paginator emits an SVG-less "..." separator and screen-reader
   spans; keep them from picking up the button chrome. */
.kiu-pagination .page-item .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}