/* assets/css/apadd-spinner.css
   APADD • Spinner vNEXT — Halo Radial + Center SVG (NO GRID / NO RINGS)
   - Visually matches APADD AI modal (glass + halo + vignette)
   - Subtle token-driven “aurora fog” animation (no concentric rings)
   - Keeps center SVG animation intact
   - Fullscreen (body-mounted) + scoped supported
   - Token-first: APF tokens -> CTL tokens -> safe fallbacks
*/

/* ========================================================================== */
/* Token bridge (scoped to spinner root)                                       */
/* ========================================================================== */

.apadd-spinner.apadd-spin{
  /* Bridge to your token system (APF -> CTL -> fallbacks) */
  --apadd-c1:        var(--apf-c1, var(--ctl-c1, #ec8639));
  --apadd-c2:        var(--apf-c2, var(--ctl-c2, #8ef));
  --apadd-text:      var(--apf-text, var(--text-high, #f6f6f6));
  --apadd-muted:     var(--apf-text-mid, var(--text-mid, rgba(246,246,246,.76)));
  --apadd-surface-2: var(--apf-surface-2, var(--surface-2, rgba(20,24,28,.86)));
  --apadd-border:    var(--apf-border, var(--border, rgba(255,255,255,.12)));
  --apadd-focus:     var(--apf-focus, var(--focus-ring, color-mix(in oklch, var(--apadd-c2) 68%, transparent)));

  /* Puck sizing */
  --puck: 160px;

  /* Center SVG flip */
  --owl-ry-sec: 6s;
  --owl-ry-ease: linear;
  --owl-size-pct: 44%;

  /* Overlay / vignette */
  --apadd-spin-vign: color-mix(in oklch, #000 48%, transparent);

  /* Overlay halo intensity (fullscreen radial backdrop) */
  --apadd-backdrop-c1: color-mix(in oklch, var(--apadd-c1) 18%, transparent);
  --apadd-backdrop-c2: color-mix(in oklch, var(--apadd-c2) 14%, transparent);

  /* Aurora / fog FX tuning (subtle, token-driven) */
  --apadd-fx-a: color-mix(in oklch, var(--apadd-c1) 26%, transparent);
  --apadd-fx-b: color-mix(in oklch, var(--apadd-c2) 22%, transparent);
  --apadd-fx-c: color-mix(in oklch, var(--apadd-focus) 18%, transparent);

  --apadd-fx-opacity: .90;
  --apadd-fx-blur: 22px;
  --apadd-fx-sat: 1.18;
  --apadd-fx-bright: 1.06;

  /* Timing */
  --apadd-fx-drift: 4.6s;
  --apadd-fx-breathe: 2.9s;

  /* Z */
  --apadd-spin-z: 999999;

  /* ---------------------------------------------------------------------- */
  /* NEW: Snippet + progress micro-interaction tuning                         */
  /* ---------------------------------------------------------------------- */
  --apadd-snips-enter: 220ms;
  --apadd-snips-exit:  200ms;
  --apadd-snips-ease:  cubic-bezier(.2,.9,.2,1);
  --apadd-snips-blur:  .55px;
  --apadd-snips-lift:  3px;

  --apadd-snips-pill-alpha: .58; /* glass density */
  --apadd-snips-pill-blur:  12px;
  --apadd-snips-pill-sat:   140%;

  --apadd-snips-text-alpha: .92;
  --apadd-snips-text-shine: 1; /* 0..1 */

  --apadd-prog-glow:  0 0 0 1px color-mix(in oklch, var(--apadd-c2) 10%, transparent),
                      0 8px 22px rgba(0,0,0,.30),
                      0 0 26px color-mix(in oklch, var(--apadd-c1) 14%, transparent);

  --apadd-prog-h: 5px;
  --apadd-prog-w: 184px;

  /* ---------------------------------------------------------------------- */
  /* NEW: Label/Sub vertical rhythm                                          */
  /*  - These two lines are absolutely positioned (bottom offsets).           */
  /*  - Adjust --apadd-label-sub-gap to increase/decrease space between them. */
  /* ---------------------------------------------------------------------- */
  --apadd-label-bottom: -38px;
  --apadd-label-sub-gap: 18px; /* ↑ increase for more space */
  /* Sub sits BELOW the label (more negative bottom = lower on screen) */
  --apadd-sub-bottom: calc(var(--apadd-label-bottom) - var(--apadd-label-sub-gap) - 14px);

  /* safety */
  animation: none !important;
  transform: none !important;
}

/* Optional theme switches */
.apadd-spinner.apadd-spin[data-spin-theme="night"]{
  --apadd-spin-vign: color-mix(in oklch, #000 56%, transparent);
  --apadd-backdrop-c1: color-mix(in oklch, var(--apadd-c1) 20%, transparent);
  --apadd-backdrop-c2: color-mix(in oklch, var(--apadd-c2) 16%, transparent);

  --apadd-fx-opacity: .94;
  --apadd-fx-blur: 24px;

  --apadd-snips-pill-alpha: .62;
  --apadd-snips-text-alpha: .94;
}
.apadd-spinner.apadd-spin[data-spin-theme="day"]{
  --apadd-spin-vign: color-mix(in oklch, #000 10%, transparent);
  --apadd-text: #0e1116;
  --apadd-muted: rgba(14,17,22,.72);

  --apadd-backdrop-c1: color-mix(in oklch, var(--apadd-c1) 14%, transparent);
  --apadd-backdrop-c2: color-mix(in oklch, var(--apadd-c2) 10%, transparent);

  --apadd-fx-opacity: .72;
  --apadd-fx-blur: 20px;
  --apadd-fx-bright: 1.02;

  --apadd-snips-pill-alpha: .54;
  --apadd-snips-text-alpha: .90;
}

/* ========================================================================== */
/* Root overlay container                                                     */
/* ========================================================================== */

.apadd-spinner.apadd-spin{
  display:none !important;
  pointer-events:none;
  isolation:isolate;
  z-index: var(--apadd-spin-z);

  /* wipe any legacy fixed sizing */
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
}

.apadd-spinner.apadd-spin[data-open="1"]{
  display:grid !important;
  pointer-events:auto;
}

/* Fullscreen (body child) */
body > .apadd-spinner.apadd-spin{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  place-items: center;
}

/* Scoped (mounted inside a root element) */
.apadd-spinner.apadd-spin[data-scoped="1"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  place-items: center;
}

/* ========================================================================== */
/* 3rd-party guard: neutralize WooCommerce .loader::before inside our spinner  */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader::before,
.apadd-spinner.apadd-spin .mid-spinner-overlay .apf-center-box > .loader::before{
  background: none !important;
  content: "" !important;
  width: auto !important;
  height: auto !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: block !important;
  position: absolute !important;
}

/* ========================================================================== */
/* Overlay base (radial-only backdrop)                                         */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay{
  position:absolute;
  inset:0;
  z-index: 0;
  pointer-events:none;
  contain: paint;
  will-change: opacity;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader{
  display:none;
  place-items:center;
  opacity:0;
  transition: opacity .22s ease;

  /* Radial-only backdrop: halo around center + subtle edge vignette */
  background:
    radial-gradient(420px 320px at 50% 50%,
      var(--apadd-backdrop-c1) 0%,
      var(--apadd-backdrop-c2) 34%,
      transparent 72%),
    radial-gradient(120% 90% at 50% 50%,
      transparent 56%,
      var(--apadd-spin-vign) 92%,
      var(--apadd-spin-vign) 100%);

  border: 0 !important;
  background-clip: padding-box;

  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);

  transform: translateZ(0);
}

/* Active state (also supports data-open on overlay) */
.apadd-spinner.apadd-spin[data-open="1"] .mid-spinner-overlay.loader,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader[data-open="1"]{
  display:grid !important;
  opacity:1 !important;
}

/* Hard-disable any legacy scan nodes if they exist in markup */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader > .apf-scan,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader > .apf-sweep{
  display:none !important;
}

/* ========================================================================== */
/* Loader core                                                                */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apf-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apf-center-box{
  width: var(--puck);
  height: var(--puck);
  position:relative;
  box-sizing:border-box;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  isolation:isolate;
}

/* -------------------------------------------------------------------------- */
/* REMOVE CONCENTRIC RINGS                                                    */
/* -------------------------------------------------------------------------- */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader > .ring-halo,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .inner{
  display:none !important;
}

/* -------------------------------------------------------------------------- */
/* Token-driven Aurora Fog (subtle)                                           */
/* -------------------------------------------------------------------------- */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::before,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::after{
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:50%;
  pointer-events:none;
  z-index:3;

  opacity: var(--apadd-fx-opacity);
  filter: blur(var(--apadd-fx-blur)) saturate(var(--apadd-fx-sat)) brightness(var(--apadd-fx-bright));
  mix-blend-mode: screen;

  -webkit-mask: none !important;
          mask: none !important;

  animation:
    apaddAuroraDrift var(--apadd-fx-drift) ease-in-out infinite,
    apaddAuroraBreathe var(--apadd-fx-breathe) ease-in-out infinite;
}

/* Primary fog */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::before{
  background:
    radial-gradient(60% 55% at 35% 30%, var(--apadd-fx-a) 0%, transparent 68%),
    radial-gradient(52% 58% at 70% 42%, var(--apadd-fx-b) 0%, transparent 70%),
    radial-gradient(46% 44% at 52% 72%, var(--apadd-fx-c) 0%, transparent 72%);
}

/* Secondary fog */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::after{
  inset:-10%;
  opacity: calc(var(--apadd-fx-opacity) * .72);
  filter: blur(calc(var(--apadd-fx-blur) * .72)) saturate(calc(var(--apadd-fx-sat) * 1.08)) brightness(calc(var(--apadd-fx-bright) * 1.06));

  background:
    radial-gradient(44% 40% at 30% 55%, color-mix(in oklch, var(--apadd-c2) 18%, transparent) 0%, transparent 74%),
    radial-gradient(36% 38% at 72% 30%, color-mix(in oklch, var(--apadd-c1) 16%, transparent) 0%, transparent 76%),
    radial-gradient(60% 60% at 50% 50%, transparent 45%, color-mix(in oklch, #fff 8%, transparent) 70%, transparent 85%);
}

/* Center glass (keep) */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .glass{
  position:absolute;
  inset:14%;
  border-radius:50%;

  background:
    linear-gradient(180deg,#fff3,#0000 40%),
    linear-gradient(0deg,
      color-mix(in oklch, var(--apadd-surface-2) 100%, transparent),
      color-mix(in oklch, var(--apadd-surface-2) 92%, transparent));

  border:1px solid color-mix(in oklch, var(--apadd-border) 85%, transparent);
  box-shadow: 0 8px 28px rgba(0,0,0,.36);
  z-index:4;
}

/* ========================================================================== */
/* Center SVG slot (unchanged; keep spinning SVG intact)                      */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:7;
  pointer-events:none;

  perspective:1000px;
  -webkit-perspective:1000px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > svg,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > object,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > img{
  width: var(--owl-size-pct);
  height:auto;
  display:block;

  transform-style:preserve-3d;
  backface-visibility:visible;
  transform-origin:50% 50%;

  animation: apaddOwlRotateY var(--owl-ry-sec) var(--owl-ry-ease) infinite;

  color: var(--apadd-text);
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--apadd-c2) 34%, transparent))
          drop-shadow(0 0 24px color-mix(in oklch, var(--apadd-c1) 28%, transparent));
}

/* ========================================================================== */
/* Label + progress                                                           */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .label{
  position:absolute;
  left:50%;
  bottom: var(--apadd-label-bottom);
  transform:translateX(-50%);
  font:800 12px/1.1 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  letter-spacing:.10em;

  background: linear-gradient(90deg,
    color-mix(in oklch, var(--apadd-text) 72%, transparent),
    var(--apadd-text),
    color-mix(in oklch, var(--apadd-c2) 65%, var(--apadd-text) 35%),
    var(--apadd-text)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  background-size: 220% 100%;
  animation: apaddLabelPulse 2.6s ease-in-out infinite, apaddLabelShimmer 1.9s linear infinite;
  transition: opacity .18s ease, filter .18s ease;
  z-index:8;
  text-align:center;
  max-width: min(520px, 92vw);
  padding: 0 10px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .label.apf-label-swap{
  opacity:.20;
  filter: blur(.3px);
}

/* ========================================================================== */
/* NEW: Snippet line (data-spin-sub) — subtle enter/exit + gradient text       */
/* - JS currently does: sub.style.opacity='0.18'; then restores                */
/* - We enhance with animations + mask gradient + caret + sheen                */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  position:absolute;
  left:50%;
  bottom: var(--apadd-sub-bottom);
  transform:translateX(-50%);
  z-index:8;

  max-width: min(560px, 94vw);
  padding: 7px 12px;

  font: 750 11.5px/1.15 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  letter-spacing: .09em;

  /* Theme-driven “text glow gradient” */
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--apadd-text) 76%, transparent),
    color-mix(in oklch, var(--apadd-text) 92%, transparent),
    color-mix(in oklch, var(--apadd-c2) 58%, var(--apadd-text) 42%),
    color-mix(in oklch, var(--apadd-text) 92%, transparent)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Subtle pill glass */
  background-color: color-mix(in oklch, var(--apadd-surface-2) calc(var(--apadd-snips-pill-alpha) * 100%), transparent);
  border: 1px solid color-mix(in oklch, var(--apadd-border) 70%, transparent);
  border-radius: 999px;

  /* Layered pill glints */
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px color-mix(in oklch, var(--apadd-c2) 10%, transparent),
    0 0 22px color-mix(in oklch, var(--apadd-c1) 10%, transparent);

  backdrop-filter: blur(var(--apadd-snips-pill-blur)) saturate(var(--apadd-snips-pill-sat));
  -webkit-backdrop-filter: blur(var(--apadd-snips-pill-blur)) saturate(var(--apadd-snips-pill-sat));

  /* Motion */
  opacity: var(--apadd-snips-text-alpha);
  transform: translateX(-50%) translateY(0);
  filter: drop-shadow(0 1px 10px rgba(0,0,0,.18));
  will-change: opacity, transform, filter;

  transition:
    opacity var(--apadd-snips-exit) var(--apadd-snips-ease),
    transform var(--apadd-snips-exit) var(--apadd-snips-ease),
    filter var(--apadd-snips-exit) var(--apadd-snips-ease);

  /* Truncation with a soft fade at the end */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);

  /* Subtle shimmer on the glyphs (not the pill) */
  background-size: 260% 100%;
  animation: apaddSnipTextShimmer 2.6s linear infinite;
}

/* When JS briefly drops opacity for swap, we add a tiny drift + blur */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub][style*="opacity: 0.18"],
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub][style*="opacity:0.18"]{
  transform: translateX(-50%) translateY(var(--apadd-snips-lift));
  filter: blur(var(--apadd-snips-blur));
}

/* Optional: caret on snippets (toggle via JS if desired) */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub].has-caret::after{
  content:"";
  display:inline-block;
  width: .55ch;
  height: .95em;
  margin-left: .35ch;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--apadd-c2) 70%, transparent),
    color-mix(in oklch, var(--apadd-c1) 55%, transparent)
  );
  opacity:.82;
  animation: apaddCaretBlink .72s steps(1,end) infinite;
  vertical-align: -0.1em;
}

/* Pop-in animation when unhidden (works because JS toggles [hidden]) */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]:not([hidden]){
  animation: apaddSnipEnter var(--apadd-snips-enter) var(--apadd-snips-ease) 1;
}

