/* Base orb-like styling for buttons */
.fbfx.btn-orb{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width: 120px; height: var(--fbfx-size,46px); padding: 0 18px;
  border-radius: 999px; text-decoration:none; font-weight:700; letter-spacing:.2px;
  color: var(--fbfx-text,#fff) !important;
  background:
    radial-gradient(120% 120% at 80% 85%, color-mix(in srgb, var(--fbfx-base,#E21B1B) 70%, black) 0%, transparent 60%),
    radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, white 25%, var(--fbfx-base,#E21B1B)) 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 60%, var(--fbfx-base,#E21B1B) 0%, color-mix(in srgb, var(--fbfx-base,#E21B1B) 60%, black) 75%);
  border: var(--fbfx-border-w,2px) solid var(--fbfx-border,#7DD3FC);
  box-shadow: 0 12px 22px rgba(0,0,0,.28), inset 0 6px 10px rgba(255,255,255,.16), inset 0 -8px 14px rgba(0,0,0,.22);
  overflow: hidden;
}
.fbfx.btn-orb .label{ position:relative; z-index:2; }
.fbfx.btn-orb .layer{ position:absolute; inset:-20%; border-radius:999px; pointer-events:none; z-index:1; }
.fbfx.btn-orb::before{ content:''; position:absolute; left:8%; top:14%; width:50%; height:40%; border-radius:50%;
  background: radial-gradient(80% 120% at 50% 0%, #fff 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,0) 100%);
  filter: blur(.6px); opacity:.9; z-index:1;
}

/*** EFFECTS ***/
/* Ripple */
.fbfx.btn-orb.ripple-loop .f1, .fbfx.btn-orb.ripple-loop .f2{
  box-shadow:0 0 0 0 rgba(125,211,252,.45);
  animation: fbfxRipple 2s ease-out infinite;
  transform:translateZ(0);
}
.fbfx.btn-orb.ripple-loop .f2{ animation-delay:1s; }
@keyframes fbfxRipple{ 0%{ box-shadow:0 0 0 0 rgba(125,211,252,.45); opacity:.95;} 80%{ box-shadow:0 0 0 48px rgba(125,211,252,0); opacity:0;} 100%{ opacity:0;} }

/* Bounce */
.fbfx.btn-orb.bounce{ animation: fbfxBounce 1.2s cubic-bezier(.34,1.56,.64,1) infinite; transform-origin:50% 70%; }
@keyframes fbfxBounce{ 0%,100%{ transform: translateY(0) scale(1);} 30%{ transform: translateY(-7px) scale(1.06);} 60%{ transform: translateY(1px) scale(.98);} }

/* Neon-breath */
.fbfx.btn-orb.neon-breath .f1{
  inset:-12px; border-radius:999px;
  box-shadow:0 0 18px 6px color-mix(in srgb, var(--fbfx-base,#E21B1B) 80%, white);
  animation: fbfxNeon 2.2s ease-in-out infinite; opacity:.75; filter:blur(2px);
}
@keyframes fbfxNeon{ 0%,100%{ transform:scale(.92); opacity:.55;} 50%{ transform:scale(1); opacity:.95;} }

/* Ring-pulse */
.fbfx.btn-orb.ring-pulse .f1, .fbfx.btn-orb.ring-pulse .f2{
  border-radius:999px; box-shadow:0 0 0 0 rgba(255,255,255,.28);
  animation: fbfxRing 1.8s ease-out infinite;
}
.fbfx.btn-orb.ring-pulse .f2{ animation-delay:.6s; }
@keyframes fbfxRing{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.28); opacity:.9;} 100%{ box-shadow:0 0 0 56px rgba(255,255,255,0); opacity:0;} }

/* Neon + Bounce */
.fbfx.btn-orb.neon-bounce{ animation: fbfxBounce 1.2s cubic-bezier(.34,1.56,.64,1) infinite; transform-origin:50% 70%; }
.fbfx.btn-orb.neon-bounce .f1{
  inset:-12px; border-radius:999px; box-shadow:0 0 20px 8px color-mix(in srgb, var(--fbfx-base,#E21B1B) 80%, white);
  animation: fbfxNeon 2.2s ease-in-out infinite; opacity:.75; filter:blur(2px);
}

/* Integration with Flatsome button sizes */
.button, .ux-button, .btn{ position:relative; }


/* === v1.2: Outer aura + chasing border tails, overflow visible === */
.fbfx.btn-orb{ overflow: visible; isolation: isolate; z-index: 10; }
.fbfx.btn-orb .aura-out{ position:absolute; inset:-28%; border-radius:999px; pointer-events:none; z-index:0;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--fbfx-base,#E21B1B) 35%, transparent) 0%, transparent 70%);
  filter: blur(16px); opacity:.85;
}
/* Chasing border (tail ring) */
.fbfx.btn-orb .trail{
  position:absolute; inset:-6px; border-radius:999px; pointer-events:none; z-index:3;
  background: conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.85), rgba(255,255,255,.0) 18%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: fbfxTail 1.4s linear infinite;
  mix-blend-mode: screen;
}
.fbfx.btn-orb .trail.t2{ inset:-10px; opacity:.45; filter: blur(1px); animation-duration: 2.2s; }

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


/* === FBFX: Rainbow 4-Ring Sweep (Seo Total) === */
.fbfx.btn-orb.fx-aura4{ position: relative; z-index:0; overflow:visible; }
.fbfx.btn-orb .fx-rings{
  position:absolute; inset:-18px; display:grid; place-items:center;
  pointer-events:none; filter: drop-shadow(0 0 12px rgba(255,70,70,.45));
}
.fbfx.btn-orb{ --ring-thickness:2.5px; --ring-blur:6px; --ring-gap:12px; }

.fbfx.btn-orb .fx-rings i{
  position:absolute; border-radius:999px; opacity:.95; mix-blend-mode:screen;
  background: conic-gradient(from 0deg,#ff0040,#ff7a00,#ffd400,#35ff00,#00ffd5,#0077ff,#b300ff,#ff0040);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--ring-thickness)),
    #000 calc(50% - var(--ring-thickness) + .5px), #000 calc(50% + var(--ring-thickness) - .5px),
    transparent calc(50% + var(--ring-thickness)));
          mask: radial-gradient(circle, transparent calc(50% - var(--ring-thickness)),
    #000 calc(50% - var(--ring-thickness) + .5px), #000 calc(50% + var(--ring-thickness) - .5px),
    transparent calc(50% + var(--ring-thickness)));
  box-shadow: 0 0 var(--ring-blur) rgba(255,0,0,.25);
  animation: fbfxRingSpin 6s linear infinite;
}

.fbfx.btn-orb .fx-rings i:nth-child(1){
  width: calc(100% + 2*var(--ring-gap) + 8px);
  height: calc(100% + 2*var(--ring-gap) + 8px);
  animation-duration: 7.5s; animation-delay: 0s;
}
.fbfx.btn-orb .fx-rings i:nth-child(2){
  width: calc(100% + var(--ring-gap));
  height: calc(100% + var(--ring-gap));
  animation-duration: 6.2s; animation-delay: -.8s; animation-direction: reverse;
}
.fbfx.btn-orb .fx-rings i:nth-child(3){
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  animation-duration: 5.2s; animation-delay: -.4s;
}
.fbfx.btn-orb .fx-rings i:nth-child(4){
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  animation-duration: 4.3s; animation-delay: -1.1s; animation-direction: reverse;
}
@keyframes fbfxRingSpin { to{ transform: rotate(360deg); } }

/* Extra white sweep trails */
.fbfx.btn-orb .trail.t3{ inset:-14px; opacity:.35; filter: blur(1.2px); animation-duration: 2.8s; animation-direction: reverse; }
.fbfx.btn-orb .trail.t4{ inset:-18px; opacity:.25; filter: blur(1.5px); animation-duration: 3.6s; }