/* =============================================
   Smart Product Filter - CSS Loaders
   Source: https://css-loaders.com
   ============================================= */

/* Loader 1 – متن تایپ‌شونده */
.spf-loader-type-1 .spf-loader {
    --w: 15ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2em;
    letter-spacing: var(--w);
    width: var(--w);
    overflow: hidden;
    white-space: nowrap;
    color: #0000;
    animation: spf-l19 2s infinite linear;
}
.spf-loader-type-1 .spf-loader:before {
    content: "در حال بارگذاری";
}
@keyframes spf-l19 {
    0%   { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    4%   { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    8%   { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    12%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    16%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    20%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    24%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    28%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    32%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    36%  { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
    40%, 60% { text-shadow: calc( 0*var(--w)) 0 var(--primary), calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    64%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0 var(--primary), calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    68%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0 var(--primary), calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    72%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0 var(--primary), calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    76%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0 var(--primary), calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    80%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0 var(--primary), calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    84%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0 var(--primary), calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    88%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0 var(--primary), calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    92%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0 var(--primary), calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    96%  { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0 var(--primary), calc(-10*var(--w)) 0 var(--primary), calc(-11*var(--w)) 0 var(--primary), calc(-12*var(--w)) 0 var(--primary), calc(-13*var(--w)) 0 var(--primary), calc(-14*var(--w)) 0 var(--primary); }
    100% { text-shadow: calc( 0*var(--w)) 0, calc(-1*var(--w)) 0, calc(-2*var(--w)) 0, calc(-3*var(--w)) 0, calc(-4*var(--w)) 0, calc(-5*var(--w)) 0, calc(-6*var(--w)) 0, calc(-7*var(--w)) 0, calc(-8*var(--w)) 0, calc(-9*var(--w)) 0, calc(-10*var(--w)) 0, calc(-11*var(--w)) 0, calc(-12*var(--w)) 0, calc(-13*var(--w)) 0, calc(-14*var(--w)) 0; }
}

/* Loader 2 – متن اسلایدی */
.spf-loader-type-2 .spf-loader {
    --c: var(--primary);
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    overflow: hidden;
    text-shadow: 0 0 var(--c), 16ch 0 var(--c);
    animation: spf-l6 2s infinite linear;
}
.spf-loader-type-2 .spf-loader:before {
    content: "در حال بارگذاری";
}
@keyframes spf-l6 {
    to { text-shadow: -16ch 0 var(--c), 0ch 0 var(--c); }
}

/* Loader 3 – نوار پیشرفت */
.spf-loader-type-3 .spf-loader {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: var(--primary);
    border: 2px solid;
    position: relative;
}
.spf-loader-type-3 .spf-loader::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: currentColor;
    animation: spf-l6-bar 2s infinite;
}
@keyframes spf-l6-bar {
    100% { inset: 0; }
}

/* Loader 4 – متن پرشونده */
.spf-loader-type-4 .spf-loader {
    width: fit-content;
    font-size: 40px;
    font-family: monospace;
    font-weight: bold;
    text-transform: uppercase;
    color: #0000;
    -webkit-text-stroke: 1px var(--primary);
    --g: conic-gradient(var(--primary) 0 0) no-repeat text;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch, var(--g) 7ch, var(--g) 8ch, var(--g) 9ch, var(--g) 10ch, var(--g) 11ch, var(--g) 12ch, var(--g) 13ch, var(--g) 14ch;
    animation:
        spf-l20-0 1.5s linear infinite alternate,
        spf-l20-1 3s linear infinite;
}
.spf-loader-type-4 .spf-loader:before {
    content: "در حال بارگذاری";
}
@keyframes spf-l20-0 {
    0%   { background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0; }
    25%  { background-size: 1ch 100%, 1ch 50%, 1ch 0, 1ch 0, 1ch 0, 1ch 50%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 50%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0; }
    50%  { background-size: 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 50%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 50%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 50%; }
    75%  { background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 100%; }
    to   { background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%; }
}
@keyframes spf-l20-1 {
    0%, 50%     { background-position-y: 100%; }
    50.01%, to  { background-position-y: 0; }
}

/* Loader 5 – موج دایره‌ای */
.spf-loader-type-5 .spf-loader {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 25%, transparent);
    animation: spf-l2-pulse 1.5s infinite linear;
    position: relative;
}
.spf-loader-type-5 .spf-loader:before,
.spf-loader-type-5 .spf-loader:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 25%, transparent);
    animation: inherit;
    animation-delay: -0.5s;
}
.spf-loader-type-5 .spf-loader:after {
    animation-delay: -1s;
}
@keyframes spf-l2-pulse {
    100% { box-shadow: 0 0 0 40px transparent; }
}

/* Loader 6 – توپ پرش */
.spf-loader-type-6 .spf-loader {
    height: 60px;
    aspect-ratio: 2;
    position: relative;
}
.spf-loader-type-6 .spf-loader:before {
    content: "";
    position: absolute;
    inset: 100% 75% -3px 0;
    background: var(--primary);
    animation: spf-l4-0 1s linear infinite alternate;
}
.spf-loader-type-6 .spf-loader:after {
    content: "";
    position: absolute;
    inset: auto 42.5% 0;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--secondary);
    animation:
        spf-l4-1 1s cubic-bezier(0, 700, 1, 700) infinite alternate,
        spf-l4-2 1s linear infinite alternate;
}
@keyframes spf-l4-0 {
    0%, 30% { translate: 0% -2px; rotate: 20deg; }
    70%, to  { translate: 300% -2px; rotate: -20deg; }
}
@keyframes spf-l4-1 {
    0%, 2%   { bottom: 0%; }
    98%, to  { bottom: 0.1%; }
}
@keyframes spf-l4-2 {
    0%  { translate: -220%; }
    to  { translate: 220%; }
}