/* Hidden */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub][hidden]{
  display:none !important;
}

/* ========================================================================== */
/* Progress bar (data-spin-progress) — subtle glow + sheen + theme gradient    */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress]{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  width: var(--apadd-prog-w);
  height: var(--apadd-prog-h);
  border-radius:999px;
  overflow:hidden;

  background:
    linear-gradient(to right,
      color-mix(in oklch, var(--apadd-border) 62%, transparent),
      color-mix(in oklch, var(--apadd-border) 32%, transparent)
    );
  box-shadow: var(--apadd-prog-glow);
  z-index:8;

  /* Tiny glass */
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar{
  height:100%;
  width:0%;

  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--apadd-c1) 86%, transparent),
      color-mix(in oklch, var(--apadd-c2) 88%, transparent)
    );
  filter: saturate(1.16) brightness(1.05);
  position:relative;

  /* Smooth progress updates */
  transition: width .32s var(--apadd-snips-ease);
}

/* Sheen overlay */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(28px 12px at 20% 50%, color-mix(in oklch, #fff 18%, transparent), transparent 62%),
    radial-gradient(26px 12px at 68% 50%, color-mix(in oklch, #fff 14%, transparent), transparent 62%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:.42;
  mix-blend-mode: screen;
  transform: translateX(-18%);
  animation: apaddProgSheen 1.55s ease-in-out infinite;
  pointer-events:none;
}

/* Indeterminate */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress][data-indeterminate="1"] .apf-progress__bar{
  width:42%;
  animation: apaddIndeterminate 1.15s ease-in-out infinite;
}

/* Hide */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress][hidden]{
  display:none !important;
}

/* ========================================================================== */
/* Keyframes                                                                  */
/* ========================================================================== */

@keyframes apaddAuroraDrift{
  0%   { transform: translate3d(-1.6%, -0.8%, 0) scale(1.02); }
  50%  { transform: translate3d( 1.2%,  1.0%, 0) scale(1.06); }
  100% { transform: translate3d(-1.6%, -0.8%, 0) scale(1.02); }
}

@keyframes apaddAuroraBreathe{
  0%,100%{ opacity: var(--apadd-fx-opacity); }
  50%    { opacity: calc(var(--apadd-fx-opacity) * .82); }
}

@keyframes apaddIndeterminate{
  0%{ margin-left:-45%; }
  50%{ margin-left:55%; }
  100%{ margin-left:-45%; }
}

@keyframes apaddLabelPulse{
  0%,100%{opacity:.92; transform:translateX(-50%) translateY(0);}
  50%{opacity:1; transform:translateX(-50%) translateY(-1px);}
}
@keyframes apaddLabelShimmer{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}

/* Keep your spinning/flip SVG intact */
@keyframes apaddOwlRotateY{
  0%{transform:rotateY(0)}
  50%{transform:rotateY(180deg)}
  100%{transform:rotateY(360deg)}
}

/* NEW: Snippet enter */
@keyframes apaddSnipEnter{
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(calc(var(--apadd-snips-lift) + 4px));
    filter: blur(1.2px);
  }
  70%{
    opacity: var(--apadd-snips-text-alpha);
    transform: translateX(-50%) translateY(-1px);
    filter: blur(.25px);
  }
  100%{
    opacity: var(--apadd-snips-text-alpha);
    transform: translateX(-50%) translateY(0);
    filter: none;
  }
}

