/* ======================================================
   Infinite Scroll — Suhka Theme
   Activated when the grid has the .is-infinite class
   added by assets/js/infinite-scroll.js.
   ====================================================== */

.epcl-module-wrapper.is-infinite .epcl-pagination,
.epcl-module-wrapper.is-infinite > .content-wrapper > .separator.last {
    display: none;
}

.infinite-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 0;
    min-height: 60px;
    clear: both;
}

.infinite-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(71, 64, 65, 0.2); /* fallback for browsers without color-mix() */
    border: 2px solid color-mix(in srgb, var(--epcl-main-color, #474041) 20%, transparent);
    border-top-color: var(--epcl-main-color, #474041);
    border-radius: 50%;
    animation: infinite-scroll-spin 0.8s linear infinite;
}

@keyframes infinite-scroll-spin {
    to { transform: rotate(360deg); }
}

.infinite-retry {
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--epcl-main-color, #474041);
    line-height: 0; /* removes inline-element gap below the SVG */
    transition: opacity 0.2s ease;
}

.infinite-retry:hover,
.infinite-retry:focus-visible {
    opacity: 0.65;
    outline: none;
}

.infinite-retry svg {
    display: block;
    width: 24px;
    height: 24px;
}

.infinite-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .infinite-spinner {
        animation-duration: 2.5s;
    }
}