/* jits-load-video.css */

/* English comment: Make the Divi image module clickable */
.et_pb_image[data-dclv="1"] {
  position: relative;
  cursor: pointer;
}

/* English comment: Dark overlay */
.et_pb_image[data-dclv="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

/* English comment: Play button background */
.et_pb_image[data-dclv="1"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

/* English comment: Play triangle */
.et_pb_image[data-dclv="1"] .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  width: 0;
  height: 0;
  border-left: 20px solid #ffffff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  z-index: 4;
}

/* English comment: Show overlay on hover */
.et_pb_image[data-dclv="1"]:hover::before {
  opacity: 1;
}

/* English comment: Hide play overlay after activation (no :has needed). */
.et_pb_image[data-dclv="1"][data-dclv-done="1"]::before,
.et_pb_image[data-dclv="1"][data-dclv-done="1"]::after,
.et_pb_image[data-dclv="1"][data-dclv-done="1"] .et_pb_image_wrap::after {
  display: none !important;
  opacity: 0 !important;
}

/* English comment: Ensure the injected video behaves like the original image. */
.et_pb_image[data-dclv="1"] video {
  display: block;
  width: 100%;
  height: auto;
}