/* Basic styles for the floating video player */
.wc-floating-video-player,
.wc-floating-video-player-mobile {
  position: fixed;
  z-index: 9999;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  font-family: var(--fpvp-font-family);
  letter-spacing: var(--fpvp-letter-spacing);
}

/* Portrait orientation with custom aspect ratios */
.wc-floating-video-player {
  width: var(--fpvp-desktop-width);
  height: var(--fpvp-desktop-height); /* 34:60 aspect ratio */
}

.wc-floating-video-player-mobile {
  width: var(--fpvp-mobile-width);
  height: var(--fpvp-mobile-height); /* 22:40 aspect ratio */
  touch-action: none; /* Critical for proper touch handling */
  user-select: none; /* Prevent text selection during drag */
  -webkit-user-drag: none; /* Prevent native dragging */
  -webkit-touch-callout: none; /* Disable callout */
  -webkit-user-select: none; /* Disable selection */
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Position the players based on settings */
.wc-floating-video-player[data-position-x="right"] {
  right: var(--fpvp-desktop-position-offset);
}

.wc-floating-video-player[data-position-x="left"] {
  left: var(--fpvp-desktop-position-offset);
}

.wc-floating-video-player[data-position-x="center"] {
  left: 50%;
  transform: translateX(-50%);
}

.wc-floating-video-player[data-position-y="bottom"] {
  bottom: var(--fpvp-desktop-position-y-offset);
}

.wc-floating-video-player[data-position-y="top"] {
  top: var(--fpvp-desktop-position-y-offset);
}

.wc-floating-video-player[data-position-y="middle"] {
  top: 50%;
  transform: translateY(-50%);
}

/* Handle both transformations for center+middle */
.wc-floating-video-player[data-position-x="center"][data-position-y="middle"] {
  transform: translate(-50%, -50%);
}

/* Mobile player positioning */
.wc-floating-video-player-mobile[data-position-x="right"] {
  right: var(--fpvp-mobile-position-offset);
}

.wc-floating-video-player-mobile[data-position-x="left"] {
  left: var(--fpvp-mobile-position-offset);
}

.wc-floating-video-player-mobile[data-position-x="center"] {
  left: 50%;
  transform: translateX(-50%);
}

.wc-floating-video-player-mobile[data-position-y="bottom"] {
  bottom: var(--fpvp-mobile-position-y-offset);
}

.wc-floating-video-player-mobile[data-position-y="top"] {
  top: var(--fpvp-mobile-position-y-offset);
}

.wc-floating-video-player-mobile[data-position-y="middle"] {
  top: 50%;
  transform: translateY(-50%);
}

/* Handle both transformations for center+middle */
.wc-floating-video-player-mobile[data-position-x="center"][data-position-y="middle"] {
  transform: translate(-50%, -50%);
}

/* Enhance the mobile dragging experience with these updated styles */

/* Make the handle more visible and touchable on mobile */
.wc-floating-video-player-mobile .wc-floating-video-player-handle {
  display: none;
}

/* Remove the visual indicator for the handle */
.wc-floating-video-player-mobile .wc-floating-video-player-handle:before,
.wc-floating-video-player-mobile .wc-floating-video-player-handle:after {
  display: none;
}

/* Remove the dragging visual effects */
.wc-floating-video-player-mobile.dragging {
  opacity: 1;
  box-shadow: none;
  transform: none;
  transition: none;
}

/* Ensure the mobile player has proper positioning for dragging */
.wc-floating-video-player-mobile {
  touch-action: none; /* Prevent browser handling of touch events */
  user-select: none; /* Prevent text selection during drag */
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  -webkit-user-drag: none; /* Prevent native dragging */
  -webkit-touch-callout: none; /* Disable callout */
  -webkit-user-select: none; /* Disable selection */
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Ensure the close button remains clickable and doesn't interfere with dragging */
.wc-floating-video-player-mobile .wc-floating-video-player-close {
  z-index: 20; /* Higher than the handle */
  cursor: pointer;
}

/* Make sure the CTA overlay doesn't interfere with dragging */
.wc-floating-video-player-mobile .wc-floating-video-player-mobile-overlay {
  z-index: 10; /* Lower than the handle but higher than the video */
  cursor: pointer;
}

.wc-floating-video-player.active,
.wc-floating-video-player-mobile.active {
  display: block;
}

.wc-floating-video-player-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wc-floating-video-player video,
.wc-floating-video-player-mobile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-floating-video-player-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
}

.wc-floating-video-player-cta {
  width: 100%;
  height: 40px;
  border: none;
  color: var(--fpvp-text-color);
  font-weight: var(--fpvp-desktop-cta-font-weight);
  font-size: var(--fpvp-desktop-cta-font-size);
  text-transform: var(--fpvp-desktop-cta-text-transform);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  background-color: var(--fpvp-desktop-cta-bg);
  font-family: inherit;
  letter-spacing: inherit;
  text-shadow: var(--fpvp-desktop-cta-text-shadow);
}

.wc-floating-video-player-cta:hover {
  background-color: var(--fpvp-desktop-cta-bg-hover);
}

.wc-floating-video-player-mobile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fpvp-text-color);
  cursor: pointer;
  font-weight: var(--fpvp-mobile-cta-font-weight);
  font-size: var(--fpvp-mobile-cta-font-size);
  text-transform: var(--fpvp-mobile-cta-text-transform);
  background-color: var(--fpvp-mobile-cta-bg);
  text-shadow: var(--fpvp-mobile-cta-text-shadow);
  transition: background-color 0.3s ease;
}

