/* Skeleton Loading Styles */
.skeleton {
    background: #f0f0f0;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 8px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text.title {
    height: 1.5em;
    width: 60%;
}

.skeleton-text.body {
    width: 90%;
}

.skeleton-image {
    width: 100%;
    height: 200px; /* Adjust as needed */
    border-radius: 8px;
}

.skeleton-card {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.skeleton-card .image-area {
    height: 200px;
    width: 100%;
}

.skeleton-card .content-area {
    padding: 20px;
}