/**
 * EBO Stay - Modern Skeleton Loading & Shimmer Stylesheet
 * High-performance hardware-accelerated animated placeholders
 */

@keyframes eboShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.ebo-sk,
.ebo-skeleton {
    background: #e2e8f0;
    background-image: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 35%,
        #ffffff 50%,
        #f1f5f9 65%,
        #e2e8f0 100%
    );
    background-size: 200% 100%;
    animation: eboShimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    display: inline-block;
    vertical-align: middle;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .ebo-sk,
    .ebo-skeleton,
    .card-img-wrap.is-loading,
    .agoda-room-img-wrap.is-loading {
        animation: none !important;
        background: #e2e8f0 !important;
    }
}

/* Atomic Skeleton Elements */
.sk-line {
    height: 14px;
    border-radius: 6px;
    margin-bottom: 8px;
    width: 100%;
    display: block;
}
.sk-line-sm { height: 11px; border-radius: 4px; display: block; }
.sk-line-lg { height: 20px; border-radius: 6px; display: block; }
.sk-line-title { height: 22px; width: 75%; border-radius: 6px; margin-bottom: 10px; display: block; }
.sk-pill {
    height: 24px;
    border-radius: 999px;
    display: inline-block;
}
.sk-circle {
    border-radius: 50%;
    display: inline-block;
}
.sk-btn {
    height: 40px;
    border-radius: 10px;
    width: 100%;
    display: block;
}

/* Composite Hotel Card Skeleton */
.card.hotel-card.sk-hotel-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;
    pointer-events: none !important;
    user-select: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.sk-hotel-card .card-img-wrap {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    position: relative !important;
    background: #e2e8f0 !important;
    border-radius: 16px 16px 0 0 !important;
}

@media (max-width: 640px) {
    .sk-hotel-card .card-img-wrap {
        height: 200px !important;
        aspect-ratio: auto !important;
    }
}

/* Composite Package Card Skeleton */
.card.sk-package-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Composite Room Card Skeleton */
.agoda-room-box.sk-room-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Progressive Image Loading Shimmer Container */
.card-img-wrap.is-loading,
.agoda-room-img-wrap.is-loading {
    background: #e2e8f0 !important;
    background-image: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f8fafc 35%,
        #ffffff 50%,
        #f8fafc 65%,
        #e2e8f0 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: eboShimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

.card-img-wrap img,
.agoda-room-img-wrap img {
    transition: opacity 0.35s ease-in-out;
}