.wc-floating-video-player-mobile-overlay:hover {
  background-color: var(--fpvp-mobile-cta-bg-hover);
}

.wc-floating-video-player-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fpvp-text-color);
}

.wc-floating-video-player-close:hover {
  border-radius: 50%;
  background-color: var(--fpvp-close-hover-bg);
}

.wc-floating-video-player-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  cursor: move;
  background-color: transparent;
}

/* Enhanced Fullscreen Player Styles */
.wc-floating-video-player-fullscreen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  font-family: var(--fpvp-font-family);
  letter-spacing: var(--fpvp-letter-spacing);
  background-image: var(--fpvp-fullscreen-bg-image);
  background-size: var(--fpvp-fullscreen-bg-image-style);
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--fpvp-fullscreen-bg-color);
  overflow: hidden;
  touch-action: manipulation; /* Improve touch behavior */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Improved video frame for better responsiveness */
.wc-floating-video-player-fullscreen .video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 1200px; /* Prevent excessive stretching on large screens */
  height: calc(100% - 80px);
  max-height: 90vh; /* Ensure it doesn't overflow the viewport */
  border: var(--fpvp-video-frame-width) solid var(--fpvp-video-frame-color);
  border-radius: var(--fpvp-video-border-radius);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 5;

  /* Adjust frame size based on orientation */
  aspect-ratio: 16 / 9; /* Default aspect ratio */
}

/* Adjust video frame for portrait orientation */
@media screen and (orientation: portrait) {
  .wc-floating-video-player-fullscreen .video-frame {
    width: calc(100% - 40px);
    height: auto;
    max-height: 80vh;
  }
}

/* Adjust video frame for landscape orientation */
@media screen and (orientation: landscape) {
  .wc-floating-video-player-fullscreen .video-frame {
    height: calc(100% - 60px);
    width: auto;
    max-width: 90vw;
  }
}

/* Improved video display */
.wc-floating-video-player-fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Maintain aspect ratio */
  border-radius: calc(var(--fpvp-video-border-radius) - var(--fpvp-video-frame-width));
  background-color: #000; /* Add background to prevent transparency issues */
}

/* Add classes for video orientation */
.wc-floating-video-player-fullscreen video.portrait-video {
  object-fit: contain;
}

.wc-floating-video-player-fullscreen video.landscape-video {
  object-fit: contain;
}

/* Enhanced back button for better touch targets */
.wc-floating-video-player-fullscreen-back {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 44px; /* Larger for better touch target */
  height: 44px; /* Larger for better touch target */
  background: var(--fpvp-back-button-bg);
  border: none;
  color: var(--fpvp-back-button-color);
  padding: 0;
  cursor: pointer;
  z-index: 20;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Add shadow for better visibility */
}

