/* ===============================================================
   skeleton.css - Loading Skeleton لفكرة ستور
   =============================================================== */

/* ===== الأنيميشن الأساسي ===== */
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

/* ===== كارت المنتج Skeleton ===== */
.skeleton-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #edf2f7;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
}

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

.skeleton-title-short {
    height: 16px;
    width: 50%;
}

.skeleton-price {
    height: 20px;
    width: 40%;
}

.skeleton-btn {
    height: 42px;
    width: 100%;
    border-radius: 12px;
    margin-top: 5px;
}

/* ===== شبكة الـ Skeletons ===== */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    padding: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
}