/* Skeleton Screens CSS */
.skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 8px;
    color: transparent !important;
}

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

/* Skeleton variants */
.skeleton-text {
    height: 1em; margin: 0.5em 0;
}
.skeleton-text.small { height: 0.8em; }
.skeleton-text.large { height: 1.4em; }
.skeleton-text.title { height: 2em; width: 70%; }
.skeleton-text.subtitle { height: 1.2em; width: 50%; }

.skeleton-button {
    height: 44px; width: 120px; border-radius: 22px;
}
.skeleton-button.large { height: 48px; width: 160px; }
.skeleton-button.small { height: 36px; width: 80px; }

.skeleton-card {
    height: 200px; border-radius: 12px;
}
.skeleton-avatar {
    width: 48px; height: 48px; border-radius: 50%;
}
.skeleton-icon {
    width: 24px; height: 24px; border-radius: 4px;
}

/* Skeleton for specific elements */
.skeleton-headline {
    height: 3em; width: 80%; margin: 0.5em 0; border-radius: 12px;
}
.skeleton-typed {
    height: 1.5em; width: 60%; margin: 0.5em 0; border-radius: 8px;
}
.skeleton-menu-item {
    height: 44px; width: 100px; margin: 0 8px; border-radius: 8px;
}
.skeleton-plan {
    height: 180px; border-radius: 16px; margin: 16px 0;
}
.skeleton-modal {
    height: 400px; border-radius: 16px; margin: 20px auto;
}

/* Pulse animation for loading states */
.skeleton-pulse {
    animation: skeleton-pulse 2s infinite ease-in-out;
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Hide content while skeleton is loading */
.skeleton-loading .skeleton-content {
    opacity: 0;
}
.skeleton-loading:not(.skeleton-loading) .skeleton {
    display: none;
}
.skeleton-loading:not(.skeleton-loading) .skeleton-content {
    opacity: 1;
    transition: opacity 0.3s ease;
}