/* Global Skeleton/Shimmer Utility */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e2e8f0; /* Light gray base */
    border-radius: 4px;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Specific component skeletons */
.skeleton-image {
    width: 100%;
    height: 100%;
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-text.medium {
    width: 70%;
}

.skeleton-btn {
    height: 44px;
    width: 140px;
    border-radius: 14px;
}

.skeleton-circle {
    border-radius: 50%;
}

/* Hide content when loading */
.content-loading .real-content {
    display: none !important;
}

.content-loading .skeleton-container {
    display: flex !important;
    flex-wrap: wrap !important;
}

.content-loaded .real-content {
    /* Use block or flex depending on the original layout, 
       but ensure it overrides display: none */
    display: block !important; 
}

/* If the real content was flex, we can let it be flex if it has that class */
.content-loaded .real-content.d-flex {
    display: flex !important;
}

.content-loaded .skeleton-container {
    display: none !important;
}