/* =====================================================
   CWF Pagination v6.0.0
   Supports: Load More button + Infinite Scroll
   ===================================================== */

/* ── Pagination wrapper ── */
.cwf-pager {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             14px;
    padding:         24px 0 8px;
    font-family:     inherit;
}

/* ── Load More button ── */
.cwf-load-more {
    all:             unset;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             9px;
    background:      var(--cwf-c, var(--cwf-c, #2563eb));
    color:           #fff;
    font-family:     inherit;
    font-size:       14px;
    font-weight:     700;
    padding:         13px 36px;
    border-radius:   var(--cwf-btn-r, 50px);
    cursor:          pointer;
    transition:      background .2s, transform .2s, box-shadow .2s;
    box-shadow:      0 4px 18px color-mix(in srgb, var(--cwf-c,var(--cwf-c, #2563eb)) 35%, transparent);
    border:          2px solid transparent;
    min-width:       160px;
    text-align:      center;
}
.cwf-load-more:hover:not(:disabled) {
    background: color-mix(in srgb, var(--cwf-c,var(--cwf-c, #2563eb)) 85%, #000);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cwf-c,var(--cwf-c, #2563eb)) 40%, transparent);
}
.cwf-load-more:active:not(:disabled) { transform: scale(.97); }
.cwf-load-more:disabled {
    background:  #e5e7eb;
    color:       #9ca3af;
    box-shadow:  none;
    cursor:      not-allowed;
}
/* Loading spinner inside button */
.cwf-load-more.cwf-loading .cwf-lm-text { display:none; }
.cwf-load-more .cwf-lm-spinner {
    display:        none;
    width:          18px;
    height:         18px;
    border:         2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius:  50%;
    animation:      cwf-spin .55s linear infinite;
}
.cwf-load-more.cwf-loading .cwf-lm-spinner { display:block; }

/* Outline variant */
.cwf-load-more--outline {
    background:   transparent;
    color:        var(--cwf-c, var(--cwf-c, #2563eb));
    border-color: var(--cwf-c, var(--cwf-c, #2563eb));
    box-shadow:   none;
}
.cwf-load-more--outline:hover:not(:disabled) {
    background: var(--cwf-cl, #fff3ef);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--cwf-c,var(--cwf-c, #2563eb)) 20%, transparent);
}
.cwf-load-more--outline.cwf-loading .cwf-lm-spinner { border-top-color: var(--cwf-c,var(--cwf-c, #2563eb)); }

/* ── Progress counter ── */
.cwf-progress {
    font-size:   12.5px;
    color:       var(--cwf-mute, #6b7280);
    font-weight: 500;
    line-height: 1;
}
.cwf-progress strong {
    color:       var(--cwf-txt, #111);
    font-weight: 700;
}

/* ── Progress bar ── */
.cwf-progress-bar-wrap {
    width:        min(280px, 85%);
    height:       5px;
    background:   var(--cwf-b, #e5e7eb);
    border-radius:10px;
    overflow:     hidden;
}
.cwf-progress-bar {
    height:       100%;
    background:   var(--cwf-c, var(--cwf-c, #2563eb));
    border-radius:10px;
    transition:   width .4s cubic-bezier(.4,0,.2,1);
    min-width:    4px;
}

/* ── Infinite scroll sentinel ── */
.cwf-sentinel {
    height:  40px;
    display: block;
}

/* ── All loaded message ── */
.cwf-all-loaded {
    font-size:   12.5px;
    color:       var(--cwf-mute, #9ca3af);
    display:     flex;
    align-items: center;
    gap:         10px;
    font-weight: 500;
}
.cwf-all-loaded::before,
.cwf-all-loaded::after {
    content:    '';
    flex:       1;
    width:      40px;
    height:     1px;
    background: var(--cwf-b, #e5e7eb);
}

/* ── Infinite scroll loader ── */
.cwf-inf-loader {
    display:  flex;
    gap:      6px;
    padding:  16px 0;
    opacity:  0;
    transition: opacity .3s;
}
.cwf-inf-loader.cwf-visible { opacity: 1; }
.cwf-inf-loader span {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--cwf-c, var(--cwf-c, #2563eb));
    animation:     cwf-bounce .8s ease-in-out infinite;
}
.cwf-inf-loader span:nth-child(2) { animation-delay:.16s; }
.cwf-inf-loader span:nth-child(3) { animation-delay:.32s; }

@keyframes cwf-bounce {
    0%,80%,100% { transform: scale(.6); opacity:.4; }
    40%         { transform: scale(1);  opacity:1;  }
}

/* Appended cards animation */
.cwf-card.cwf-appended {
    animation: cwf-card-in .3s ease both;
}
@keyframes cwf-card-in {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:none; }
}

@media(max-width:480px) {
    .cwf-load-more { padding:12px 28px; font-size:13.5px; }
}