/* Scoped Electric Border visuals for VIP box only */

#vip-group-box .vipFX-overlay { 
  position: absolute; 
  inset: 0; 
  pointer-events: none;
  /* GPU acceleration and containment for better performance */
  will-change: transform;
  contain: layout style paint;
  transform: translateZ(0);
}

/* Card container */
#vip-group-box .vipFX-overlay .card-container {
  padding: 0;
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  position: absolute;
  inset: 0;
  background: linear-gradient(-30deg, var(--gradient-color, rgba(0,255,102,0.4)), transparent, var(--gradient-color, rgba(0,255,102,0.4))),
              linear-gradient(to bottom, rgba(24,24,27,1), rgba(24,24,27,1));
  /* Performance optimization - isolate rendering */
  contain: layout style paint;
  transform: translateZ(0);
  will-change: transform;
  overflow: hidden; /* Fix alignment issues */
}

/* SVG positioning */
#vip-group-box .vipFX-overlay .svg-container { position: absolute; width: 0; height: 0; }

/* Inner container */
#vip-group-box .vipFX-overlay .inner-container { position: relative; width: 100%; height: 100%; border-radius: 1rem; }

/* Border layers */
#vip-group-box .vipFX-overlay .border-outer {
  border: 2px solid rgba(0, 255, 102, 0.5);
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* Fix alignment */
}

#vip-group-box .vipFX-overlay .main-card {
  width: 100%;
  height: 100%;
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  border: 2px solid var(--electric-border-color, #00FF66);
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Fix alignment */
  filter: url(#turbulent-displace);
  /* GPU acceleration for filter */
  will-change: filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Glow effects - optimized for performance */
#vip-group-box .vipFX-overlay .glow-layer-1 {
  border: 2px solid rgba(0, 255, 102, 0.6);
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Fix alignment */
  filter: blur(1px);
  /* GPU acceleration */
  will-change: filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#vip-group-box .vipFX-overlay .glow-layer-2 {
  border: 2px solid color-mix(in oklab, var(--electric-border-color, #00FF66), white 40%);
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Fix alignment */
  filter: blur(3px); /* Reduced from 4px for better performance */
  /* GPU acceleration */
  will-change: filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Overlay effects */
#vip-group-box .vipFX-overlay .overlay-1 {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  opacity: 1;
  mix-blend-mode: overlay;
  transform: scale(1.1);
  filter: blur(16px);
  background: linear-gradient(-30deg, white, transparent 30%, transparent 70%, white);
}

#vip-group-box .vipFX-overlay .overlay-2 {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  opacity: 0.5;
  mix-blend-mode: overlay;
  transform: scale(1.1);
  filter: blur(16px);
  background: linear-gradient(-30deg, white, transparent 30%, transparent 70%, white);
}

/* Remove demo top sheen bars entirely in VIP box */
#vip-group-box .vipFX-overlay .overlay-1,
#vip-group-box .vipFX-overlay .overlay-2 { display: none; }

/* Background glow - optimized for performance */
#vip-group-box .vipFX-overlay .background-glow {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 1rem; /* Match rounded-2xl (16px) */
  filter: blur(24px); /* Reduced from 32px for better performance */
  transform: scale3d(1.1, 1.1, 1); /* Use 3D transform for GPU acceleration */
  opacity: 0.3;
  z-index: 0;
  background: linear-gradient(-30deg, color-mix(in oklab, var(--electric-border-color, #00FF66), white 40%), transparent, var(--electric-border-color, #00FF66));
  /* GPU acceleration */
  will-change: transform, filter;
  backface-visibility: hidden;
}