/* ==========================================
   NEXORA Loading Engine
========================================== */

.nx-skeleton,
.nx-skeleton-card,
.nx-category-skeleton,
.nx-carousel-skeleton,
.nx-store-skeleton,
.nx-list-skeleton,
.nx-chat-skeleton,
.nx-notification-skeleton,
.nx-profile-skeleton,
.nx-wallet-skeleton{
    position:relative;
    overflow:hidden;
    background:#ffffff;
}

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

.nx-skeleton::before,
.nx-skeleton-card::before,
.nx-category-skeleton::before,
.nx-carousel-skeleton::before,
.nx-store-skeleton::before,
.nx-list-skeleton::before,
.nx-chat-skeleton::before,
.nx-notification-skeleton::before,
.nx-profile-skeleton::before,
.nx-wallet-skeleton::before{

    content:"";

    position:absolute;
    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );

    animation:nx-loading 1.2s infinite;
}

@keyframes nx-loading{

    100%{
        transform:translateX(100%);
    }

}

/* ==========================================
   Common Blocks
========================================== */

.nx-skeleton-image,
.nx-carousel-image,
.nx-store-banner,
.nx-profile-avatar,
.nx-category-icon,
.nx-list-avatar,
.nx-wallet-balance,
.nx-wallet-button,
.nx-skeleton-title,
.nx-skeleton-price,
.nx-skeleton-line,
.nx-carousel-title,
.nx-carousel-price,
.nx-store-name,
.nx-store-line,
.nx-list-title,
.nx-list-line,
.nx-profile-name,
.nx-profile-line,
.nx-category-text{

    background:#eceff3;
    border-radius:14px;

}

/* ==========================================
   Hero
========================================== */

.nx-hero-skeleton{

    width:100%;
    height:300px;

    border-radius:28px;

    background:#eceff3;

}

/* ==========================================
   Product Cards
========================================== */

.nx-skeleton-card{

    border-radius:26px;

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.nx-skeleton-image{

    height:190px;

    border-radius:20px;

}

.nx-skeleton-title{

    width:75%;

    height:22px;

}

.nx-skeleton-price{

    width:40%;

    height:28px;

}

.nx-skeleton-line{

    width:100%;

    height:14px;

}

/* ==========================================
   Categories
========================================== */

.nx-category-skeleton{

    width:130px;

    height:170px;

    border-radius:28px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.nx-category-icon{

    width:70px;

    height:70px;

    border-radius:22px;

}

.nx-category-text{

    width:80px;

    height:18px;

}

/* ==========================================
   Premium Carousel
========================================== */

.nx-carousel-skeleton{

    width:100%;

    border-radius:28px;

    padding:16px;

}

.nx-carousel-image{

    height:260px;

    border-radius:24px;

}

.nx-carousel-title{

    width:75%;

    height:24px;

    margin-top:18px;

}

.nx-carousel-price{

    width:35%;

    height:30px;

    margin-top:12px;

}

/* ==========================================
   Store Cards
========================================== */

.nx-store-skeleton{

    padding:16px;

    border-radius:22px;

}

.nx-store-banner{

    height:140px;

    border-radius:20px;

}

.nx-store-name{

    width:60%;

    height:20px;

    margin-top:16px;

}

.nx-store-line{

    width:90%;

    height:14px;

    margin-top:10px;

}

/* ==========================================
   Lists
========================================== */

.nx-list-skeleton,
.nx-chat-skeleton,
.nx-notification-skeleton{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px 0;

}

.nx-list-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    flex-shrink:0;

}

.nx-list-content{

    flex:1;

}

.nx-list-title{

    width:60%;

    height:18px;

    margin-bottom:10px;

}

.nx-list-line{

    width:90%;

    height:14px;

}

/* ==========================================
   Profile
========================================== */

.nx-profile-skeleton{

    text-align:center;

    padding:30px;

}

.nx-profile-avatar{

    width:100px;

    height:100px;

    border-radius:50%;

    margin:auto;

}

.nx-profile-name{

    width:160px;

    height:24px;

    margin:22px auto 14px;

}

.nx-profile-line{

    width:90%;

    height:16px;

    margin:10px auto;

}

.nx-profile-line.short{

    width:60%;

}

/* ==========================================
   Wallet
========================================== */

.nx-wallet-skeleton{

    padding:22px;

    border-radius:26px;

}

.nx-wallet-balance{

    width:60%;

    height:38px;

    margin-bottom:22px;

}

.nx-wallet-button{

    width:100%;

    height:52px;

    border-radius:18px;

    margin-top:14px;

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:768px){

    .nx-hero-skeleton{

        height:240px;

    }

    .nx-skeleton-image{

        height:160px;

    }

    .nx-carousel-image{

        height:220px;

    }

}