@import url('../tokens.css');

.jp-skeleton {
  position: relative;
  overflow: hidden;
  background: #e9ddd0;
  border-radius: 18px;
  isolation: isolate;
}

.jp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(248, 241, 235, 0) 0%, rgba(248, 241, 235, 0.78) 50%, rgba(248, 241, 235, 0) 100%);
  animation: jp-skeleton-shimmer 1.55s ease-in-out infinite;
}

.jp-skeleton--text {
  height: 16px;
  border-radius: 999px;
}

.jp-skeleton--text-sm {
  height: 12px;
  border-radius: 999px;
}

.jp-skeleton--text-lg {
  height: 24px;
  border-radius: 999px;
}

.jp-skeleton--pill {
  height: 42px;
  border-radius: 999px;
}

.jp-skeleton--button {
  height: 55px;
  border-radius: 999px;
}

.jp-skeleton--chip {
  height: 42px;
  border-radius: 999px;
}

.jp-skeleton--circle {
  border-radius: 999px;
}

.jp-skeleton--card {
  border-radius: 22px;
}

@keyframes jp-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Canonical circular loader (same geometry as assets/shop-manager-icons/spinner-ring.svg).
   Mirrors the .jp-canonical-spinner rules in styles.css so pages that only load
   homepage.css (blog, cart, history, admin surfaces via direct link) get the
   identical spinner. Keep both copies in sync. */
.jp-canonical-spinner {
  width: var(--jp-spinner-size, 38px);
  height: var(--jp-spinner-size, 38px);
  display: block;
  box-sizing: border-box;
}

.jp-canonical-spinner__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform-origin: center;
  animation: jp-spin 0.9s linear infinite;
}

.jp-canonical-spinner__track,
.jp-canonical-spinner__arc {
  fill: none;
  stroke-width: var(--jp-spinner-stroke, 5px);
}

.jp-canonical-spinner__track {
  stroke: var(--jp-spinner-track, rgba(35, 32, 48, 0.1));
}

.jp-canonical-spinner__arc {
  stroke: var(--jp-spinner-color, var(--color-forest));
  stroke-linecap: round;
  stroke-dasharray: 34 113;
  transform: rotate(-90deg);
  transform-origin: center;
}

@keyframes jp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Small spinner that sits inside a button next to its label. */
.jp-canonical-spinner--inline {
  --jp-spinner-size: 1.1em;
  --jp-spinner-stroke: 6px;
  --jp-spinner-color: currentColor;
  --jp-spinner-track: transparent;
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: 0.45em;
  flex: 0 0 auto;
}

/* Busy state applied by JPLoading.setButtonBusy(). */
.jp-btn-is-busy {
  pointer-events: none;
  opacity: 0.72;
}

/* Centered spinner for section-level loading (load-more zones, modal bodies). */
.jp-loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
}