/* ============================================================
   VW Pixel Elementor Widget  v1.8.1
   ============================================================ */

/* ------------------------------------------------------------
   1. OUTER SECTION — the positioning reference box.
      .vw-pixel-container is stamped by JS on the nearest
      .e-con.e-parent (Flexbox) or .elementor-section (Classic).
   ------------------------------------------------------------ */
.vw-pixel-container {
  position: relative !important;
  overflow: visible  !important;
}

/* ------------------------------------------------------------
   2. INTERMEDIARY NODES — CSS fallback; JS handles inline.
      These must not form a new positioning context.
   ------------------------------------------------------------ */
.vw-pixel-container > .e-con-inner,
.vw-pixel-container > .e-con-inner > .e-con,
.vw-pixel-container > .e-con-inner > .e-con > .e-con-inner,
.vw-pixel-container > .elementor-container,
.vw-pixel-container > .elementor-container > .elementor-column,
.vw-pixel-container > .elementor-container > .elementor-column > .elementor-widget-wrap {
  overflow: visible !important;
}

/* ------------------------------------------------------------
   3. HOST (.elementor-element)
      Left entirely in normal document flow so Elementor's
      selection overlay can find and interact with it.
   ------------------------------------------------------------ */
.elementor-element.vw-pixel-widget-host {
  pointer-events: none;
  z-index: 0;
}

