/* Loading skeleton for the class-search filter bar (hugim81searchbar).
 *
 * Background: the location/days/time fields are all <select class="selectpicker">
 * (bootstrap-select), which are display:none !important from the first paint and only
 * become visible once bootstrap-select's JS initializes them (footer58). On mercazim with
 * a slow page load (e.g. cross-region DB centers like 564) this can take several seconds,
 * making it look like fields are "missing" until the JS runs.
 *
 * Fix: while the form carries the js-filter-loading class (added in the initial HTML,
 * removed by the init JS when done), show a shimmering skeleton bar in place of each
 * still-hidden selectpicker field. The <label> is already visible, so the resident sees
 * "location", "days", etc. with a clear loading cue underneath. */

.classes-filter-item {
    position: relative;
}

/* Skeleton only while loading, and only for non-age fields
   (age fields use .ageContainer with a visible <input>; the 564 age-groups field
   uses .custom-multiselect which renders immediately without bootstrap-select). */
.js-filter-loading .classes-filter-item:not(:has(.ageContainer)):not(:has(.custom-multiselect))::after {
    content: "";
    display: block;
    height: 44px;
    margin-top: 6px;
    border-radius: 8px;
    background-color: #eceff3;
    background-image: linear-gradient(
        90deg,
        #eceff3 0%,
        #f6f8fa 40%,
        #f6f8fa 60%,
        #eceff3 100%
    );
    background-size: 200% 100%;
    animation: hugFilterShimmer 1.2s ease-in-out infinite;
}

/* Fallback for browsers without :has() support: show the skeleton on every item
   (including age). A loading cue on an already-visible field is better than no cue
   on the hidden ones. */
@supports not (selector(:has(*))) {
    .js-filter-loading .classes-filter-item::after {
        content: "";
        display: block;
        height: 44px;
        margin-top: 6px;
        border-radius: 8px;
        background-color: #eceff3;
        background-image: linear-gradient(
            90deg,
            #eceff3 0%,
            #f6f8fa 40%,
            #f6f8fa 60%,
            #eceff3 100%
        );
        background-size: 200% 100%;
        animation: hugFilterShimmer 1.2s ease-in-out infinite;
    }
}

@keyframes hugFilterShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Accessibility: no animation for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .js-filter-loading .classes-filter-item::after {
        animation: none;
    }
}