/* ==============================================================
=================== Skeleton Loading Styles ====================
=================================================================*/

.skeleton-card {
    background-color: var(--bg-accent);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    position: relative;
    overflow: hidden;
}


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

    100% {
        background-position: -200% 0;
    }
}

.skeleton-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.skeleton-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.skeleton-badge {
    width: 80px;
    height: 24px;
    border-radius: 2px;
}

.skeleton-text {
    width: 80px;
    height: 16px;
}

.skeleton-title {
    width: 60%;
    height: 20px;
    margin-bottom: var(--spacing-sm);
}

.skeleton-line {
    width: 100%;
    height: 14px;
    margin-bottom: var(--spacing-xs);
}

.skeleton-line.short {
    width: 70%;
}

.skeleton-line.medium {
    width: 85%;
}

.skeleton-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.skeleton-button {
    width: 80px;
    height: 36px;
    border-radius: var(--radius-sm);
}

.trending-card.skeleton-card {
    border: none !important;
    background: none !important;
}

.trending-items.skeleton2 {
    gap: 0px;
    position: relative !important;
}

.trending-items.wishlist {
    position: relative !important;
}

.skeleton-title {
    width: 70%;
    height: 20px;
    margin-bottom: 12px;
}

.skeleton-rating {
    width: 40%;
    height: 14px;
    margin-bottom: 10px;
}

.skeleton-price {
    width: 50%;
    height: 16px;
    margin-bottom: 14px;
}

.skeleton.skeleton-button.for-wishlist {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* الحركة */
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}