/* Loader 7 – دو نقطه محو */
.spf-loader-type-7 .spf-loader {
    width: 120px;
    height: 60px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background: #fff;
    filter: blur(5px) contrast(10) hue-rotate(60deg);
    mix-blend-mode: darken;
}
.spf-loader-type-7 .spf-loader:before,
.spf-loader-type-7 .spf-loader:after {
    content: "";
    width: 40px;
    border-radius: 50%;
    background: var(--primary);
    animation: spf-l3 1s infinite alternate;
}
.spf-loader-type-7 .spf-loader:after {
    --s: -1;
}
@keyframes spf-l3 {
    90%, 100% { transform: translate(calc(var(--s, 1) * 30px)); }
}

/* Loader 8 – سه نقطه رنگی */
.spf-loader-type-8 .spf-loader {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    animation: spf-l2-dots 1.5s infinite;
}
@keyframes spf-l2-dots {
    0%, 100% { transform: translate(-35px); box-shadow: 0 0 var(--secondary), 0 0 var(--third); }
    40%      { transform: translate(35px); box-shadow: -15px 0 var(--secondary), -30px 0 var(--third); }
    50%      { transform: translate(35px); box-shadow: 0 0 var(--secondary), 0 0 var(--third); }
    90%      { transform: translate(-35px); box-shadow: 15px 0 var(--secondary), 30px 0 var(--third); }
}

/* Loader 9 – ماسک گوشه‌ای */
.spf-loader-type-9 .spf-loader {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 9px;
    --c: no-repeat radial-gradient(farthest-side, var(--secondary) 92%, #0000);
    --s: 18px 18px;
    -webkit-mask:
        var(--c) left 4px top 4px,
        var(--c) right 4px top 4px,
        var(--c) right 4px bottom 4px,
        var(--c) left 4px bottom 4px,
        linear-gradient(#000 0 0);
    mask:
        var(--c) left 4px top 4px,
        var(--c) right 4px top 4px,
        var(--c) right 4px bottom 4px,
        var(--c) left 4px bottom 4px,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spf-l4-mask 1.5s infinite;
}
@keyframes spf-l4-mask {
    0%     { -webkit-mask-size: 0 0, 0 0, 0 0, 0 0, auto; mask-size: 0 0, 0 0, 0 0, 0 0, auto; }
    12.5%  { -webkit-mask-size: var(--s), 0 0, 0 0, 0 0, auto; mask-size: var(--s), 0 0, 0 0, 0 0, auto; }
    25%    { -webkit-mask-size: var(--s), var(--s), 0 0, 0 0, auto; mask-size: var(--s), var(--s), 0 0, 0 0, auto; }
    37.5%  { -webkit-mask-size: var(--s), var(--s), var(--s), 0 0, auto; mask-size: var(--s), var(--s), var(--s), 0 0, auto; }
    50%    { -webkit-mask-size: var(--s), var(--s), var(--s), var(--s), auto; mask-size: var(--s), var(--s), var(--s), var(--s), auto; }
    62.5%  { -webkit-mask-size: 0 0, var(--s), var(--s), var(--s), auto; mask-size: 0 0, var(--s), var(--s), var(--s), auto; }
    75%    { -webkit-mask-size: 0 0, 0 0, var(--s), var(--s), auto; mask-size: 0 0, 0 0, var(--s), var(--s), auto; }
    87.5%  { -webkit-mask-size: 0 0, 0 0, 0 0, var(--s), auto; mask-size: 0 0, 0 0, 0 0, var(--s), auto; }
    100%   { -webkit-mask-size: 0 0, 0 0, 0 0, 0 0, auto; mask-size: 0 0, 0 0, 0 0, 0 0, auto; }
}

/* Loader 10 – سه نقطه اسلایدی */
.spf-loader-type-10 .spf-loader {
    width: 100px;
    display: grid;
    background: radial-gradient(farthest-side, var(--primary) 98%, #0000) center/30px 100% no-repeat;
    --mask:
        radial-gradient(12px at left 15px top 50%, #0000 95%, #000),
        radial-gradient(12px at center, #0000 95%, #000),
        radial-gradient(12px at right 15px top 50%, #0000 95%, #000);
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    animation: spf-l2-slide 1s infinite alternate;
}
.spf-loader-type-10 .spf-loader:before,
.spf-loader-type-10 .spf-loader:after {
    content: "";
    grid-area: 1/1;
    height: 30px;
    aspect-ratio: 1;
    background: var(--primary);
    border-radius: 50%;
}
.spf-loader-type-10 .spf-loader:after {
    margin-left: auto;
}
@keyframes spf-l2-slide {
    to { width: 50px; }
}

/* Admin preview – fallback colors when theme vars are absent */
.spf-admin-loader-preview {
    --primary: #514b82;
    --secondary: #cf4647;
    --third: #f4dd51;
    --fourth: #e3aad6;
}