/* ============================================
   Componente: Glow Form / LED Border
   Efeito de borda animada (LED girante) para formularios e botoes CTA.
   Extraido de: landing.css, design-system.css, whatsapp-problem-section.php
   ============================================ */

/* ── Keyframe: rotacao do LED ── */
@keyframes lp-led-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── LED giratório nos botões CTA ── */
.btn-led-wrap {
  display: inline-block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  padding: 2px;
}
.btn-led-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 200%; height: 200%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: conic-gradient(
    transparent 0deg,
    transparent 195deg,
    rgba(37,211,102,.03) 210deg,
    rgba(37,211,102,.12) 225deg,
    rgba(37,211,102,.3)  240deg,
    rgba(37,211,102,.6)  255deg,
    #25D366              268deg,
    #2de072              277deg,
    #25D366              286deg,
    rgba(37,211,102,.6)  299deg,
    rgba(37,211,102,.3)  314deg,
    rgba(37,211,102,.12) 329deg,
    rgba(37,211,102,.03) 344deg,
    transparent          358deg,
    transparent          360deg
  );
  animation: lp-led-spin 3s linear infinite;
  will-change: transform;
  z-index: 0;
}
/* Botão dentro do wrapper: sem borda estática, acima do LED */
.btn-led-wrap .btn {
  position: relative;
  z-index: 1;
  border: none !important;
  box-shadow: none !important;
}
@media (max-width: 520px) {
  .btn-led-wrap { display: block; max-width: 100%; box-sizing: border-box; }
  .btn-led-wrap .btn { width: 100%; text-align: center; white-space: normal; line-height: 1.35; }
}

/* ── LED Border para formularios de LP ── */
/* Override de position:static que vem de .lp-form-box > * */
.lp-form-box .lp-form-led {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 5px;
  background: transparent;
}
/* Faixa laranja girando — visivel apenas nas bordas (clipped pelo overflow:hidden do pai) */
/* Centering via top/left + translate evita bug de inset:-100% + width:300% em containers dinamicos */
.lp-form-led::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: conic-gradient(transparent 265deg, #ffb347 292deg, #ff5c1a 310deg, #ed4700 322deg, #ff5c1a 338deg, transparent 358deg);
  animation: lp-led-spin 3.5s linear infinite;
  will-change: transform;
  z-index: 0;
}
/* Fundo branco interno — separa o conteudo do form da borda LED */
.lp-form-led::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 13px;
  background: #ffffff;
  z-index: 1;
}
/* Conteudo do form acima dos pseudo-elementos */
/* overflow:hidden + border-radius contem box-shadows internos (ex: glow do botao)
   que vazariam para a zona do LED girante */
.lp-form-led > * {
  position: relative;
  z-index: 2;
  border-radius: 13px;
  overflow: hidden;
}