/* Lazy load indicators container */
.lazy-load-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    transition: opacity var(--dur-fast) var(--easing);
}

.lazy-load-indicator--loading {
    background: linear-gradient(to bottom, transparent, rgba(var(--color-canvas), 0.8));
    border-top: 1px solid rgb(var(--grey-300));
    /* Always visible for IntersectionObserver, hide spinner when not loading */
}

.lazy-load-indicator--loading.is-idle {
    opacity: 0;
    pointer-events: none;
    /* Still in layout, so Observer can detect it */
}

.lazy-load-indicator--end {
    background: transparent;
    color: rgb(var(--grey-500));
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Loading spinner adjustments */
.lazy-load-indicator .spinner-border-sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 0.15em;
}

/* Smooth appearance */
.lazy-load-indicator[style*="display: block"] {
    animation: fade-in var(--dur) var(--easing) both;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading text */
.lazy-load-indicator--loading .text-muted {
    font-size: 0.875rem;
    font-weight: 500;
}

/* End indicator responsive */
@media (max-width: 576px) {
    .lazy-load-indicator {
        min-height: 48px;
        padding: 0.75rem;
    }

    .lazy-load-indicator--end small {
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lazy-load-indicator,
    .lazy-load-indicator[style*="display: block"] {
        animation: none;
        transition: none;
    }
}