/* NEW: Snippet text shimmer (subtle) */
@keyframes apaddSnipTextShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 260% 50%; }
}

/* Snippet caret */
@keyframes apaddCaretBlink{ 0%,45%{opacity:.88} 46%,100%{opacity:.10} }

/* Progress sheen */
@keyframes apaddProgSheen{
  0%{ transform: translateX(-18%); opacity:.26; }
  50%{ opacity:.52; }
  100%{ transform: translateX(18%); opacity:.26; }
}

/* ========================================================================== */
/* A11y / prefs                                                               */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::before,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::after,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress][data-indeterminate="1"] .apf-progress__bar,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .label,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > svg,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > object,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > img,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
    animation:none !important;
    transition:none !important;
  }
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar{
    transition:none !important;
  }
}

@media (prefers-reduced-transparency: reduce){
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    background:
      radial-gradient(420px 320px at 50% 50%,
        rgba(236,134,57,.14) 0%,
        rgba(136,238,255,.10) 34%,
        transparent 72%),
      radial-gradient(120% 90% at 50% 50%,
        transparent 56%,
        rgba(0,0,0,.50) 92%,
        rgba(0,0,0,.50) 100%) !important;
  }

  .apadd-spinner.apadd-spin{
    --apadd-fx-opacity: .55;
    --apadd-fx-blur: 18px;

    --apadd-snips-pill-alpha: .44;
    --apadd-snips-pill-blur: 0px;
  }

  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub],
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress]{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* Extra safety: prevent inherited transform animations */
.apadd-spinner.apadd-spin,
.apadd-spinner.apadd-spin *{
  animation-play-state: running;
  transform-style: flat;
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > svg,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar{
  transform-style: preserve-3d;
}

/* Mobile tuning */
@media (max-width: 520px){
  .apadd-spinner.apadd-spin{
    --owl-size-pct: 48%;
    /* tighten slightly on small screens but keep clear separation */
    --apadd-label-bottom: -36px;
    --apadd-label-sub-gap: 16px;
  }
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{ font-size: 10.8px; letter-spacing:.082em; }
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress]{ bottom:-18px; width: 168px; }
}
/* ========================================================================== */
/* Snippet as a true “pill” (better contrast)                                 */
/* - Keep the pill opaque-ish                                                   */
/* - Put gradient/shimmer on inner text span if present; else fallback          */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  /* pill surface */
  padding: 8px 12px;
  border-radius: 999px;

  background:
    radial-gradient(220px 60px at 18% 30%, color-mix(in oklch, var(--apadd-c2) 16%, transparent), transparent 70%),
    radial-gradient(220px 60px at 82% 70%, color-mix(in oklch, var(--apadd-c1) 14%, transparent), transparent 72%),
    color-mix(in oklch, var(--apadd-surface-2) 72%, transparent);

  border: 1px solid color-mix(in oklch, var(--apadd-border) 78%, transparent);

  box-shadow:
    0 10px 26px rgba(0,0,0,.26),
    0 0 0 1px color-mix(in oklch, var(--apadd-c2) 12%, transparent),
    0 0 22px color-mix(in oklch, var(--apadd-c1) 12%, transparent);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  /* IMPORTANT: make text visible */
  color: color-mix(in oklch, var(--apadd-text) 90%, transparent);
  -webkit-text-fill-color: currentColor; /* ensures visible on webkit */

  /* keep your truncation fade */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}

/* If you kept the earlier “gradient text” rules that do color: transparent,
   this overrides them so the pill actually has readable text. */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* Optional: add a subtle gradient “ink” overlay without making text transparent */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  position: absolute; /* already is, but keep explicit */
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--apadd-c1) 10%, transparent),
      transparent 40%,
      color-mix(in oklch, var(--apadd-c2) 12%, transparent)
    );
  opacity:.9;
  mix-blend-mode: screen;
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  position: absolute;
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  /* make sure text sits above ::before */
  z-index: 8;
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  /* create stacking context */
  isolation: isolate;
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  /* ensure text is above overlay */
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  /* no-op placeholder; kept for clarity */
}

/* Caret still works */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub].has-caret::after{
  opacity:.78;
}