/* Direct Video Element Styles */
.direct-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0; /* Remove any line-height spacing that could affect video positioning */
}

.direct-video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bricks-border-radius, 0);
  box-shadow: var(--bricks-box-shadow, none);
  margin: 0; /* Ensure no margin on video */
  padding: 0; /* Ensure no padding on video */
}

/* Fade-in Effect */
.direct-video-wrapper video.direct-video-fade {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.direct-video-wrapper video.direct-video-fade.loaded {
  opacity: 1;
}

/* Default video styling with cover behavior */
.direct-video-wrapper video {
  object-fit: cover;
  object-position: center;
}

/* Video Overlay */
.direct-video-wrapper {
  position: relative !important;
  line-height: 0 !important; /* Prevent any line-height spacing issues */
}

.direct-video-wrapper,
.brxe-direct-video {
  position: relative !important; /* Ensure parent is positioned for absolute overlay */
  line-height: 0 !important; /* Remove line-height spacing */
}

/* Ensure video container has no extra spacing */
.brxe-direct-video {
  line-height: 0 !important;
  font-size: 0 !important; /* Remove font-size related spacing */
}

.direct-video-wrapper .direct-video-overlay,
.brxe-direct-video .direct-video-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transition: opacity 0.3s ease !important;
  display: block !important;
  margin: 0 !important; /* Ensure no margin on overlay */
  padding: 0 !important; /* Ensure no padding on overlay */
}

/* Ensure the parent container has proper dimensions and no extra spacing */
.brxe-direct-video {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fallback overlay styling only if Bricks CSS doesn't apply (no !important to allow override) */
.direct-video-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Overlay styling will be controlled by Bricks color controls */

/* Ensure overlay covers video properly */
.direct-video-wrapper video {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Lazy Loading Placeholder */
.direct-video-wrapper video.direct-video-lazy:not(.lazy-loaded) {
  background-color: #f0f0f0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10,8 16,12 10,16 10,8"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px;
  min-height: 200px;
}

/* Delayed Loading Placeholder */
.direct-video-wrapper video.direct-video-delayed:not(.delay-loaded) {
  background-color: #f8f9fa;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px;
  min-height: 200px;
}

/* Loading state for delayed videos */
.direct-video-wrapper video.direct-video-delayed.loading {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="currentColor"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="25" cy="25" r="20"><animate attributeName="stroke-dasharray" dur="1.5s" values="0,125;75,125;75,125" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="1.5s" values="0;-10;-125" repeatCount="indefinite"/></circle></g></svg>');
}

.direct-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: #f5f5f5;
  border: 2px dashed #ddd;
  border-radius: 8px;
  color: #666;
  font-style: italic;
}

.direct-video-placeholder p {
  margin: 0;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .direct-video-wrapper video {
    max-height: 300px;
    object-fit: cover;
  }
}

/* Loading state */
.direct-video-wrapper video:not([src]) {
  background-color: #f0f0f0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5,3 19,12 5,21 5,3"></polygon></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px;
}

/* Error state */
.direct-video-wrapper video[src=""] {
  background-color: #ffebee;
  border: 1px solid #ffcdd2;
}