/* Skeleton Loader Styles */
.skeleton-loader-container {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
    position: relative;
    width: 100%;
}

.skeleton-product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;
}

.card-header {
    position: relative;
    padding: 12px;
}

.badge-skeleton {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #b0b0b0;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.heart-skeleton {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #b0b0b0;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: #b0b0b0;
    margin-top: 40px;
}

.skeleton-content {
    padding: 16px;
}

.skeleton-title {
    height: 16px;
    background: #b0b0b0;
    border-radius: 4px;
    margin-bottom: 8px;
    width: 70%;
}

.skeleton-price {
    height: 20px;
    width: 50%;
    background: #b0b0b0;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-status {
    height: 14px;
    background: #b0b0b0;
    border-radius: 4px;
    width: 80%;
    margin-bottom: 12px;
}

.skeleton-button {
    height: 44px;
    background: #b0b0b0;
    border-radius: 4px;
    width: 100%;
}

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

.badge-skeleton,
.heart-skeleton,
.skeleton-image,
.skeleton-title,
.skeleton-price,
.skeleton-status,
.skeleton-button {
    background: linear-gradient(
        to right,
        #b0b0b0 0%,
        #c8c8c8 20%,
        #b0b0b0 40%,
        #b0b0b0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Smooth transition for product listing */
.productListing {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
    position: relative;
    width: 100%;
}

.display_none {
    display: none !important;
}

/* Hide skeleton when products are loaded */
.skeleton-loader-container.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .skeleton-image {
        height: 150px;
    }
    
    .skeleton-content {
        padding: 12px;
    }
    
    .badge-skeleton {
        width: 35px;
        height: 35px;
    }
    
    .heart-skeleton {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .skeleton-image {
        height: 180px;
    }
    
    .skeleton-title {
        height: 14px;
    }
    
    .skeleton-price {
        height: 18px;
    }
    
    .skeleton-button {
        height: 40px;
    }
    
    .badge-skeleton {
        width: 32px;
        height: 32px;
    }
    
    .heart-skeleton {
        width: 30px;
        height: 30px;
    }
}

/* Product card smooth appearance - no stagger for instant feel */
.productListing > div {
    opacity: 1;
}

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

/* ===================================
   BLOG SKELETON LOADER STYLES
   =================================== */

.blog-skeleton-container {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
    position: relative;
    width: 100%;
}

.blog-skeleton-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.blog-skeleton-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.blog-skeleton-image {
    width: 100%;
    height: 400px;
    background: #b0b0b0;
    border-radius: 4px;
    margin-bottom: 15px;
}

.blog-skeleton-title {
    height: 32px;
    background: #b0b0b0;
    border-radius: 4px;
    margin-bottom: 12px;
    width: 85%;
}

.blog-skeleton-subtitle {
    height: 18px;
    background: #b0b0b0;
    border-radius: 4px;
    margin-bottom: 20px;
    width: 45%;
}

.blog-skeleton-text {
    height: 16px;
    background: #b0b0b0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.blog-skeleton-text:nth-child(5) {
    width: 100%;
}

.blog-skeleton-text:nth-child(6) {
    width: 95%;
}

.blog-skeleton-text:nth-child(7) {
    width: 80%;
    margin-bottom: 15px;
}

.blog-skeleton-link {
    height: 20px;
    background: #b0b0b0;
    border-radius: 4px;
    width: 120px;
}

/* Apply shimmer to blog skeleton elements */
.blog-skeleton-image,
.blog-skeleton-title,
.blog-skeleton-subtitle,
.blog-skeleton-text,
.blog-skeleton-link {
    background: linear-gradient(
        to right,
        #b0b0b0 0%,
        #c8c8c8 20%,
        #b0b0b0 40%,
        #b0b0b0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* Blog wrap transition */
.blog-wrap {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
    position: relative;
    width: 100%;
}

/* Blog skeleton responsive */
@media (max-width: 767px) {
    .blog-skeleton-image {
        height: 200px;
    }
    
    .blog-skeleton-title {
        height: 24px;
        width: 90%;
    }
    
    .blog-skeleton-subtitle {
        height: 16px;
        width: 60%;
    }
    
    .blog-skeleton-text {
        height: 14px;
    }
}