/* Shared request feedback for every browser-rendered ShortletBox surface.
 * Turbo's default line at the top of the viewport is intentionally hidden:
 * the centered status card is the single, accessible source of feedback. */
.turbo-progress-bar {
  display: none !important;
}

.sb-processing-indicator {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(20, 40, 75, 0.22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.sb-processing-indicator[hidden] {
  display: none;
}

.sb-processing-indicator.is-visible {
  opacity: 1;
}

.sb-processing-indicator__card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: min(280px, calc(100vw - 48px));
  padding: 16px 18px;
  box-sizing: border-box;
  border: 1px solid rgba(20, 40, 75, 0.12);
  border-radius: 14px;
  background: var(--sb-paper, #fff);
  color: var(--sb-navy, #14284b);
  box-shadow: 0 22px 60px rgba(20, 40, 75, 0.22),
              0 3px 10px rgba(20, 40, 75, 0.08);
  transform: translateY(6px) scale(0.985);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sb-processing-indicator.is-visible .sb-processing-indicator__card {
  transform: translateY(0) scale(1);
}

.sb-processing-indicator__spinner {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  box-sizing: border-box;
  border: 3px solid rgba(20, 40, 75, 0.14);
  border-top-color: var(--sb-ember, #e4602f);
  border-radius: 50%;
  animation: sb-processing-spin 720ms linear infinite;
}

.sb-processing-indicator__copy {
  display: grid;
  gap: 2px;
  font-family: var(--sb-font-text, "IBM Plex Sans", sans-serif);
  line-height: 1.35;
}

.sb-processing-indicator__copy strong {
  font-family: var(--sb-font-display, "Poppins", sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sb-processing-indicator__copy > span {
  color: var(--sb-muted, #657188);
  font-size: 12.5px;
}

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

@media (prefers-reduced-motion: reduce) {
  .sb-processing-indicator,
  .sb-processing-indicator__card {
    transition: none;
  }

  .sb-processing-indicator__spinner {
    animation: none;
  }
}