/**
 * Skeleton Loading States - Usit Holidays
 * Shimmer animation for loading placeholders
 */

/* Skeleton base */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-light) 0%,
    #e0e0e0 50%,
    var(--bg-light) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

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

/* Skeleton hotel card */
.skeleton-hotel-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.skeleton-hotel-card-inner {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .skeleton-hotel-card-inner {
    flex-direction: row;
  }
}

/* Skeleton image */
.skeleton-image {
  width: 100%;
  height: 16rem; /* 256px */
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f0f0f0 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@media (min-width: 768px) {
  .skeleton-image {
    width: 20rem; /* 320px */
    height: auto;
    flex-shrink: 0;
  }
}

/* Skeleton content */
.skeleton-content {
  flex: 1;
  padding: var(--space-6);
}

/* Skeleton text lines */
.skeleton-text {
  height: 1rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
}

.skeleton-text-title {
  height: 1.75rem;
  width: 70%;
  margin-bottom: var(--space-4);
}

.skeleton-text-subtitle {
  height: 1rem;
  width: 50%;
  margin-bottom: var(--space-3);
}

.skeleton-text-line {
  height: 0.875rem;
  margin-bottom: var(--space-2);
}

.skeleton-text-line:last-child {
  width: 80%;
}

/* Skeleton badges */
.skeleton-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.skeleton-badge {
  height: 1.75rem;
  width: 5rem;
  border-radius: var(--radius-full);
}

/* Skeleton button */
.skeleton-button {
  height: 3rem;
  width: 10rem;
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

/* Utility classes for different widths */
.skeleton-w-full {
  width: 100%;
}

.skeleton-w-3-4 {
  width: 75%;
}

.skeleton-w-1-2 {
  width: 50%;
}

.skeleton-w-1-3 {
  width: 33.333%;
}

.skeleton-w-1-4 {
  width: 25%;
}

/* Skeleton grid (for multiple cards) */
.skeleton-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}