/* ====================================================================
   Biomassa Cycle Pro Safe Save — Frontend Stylesheet v4.4.1 (FIX)
   Corrige: lista mobile e círculo desktop aparecendo ao mesmo tempo
   quando o shortcode é inserido em colunas estreitas (Avada).
   Usa Container Queries (largura real do bloco) com fallback seguro
   por viewport para navegadores muito antigos.
==================================================================== */

.bcx4-root{
  width:100%;
  margin:0 auto;
  font-family:var(--bcx-font,inherit);
  position:relative;
  --bcx-node-size:24%;
  --bcx-center-size:37%;
  isolation:isolate;
  container-type:inline-size;     /* habilita @container baseado na largura deste bloco */
  container-name:bcx4;
}

.bcx4-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:visible;
  background:transparent;
}

.bcx4-stage:before{
  content:"";
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(130,190,85,.10),transparent 58%),
    radial-gradient(circle,transparent 53%,rgba(79,143,42,.08) 54%,transparent 57%);
  filter:blur(2px);
  z-index:0;
  pointer-events:none;
}

.bcx4-arrows{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;z-index:1;pointer-events:none;
}
.bcx4-arrow-path{
  fill:none;stroke:var(--bcx-primary);
  stroke-width:var(--bcx-arrow-width,1.15);
  stroke-linecap:round;opacity:.45;
  filter:drop-shadow(0 4px 8px rgba(55,105,30,.08));
}
.bcx4-arrow-head{
  fill:var(--bcx-primary);opacity:.58;
  filter:drop-shadow(0 4px 8px rgba(55,105,30,.08));
}

.bcx4-node{
  position:absolute;
  width:var(--bcx-node-size);
  height:var(--bcx-node-size);
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:4;
  cursor:pointer;
  outline:none;
  pointer-events:auto;
}

.bcx4-face,.bcx4-media{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  border:6px solid rgba(255,255,255,.98);
  box-shadow:
    0 18px 42px rgba(30,45,20,.16),
    0 6px 16px rgba(30,45,20,.08),
    0 0 0 1.5px rgba(79,143,42,.72),
    inset 0 0 0 1px rgba(255,255,255,.48);
  background:#17370d;
  transition:.34s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.bcx4-face:after,.bcx4-center:after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.22),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.14),transparent 42%,rgba(0,0,0,.20));
  pointer-events:none;
}

.bcx4-face img,.bcx4-media img,.bcx4-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  max-width:none;
  transform:scale(1.018);
  transition:.8s cubic-bezier(.2,.8,.2,1);
}

.bcx4-media{
  display:block;
  opacity:0;
  visibility:hidden;
  z-index:5;
}

.bcx4-node.is-active .bcx4-media,
.bcx4-root[data-trigger="hover"] .bcx4-node:hover .bcx4-media{
  opacity:1;
  visibility:visible;
}

.bcx4-node.is-active .bcx4-face,
.bcx4-root[data-trigger="hover"] .bcx4-node:hover .bcx4-face{
  opacity:.08;
  transform:scale(1.025) translateY(-1px);
  box-shadow:
    0 22px 54px rgba(30,45,20,.20),
    0 0 0 4px rgba(143,212,58,.10),
    0 0 0 1.5px rgba(79,143,42,.78),
    inset 0 0 0 1px rgba(255,255,255,.52);
}

.bcx4-node:hover .bcx4-face img,
.bcx4-node.is-active .bcx4-face img{
  transform:scale(1.08);
  filter:saturate(1.05) contrast(1.03);
}

.bcx4-media img,.bcx4-media video{
  width:100%;height:100%;object-fit:cover;display:block;
}

.bcx4-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:8;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--bcx-primary);
  color:#fff;border-radius:999px;padding:5px 11px;font-weight:950;font-size:12px;line-height:1;
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 8px 18px rgba(30,45,20,.20),inset 0 1px 0 rgba(255,255,255,.35);
  pointer-events:none;
}

