/* === SOS spinner (white, with anti-flash delay) === */
@keyframes btnspin { to { transform: rotate(360deg); } }

/* host + basic behavior */
a.is-loading, button.is-loading, input.is-loading {
  position: relative !important;
  display: inline-block !important;
  opacity: .95;
  pointer-events: none; /* block double-clicks */
}

/* spinner bubble (white on colored buttons) */
a.is-loading::after, button.is-loading::after, input.is-loading::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btnspin .8s linear infinite;
  opacity: 0;                       /* hidden until body flag */
  transition: opacity .15s linear;  /* 150ms anti-flash */
}

/* darker variant for plain links on light BGs */
a.is-loading:not(.button):not(.btn):not(.btn-primary)::after {
  border-color: rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
}

/* reveal spinner only when we’ve declared “loading” on the page */
body.sos-loading a.is-loading::after,
body.sos-loading button.is-loading::after,
body.sos-loading input.is-loading::after {
  opacity: 1;
  transition-delay: .15s;
}