/* Warp Image for Divi - Frontend */

.wifd-warp{
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Canvas always overlays the target, but does not block clicks */
.wifd-warp .wifd-canvas,
.wifd-bg-target .wifd-canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
}

/* Shortcode mode uses a fixed height container and cover image */
.wifd-warp--shortcode .wifd-fallback{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Attached-to-image mode: keep the image in the normal flow to preserve layout */
.wifd-warp--attached .wifd-fallback{
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

/* Hide fallback only after WebGL is ready (opacity preserves layout) */
.wifd-warp.wifd-ready .wifd-fallback{
  opacity: 0;
}

.wifd-warp--missing{
  padding: 12px;
  border: 1px dashed #ccc;
  background: #fff;
  color: #444;
  font-size: 13px;
}

/* Background mode */
.wifd-bg-target{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Keep content above the canvas */
.wifd-bg-target > *{
  position: relative;
  z-index: 1;
}

.wifd-bg-target .wifd-canvas{
  z-index: 0;
}