.bcx4-label{
  position:absolute;left:50%;
  bottom:calc(clamp(16px, 4.4cqw, var(--bcx-label-offset,44px)) * -1);
  transform:translateX(-50%);z-index:8;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,246,.93));
  color:var(--bcx-label);border-radius:999px;padding:8px 14px 7px;font-weight:900;
  font-size:var(--bcx-label-size, clamp(7px, 2.6cqw, 11px));letter-spacing:.035em;text-transform:uppercase;
  text-align:center;line-height:1.12;
  box-shadow:0 10px 24px rgba(30,45,20,.08),inset 0 1px 0 rgba(255,255,255,.78);
  border:1px solid rgba(55,90,35,.10);
  white-space:normal;width:max-content;
  /* max-width em unidade de container (cqw) = sempre uma fração fixa da
     largura REAL do bloco, escalando junto automaticamente — evita que o
     label fique maior que o espaço disponível entre nós vizinhos (que é
     geometricamente ~40% da largura do stage), em qualquer tamanho de
     container, sem precisar de breakpoints manuais. Mantém um teto em
     px (var(--bcx-label-max)) só para containers muito largos, onde
     35cqw já seria exagerado. */
  max-width:min(var(--bcx-label-max,185px), 30cqw);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}

.bcx4-node[data-index="1"] .bcx4-label,
.bcx4-node[data-index="2"] .bcx4-label{ left:calc(50% + 18px); }
.bcx4-node[data-index="4"] .bcx4-label,
.bcx4-node[data-index="5"] .bcx4-label{ left:calc(50% - 18px); }

.bcx4-center{
  position:absolute;left:50%;top:50%;
  width:var(--bcx-center-size);height:var(--bcx-center-size);
  transform:translate(-50%,-50%);
  border-radius:50%;overflow:hidden;
  background:#1b1309;
  border:var(--bcx-center-border,7px) solid rgba(255,255,255,.98);
  box-shadow:
    0 30px 70px rgba(25,40,16,.20),
    0 10px 24px rgba(25,40,16,.10),
    0 0 0 1px rgba(79,143,42,.22),
    inset 0 0 0 1px rgba(255,255,255,.22);
  z-index:6;
  display:flex;align-items:center;justify-content:center;text-align:center;
}

.bcx4-center-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;
  filter:brightness(.86) saturate(1.03) contrast(1.04);
  transform:scale(1.06);
}
.bcx4-center-overlay{ position:absolute;inset:0; }
.bcx4-center-text{
  position:relative;z-index:3;color:#fff;text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.60);padding:18px;
}
.bcx4-center-text span{
  display:block;font-size:var(--bcx-center-line1,16px);
  letter-spacing:.18em;font-weight:800;
}
.bcx4-center-text strong{
  display:block;color:var(--bcx-accent);
  font-size:var(--bcx-center-line2,31px);
  letter-spacing:.055em;line-height:.98;font-weight:950;
  text-shadow:0 2px 16px rgba(0,0,0,.65),0 0 16px rgba(143,212,58,.10);
}

.bcx4-icon{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:46px;color:var(--bcx-accent);
}

/* ====================================================================
   ESCALA AUTOMÁTICA DOS LABELS EM CONTAINERS ESTREITOS
   font-size e max-width do .bcx4-label já usam unidades cqw (acima),
   então eles encolhem automaticamente em proporção exata à largura
   real do container — sem depender de breakpoints manuais chutados.
   Isso resolve o problema geométrico de fundo: a distância entre dois
   nós vizinhos no círculo é sempre ~40% da largura do stage, então o
   label PRECISA ser menor que isso em qualquer tamanho de tela, e cqw
   garante essa proporção automaticamente.
   O badge (número) e o texto do círculo central usam clamp() pela
   mesma razão — min em px (legibilidade), max em cqw (nunca maior que
   o espaço disponível).
   Cobre colunas estreitas do Avada no DESKTOP (ex.: 420–600px ao lado
   de um bloco de texto): o círculo aparece em tamanho real (100% do
   stage), só os textos/badges escalam — sem o vão lateral que um
   "width:60%" no stage deixaria.
==================================================================== */
.bcx4-badge{
  font-size:clamp(7.5px, 2.1cqw, 12px);
  padding:clamp(2px,.9cqw,5px) clamp(5px,2.1cqw,11px);
}
.bcx4-center-text span{
  font-size:clamp(8px, 3.2cqw, var(--bcx-center-line1,16px));
}
.bcx4-center-text strong{
  font-size:clamp(13px, 6.2cqw, var(--bcx-center-line2,31px));
}
.bcx4-center-text{ padding:clamp(6px,3.6cqw,18px); }

/* ====================================================================
   MOBILE / CONTAINER MUITO ESTREITO (carrossel de cards)
   Só ativa quando o espaço é realmente mínimo (celular real), graças
   ao limiar baixo (380px) definido acima — uma coluna de desktop de
   420–600px agora mostra o círculo reduzido (regras acima), não a
   lista.
==================================================================== */
.bcx4-mobile-hint,
.bcx4-mobile-list{
  display:none;
}

