/* Global loading skeleton system.
   Add class="skel" to ANY element (empty div, img, span, whole card...) and it
   automatically renders as a shimmering placeholder using that element's own
   box: its width, height and border-radius. No per-page skeleton markup needed.
   Usage: <div class="avx-card skel-parent"> ... real content with class="skel" on
   whichever children should shimmer while loading ... </div>
   Or simplest: give the loading container itself class="skel" (e.g. an empty
   <div style="width:100%;height:133px"></div>) and it lights up automatically. */
.skel {
    position: relative;
    color: transparent !important;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%) !important;
    background-size: 400% 100% !important;
    animation: skel-shimmer 1.4s ease infinite;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    user-select: none;
}

.skel img,
.skel svg,
.skel i {
    visibility: hidden;
}

.skel::before,
.skel::after {
    content: none !important;
}

@keyframes skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* Put class="skel-mask" on any real, unmodified component (a card, a row, a
   button...) to turn the whole thing into a loading placeholder automatically:
   every element inside inherits the same shimmer look and its own real size,
   so no bespoke skeleton markup is ever written per page. */
.skel-mask,
.skel-mask * {
    position: relative;
    color: transparent !important;
    background-image: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%) !important;
    background-color: transparent !important;
    background-size: 400% 100% !important;
    animation: skel-shimmer 1.4s ease infinite;
    border-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.skel-mask {
    pointer-events: none;
    user-select: none;
}

.skel-mask img,
.skel-mask svg,
.skel-mask i {
    visibility: hidden;
}

.skel-mask::before,
.skel-mask::after,
.skel-mask *::before,
.skel-mask *::after {
    content: none !important;
}