.wc-floating-video-player-fullscreen-back:hover,
.wc-floating-video-player-fullscreen-back:active {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.7);
}

.wc-floating-video-player-fullscreen-back svg {
  width: 60%;
  height: 60%;
  stroke-width: 3;
}

/* Enhanced video controls for fullscreen */
.wc-floating-video-player-fullscreen .video-controls {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px; /* Taller controls for mobile */
  background: var(--fpvp-fullscreen-controls-bg-color);
  display: flex;
  align-items: center;
  padding: 0 15px;
  opacity: var(--fpvp-fullscreen-controls-opacity);
  border-radius: var(--fpvp-fullscreen-controls-border-radius);
  z-index: 10;
  transition: opacity 0.3s ease;
  bottom: 0;
}

/* Position controls based on setting */
.wc-floating-video-player-fullscreen .video-controls[data-position="bottom"] {
  bottom: 0;
}

.wc-floating-video-player-fullscreen .video-controls[data-position="top"] {
  top: 0;
  bottom: auto;
}

/* Larger control buttons for touch */
.wc-floating-video-player-fullscreen .play-pause-btn,
.wc-floating-video-player-fullscreen .mute-btn {
  background: none;
  border: none;
  color: var(--fpvp-controls-button-color);
  font-size: calc(var(--fpvp-controls-button-size) * 1.5); /* Larger font size */
  cursor: pointer;
  width: 50px; /* Fixed width for better touch */
  height: 50px; /* Fixed height for better touch */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.wc-floating-video-player-fullscreen .play-pause-btn:hover,
.wc-floating-video-player-fullscreen .mute-btn:hover,
.wc-floating-video-player-fullscreen .play-pause-btn:active,
.wc-floating-video-player-fullscreen .mute-btn:active {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.1); /* Subtle background on interaction */
}

/* Control sections */
.wc-floating-video-player-fullscreen .controls-left {
  flex: 0 0 auto;
  margin-right: 15px;
}

.wc-floating-video-player-fullscreen .controls-center {
  flex: 1;
  display: flex;
  align-items: center;
}

.wc-floating-video-player-fullscreen .controls-right {
  flex: 0 0 auto;
  margin-left: 15px;
}

/* Enhanced progress bar */
.wc-floating-video-player-fullscreen .progress-container {
  width: 100%;
  display: flex;
  align-items: center;
  height: 30px; /* Taller for better touch target */
  padding: 0 5px;
}

.wc-floating-video-player-fullscreen .progress-bar {
  width: 100%;
  height: 8px; /* Thicker for better visibility and touch */
  background-color: var(--fpvp-progress-bar-bg-color);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: height 0.2s ease;
}

.wc-floating-video-player-fullscreen .progress-bar:hover,
.wc-floating-video-player-fullscreen .progress-bar:active {
  height: 12px; /* Expand on hover/touch */
}

.wc-floating-video-player-fullscreen .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--fpvp-progress-bar-color);
  border-radius: 4px;
  width: 0;
  pointer-events: none;
}

/* Responsive rules */
@media (max-width: 768px) {
  .wc-floating-video-player {
    display: none !important;
  }
  .wc-floating-video-player-mobile.active {
    display: block;
  }

  /* Adjust fullscreen controls for small screens */
  .wc-floating-video-player-fullscreen .video-controls {
    padding: 0 10px;
  }

  .wc-floating-video-player-fullscreen .play-pause-btn,
  .wc-floating-video-player-fullscreen .mute-btn {
    width: 44px;
    height: 44px;
  }

  .wc-floating-video-player-fullscreen-back {
    top: 15px;
    left: 15px;
  }
}

@media (max-width: 480px) {
  /* Further adjustments for very small screens */
  .wc-floating-video-player-fullscreen .video-frame {
    width: calc(100% - 20px);
    height: calc(100% - 40px);
  }

  .wc-floating-video-player-fullscreen .video-controls {
    height: 50px;
  }
}