/* ── Regra primária: Container Query ──────────────────────────────────
   Reage à largura REAL do bloco onde o shortcode foi inserido (ex.: uma
   coluna estreita do Avada ao lado de um texto), e não à largura da
   janela do navegador. Isto corrige o bug em que o círculo aparecia
   espremido numa coluna estreita mesmo em telas grandes de desktop. */
@container bcx4 (max-width: 380px){
  .bcx4-stage{ display:none; }

  .bcx4-mobile-hint{
    display:block;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 24px rgba(30,45,20,.10);
    border-radius:999px;text-align:center;padding:10px 14px;
    font-weight:800;color:var(--bcx-label);margin-bottom:12px;
  }

  .bcx4-mobile-list{
    display:flex;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 2px 14px;
  }

  .bcx4-mobile-card{
    min-width:min(var(--bcx-mobile-card,78vw),330px);
    max-width:min(var(--bcx-mobile-card,78vw),330px);
    scroll-snap-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,246,.94));
    border:1px solid rgba(55,90,35,.14);
    border-radius:24px;padding:16px;
    box-shadow:0 16px 38px rgba(30,45,20,.10);
  }

  .bcx4-mobile-media{
    width:var(--bcx-mobile-img,170px);
    height:var(--bcx-mobile-img,170px);
    max-width:100%;margin:0 auto 14px;
    border-radius:22px;overflow:hidden;
    background:#17370d;
    box-shadow:0 12px 30px rgba(30,45,20,.12);
  }
  .bcx4-mobile-media img,.bcx4-mobile-media video{
    width:100%;height:100%;object-fit:cover;display:block;max-width:none;
  }
  .bcx4-mobile-icon{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:44px;color:var(--bcx-accent);
  }
  .bcx4-mobile-card > span{
    display:inline-flex;background:var(--bcx-primary);color:#fff;
    border-radius:999px;padding:5px 10px;font-weight:900;margin-bottom:10px;
  }
  .bcx4-mobile-card strong{
    display:block;color:var(--bcx-label);text-transform:uppercase;line-height:1.2;
  }
  .bcx4-mobile-card p{
    margin:8px 0 0;color:#4a5f3e;font-size:13px;line-height:1.35;
  }
}

/* ── Fallback: navegadores sem suporte a Container Queries ───────────
   (Safari < 16, navegadores muito antigos). Usa a largura da janela
   como aproximação razoável. Como o @supports nega a feature quando
   ela existe, isto NUNCA roda em conjunto com a regra @container acima
   — elimina o risco de dupla aplicação que causou o bug original. */
@supports not (container-type: inline-size){
  @media (max-width:380px){
    .bcx4-stage{ display:none; }

    .bcx4-mobile-hint{
      display:block;
      background:rgba(255,255,255,.92);
      box-shadow:0 10px 24px rgba(30,45,20,.10);
      border-radius:999px;text-align:center;padding:10px 14px;
      font-weight:800;color:var(--bcx-label);margin-bottom:12px;
    }

    .bcx4-mobile-list{
      display:flex;gap:12px;overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      padding:4px 2px 14px;
    }

    .bcx4-mobile-card{
      min-width:min(var(--bcx-mobile-card,78vw),330px);
      max-width:min(var(--bcx-mobile-card,78vw),330px);
      scroll-snap-align:center;
      background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,246,.94));
      border:1px solid rgba(55,90,35,.14);
      border-radius:24px;padding:16px;
      box-shadow:0 16px 38px rgba(30,45,20,.10);
    }

    .bcx4-mobile-media{
      width:var(--bcx-mobile-img,170px);
      height:var(--bcx-mobile-img,170px);
      max-width:100%;margin:0 auto 14px;
      border-radius:22px;overflow:hidden;
      background:#17370d;
      box-shadow:0 12px 30px rgba(30,45,20,.12);
    }
    .bcx4-mobile-media img,.bcx4-mobile-media video{
      width:100%;height:100%;object-fit:cover;display:block;max-width:none;
    }
    .bcx4-mobile-icon{
      width:100%;height:100%;display:flex;align-items:center;justify-content:center;
      font-size:44px;color:var(--bcx-accent);
    }
    .bcx4-mobile-card > span{
      display:inline-flex;background:var(--bcx-primary);color:#fff;
      border-radius:999px;padding:5px 10px;font-weight:900;margin-bottom:10px;
    }
    .bcx4-mobile-card strong{
      display:block;color:var(--bcx-label);text-transform:uppercase;line-height:1.2;
    }
    .bcx4-mobile-card p{
      margin:8px 0 0;color:#4a5f3e;font-size:13px;line-height:1.35;
    }
  }
}

