/* ============================================================
   Electric Border — camadas de brilho
   Porte do componente React Bits (inspirado em @BalintFerenczy).
   O traço animado é desenhado em canvas por assets/js/electric-border.js;
   aqui ficam o halo e o brilho de fundo, na cor lime do site.
   ============================================================ */

.eb {
  position: relative;
  isolation: isolate;
  /* o traço extrapola a caixa do card, então nada de overflow:hidden */
  overflow: visible;
}

/* o conteúdo do card fica acima das camadas de brilho */
.eb > *:not(.eb-layers):not(.eb-canvas-wrap) {
  position: relative;
  z-index: 1;
}

.eb-canvas-wrap {
  /* camada própria de composição: sem isso, cada quadro do canvas obriga o
     navegador a refazer o blur das camadas de brilho que ficam atrás. */
  will-change: transform;
  contain: paint;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  line-height: 0;
}
.eb-canvas { display: block; }

.eb-layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.eb-layers > * {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}

.eb-glow-1 {
  border: 1px solid color-mix(in srgb, var(--eb-color, #8fe93c) 55%, transparent);
  filter: blur(1px);
}
.eb-glow-2 {
  border: 1px solid var(--eb-color, #8fe93c);
  filter: blur(4px);
  opacity: .55;
}
.eb-bg-glow {
  z-index: -1;
  transform: scale(1.06);
  filter: blur(28px);
  opacity: .22;
  background: linear-gradient(-30deg,
    var(--eb-color, #8fe93c),
    transparent 55%,
    color-mix(in srgb, var(--eb-color, #8fe93c) 70%, #ffffff));
}

/* o card em destaque recebe um halo mais forte */
.price.featured.eb .eb-glow-2 { opacity: .8; }
.price.featured.eb .eb-bg-glow { opacity: .34; }

/* fallback: navegadores sem color-mix() usam a cor cheia */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .eb-glow-1 { border-color: var(--eb-color, #8fe93c); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-glow-2 { filter: blur(3px); }
  .eb-bg-glow { opacity: .16; }
}

/* telas pequenas: halo mais discreto (o card ocupa a largura toda) */
@media (max-width: 620px) {
  .eb-bg-glow { opacity: .16; }
  .eb-glow-2 { opacity: .45; }
}