@media (min-width: 769px) {
  .wc-floating-video-player.active {
    display: block;
  }
  .wc-floating-video-player-mobile {
    display: none !important;
  }
}

/* Ensure aspect ratios are maintained on rotation */
@media screen and (orientation: landscape) {
  .wc-floating-video-player,
  .wc-floating-video-player-mobile {
    /* Maintain portrait orientation even in landscape mode */
    width: var(--fpvp-desktop-width);
    height: var(--fpvp-desktop-height);
  }
}

/* Apply italic style when text-transform is set to italic */
.wc-floating-video-player-cta[style*="text-transform: italic"],
.wc-floating-video-player-mobile-overlay[style*="text-transform: italic"],
.wc-floating-video-player-fullscreen-back[style*="text-transform: italic"] {
  font-style: italic;
}

/* Remove the tap-to-play class since we're focusing on autoplay */
.tap-to-play {
  display: none;
}

/* Add styles for the manual play button */
.manual-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.manual-play-button:before {
  content: "▶";
  margin-right: 8px;
  font-size: 20px;
}

.manual-play-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Custom video controls for exhibition page */
.video-controls {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--fpvp-controls-height);
  background: var(--fpvp-controls-bg-color);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space items evenly */
  padding: var(--fpvp-controls-padding);
  opacity: var(--fpvp-controls-opacity);
  border-radius: var(--fpvp-controls-border-radius);
  z-index: 10;
  transition: opacity 0.3s ease;
}

/* Play/pause button styling with hover effect */
.play-pause-btn,
.mute-btn {
  background: none;
  border: none;
  color: var(--fpvp-controls-button-color);
  font-size: var(--fpvp-controls-button-size);
  cursor: pointer;
  width: calc(var(--fpvp-controls-button-size) * 1.8);
  height: calc(var(--fpvp-controls-button-size) * 1.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.play-pause-btn:hover,
.mute-btn:hover {
  transform: scale(1.1);
  /* Removed background color */
}

.pause-icon,
.mute-icon {
  display: none;
}

.controls-left {
  flex: 0 0 auto;
  margin-right: 10px;
}

.controls-center {
  flex: 1;
  display: flex;
  align-items: center;
}

.controls-right {
  flex: 0 0 auto;
  margin-left: 10px;
}

.progress-container {
  width: 100%;
  display: flex;
  align-items: center;
}

.progress-bar {
  width: 100%;
  height: var(--fpvp-progress-bar-height);
  background-color: var(--fpvp-progress-bar-bg-color);
  border-radius: calc(var(--fpvp-progress-bar-height) / 2);
  position: relative;
  cursor: pointer;
  overflow: hidden; /* Ensure the fill doesn't overflow */
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--fpvp-progress-bar-color);
  border-radius: calc(var(--fpvp-progress-bar-height) / 2);
  width: 0;
  pointer-events: none; /* Allow clicks to pass through to the progress bar */
}

/* WooCommerce Floating Video Player - Frontend Styles */

.wc-floating-video-container {
  position: fixed;
  z-index: 999;
  background: #000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 320px;
  height: 180px;
}

.wc-floating-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 12px;
  cursor: move;
  user-select: none;
}

.wc-floating-video-title {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.wc-floating-video-controls {
  display: flex;
  gap: 8px;
}

.wc-floating-video-minimize,
.wc-floating-video-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 0 5px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.wc-floating-video-minimize:hover,
.wc-floating-video-close:hover {
  opacity: 1;
}

.wc-floating-video-wrapper {
  width: 100%;
  height: calc(100% - 32px);
  background: #000;
}

.wc-floating-video-wrapper video,
.wc-floating-video-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive styles */
@media (max-width: 767px) {
  .wc-floating-video-container {
    max-width: calc(100vw - 40px);
    max-height: calc(30vh);
  }

  .wc-floating-video-header {
    padding: 6px 10px;
  }

  .wc-floating-video-title {
    font-size: 12px;
  }
}

/* Animation for showing/hiding */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wc-floating-video-container.show {
  animation: fadeIn 0.3s ease forwards;
}