/* One ring for page navigation, local waits and payment confirmation. */
.loading-ring {
  --loading-accent: #F08080;
  position: relative;
  display: inline-block;
  flex: none;
  width: min(230px, 62vw);
  aspect-ratio: 1;
}
.loading-ring > svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.loading-ring-track, .loading-ring-arc { fill: none; stroke-width: 9; }
.loading-ring-track { stroke: currentColor; opacity: .14; }
.loading-ring-arc {
  stroke: var(--loading-accent); stroke-linecap: round;
  stroke-dasharray: 553; stroke-dashoffset: 414.75;
  transition: stroke-dashoffset .8s cubic-bezier(.3,.7,.2,1);
}
.loading-ring-arc.progress-2 { stroke-dashoffset: 276.5; }
.loading-ring-arc.progress-3 { stroke-dashoffset: 138.25; }
.loading-ring-arc.progress-4 { stroke-dashoffset: 0; }
.loading-ring > .loading-ring-turn { animation: siteLoadingArc 2.4s linear infinite; }
.loading-ring-comet { position: absolute; inset: 0; animation: siteLoadingSpin 2.4s linear infinite; }
.loading-ring-comet > i {
  position: absolute; top: calc(10% - 9px); left: 50%;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--loading-accent);
  box-shadow: 0 0 18px #F0808066;
}
.loading-ring-center { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; }
.loading-ring-center strong { max-width: 180px; overflow-wrap: anywhere; font-size: clamp(28px, 9vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.loading-ring-center > span { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.loading-brand-dot { color: var(--loading-accent); }
.loading-ring--compact { width: 26px; vertical-align: middle; }
.loading-ring--compact .loading-ring-track, .loading-ring--compact .loading-ring-arc { stroke-width: 16; }
.loading-ring--compact .loading-ring-comet > i { width: 4px; height: 4px; top: calc(10% - 2px); margin-left: -2px; box-shadow: none; }
.site-loading-page { min-height: 100svh; background: #1A1A2E; }
.site-loader {
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center;
  font-family: inherit;
}
.site-loader--screen {
  position: fixed; inset: 0; z-index: 1000;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto; background: #1A1A2E; color: #fff;
}
.site-loader--screen > * { animation: siteLoadingEnter .18s ease-out both; }
.site-loader-label { font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: .01em; }
.site-loader--screen .site-loader-label { color: #FFFFFFB8; }
.site-loader--section { min-height: 220px; padding: 24px; color: #1A1A2E; }
.site-loader--section .loading-ring { width: 120px; }
.site-loader--section .loading-ring-center strong { font-size: 22px; }
.site-loader--inline { display: inline-flex; flex-direction: row; gap: 9px; vertical-align: middle; }
.site-loader--inline .site-loader-label { font-size: inherit; }
@keyframes siteLoadingSpin { to { transform: rotate(360deg); } }
@keyframes siteLoadingArc { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes siteLoadingEnter { from { transform: translateY(5px); } to { transform: translateY(0); } }
@media (max-width: 480px) { .loading-ring:not(.loading-ring--compact) { width: min(190px, 54vw); } .site-loader--section .loading-ring { width: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .loading-ring > .loading-ring-turn, .loading-ring-comet, .site-loader--screen > * { animation: none; }
  .loading-ring-arc { transition: none; }
}