/**
 * Load-more / end-of-results — Apple-inspired visual layer.
 */

.load-more {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0;
    box-sizing: border-box;
}

.load-more[hidden] {
    display: none !important;
}

.load-more-button {
    --lm-font:
        -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display",
        system-ui, sans-serif;
    --lm-icon-size: 16px;
    --lm-gap: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border: 0.5px solid var(--color-border);
    border-radius: 980px;
    background: var(--color-surface-glass-strong);
    font-family: var(--lm-font);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.016em;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    box-shadow: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.load-more-button:hover:not(:disabled):not(.end-of-results) {
    background: var(--color-surface-raised);
    border-color: var(--color-border-strong);
    transform: none;
    box-shadow: none;
}

.load-more-button:active:not(:disabled):not(.end-of-results) {
    transform: scale(0.98);
}

.load-more-button:disabled:not(.end-of-results):not(.is-loading) {
    opacity: 0.45;
    cursor: not-allowed;
}

.load-more-button .load-more-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lm-gap);
    min-width: 0;
}

.load-more-button .load-more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--lm-icon-size);
    width: var(--lm-icon-size);
    height: var(--lm-icon-size);
    color: var(--primary);
}

.load-more-button .load-more-icon svg {
    display: block;
    width: var(--lm-icon-size);
    height: var(--lm-icon-size);
}

.load-more-button .load-more-label {
    display: block;
    white-space: nowrap;
    line-height: 1.15;
}

/* ── End of results — iOS list footer ── */

.load-more:has(.end-of-results) {
    align-items: center;
    gap: 14px;
    margin-top: 0.25rem;
    padding: 1rem 0 0.125rem;
}

.load-more:has(.end-of-results)::before,
.load-more:has(.end-of-results)::after {
    content: "";
    flex: 1 1 0;
    height: 0.5px;
    background: var(--color-border-subtle);
}

.load-more-button.end-of-results,
.load-more-button.end-of-results:hover,
.load-more-button.end-of-results:disabled {
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: none;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.006em;
    color: var(--color-text-muted);
    cursor: default;
    pointer-events: none;
    opacity: 1;
    flex: 0 0 auto;
}

/* ── Loading ── */

.load-more-button.is-loading {
    cursor: progress;
    pointer-events: none;
    color: var(--color-text-muted);
    border-color: var(--color-border-subtle);
    background: transparent;
}

.load-more-button.is-loading .load-more-spinner {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--color-border-subtle);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: load-more-spin 0.7s linear infinite;
}

@keyframes load-more-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .load-more-button.is-loading .load-more-spinner {
        animation: none;
        border-top-color: var(--color-text-faint);
    }
}

@media (max-width: 640px) {
    .load-more:has(.end-of-results) {
        gap: 10px;
        padding-top: 0.875rem;
    }

    .load-more-button:not(.end-of-results) {
        min-height: 44px;
        padding: 0 18px;
        font-size: 0.9375rem;
    }
}