/* Load More Button Styling */
.load-more-container {
    text-align: center;
    padding: 18px 16px 26px;
    background: var(--background-primary, #ffffff);
    border-top: 1px solid var(--border-color, #e0e0e0);
    position: relative;
    z-index: 1;
    display: block !important;
    visibility: visible !important;
    flex-shrink: 0;
    animation: loadMoreReveal 0.2s ease;
}

body.theme-dark .load-more-container {
    background: var(--surface, #1a1a1a);
    border-top-color: var(--border, #2a2a2a);
}

.load-more-container.loading {
    background: transparent;
}

.load-more-container.loading::before {
    content: none !important;
}


.load-more-button,
.search-load-more-button {
    position: relative;
    background: transparent;
    color: var(--text-primary, #1f1f1f);
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 999px;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    min-width: 170px;
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
}

body.theme-dark .load-more-button,
body.theme-dark .search-load-more-button {
    color: var(--text, #e5e7eb);
    border-color: var(--border, #2a2a2a);
}

body.theme-dark .load-more-button:hover,
body.theme-dark .search-load-more-button:hover {
    color: var(--brand, #0a64ff);
    border-color: var(--brand, #0a64ff);
    background: rgba(10, 100, 255, 0.12);
}

.load-more-button:hover,
.search-load-more-button:hover {
    color: var(--button-primary-bg, #0f6cbd);
    border-color: currentColor;
    background: rgba(15, 108, 189, 0.05);
}

.load-more-button:active,
.search-load-more-button:active {
    background: rgba(15, 108, 189, 0.08);
}

.load-more-button:disabled,
.load-more-button.loading,
.search-load-more-button:disabled,
.search-load-more-button.loading {
    cursor: default;
    color: var(--text-primary, #1f1f1f);
    border-color: transparent; /* Hide outer ring while loading */
    background: transparent;
    position: relative;
}



.load-more-button:focus,
.search-load-more-button:focus {
    outline: 2px solid var(--focus-border, #80bfff);
    outline-offset: 4px;
}

.load-more-button.loading::before,
.search-load-more-button.loading::before {
    content: "";
    position: static;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--button-primary-bg, #0f6cbd);
    border-top-color: transparent;
    animation: loadMoreSpinner 0.7s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    margin-right: 10px;
}

.load-more-button.loading::after,
.search-load-more-button.loading::after {
    content: none;
}

@keyframes loadMoreReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loadMoreSpinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .load-more-button.loading::before,
    .search-load-more-button.loading::before {
        animation-name: loadMoreSpinner !important;
        animation-duration: 0.9s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: linear !important;
    }
}