// Skeleton Screen Styles
.shpgl-loading-skeleton {
      .shpgl-skeleton-grid {
            display: grid;
            grid-template-columns: repeat(var(--shpgl-cols-mobile, 1), 1fr);
            gap: var(--shpgl-grid-gap, $grid-gap);
            width: 100%;

            @media (min-width: $breakpoint-mobile + 1) and (max-width: $breakpoint-tablet) {
                  grid-template-columns: repeat(var(--shpgl-cols-tablet, 2), 1fr);
            }

            @media (min-width: $breakpoint-desktop) {
                  grid-template-columns: repeat(var(--shpgl-cols-desktop, 4), 1fr);
            }
      }

      .shpgl-skeleton-card {
            background: $color-bg;
            border-radius: $border-radius;
            overflow: hidden;
            box-shadow: $shadow-sm;
      }

      .shpgl-skeleton-image {
            width: 100%;
            padding-top: 100%;
            background: $color-skeleton;
            animation: shpgl-skeleton-pulse $transition-loading;
      }

      .shpgl-skeleton-content {
            padding: $card-padding;

            .shpgl-skeleton-line {
                  height: 12px;
                  background: $color-skeleton;
                  border-radius: $border-radius-sm;
                  margin-bottom: $spacing-xs;
                  animation: shpgl-skeleton-pulse $transition-loading;

                  &--short {
                        width: 40%;
                        height: 10px;
                  }

                  &--title {
                        width: 80%;
                        height: 16px;
                        margin: $spacing-xs 0 $spacing-sm;
                  }

                  &--rating {
                        width: 60%;
                        height: 14px;
                  }

                  &--price {
                        width: 30%;
                        height: 16px;
                        margin: $spacing-xs 0 $spacing-md;
                  }

                  &--button {
                        width: 100%;
                        height: 36px;
                        margin-top: $spacing-sm;
                  }
            }
      }
}

// Loading Spinner Container
.shpgl-loading-spinner {
      .shpgl-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 124, 186, 0.2);
            border-top-color: $color-primary;
            border-radius: 50%;
            animation: shpgl-spin 1s linear infinite;
      }
}

@keyframes shpgl-spin {
      to {
            transform: rotate(360deg);
      }
}

// Empty State Styles
.shpgl-empty-state {
      grid-column: 1 / -1;
      padding: $spacing-xl 0;
      color: $color-text-light;
      text-align: center;
      font-size: 16px;

      p {
            margin: 0;
            padding: $spacing-md;
      }
}

// Debug Information Styles
.shpgl-debug-info {
      margin-top: $spacing-lg;
      padding: $spacing-md;
      background: $color-debug-bg;
      border-radius: $border-radius-sm;
      font-size: 12px;
      color: $color-text-light;
      text-align: right;
}

// List Layout Skeleton Styles
.shpgl-layout-list .shpgl-skeleton-item {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: $spacing-sm;
      padding: $spacing-sm;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
      box-sizing: border-box;
      height: 250px;
      margin-bottom: $spacing-md;
}

// Left Image Skeleton
.shpgl-skeleton-img {
      flex: 0 0 150px;
      height: 120px;
      background: #f1f1f1;
      border-radius: 4px;
      animation: shpgl-skeleton-pulse 1.5s infinite ease-in-out;
}

// Right Content Skeleton Container
.shpgl-skeleton-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: $spacing-xxs;
}

// General Skeleton Line Style
.shpgl-skeleton-line {
      background: #f1f1f1;
      border-radius: 2px;
      animation: shpgl-skeleton-pulse 1.5s infinite ease-in-out;
      height: 16px;
}

// Different Line Sizes (Match Real Text Height)
.shpgl-skeleton-line-sm {
      width: 40%;
      height: 14px;
}

.shpgl-skeleton-line-md {
      width: 70%;
      height: 18px;
}

.shpgl-skeleton-line-lg {
      width: 100%;
      height: 16px;
}

// Multi-line Description Skeleton
.shpgl-skeleton-line-multi {
      height: 48px;
      width: 90%;
}

// Button Skeleton
.shpgl-skeleton-btn {
      width: 120px;
      height: 32px;
      background: #f1f1f1;
      border-radius: 3px;
      animation: shpgl-skeleton-pulse 1.5s infinite ease-in-out;
      margin-top: auto;
}

// Skeleton Pulse Animation
@keyframes shpgl-skeleton-pulse {
      0% {
            opacity: 0.8;
      }
      50% {
            opacity: 0.4;
      }
      100% {
            opacity: 0.8;
      }
}