/**
 * Shared filter spinner overlay – use on any page with AJAX filter/load.
 *
 * 1. Include this file: <link rel="stylesheet" href="{{ asset('css/filter-spinner-overlay.css') }}">
 * 2. Wrap your content (cards grid / results) in this HTML:
 *
 *   <div class="content-wrap-with-spinner">
 *     <div class="filter-spinner-overlay" id="filter-spinner" aria-hidden="true">
 *       <div class="filter-spinner-overlay__loader"></div>
 *     </div>
 *     <!-- your results container here, e.g. .osrs-items or .results-container -->
 *   </div>
 *
 * 3. In JS: when starting the request call showFilterSpinners(); when done (success or error)
 *    call hideFilterSpinners(); (load.js already defines these and uses .filter-spinner-overlay).
 */

.content-wrap-with-spinner {
    position: relative;
    min-height: 280px;
}

/* Centered on the page (viewport), not just the content area */
.filter-spinner-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(11, 11, 11, 0.65);
    pointer-events: none;
}

.filter-spinner-overlay.show {
    display: flex;
}

/* Spinner graphic – visible and centered inside overlay */
.filter-spinner-overlay__loader {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffc107;
    border-right-color: #feb600;
    border-radius: 50%;
    animation: filter-spinner-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes filter-spinner-spin {
    to {
        transform: rotate(360deg);
    }
}