/* =========================================
   FOUNDATION ADDS (safe, non-breaking)
   - Provide a consistent positioning & stacking context
   ========================================= */
.cpl-video-wrapper {
  position: relative;           /* needed for absolute children (video/overlay) */
  overflow: hidden;             /* keeps zoom/overlay within bounds */
  isolation: isolate;           /* isolates stacking context for predictable z-index */
  width: 100%;
  height: auto;                 /* base auto; your absolute video still fills wrapper */
  min-height: 0;                /* prevents parent min-height interference */
  display: flex;
  box-sizing: border-box;
  
  /* PERFORMANCE FIX: Forces Hardware Acceleration for smooth playback & zoom */
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.3s ease;
}

/* =========================================
   ASPECT RATIO
   - Provides responsive ratio control when not using custom height
   ========================================= */
.cpl-video-wrapper:not(.cpl-has-custom-size) {
  aspect-ratio: var(--cpl-aspect, 16/9);
}

.cpl-video-wrapper.cpl-has-custom-size {
  aspect-ratio: auto;
}

/* =========================================
   OVERLAY & UI LAYERS
   - z-index ladder: video(0) < tint(2) < img overlay(2) < speed UI(3) < stroke(4)
   ========================================= */
.cpl-video-wrapper .cpl-overlay-tint {
  position: absolute;
  /* Using your variables for precise padding/inset */
  top:    var(--cpl-pad-top, 0);
  right:  var(--cpl-pad-right, 0);
  bottom: var(--cpl-pad-bottom, 0);
  left:   var(--cpl-pad-left, 0);

  pointer-events: none;
  z-index: 2;                 /* above media, below pseudo stroke */
  border-radius: inherit;
  transition: background-color .2s ease, opacity .2s ease;
}

/* GLASSMORPHISM UPGRADE for Speed UI */
.cpl-speed-ui {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  /* Glass effect */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.cpl-video-wrapper .elementor-custom-embed-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* =========================================
   STROKE MODES
   - Respects border-radius & avoids layout shifts
   ========================================= */
.elementor-element.cpl-stroke-inset .cpl-video-wrapper::before,
.elementor-element.cpl-stroke-pseudo .cpl-video-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4; /* Keeps stroke on top of everything */
}

.elementor-element.cpl-stroke-inset .cpl-video-wrapper {
  border-color: transparent !important;
}
.elementor-element.cpl-stroke-inset .cpl-video-wrapper::before {
  outline: var(--cpl-stroke-width, 1px) solid var(--cpl-stroke-color, rgba(255,255,255,.28));
  outline-offset: -1px; /* inset look */
}

.elementor-element.cpl-stroke-pseudo .cpl-video-wrapper {
  border-color: transparent !important;
}
.elementor-element.cpl-stroke-pseudo .cpl-video-wrapper::before {
  border: var(--cpl-stroke-width, 1px) solid var(--cpl-stroke-color, rgba(255,255,255,.28));
}

/* =========================================
   STRETCH LAYOUT (enhanced, additive)
   ========================================= */
.elementor-widget-cpl-video.cpl-stretch {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}

.elementor-widget-cpl-video.cpl-stretch .elementor-widget-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto !important;
}

.elementor-widget-cpl-video.cpl-stretch .cpl-video-wrapper {
  height: 100%;
  width: 100%;
  flex: 1 1 auto;
}

/* Elementor editor refinement */
.elementor-editor-active .elementor-widget-cpl-video.cpl-stretch {
  height: auto !important;
}
.elementor-editor-active .elementor-widget-cpl-video.cpl-stretch .elementor-widget-container {
  display: flex;
  flex: 1 1 auto;
}

/* =========================================
   IFRAME EMULATE ANCHORING
   ========================================= */
.cpl-video-wrapper.cpl-iframe-emulate iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* =========================================
   OBJECT-FIT HELPERS
   ========================================= */
.elementor-element.cpl-object-fit-contain .cpl-video-wrapper video.elementor-video { object-fit: contain !important; }
.elementor-element.cpl-object-fit-cover   .cpl-video-wrapper video.elementor-video { object-fit: cover !important; }
.elementor-element.cpl-object-fit-fill    .cpl-video-wrapper video.elementor-video { object-fit: fill !important; }

/* =========================================
   VIDEO ON HOVER ANIMATION
   - Kept exactly as your original logic
   ========================================= */
.elementor-widget-cpl-video:hover { 
  z-index: 99 !important; 
  position: relative; 
}

.cpl-zoom-none:hover .cpl-video-wrapper { 
  transform: scale(calc(var(--cpl-scale-normal, 1) * var(--cpl-h-scale, 1.1))) !important; 
}

.cpl-zoom-inD:hover .cpl-video-wrapper { 
  transform: translateY(var(--cpl-h-dist, 20px)) scale(calc(var(--cpl-scale-normal, 1) * var(--cpl-h-scale, 1.1))) !important; 
}

.cpl-zoom-inU:hover .cpl-video-wrapper { 
  transform: translateY(calc(var(--cpl-h-dist, 20px) * -1)) scale(calc(var(--cpl-scale-normal, 1) * var(--cpl-h-scale, 1.1))) !important; 
}

.cpl-zoom-inL:hover .cpl-video-wrapper { 
  transform: translateX(calc(var(--cpl-h-dist, 20px) * -1)) scale(calc(var(--cpl-scale-normal, 1) * var(--cpl-h-scale, 1.1))) !important; 
}

.cpl-zoom-inR:hover .cpl-video-wrapper { 
  transform: translateX(var(--cpl-h-dist, 20px)) scale(calc(var(--cpl-scale-normal, 1) * var(--cpl-h-scale, 1.1))) !important; 
}