/* staticfiles/css/skeleton-loader.css */
/* Skeleton Loader - Universal Styles */
/* Używany przez ProductIndexPage i ProductBrandPage */
/* SIMPLIFIED MVP - bez fragment endpoint */

/* ════════════════════════════════════════════════════════════ */
/* CONTAINER */
/* ════════════════════════════════════════════════════════════ */

.zamel-skeleton-container {
  width: 100%;
  min-height: 800px; /* Prevent CLS - dopasuj do typowej wysokości contentu */
}

/* ════════════════════════════════════════════════════════════ */
/* BASE SKELETON ELEMENT */
/* ════════════════════════════════════════════════════════════ */

.zamel-skeleton {
  background: linear-gradient(
    90deg,
    #f8f8f8 0%,
    #ececec 50%,
    #f8f8f8 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* SKELETON VARIANTS */
/* ════════════════════════════════════════════════════════════ */

/* Text skeleton */
.zamel-skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

/* Image skeleton (aspect-ratio 1:1) */
.zamel-skeleton-image {
  width: 100%;
  aspect-ratio: 1;
  max-width: 300px;
}

/* Button skeleton */
.zamel-skeleton-button {
  height: 40px;
  width: 100%;
  border-radius: 4px;
}

/* Select/Input skeleton */
.zamel-skeleton-select,
.zamel-skeleton-input {
  height: 36px;
  border-radius: 4px;
}

/* Icon skeleton */
.zamel-skeleton-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* Badge skeleton */
.zamel-skeleton-badge {
  height: 20px;
  border-radius: 12px;
}

/* ════════════════════════════════════════════════════════════ */
/* PRODUCT ITEM SKELETON - MATCHING z .zamel-product-item */
/* ════════════════════════════════════════════════════════════ */

.zamel-skeleton-product-item {
  display: flex;
  flex-direction: column;
  padding: 1em;
  background: white;
  border: 1px solid #ececec;
  border-radius: 4px;
  min-height: 420px; /* WAŻNE: Prevent CLS - dopasuj do rzeczywistego product-item */
}

/* ════════════════════════════════════════════════════════════ */
/* LOADING MESSAGE */
/* ════════════════════════════════════════════════════════════ */

.zamel-skeleton-loading-text {
  font-size: 14px;
  color: #bbb;
  animation: pulse 1.5s infinite;
  margin: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════ */
/* RESPONSIVE ADJUSTMENTS */
/* ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .zamel-skeleton-container {
    min-height: 600px;
  }

  .zamel-skeleton-product-item {
    min-height: 380px; /* Mniejsze na mobile */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .zamel-skeleton-container {
    min-height: 700px;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY - REDUCED MOTION */
/* ════════════════════════════════════════════════════════════ */

/* Respect prefers-reduced-motion (motion sickness, epilepsy) */
@media (prefers-reduced-motion: reduce) {
  .zamel-skeleton {
    animation: none !important;  /* Wyłącz shimmer */
    background: #f0f0f0;         /* Static light gray */
  }

  .zamel-skeleton-loading-text {
    animation: none !important;  /* Wyłącz pulse */
    opacity: 0.7;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* NOSCRIPT FALLBACK STYLING */
/* ════════════════════════════════════════════════════════════ */

noscript .zamel-bgc-yellow {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 1em;
}