/* Native-style pull-to-refresh indicator for the mall and storefront PWAs.
   A compact spinner peeks out at the top of the viewport while the user pulls
   down at the very top of the page, rotates with the drag, and spins while the
   data is re-fetched — then the page springs back, app-like. */

#ptr-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 14px;
  box-sizing: border-box;
  z-index: 2147483001;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#ptr-indicator.ptr-reset {
  transition: height 0.28s ease;
}

#ptr-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(37, 99, 235, 0.22);
  border-top-color: #2563eb;
  will-change: transform;
}

#ptr-spinner.ptr-spinning {
  animation: ptr-spin 0.7s linear infinite;
}

#ptr-hint {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #64748b;
  opacity: 0;
  transition: opacity 0.15s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  #ptr-indicator.ptr-reset,
  #ptr-hint {
    transition: none;
  }
  #ptr-spinner.ptr-spinning {
    animation-duration: 1.4s;
  }
}