/* ====================================================================
   ACESSIBILIDADE
==================================================================== */
@media (prefers-reduced-motion: reduce){
  .bcx4-face,.bcx4-media,.bcx4-face img,.bcx4-media img,.bcx4-media video,
  .bcx4-node:hover .bcx4-face,.bcx4-node.is-active .bcx4-face{
    transition-duration:.01ms;
    animation-duration:.01ms;
  }
}

.bcx4-node:focus-visible .bcx4-face{
  box-shadow:0 0 0 3px rgba(79,143,42,.9),0 18px 42px rgba(30,45,20,.16);
}
.bcx4-node:focus:not(:focus-visible) .bcx4-face{ outline:none; }

/* ====================================================================
   ISOLAMENTO CONTRA O TEMA / AVADA
   (sem display:revert — essa era a causa do bug. Em vez disso, fixamos
   explicitamente cada display necessário, sem tocar nos seletores
   mobile que já são controlados acima.)
==================================================================== */
.bcx4-root{
  display:block;
  visibility:visible;
  opacity:1;
  overflow:visible;
  contain:layout style;
  position:relative;
  z-index:1;
  flex-shrink:0;
  min-width:0;
}
.bcx4-root *{ box-sizing:border-box; }
.bcx4-root img{ max-width:100%;height:auto;border:0;box-shadow:none;vertical-align:top; }
.bcx4-root ul,.bcx4-root li{ list-style:none;margin:0;padding:0; }
.bcx4-root a{ text-decoration:none; }

.bcx4-stage{ min-width:220px; }
.bcx4-node{ display:block; }

/* Avada: evita que colunas/linhas do Fusion Builder cortem o círculo
   com overflow:hidden. */
.fusion-builder-row .bcx4-root,
.fusion-layout-column .bcx4-root{
  overflow:visible;
}


/* ====================================================================
   PATCH v4.4.1 — imagens 100% preenchidas + mobile mais confiável
   - Corrige a tarja verde causada por height:auto herdado do tema/Avada.
   - Força imagens/vídeos dos cards a ocuparem toda a área do círculo/card.
   - Em celular real, troca para o carrossel mesmo em telas de 390–430px.
   - Ajusta o snap do carrossel para todos os cards ficarem alcançáveis.
==================================================================== */
.bcx4-root .bcx4-face > img,
.bcx4-root .bcx4-media > img,
.bcx4-root .bcx4-media > video,
.bcx4-root .bcx4-mobile-media > img,
.bcx4-root .bcx4-mobile-media > video,
.bcx4-root .bcx4-center-img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  display:block !important;
}

.bcx4-root .bcx4-center-img{
  position:absolute !important;
  inset:0 !important;
}

.bcx4-mobile-list{
  overscroll-behavior-x:contain;
  scroll-padding-inline:4px;
  touch-action:pan-x;
}
.bcx4-mobile-card{
  flex:0 0 min(var(--bcx-mobile-card,82vw),330px);
  touch-action:pan-x;
}
.bcx4-mobile-card.is-playing{
  outline:2px solid rgba(79,143,42,.24);
  outline-offset:2px;
}
.bcx4-mobile-media video{
  cursor:pointer;
}

@media (max-width: 767px){
  .bcx4-stage{ display:none; }

  .bcx4-mobile-hint{
    display:block;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 24px rgba(30,45,20,.10);
    border-radius:999px;
    text-align:center;
    padding:10px 14px;
    font-weight:800;
    color:var(--bcx-label);
    margin-bottom:12px;
  }

  .bcx4-mobile-list{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 4px 16px;
  }

  .bcx4-mobile-card{
    min-width:0;
    max-width:none;
    scroll-snap-align:start;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,246,.94));
    border:1px solid rgba(55,90,35,.14);
    border-radius:24px;
    padding:16px;
    box-shadow:0 16px 38px rgba(30,45,20,.10);
  }

  .bcx4-mobile-media{
    width:var(--bcx-mobile-img,170px);
    height:var(--bcx-mobile-img,170px);
    max-width:100%;
    margin:0 auto 14px;
    border-radius:22px;
    overflow:hidden;
    background:#17370d;
    box-shadow:0 12px 30px rgba(30,45,20,.12);
  }

  .bcx4-mobile-icon{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    color:var(--bcx-accent);
  }

  .bcx4-mobile-card > span{
    display:inline-flex;
    background:var(--bcx-primary);
    color:#fff;
    border-radius:999px;
    padding:5px 10px;
    font-weight:900;
    margin-bottom:10px;
  }

  .bcx4-mobile-card strong{
    display:block;
    color:var(--bcx-label);
    text-transform:uppercase;
    line-height:1.2;
  }

  .bcx4-mobile-card p{
    margin:8px 0 0;
    color:#4a5f3e;
    font-size:13px;
    line-height:1.35;
  }
}

