.cy-site-loading-feedback {
  align-items: center;
  background: rgba(12, 25, 31, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 80ms ease;
  visibility: hidden;
  z-index: 2147483000;
}

.cy-site-loading-feedback.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.cy-site-loading-feedback__panel {
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.25);
  color: #1e2f36;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  max-width: calc(100vw - 48px);
  padding: 18px 22px;
}

.cy-site-loading-feedback__spinner {
  animation: cy-site-loading-spin 760ms linear infinite;
  border: 3px solid rgba(31, 111, 120, 0.2);
  border-radius: 50%;
  border-top-color: var(--cy-loading-colour, #1f6f78);
  display: block;
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

@keyframes cy-site-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-site-loading-feedback,
  .cy-site-loading-feedback__spinner {
    animation: none;
    transition: none;
  }
}