.skeleton {
    /* A subtle, semi-transparent grey for the base */
    background-color: rgba(130, 130, 130, 0.15);

    /* The shimmer uses a slightly more opaque overlay, fading to transparent */
    background-image: linear-gradient(110deg,
            transparent 8%,
            rgba(130, 130, 130, 0.25) 18%,
            transparent 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        background-position-x: 200%;
    }

    100% {
        background-position-x: -200%;
    }
}

/* Utility classes to control size based on parent */
.skeleton-fill {
    width: 100%;
    height: 100%;
    display: block;
    height: 1.256rem;
}

/* Optional: Helpful for text placeholders so they don't collapse */
.skeleton-text {
    width: 100%;
    height: 1rem;
    margin-bottom: 0.5rem;
}


.relative-parent {
    /* CRITICAL: This is what forces the absolute overlay to match this element's size */
    position: relative;

    /* Optional: Keeps the blur from spilling outside if the parent has border-radius */
    overflow: hidden;
}

.local-blur-overlay {
    /* Anchors the overlay to the edges of the 'relative-parent' */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;

    /* The blur effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.3); /* Slight white tint for visibility */

    /* Centers the text exactly in the middle */
    display: flex;
    justify-content: center;
    align-items: center;
}