/* WooCommerce Elementor Video Widget Pro Styles */

.wcevp-video-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* Container for all cases */
.wcevp-video-container {
  position: relative;
  width: 100%;
  /* overflow: hidden; */
  background-color: #000;
  margin: 0 auto;
  cursor: pointer;
  display: block;
}

/* For fixed aspect ratio containers (has padding-bottom) */
.wcevp-video-container[style*="padding-bottom"] {
  /* height: 0; */
}

.wcevp-video-container[style*="padding-bottom"] .wcevp-video-player {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* For auto aspect ratio containers (no padding-bottom) */
.wcevp-video-container:not([style*="padding-bottom"]) {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

.wcevp-video-container:not([style*="padding-bottom"]) .wcevp-video-player {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* Video player common styles */
.wcevp-video-player {
  background-color: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: block;
}

/* Fix for when video has inline style that might conflict */
.wcevp-video-player[style*="display: block; max-width: 100%; height: auto;"] {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  width: 100% !important;
}

/* Clickable video overlay */
.wcevp-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Ensure overlay has proper height for auto aspect ratio */
.wcevp-video-container:not([style*="padding-bottom"]) .wcevp-video-overlay {
  position: relative;
  min-height: 200px; /* Minimum height for overlay */
}

.wcevp-clickable-video:hover .wcevp-video-overlay,
.wcevp-video-player.paused ~ .wcevp-video-overlay,
.wcevp-video-player:not([controls]) ~ .wcevp-video-overlay {
  opacity: 1;
  pointer-events: auto;
}

.wcevp-video-player.playing ~ .wcevp-video-overlay {
  opacity: 0;
  pointer-events: none;
}

.wcevp-play-button {
  width: 70px;
  height: 70px;
  /* background: rgba(0, 0, 0, 0.7); */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  transition: all 0.3s ease;
  /* border: 3px solid rgba(255, 255, 255, 0.8); */
}

.wcevp-video-overlay:hover .wcevp-play-button {
  /* background: rgba(0, 0, 0, 0.9); */
  padding: 0;
  transform: scale(1.1);
  border-color: white;
}
.wcevp-play-button i {
  font-size: 70px;
}

/* When video has native controls, make overlay less prominent */
.wcevp-video-player[controls] ~ .wcevp-video-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.wcevp-video-player[controls] ~ .wcevp-video-overlay .wcevp-play-button {
  width: 60px;
  height: 60px;
  font-size: 24px;
  opacity: 0.8;
}

/* Hide overlay when video is playing or in fullscreen */
.wcevp-video-player:not(.paused) ~ .wcevp-video-overlay,
:fullscreen .wcevp-video-overlay,
:-webkit-full-screen .wcevp-video-overlay,
:-moz-full-screen .wcevp-video-overlay,
:-ms-fullscreen .wcevp-video-overlay {
  display: none !important;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .wcevp-video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .wcevp-video-container:not([style*="padding-bottom"]) .wcevp-video-player {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  .wcevp-play-button {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  /* When in fullscreen on mobile */
  :fullscreen .wcevp-video-player,
  :-webkit-full-screen .wcevp-video-player,
  :-moz-full-screen .wcevp-video-player,
  :-ms-fullscreen .wcevp-video-player {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* Landscape mode on mobile */
  @media (orientation: landscape) {
    .wcevp-video-container:not([style*="padding-bottom"]) .wcevp-video-player {
      height: 100vh !important;
      max-height: 100vh !important;
      object-fit: contain !important;
    }
  }
}

/* Fullscreen mode styles */
:fullscreen .wcevp-video-wrapper,
:-webkit-full-screen .wcevp-video-wrapper,
:-moz-full-screen .wcevp-video-wrapper,
:-ms-fullscreen .wcevp-video-wrapper {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}

:fullscreen .wcevp-video-container,
:-webkit-full-screen .wcevp-video-container,
:-moz-full-screen .wcevp-video-container,
:-ms-fullscreen .wcevp-video-container {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}

:fullscreen .wcevp-video-player,
:-webkit-full-screen .wcevp-video-player,
:-moz-full-screen .wcevp-video-player,
:-ms-fullscreen .wcevp-video-player {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Debug Info */
.wcevp-debug-info {
  font-family: monospace;
  line-height: 1.4;
  margin-top: 15px;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  font-size: 12px;
  display: none;
}

.wcevp-debug-info p {
  margin: 5px 0;
}

.wcevp-debug-info strong {
  color: #333;
  min-width: 120px;
  display: inline-block;
}

/* Hide download button when restricted */
video[controlslist*="nodownload"]::-internal-media-controls-download-button {
  display: none;
}

video[controlslist*="nodownload"]::-webkit-media-controls-download-button {
  display: none;
}

/* Hide fullscreen button when restricted on desktop */
.wcevp-device-desktop
  video[controlslist*="nofullscreen"]::-webkit-media-controls-fullscreen-button {
  display: none;
}

.wcevp-device-desktop
  video[controlslist*="nofullscreen"]::-moz-media-controls-fullscreen-button {
  display: none;
}

/* Hide playback rate when restricted */
video[controlslist*="noplaybackrate"]::-webkit-media-controls-playback-rate-button {
  display: none;
}

/* Hide picture-in-picture when restricted */
video[controlslist*="nopictureinpicture"]::-webkit-media-controls-picture-in-picture-button {
  display: none;
}

/* Placeholder for editor */
.wcevp-video-placeholder {
  padding: 40px;
  text-align: center;
  background: #f5f5f5;
  border: 2px dashed #ddd;
  border-radius: 4px;
  color: #666;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wcevp-video-placeholder p {
  margin: 5px 0;
}

.wcevp-video-placeholder small {
  font-size: 12px;
  color: #999;
}
/* Force landscape orientation in fullscreen on iOS */
@media (max-width: 768px) {
  /* iOS Landscape Force */
  @media (orientation: landscape) {
    :fullscreen .wcevp-video-player,
    :-webkit-full-screen .wcevp-video-player {
      transform: rotate(0deg) !important;
      width: 100% !important;
      height: 100% !important;
    }

    /* Fix for iOS status bar in landscape */
    @supports (-webkit-touch-callout: none) {
      :fullscreen .wcevp-video-wrapper,
      :-webkit-full-screen .wcevp-video-wrapper {
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
      }
    }
  }

  /* iOS Portrait with forced landscape */
  @media (orientation: portrait) {
    .ios-force-landscape {
      transform: rotate(90deg) !important;
      transform-origin: center center !important;
      width: 100vh !important;
      height: 100vw !important;
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      margin-top: -50vw !important;
      margin-left: -50vh !important;
    }
  }
}

/* Safe area insets for iOS notch devices */
@supports (-webkit-touch-callout: none) {
  .wcevp-video-player {
    /* Prevent iOS from zooming on focus */
    touch-action: manipulation;
  }

  :fullscreen .wcevp-video-player,
  :-webkit-full-screen .wcevp-video-player {
    /* Use safe area insets for iPhone X and newer */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Prevent iOS text size adjustment */
html {
  -webkit-text-size-adjust: 100%;
}

/* iOS-specific fullscreen optimizations */
.wcevp-video-player {
  /* Prevent iOS from showing play button overlay */
  -webkit-tap-highlight-color: transparent;
}

/* iOS fullscreen mode adjustments */
:-webkit-full-screen .wcevp-video-player {
  /* Ensure video fills screen on iOS */
  object-fit: contain !important;
}

/* iOS rotation animations */
.wcevp-video-wrapper {
  transition: transform 0.3s ease;
}

/* iOS device orientation detection */
.ios-landscape .wcevp-video-player {
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
}