/**
 * Skeleton Loading Styles - Modern & Subtle
 * Para melhor percepção de velocidade de carregamento
 */

/* Base skeleton styles */
.product-skeleton,
.skeleton-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.skeleton-shimmer,
.skeleton-image,
.skeleton-text,
.skeleton-title,
.skeleton-price,
.skeleton-button {
    background: linear-gradient(
        110deg,
        #f5f5f5 8%,
        #e8e8e8 18%,
        #f5f5f5 33%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: 8px;
}

/* Skeleton Image */
.skeleton-card .skeleton-image {
    width: 100%;
    height: 280px;
    margin: 0;
    border-radius: 0;
    background: linear-gradient(
        110deg,
        #f8f8f8 8%,
        #ebebeb 18%,
        #f8f8f8 33%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

/* Skeleton Content */
.skeleton-card .skeleton-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Skeleton Title */
.skeleton-card .skeleton-title {
    height: 20px;
    width: 85%;
    margin-bottom: 4px;
}

.skeleton-card .skeleton-title.line-2 {
    height: 16px;
    width: 70%;
}

/* Skeleton Subtitle/Brand */
.skeleton-card .skeleton-subtitle {
    height: 14px;
    width: 50%;
    background: linear-gradient(
        110deg,
        #fafafa 8%,
        #f0f0f0 18%,
        #fafafa 33%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: 6px;
}

/* Skeleton Price */
.skeleton-card .skeleton-price {
    height: 28px;
    width: 45%;
    margin-top: 8px;
}

/* Skeleton Button */
.skeleton-card .skeleton-button {
    height: 48px;
    width: 100%;
    margin-top: 12px;
    border-radius: 10px;
}

/* Animations */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Swiper Skeleton Cards */
.swiper-slide .skeleton-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.swiper-slide .skeleton-card .skeleton-content {
    flex-grow: 1;
}

/* Performance optimizations */
.skeleton-card,
.skeleton-shimmer,
.skeleton-image,
.skeleton-text,
.skeleton-title,
.skeleton-subtitle,
.skeleton-price,
.skeleton-button {
    will-change: background-position;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Smooth transition when content loads */
.skeleton-to-content,
.fade-in-product {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .skeleton-card .skeleton-image {
        height: 200px;
    }

    .skeleton-card .skeleton-content {
        padding: 16px;
        gap: 10px;
    }

    .skeleton-card .skeleton-title {
        height: 16px;
    }

    .skeleton-card .skeleton-price {
        height: 24px;
    }

    .skeleton-card .skeleton-button {
        height: 44px;
    }
}