/**
 * Shared loading, empty, offline, purchase, and error states.
 */

.rr-state {
  border: 1px solid var(--color-border, #CBD5E1);
  border-radius: 16px;
  background: #fff;
  color: var(--color-text, #111827);
  padding: 1.5rem 1.35rem;
  margin: 1rem 0;
}

.rr-state__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  color: #162C43;
}

.rr-state__copy {
  margin: 0 0 1rem;
  color: #46596C;
}

.rr-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rr-state--loading,
.rr-state--purchase-pending,
.rr-state--purchase-processing {
  border-left: 4px solid #426F9F;
}

.rr-state--empty {
  border-left: 4px solid #72869A;
}

.rr-state--offline,
.rr-state--stale,
.rr-state--purchase-failed,
.rr-state--purchase-cancelled {
  border-left: 4px solid #9A6418;
}

.rr-state--error,
.rr-state--auth,
.rr-state--server {
  border-left: 4px solid #B4232C;
}

/* Success remains semantic through wording and iconography, while the visual color stays on-brand blue. */
.rr-state--purchase-restored,
.rr-state--success {
  border-left: 4px solid #315F8F;
  background: #F4F8FB;
}

.rr-state--purchase-restored .rr-state__title,
.rr-state--success .rr-state__title {
  color: #193F66;
}

.rr-state-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #D7DEE8;
  border-top-color: #315F8F;
  margin-bottom: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .rr-state-spinner {
    animation: rrSpin 0.8s linear infinite;
  }
}

@keyframes rrSpin {
  to { transform: rotate(360deg); }
}

.reroot-offline-banner {
  background: #12233F !important;
  color: #fff !important;
  font-weight: 500;
}

.reroot-offline-banner *,
.reroot-offline-banner a {
  color: #fff !important;
}

.reroot-offline-banner.is-restored {
  background: #315F8F !important;
  color: #fff !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[aria-disabled="true"],
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 1;
  background: #E2E8F0 !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
  cursor: not-allowed;
}