/* ============================================================
   BeMyTraveler - Skeleton Loading Animations
   ============================================================ */

@keyframes bmt-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.bmt-skeleton {
    background: linear-gradient(90deg, #e2e8f0 0px, #f1f5f9 40px, #e2e8f0 80px);
    background-size: 200px 100%;
    animation: bmt-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--bmt-radius-sm, 8px);
}

/* Skeleton Card */
.bmt-skeleton-card {
    background: var(--bmt-white, #fff);
    border-radius: var(--bmt-radius, 12px);
    overflow: hidden;
    box-shadow: var(--bmt-shadow, 0 1px 3px rgba(0,0,0,0.06));
}

.bmt-skeleton--image {
    width: 100%;
    height: 200px;
    border-radius: 0;
}

.bmt-skeleton-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bmt-skeleton--text {
    height: 14px;
    width: 100%;
}

.bmt-skeleton--short {
    width: 40%;
}

.bmt-skeleton--medium {
    width: 70%;
}

/* Skeleton Grid */
.bmt-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .bmt-skeleton-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .bmt-skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .bmt-skeleton-grid {
        grid-template-columns: 1fr;
    }
}