/* ============================================================
   SKELETON LOADER SYSTEM — Amazon/Jumia/Glotoholo Style
   Shimmer (balayage lumineux horizontal) + fade transition
   ============================================================ */

/* --- Shimmer Animation --- */
@keyframes sk-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* --- Card overlay skeleton (JS-created) --- */
.sk-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    background: #fff;
    border-radius: inherit;
}

.sk-card-overlay .sk {
    border-radius: 0;
}

/* Detail skeleton overlay */
.sk-detail-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
}

/* --- Base skeleton block --- */
.sk {
    background: #e8e8e8;
    background-image: linear-gradient(90deg, #e8e8e8 0%, #f5f5f5 40%, #e8e8e8 80%);
    background-size: 800px 100%;
    background-repeat: no-repeat;
    animation: sk-shimmer 1.6s ease-in-out infinite;
    border-radius: 4px;
}

/* --- Skeleton container that wraps real content --- */
.sk-wrap {
    position: relative;
    overflow: hidden;
}

.sk-wrap .sk-layer {
    position: relative;
    z-index: 2;
}

.sk-wrap .real-layer {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.sk-wrap.is-loaded .real-layer {
    opacity: 1;
    z-index: 2;
}

.sk-wrap.is-loaded .sk-layer {
    display: none;
}

/* ============================================================
   PRODUCT CARD SKELETON (grid cards)
   Matches: .product-card with .product-image + .product-info
   ============================================================ */

/* --- Product Card Skeleton --- */
.sk-product-card {
    background: #fff;
    border-radius: 8px;
    border: 0.5px solid #e0e0e0;
    overflow: hidden;
}

.sk-product-img {
    width: 100%;
    height: 200px;
}

.sk-product-body {
    padding: 14px;
}

.sk-product-cat {
    width: 60px;
    height: 10px;
    margin-bottom: 8px;
}

.sk-product-title {
    width: 90%;
    height: 13px;
    margin-bottom: 6px;
}

.sk-product-title-2 {
    width: 65%;
    height: 13px;
    margin-bottom: 10px;
}

.sk-product-price {
    width: 40%;
    height: 16px;
    margin-bottom: 12px;
}

.sk-product-btn {
    width: 100%;
    height: 34px;
    border-radius: 4px;
}

/* ============================================================
   HORIZONTAL PRODUCT CARD SKELETON (carousel cards)
   Matches: .horizontal-product-card (180px wide)
   ============================================================ */
.sk-hcard {
    flex: 0 0 180px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.sk-hcard-img {
    width: 100%;
    height: 220px;
}

.sk-hcard-body {
    padding: 10px;
}

.sk-hcard-title {
    width: 85%;
    height: 12px;
    margin-bottom: 5px;
}

.sk-hcard-title-2 {
    width: 60%;
    height: 12px;
    margin-bottom: 8px;
}

.sk-hcard-price {
    width: 50%;
    height: 14px;
}

/* ============================================================
   SMALL CATEGORY CARD SKELETON
   Matches: .small-category-card (260px wide)
   ============================================================ */
.sk-smcat {
    width: 260px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.sk-smcat-img {
    width: 100%;
    height: 160px;
}

.sk-smcat-body {
    padding: 10px 12px;
}

.sk-smcat-title {
    width: 80%;
    height: 13px;
    margin-bottom: 6px;
}

.sk-smcat-price {
    width: 45%;
    height: 14px;
}

/* ============================================================
   PRODUCT DETAIL SKELETON
   Matches: .alc-main-image + .alc-product-info
   ============================================================ */
.sk-detail-img {
    width: 100%;
    height: 400px;
    border-radius: 12px;
}

.sk-detail-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.sk-detail-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    flex-shrink: 0;
}

.sk-detail-cat {
    width: 80px;
    height: 11px;
    margin-bottom: 14px;
}

.sk-detail-title {
    width: 75%;
    height: 22px;
    margin-bottom: 8px;
}

.sk-detail-title-2 {
    width: 55%;
    height: 16px;
    margin-bottom: 16px;
}

.sk-detail-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.sk-detail-star {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.sk-detail-rating {
    width: 30px;
    height: 12px;
    margin-left: 8px;
    margin-bottom: 16px;
}

.sk-detail-price {
    width: 35%;
    height: 24px;
    margin-bottom: 20px;
}

_sk-detail-btn {
    width: 200px;
    height: 44px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.sk-detail-btn-sm {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

/* ============================================================
   SEARCH RESULT SKELETON
   ============================================================ */
.sk-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

.sk-search-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    flex-shrink: 0;
}

.sk-search-line {
    flex: 1;
}

.sk-search-title {
    width: 75%;
    height: 12px;
    margin-bottom: 6px;
}

.sk-search-cat {
    width: 45%;
    height: 10px;
    margin-bottom: 0;
}

.sk-search-price {
    width: 70px;
    height: 14px;
}

/* ============================================================
   IMAGE LOADING SHIMMER (replaces golden spinner overlay)
   ============================================================ */
.image-loading-wrap {
    position: relative;
}

.image-loading-wrap.image-is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #e8e8e8;
    background-image: linear-gradient(90deg, #e8e8e8 0%, #f5f5f5 40%, #e8e8e8 80%);
    background-size: 800px 100%;
    animation: sk-shimmer 1.6s ease-in-out infinite;
    border-radius: inherit;
    z-index: 4;
    pointer-events: none;
}

.image-loading-wrap.image-is-loading > img {
    opacity: 0;
}

.image-loading-wrap.image-is-loaded > img {
    opacity: 1;
    transition: opacity 0.35s ease-in;
}

/* ============================================================
   DEVIS PRODUCT ITEM SKELETON
   ============================================================ */
.sk-devis-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.sk-devis-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.sk-devis-info {
    flex: 1;
}

.sk-devis-title {
    width: 70%;
    height: 13px;
    margin-bottom: 6px;
}

.sk-devis-price {
    width: 30%;
    height: 11px;
    margin-bottom: 0;
}

.sk-devis-input {
    width: 80px;
    height: 36px;
    border-radius: 4px;
    margin-left: 12px;
}

.sk-devis-check {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-left: 12px;
}

/* ============================================================
   NOTIFICATION DETAIL SKELETON
   ============================================================ */
.sk-notif-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

.sk-notif-cell {
    height: 13px;
    border-radius: 4px;
}

/* ============================================================
   ADMIN / MISC
   ============================================================ */
.sk-admin-table {
    width: 100%;
}

.sk-admin-row {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.sk-admin-cell {
    height: 13px;
    border-radius: 4px;
}