/* ====================================================================
   PATCH v4.4.3 — indicação mobile de vídeo/GIF clicável
   - Explica no topo que o usuário pode tocar nas imagens.
   - Adiciona ícone de play + selo sutil sobre imagens com mídia.
   - Ao tocar, o overlay some para não atrapalhar o vídeo.
==================================================================== */
@keyframes bcx4-mobile-pulse{
  0%{ transform:scale(.92); opacity:.55; }
  70%{ transform:scale(1.18); opacity:0; }
  100%{ transform:scale(1.18); opacity:0; }
}

.bcx4-mobile-hint span,
.bcx4-mobile-hint small{
  display:block;
}
.bcx4-mobile-hint small{
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  font-weight:700;
  color:rgba(30,58,10,.72);
}

.bcx4-mobile-media{
  position:relative;
  isolation:isolate;
}
.bcx4-mobile-card.bcx4-has-mobile-media .bcx4-mobile-media{
  cursor:pointer;
}
.bcx4-mobile-card.bcx4-has-mobile-media .bcx4-mobile-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.34) 100%);
  opacity:.9;
  transition:opacity .22s ease;
  pointer-events:none;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-media::after{
  opacity:0;
}

.bcx4-mobile-tap-hint{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-tap-hint{
  opacity:0;
  transform:scale(.98);
}

.bcx4-mobile-play-circle{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--bcx-mobile-play-size,38px);
  height:var(--bcx-mobile-play-size,38px);
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  margin:0;
  padding:0;
  display:block;
}
.bcx4-mobile-play-circle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-38%,-50%);
  width:0;
  height:0;
  border-top:calc(var(--bcx-mobile-play-size,38px) * .17) solid transparent;
  border-bottom:calc(var(--bcx-mobile-play-size,38px) * .17) solid transparent;
  border-left:calc(var(--bcx-mobile-play-size,38px) * .26) solid var(--bcx-primary);
}
.bcx4-mobile-play-circle::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.85);
  animation:bcx4-mobile-pulse 1.8s ease-out infinite;
}

.bcx4-mobile-tap-text{
  position:absolute;
  left:50%;
  right:auto;
  bottom:8px;
  width:var(--bcx-mobile-hint-width,112px);
  max-width:calc(100% - 28px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--bcx-label);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  font-size:var(--bcx-mobile-hint-font,9px);
  line-height:1.1;
  font-weight:900;
  text-align:center;
  text-transform:none;
  letter-spacing:.01em;
}
.bcx4-mobile-text-pause{
  display:none;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-text-play{
  display:none;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-text-pause{
  display:inline;
}

/* PATCH v4.4.3 — evita que o estilo do número do card afete os spans do aviso de toque */
.bcx4-mobile-tap-hint span{
  margin-bottom:0;
}
.bcx4-mobile-text-pause{
  display:none !important;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-text-play{
  display:none !important;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-text-pause{
  display:inline !important;
}

.bcx4-mobile-poster,
.bcx4-mobile-gif{
  position:absolute;
  inset:0;
  z-index:1;
}
.bcx4-mobile-gif{
  opacity:0;
  transition:opacity .2s ease;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-gif{
  opacity:1;
}
.bcx4-mobile-card.is-playing .bcx4-mobile-poster{
  opacity:0;
}
.bcx4-mobile-gif-fallback{
  opacity:1;
}

@media (max-width: 767px){
  .bcx4-mobile-hint{
    padding:9px 14px 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .bcx4-mobile-play-circle::after{
    animation:none;
  }
  .bcx4-mobile-tap-hint,
  .bcx4-mobile-card.bcx4-has-mobile-media .bcx4-mobile-media::after,
  .bcx4-mobile-gif{
    transition:none;
  }
}