/* Editor: re-enable pointer events so the widget is selectable */
.elementor-editor-active .elementor-element.vw-pixel-widget-host {
  pointer-events: auto !important;
  outline: 1px dashed rgba(123, 97, 255, 0.5);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   4. CANVAS — the layer that fills the whole section.
      JS stretches it to position:absolute inset:0.
      CSS provides the fallback.
   ------------------------------------------------------------ */
.vw-pixel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------
   5. SIBLING CONTENT — always above the canvas layer.
      Must catch every structural node at every nesting depth:
      .e-con-inner, .e-con (sub-containers), .elementor-container,
      .elementor-column, .elementor-widget-wrap, .elementor-element.
      The widget host is excluded — it stays at z-index:0.
   ------------------------------------------------------------ */
.vw-pixel-container .e-con-inner,
.vw-pixel-container .e-con:not(.e-parent),
.vw-pixel-container .elementor-container,
.vw-pixel-container .elementor-column,
.vw-pixel-container .elementor-widget-wrap,
.vw-pixel-container .elementor-element:not(.vw-pixel-widget-host) {
  position: relative !important;
  z-index: 2 !important;
}

/* ------------------------------------------------------------
   6. PIXEL WIDGET — the absolute anchor wrapper for one shape.
      NO explicit width or height here — it must shrink-wrap
      its __inner child. This is critical: right/bottom-anchored
      shapes must grow away from the edge as the SVG size changes,
      which only works when the wrapper has no fixed dimension.
   ------------------------------------------------------------ */
.vw-pixel-widget {
  --vw-pixel-edge-gap: 0px;
  position: absolute;
  display: block;
  margin:  0 !important;
  padding: 0 !important;
  line-height: 0;
  pointer-events: none;
  overflow: visible;
}

/* ------------------------------------------------------------
   7. INNER WRAPPER — the size and visual-style control layer.
      display:inline-block ensures it shrinks to the SVG width
      rather than stretching to 100% of the parent canvas.
      Width, opacity, and rotation are applied as inline styles
      by PHP (per shape from the repeater).
   ------------------------------------------------------------ */
.vw-pixel-widget__inner {
  display: inline-block;
  line-height: 0;
  pointer-events: none;
  transform-origin: center center;
}

/* ------------------------------------------------------------
   8. SVG — fills __inner completely.
      width:100% defers sizing to the __inner inline width,
      which is set per-shape by PHP. height:auto preserves ratio.
   ------------------------------------------------------------ */
.vw-pixel-widget__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   9. ANCHOR POSITIONS — 8 edge slots, flush by default.
      --vw-pixel-edge-gap is set inline per shape by PHP.
      Center anchors use translate so centering is size-agnostic.
   ------------------------------------------------------------ */
.vw-pixel-widget.anchor-top-left {
  top:  var(--vw-pixel-edge-gap);
  left: var(--vw-pixel-edge-gap);
  transform: none;
}
.vw-pixel-widget.anchor-top-center {
  top:  var(--vw-pixel-edge-gap);
  left: 50%;
  transform: translateX(-50%);
}
.vw-pixel-widget.anchor-top-right {
  top:   var(--vw-pixel-edge-gap);
  right: var(--vw-pixel-edge-gap);
  transform: none;
}
.vw-pixel-widget.anchor-center-left {
  top:  50%;
  left: var(--vw-pixel-edge-gap);
  transform: translateY(-50%);
}
.vw-pixel-widget.anchor-center-right {
  top:   50%;
  right: var(--vw-pixel-edge-gap);
  transform: translateY(-50%);
}
.vw-pixel-widget.anchor-bottom-left {
  bottom: var(--vw-pixel-edge-gap);
  left:   var(--vw-pixel-edge-gap);
  transform: none;
}
.vw-pixel-widget.anchor-bottom-center {
  bottom: var(--vw-pixel-edge-gap);
  left:   50%;
  transform: translateX(-50%);
}
.vw-pixel-widget.anchor-bottom-right {
  bottom: var(--vw-pixel-edge-gap);
  right:  var(--vw-pixel-edge-gap);
  transform: none;
}

/* ------------------------------------------------------------
   10. EDITOR HIT-AREA — visible handle per shape in editor only.
       display:none !important on frontend ensures it never leaks.
   ------------------------------------------------------------ */
.vw-pixel-widget__editor-hitarea {
  display: none !important;
}
.elementor-editor-active .vw-pixel-widget__editor-hitarea {
  display: block !important;
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid #7b61ff;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  z-index: 100;
  pointer-events: auto;
  cursor: pointer;
}
.vw-pixel-widget.anchor-top-left      .vw-pixel-widget__editor-hitarea { top: 0;    left: 0;   }
.vw-pixel-widget.anchor-top-center    .vw-pixel-widget__editor-hitarea { top: 0;    left: 50%; transform: translateX(-50%); }
.vw-pixel-widget.anchor-top-right     .vw-pixel-widget__editor-hitarea { top: 0;    right: 0;  }
.vw-pixel-widget.anchor-center-left   .vw-pixel-widget__editor-hitarea { top: 50%;  left: 0;   transform: translateY(-50%); }
.vw-pixel-widget.anchor-center-right  .vw-pixel-widget__editor-hitarea { top: 50%;  right: 0;  transform: translateY(-50%); }
.vw-pixel-widget.anchor-bottom-left   .vw-pixel-widget__editor-hitarea { bottom: 0; left: 0;   }
.vw-pixel-widget.anchor-bottom-center .vw-pixel-widget__editor-hitarea { bottom: 0; left: 50%; transform: translateX(-50%); }
.vw-pixel-widget.anchor-bottom-right  .vw-pixel-widget__editor-hitarea { bottom: 0; right: 0;  }

/* ------------------------------------------------------------
   11. SHAPE ANIMATION — CSS-only, scoped per .vw-pixel-widget
       via CSS custom properties set inline by PHP.
   ------------------------------------------------------------ */
.vw-pixel-widget__shape {
  opacity: 1;
  transform: translateZ(0);
  transform-box: fill-box;
  transform-origin: center;
}

.vw-pixel-widget.has-flicker .px-1 {
  animation: vwPixelFlicker var(--vw-px-1-dur, 5.6s) steps(1, end) infinite;
  animation-delay: var(--vw-px-1-delay, 0.2s);
  animation-play-state: var(--vw-px-1-play, running);
}
.vw-pixel-widget.has-flicker .px-2 {
  animation: vwPixelFlicker var(--vw-px-2-dur, 4.9s) steps(1, end) infinite;
  animation-delay: var(--vw-px-2-delay, 1.1s);
  animation-play-state: var(--vw-px-2-play, running);
}
.vw-pixel-widget.has-flicker .px-3 {
  animation: vwPixelFlicker var(--vw-px-3-dur, 6.2s) steps(1, end) infinite;
  animation-delay: var(--vw-px-3-delay, 0.7s);
  animation-play-state: var(--vw-px-3-play, running);
}
.vw-pixel-widget.has-flicker .px-4 {
  animation: vwPixelFlicker var(--vw-px-4-dur, 5.1s) steps(1, end) infinite;
  animation-delay: var(--vw-px-4-delay, 1.6s);
  animation-play-state: var(--vw-px-4-play, running);
}
.vw-pixel-widget.has-flicker .px-5 {
  animation: vwPixelFlicker var(--vw-px-5-dur, 6.8s) steps(1, end) infinite;
  animation-delay: var(--vw-px-5-delay, 0.9s);
  animation-play-state: var(--vw-px-5-play, running);
}

@keyframes vwPixelFlicker {
  0%,  100% { opacity: 1;    }
  7%         { opacity: 0.42; }
  8%         { opacity: 1;    }
  21%        { opacity: 0.68; }
  22%        { opacity: 1;    }
  49%        { opacity: 0.35; }
  50%        { opacity: 1;    }
  73%        { opacity: 0.78; }
  74%        { opacity: 1;    }
}

/* ------------------------------------------------------------
   12. RESPONSIVE / ACCESSIBILITY
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .vw-pixel-widget.mobile-reduced .px-1,
  .vw-pixel-widget.mobile-reduced .px-2,
  .vw-pixel-widget.mobile-reduced .px-3,
  .vw-pixel-widget.mobile-reduced .px-4,
  .vw-pixel-widget.mobile-reduced .px-5 {
    animation-duration: calc(var(--vw-px-1-dur, 5.6s) * 1.5);
  }
  .vw-pixel-widget.mobile-off .px-1,
  .vw-pixel-widget.mobile-off .px-2,
  .vw-pixel-widget.mobile-off .px-3,
  .vw-pixel-widget.mobile-off .px-4,
  .vw-pixel-widget.mobile-off .px-5 {
    animation: none !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vw-pixel-widget .px-1,
  .vw-pixel-widget .px-2,
  .vw-pixel-widget .px-3,
  .vw-pixel-widget .px-4,
  .vw-pixel-widget .px-5 {
    animation: none !important;
    opacity: 1 !important;
  }
}