/* ===================================
   Shimmer Loading Animation
   =================================== */

/* Shimmer keyframe animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Base shimmer class */
.shimmer {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    border-radius: var(--radius-md);
}

/* Shimmer variants */
.shimmer-light {
    background: linear-gradient(
        to right,
        #fafafa 0%,
        #ffffff 20%,
        #fafafa 40%,
        #fafafa 100%
    );
    background-size: 1000px 100%;
}

.shimmer-dark {
    background: linear-gradient(
        to right,
        #e0e0e0 0%,
        #ececec 20%,
        #e0e0e0 40%,
        #e0e0e0 100%
    );
    background-size: 1000px 100%;
}

/* Product Card Shimmer */
.product-card-shimmer {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-sm);
}

.product-card-shimmer .shimmer-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

.product-card-shimmer .shimmer-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
}

.product-card-shimmer .shimmer-title {
    width: 80%;
    height: 20px;
    border-radius: var(--radius-sm);
}

.product-card-shimmer .shimmer-category {
    width: 60%;
    height: 16px;
    border-radius: var(--radius-sm);
}

/* Product Detail Page Shimmer */
.detail-shimmer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    height: 100%;
}

.detail-shimmer-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
}

.detail-shimmer-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.detail-shimmer-breadcrumb {
    width: 200px;
    height: 16px;
    border-radius: var(--radius-sm);
}

.detail-shimmer-badge {
    width: 100px;
    height: 28px;
    border-radius: var(--radius-full);
}

.detail-shimmer-title {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
}

.detail-shimmer-subtitle {
    width: 70%;
    height: 24px;
    border-radius: var(--radius-sm);
}

.detail-shimmer-text {
    width: 100%;
    height: 16px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
}

.detail-shimmer-text.short {
    width: 85%;
}

.detail-shimmer-text.medium {
    width: 95%;
}

.detail-shimmer-button {
    width: 200px;
    height: 48px;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.detail-shimmer-tabs {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.detail-shimmer-tab {
    width: 120px;
    height: 44px;
    border-radius: var(--radius-md);
}

.detail-shimmer-content {
    height: 200px;
    border-radius: var(--radius-lg);
}

/* Products Grid Shimmer */
.products-shimmer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

/* Grouped Products Shimmer */
.shimmer-section {
    margin-bottom: var(--spacing-2xl);
}

.shimmer-section-header {
    margin-bottom: var(--spacing-lg);
}

.shimmer-section-title {
    width: 200px;
    height: 32px;
    border-radius: var(--radius-sm);
}

/* Partner Card Shimmer */
.partner-card.shimmer-card {
    pointer-events: none;
}

.partner-card.shimmer-card .partner-logo {
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    height: 80px;
}

.partner-card.shimmer-card .partner-logo img {
    display: none;
}

.partner-card.shimmer-card .partner-name.shimmer-text {
    background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    height: 20px;
    width: 70%;
    margin: 0 auto;
    border-radius: var(--radius-sm);
}

/* Responsive */
@media (max-width: 992px) {
    .detail-shimmer-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .detail-shimmer-container {
        gap: var(--spacing-lg);
    }

    .detail-shimmer-title {
        height: 32px;
    }

    .detail-shimmer-subtitle {
        height: 20px;
    }

    .products-shimmer-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .detail-shimmer-tabs {
        flex-wrap: wrap;
    }

    .detail-shimmer-tab {
        width: 100px;
        height: 40px;
    }
}