/* ===========================
   Skeleton Loading Screens
   =========================== */

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

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

/* Скелеты для разных элементов */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-title {
    height: 24px;
    margin-bottom: 16px;
    width: 60%;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-card {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.skeleton-service-card {
    height: 200px;
    margin-bottom: 20px;
    border-radius: 8px;
}

/* Контейнер для скелетов */
.skeleton-container {
    display: none;
}

.skeleton-container.loading {
    display: block;
}

/* Скрыть реальный контент при загрузке */
.content-loaded {
    display: none;
}

body.loaded .content-loaded {
    display: block;
}

body.loaded .skeleton-container {
    display: none;
}