/*
 * SB Buttons v7.7 — Animações universais para todos os modelos (exceto Mosaico, que tem as suas).
 *
 * Estrutura gerada (editor e front):
 *   <div class="sb-anim sb-anim--{animacao} sb-anim--m{modelo}" style="--sb-anim-color:#hex;--sb-anim-intensity:3">
 *       ...HTML do modelo...
 *   </div>
 *
 * Alvo da animação por modelo:
 *   Botões (1 Botão Simples, 6 CTA Minimalista)  → cada botão clicável
 *   Cards  (2, 3, 4, 5, 7)                        → o card inteiro (wrapper com borda)
 *
 * Variáveis:
 *   --sb-anim-color      cor escolhida (opcional; sem ela cada animação usa um padrão)
 *   --sb-anim-intensity  1 a 5 (padrão 3)
 *   --sb-anim-k          fator de movimento (1 botões, .5 cards grandes)
 */

/* ── Alvos ─────────────────────────────────────────────── */
.sb-anim--m1 .btn-base,
.sb-anim--m6 .cta-mini__link {
    --sb-anim-k: 1;
    --sb-shine-color: var(--sb-anim-color, #ffffff);
    --sb-shine-strength: 9%;
    animation: var(--sb-a, none);
}

.sb-anim--m2 .shortcode-botao2,
.sb-anim--m3 .shortcode-botao3,
.sb-anim--m4 .shortcode-botao4,
.sb-anim--m5 .shortcode-botao5,
.sb-anim--m7 .shortcode-card-review {
    --sb-anim-k: .5;
    --sb-shine-color: var(--sb-anim-color, #8e24aa);
    --sb-shine-strength: 4%;
    animation: var(--sb-a, none);
}

/* Cards com "Borda animada" ligada: mantém o giro da borda e soma a nova animação */
.sb-anim--m2 .shortcode-botao2.animated-border,
.sb-anim--m3 .shortcode-botao3.animated-border,
.sb-anim--m4 .shortcode-botao4.animated-border,
.sb-anim--m5 .shortcode-botao5.animated-border,
.sb-anim--m7 .shortcode-card-review.animated-border {
    animation: bg-spin 3s linear infinite, var(--sb-a, none);
}

/* ── Qual animação ─────────────────────────────────────── */
.sb-anim--pulse     { --sb-a: sbAnimPulse 2.6s ease-in-out infinite; }
.sb-anim--heartbeat { --sb-a: sbAnimHeartbeat 2.8s ease-in-out infinite; }
.sb-anim--glow      { --sb-a: sbAnimGlow 2.6s ease-in-out infinite; }
.sb-anim--border    { --sb-a: sbAnimBorder 2.4s ease-in-out infinite; }
.sb-anim--ring      { --sb-a: sbAnimRing 2.2s ease-out infinite; }
.sb-anim--float     { --sb-a: sbAnimFloat 2.8s ease-in-out infinite; }
.sb-anim--tilt      { --sb-a: sbAnimTilt 2.8s ease-in-out infinite; }
.sb-anim--shake     { --sb-a: sbAnimShake 3.2s ease-in-out infinite; }
.sb-anim--bounce    { --sb-a: sbAnimBounce 3s ease-out infinite; }
/* shine usa pseudo-elemento (abaixo) e não anima o botão em si */

/* Menus com vários botões: pequeno atraso em cascata */
.sb-anim .btn-base:nth-child(2),
.sb-anim .cta-mini__link:nth-child(2) { animation-delay: .18s; }
.sb-anim .btn-base:nth-child(3),
.sb-anim .cta-mini__link:nth-child(3) { animation-delay: .36s; }
.sb-anim .btn-base:nth-child(4),
.sb-anim .cta-mini__link:nth-child(4) { animation-delay: .54s; }

/* ── Brilho deslizante (shine) ─────────────────────────── */
.sb-anim--shine.sb-anim--m1 .btn-base,
.sb-anim--shine.sb-anim--m6 .cta-mini__link,
.sb-anim--shine.sb-anim--m2 .shortcode-botao2,
.sb-anim--shine.sb-anim--m3 .shortcode-botao3,
.sb-anim--shine.sb-anim--m4 .shortcode-botao4,
.sb-anim--shine.sb-anim--m5 .shortcode-botao5,
.sb-anim--shine.sb-anim--m7 .shortcode-card-review {
    position: relative;
}

/* Especificidade alta + !important para vencer ".sb-custom-icon .btn-base:after { content:none!important }" */
.sb-anim.sb-anim--shine.sb-anim--m1 .btn-base::after,
.sb-anim.sb-anim--shine.sb-anim--m6 .cta-mini__link::after,
.sb-anim.sb-anim--shine.sb-anim--m2 .shortcode-botao2::after,
.sb-anim.sb-anim--shine.sb-anim--m3 .shortcode-botao3::after,
.sb-anim.sb-anim--shine.sb-anim--m4 .shortcode-botao4::after,
.sb-anim.sb-anim--shine.sb-anim--m5 .shortcode-botao5::after,
.sb-anim.sb-anim--shine.sb-anim--m7 .shortcode-card-review::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    font-size: 0 !important;
    background: linear-gradient(110deg,
        transparent 38%,
        color-mix(in srgb, var(--sb-shine-color) calc(var(--sb-shine-strength) * var(--sb-anim-intensity, 3)), transparent) 50%,
        transparent 62%) no-repeat !important;
    background-size: 260% 100% !important;
    animation: sbAnimShine 3s ease-in-out infinite !important;
}

@keyframes sbAnimShine {
    0%        { background-position: 130% 0; }
    55%, 100% { background-position: -30% 0; }
}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes sbAnimPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
    50% {
        transform: scale(calc(1 + .007 * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1)));
        box-shadow: 0 0 calc(3px + 3px * var(--sb-anim-intensity, 3)) color-mix(in srgb, var(--sb-anim-color, #8e24aa) calc(8% * var(--sb-anim-intensity, 3)), transparent);
    }
}

@keyframes sbAnimHeartbeat {
    0%, 48%, 100% { transform: scale(1); }
    12% { transform: scale(calc(1 + .008 * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
    24% { transform: scale(1); }
    36% { transform: scale(calc(1 + .005 * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
}

@keyframes sbAnimGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
    50% {
        box-shadow: 0 0 calc(6px + 5px * var(--sb-anim-intensity, 3)) calc(.4px * var(--sb-anim-intensity, 3))
            color-mix(in srgb, var(--sb-anim-color, #8e24aa) calc(12% + 8% * var(--sb-anim-intensity, 3)), transparent);
    }
}

@keyframes sbAnimBorder {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sb-anim-color, #8e24aa) 20%, transparent); }
    50% {
        box-shadow: 0 0 0 calc(1px + .9px * var(--sb-anim-intensity, 3))
            color-mix(in srgb, var(--sb-anim-color, #8e24aa) calc(12% + 9% * var(--sb-anim-intensity, 3)), transparent);
    }
}

@keyframes sbAnimRing {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-anim-color, #8e24aa) calc(18% + 10% * var(--sb-anim-intensity, 3)), transparent); }
    70%  { box-shadow: 0 0 0 calc(3px + 2.5px * var(--sb-anim-intensity, 3)) transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes sbAnimFloat {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 transparent; }
    50% {
        transform: translateY(calc(-1.6px * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1)));
        box-shadow: 0 calc(3px + 1px * var(--sb-anim-intensity, 3)) calc(6px + 2px * var(--sb-anim-intensity, 3))
            color-mix(in srgb, var(--sb-anim-color, #000000) calc(4% + 3% * var(--sb-anim-intensity, 3)), transparent);
    }
}

@keyframes sbAnimTilt {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(calc(-.25deg * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
    75% { transform: rotate(calc(.25deg * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
}

/* Parado a maior parte do tempo, "tremidinha" rápida para chamar atenção */
@keyframes sbAnimShake {
    0%, 70%, 100% { transform: translateX(0); }
    73% { transform: translateX(calc(-1px * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
    77% { transform: translateX(calc(1px * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
    81% { transform: translateX(calc(-.8px * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
    85% { transform: translateX(calc(.6px * var(--sb-anim-intensity, 3) * var(--sb-anim-k, 1))); }
    89% { transform: translateX(0); }
}

/* Parado, depois dois saltinhos */
@keyframes sbAnimBounce {
    0%, 60%, 100% { transform: translateY(0); }
    68% { transform: translateY(calc((-2px - 1.6px * var(--sb-anim-intensity, 3)) * var(--sb-anim-k, 1))); }
    76% { transform: translateY(0); }
    82% { transform: translateY(calc((-1px - .7px * var(--sb-anim-intensity, 3)) * var(--sb-anim-k, 1))); }
    88% { transform: translateY(0); }
}

/* ── Hover e acessibilidade ────────────────────────────── */
.sb-anim .btn-base:hover,
.sb-anim .cta-mini__link:hover,
.sb-anim .btn-base:hover::after,
.sb-anim .cta-mini__link:hover::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .sb-anim--m1 .btn-base, .sb-anim--m1 .btn-base::after,
    .sb-anim--m6 .cta-mini__link, .sb-anim--m6 .cta-mini__link::after,
    .sb-anim--m2 .shortcode-botao2:not(.animated-border), .sb-anim--m2 .shortcode-botao2::after,
    .sb-anim--m3 .shortcode-botao3:not(.animated-border), .sb-anim--m3 .shortcode-botao3::after,
    .sb-anim--m4 .shortcode-botao4:not(.animated-border), .sb-anim--m4 .shortcode-botao4::after,
    .sb-anim--m5 .shortcode-botao5:not(.animated-border), .sb-anim--m5 .shortcode-botao5::after,
    .sb-anim--m7 .shortcode-card-review:not(.animated-border), .sb-anim--m7 .shortcode-card-review::after {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
 * SB Buttons v7.8 — Espaçamento (todos os modelos, inclusive Mosaico)
 *
 *   <div class="sb-sp sb-sp--m{modelo} [sb-sp--py] [sb-sp--px]"
 *        style="--sb-mt:Npx;--sb-mb:Npx;--sb-py:Npx;--sb-px:Npx">
 *
 * Margens: somam ao espaço que o tema já dá (aceitam negativo para aproximar).
 * Espaço interno: substitui o padding padrão do elemento clicável de cada modelo.
 *   1 Botão Simples / 6 CTA  → o botão
 *   2 Card com Imagem        → o card (área clicável)
 *   3 Carrossel, 4, 5        → o botão de ação do card
 *   7 Card Review            → o botão CTA
 *   10 Mosaico               → o rótulo abaixo da imagem
 * ═══════════════════════════════════════════════════════════ */
.sb-sp {
    margin-top: var(--sb-mt, 0px);
    margin-bottom: var(--sb-mb, 0px);
}

/* Vertical */
.sb-sp--py.sb-sp--m1 .btn-base,
.sb-sp--py.sb-sp--m6 .cta-mini__link,
.sb-sp--py.sb-sp--m2 .shortcode-botao2 .btn-base,
.sb-sp--py.sb-sp--m3 .btn-acao,
.sb-sp--py.sb-sp--m4 .btn-acao,
.sb-sp--py.sb-sp--m5 .btn-acao,
.sb-sp--py.sb-sp--m7 .card-review__cta,
.sb-sp--py.sb-sp--m10 .mosaico__label {
    padding-top: var(--sb-py) !important;
    padding-bottom: var(--sb-py) !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Botão Simples: o título herda margens do tema (h3) — com espaço vertical definido,
   a altura passa a ser só texto + 2× espaço interno */
.sb-sp--py.sb-sp--m1 .btn-base .title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Elementos com altura fixa por line-height (Carrossel) */
.sb-sp--py.sb-sp--m3 .btn-acao {
    line-height: 1.25 !important;
}

/* Horizontal */
.sb-sp--px.sb-sp--m1 .btn-base,
.sb-sp--px.sb-sp--m6 .cta-mini__link,
.sb-sp--px.sb-sp--m2 .shortcode-botao2 .btn-base,
.sb-sp--px.sb-sp--m3 .btn-acao,
.sb-sp--px.sb-sp--m4 .btn-acao,
.sb-sp--px.sb-sp--m5 .btn-acao,
.sb-sp--px.sb-sp--m7 .card-review__cta,
.sb-sp--px.sb-sp--m10 .mosaico__label {
    padding-left: var(--sb-px) !important;
    padding-right: var(--sb-px) !important;
}

/* ═══════════════════════════════════════════════════════════
 * SB Buttons v7.9 — Formatação do texto do botão (todos os modelos)
 *   classes: sb-tx sb-tx--m{N} + sb-tx--fs / --fw / --tt / --ls (só as definidas)
 *   vars:    --sb-fs  --sb-fw  --sb-tt  --sb-ls
 * Alvo (texto do botão/CTA):
 *   1 título do botão · 6 texto do CTA · 2 chamada (mobile) · 3/4/5 botão de ação
 *   7 botão CTA · 10 rótulo do Mosaico
 * ═══════════════════════════════════════════════════════════ */
.sb-tx--fs.sb-tx--m1 .btn-base .title,
.sb-tx--fs.sb-tx--m6 .cta-mini__text,
.sb-tx--fs.sb-tx--m2 .btn-chamada,
.sb-tx--fs.sb-tx--m3 .btn-acao,
.sb-tx--fs.sb-tx--m4 .btn-acao,
.sb-tx--fs.sb-tx--m5 .btn-acao,
.sb-tx--fs.sb-tx--m7 .card-review__cta,
.sb-tx--fs.sb-tx--m10 .mosaico__label {
    font-size: var(--sb-fs) !important;
    line-height: 1.25 !important;
}

.sb-tx--fw.sb-tx--m1 .btn-base .title,
.sb-tx--fw.sb-tx--m6 .cta-mini__link,
.sb-tx--fw.sb-tx--m6 .cta-mini__text,
.sb-tx--fw.sb-tx--m2 .btn-chamada,
.sb-tx--fw.sb-tx--m3 .btn-acao,
.sb-tx--fw.sb-tx--m4 .btn-acao,
.sb-tx--fw.sb-tx--m5 .btn-acao,
.sb-tx--fw.sb-tx--m7 .card-review__cta,
.sb-tx--fw.sb-tx--m10 .mosaico__label {
    font-weight: var(--sb-fw) !important;
}

.sb-tx--tt.sb-tx--m1 .btn-base .title,
.sb-tx--tt.sb-tx--m6 .cta-mini__text,
.sb-tx--tt.sb-tx--m2 .btn-chamada,
.sb-tx--tt.sb-tx--m3 .btn-acao,
.sb-tx--tt.sb-tx--m4 .btn-acao,
.sb-tx--tt.sb-tx--m5 .btn-acao,
.sb-tx--tt.sb-tx--m7 .card-review__cta,
.sb-tx--tt.sb-tx--m10 .mosaico__label {
    text-transform: var(--sb-tt) !important;
}

.sb-tx--ls.sb-tx--m1 .btn-base .title,
.sb-tx--ls.sb-tx--m6 .cta-mini__text,
.sb-tx--ls.sb-tx--m2 .btn-chamada,
.sb-tx--ls.sb-tx--m3 .btn-acao,
.sb-tx--ls.sb-tx--m4 .btn-acao,
.sb-tx--ls.sb-tx--m5 .btn-acao,
.sb-tx--ls.sb-tx--m7 .card-review__cta,
.sb-tx--ls.sb-tx--m10 .mosaico__label {
    letter-spacing: var(--sb-ls) !important;
}

/* v8.0 — Fonte escolhida (Google Fonts) aplicada ao texto do botão em todos os modelos */
.sb-tx--ff.sb-tx--m1 .btn-base,
.sb-tx--ff.sb-tx--m1 .btn-base .title,
.sb-tx--ff.sb-tx--m6 .cta-mini__link,
.sb-tx--ff.sb-tx--m6 .cta-mini__text,
.sb-tx--ff.sb-tx--m2 .btn-chamada,
.sb-tx--ff.sb-tx--m3 .btn-acao,
.sb-tx--ff.sb-tx--m4 .btn-acao,
.sb-tx--ff.sb-tx--m5 .btn-acao,
.sb-tx--ff.sb-tx--m7 .card-review__cta,
.sb-tx--ff.sb-tx--m10 .mosaico__label {
    font-family: var(--sb-ff) !important;
}