/**
 * Pagination styling for the Algolia InstantSearch "pagination" widget rendered into
 * #instant-search-pagination-container on the search results page
 * (catalogsearch/result), matching the "ek-pager" control that
 * Magento_Theme::html/pager.phtml renders for the category / product-listing toolbar.
 *
 * This is a deliberate copy of the plain CSS block pager.phtml prints inline for the
 * same class names - that template never renders on catalogsearch pages (Algolia
 * replaces the whole results area, pagination included), so the rules have to be
 * duplicated here rather than shared from one place. The class names below
 * (ek-pager, ek-pager__list, ek-pager__btn, ek-pager__icon) are wired up as
 * `cssClasses` on the pagination widget in web/js/instantsearch.js - keep both files
 * in sync if the pager design ever changes. Do not port these edits back into
 * pager.phtml / the category page.
 *
 * ek-pager__current-item and ek-pager__disabled-item are widget-specific additions:
 * Algolia's pagination widget puts its "selected"/"disabled" state on the <li> wrapper
 * rather than on the link itself (pager.phtml instead toggles `aria-current`/
 * `aria-disabled` directly on the <a>), so the equivalent look is applied here via a
 * descendant selector instead of an attribute selector.
 */
.ek-pager {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ek-pager__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ek-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #FFFFFF;
    color: #475467;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.ek-pager__btn:hover { background: #F9FAFB; border-color: #98A2B3; color: #1D2939; }

.ek-pager__btn:focus-visible {
    outline: 2px solid var(--color-button-background, #1D4ED8);
    outline-offset: 2px;
}

.ek-pager__current-item .ek-pager__btn {
    background: #E9E9EB;
    border-color: #E9E9EB;
    color: #475467;
    font-weight: 600;
    pointer-events: none;
}

.ek-pager__disabled-item .ek-pager__btn {
    pointer-events: none;
    color: #D0D5DD;
    border-color: #E4E7EC;
    cursor: not-allowed;
}

.ek-pager__icon { width: 16px; height: 16px; display: block; }

/**
 * vendor/hieudmg/module-hyva-algolia-search's own Tailwind component styling
 * (tailwind/components/instant-search.css, compiled into the theme's Tailwind
 * bundle under `@layer components`) targets these same `ais-Pagination-*` class
 * names with an older, flat "joined button strip" design: a shared box-shadow +
 * white background wrapping the whole list, a 1px border + -1px margin-left on
 * every <li> to make adjacent borders overlap seamlessly, absolute-positioned /
 * text-transparent previous & next links with the chevron drawn via `content`
 * on a ::after pseudo-element instead of the link's own content, and a plain
 * gray-200 fill on the selected <li>. All of that is superseded by the pill
 * look above (each button draws its own border + radius + fill on the inner
 * .ek-pager__btn), so every property that design touches is reset to nothing
 * below - left as separate, one-property-per-line rules (rather than
 * `all: unset`) so it stays obvious exactly what's being neutralized and why.
 *
 * This file is a plain stylesheet (not wrapped in `@layer`), so per the CSS
 * cascade-layers spec any unlayered rule already wins over a `@layer components`
 * rule for the same property, regardless of selector specificity - no !important
 * needed, this simply has to exist.
 */
.ais-Pagination-list {
    background: none;
    box-shadow: none;
}

.ais-Pagination-item {
    border: none;
    margin-left: 0;
}

.ais-Pagination-item--selected {
    background: none;
}

.ais-Pagination-item--previousPage,
.ais-Pagination-item--nextPage {
    position: static;
}

.ais-Pagination-list .ais-Pagination-item--previousPage a,
.ais-Pagination-list .ais-Pagination-item--nextPage a,
.ais-Pagination-list .ais-Pagination-item--previousPage span,
.ais-Pagination-list .ais-Pagination-item--nextPage span {
    position: static;
}

.ais-Pagination-item--previousPage::after,
.ais-Pagination-item--nextPage::after {
    content: none;
}