/* BG Video Controls Plugin CSS - Vereinfachte Icons Version */

/* Video-Basis-Regeln - wpb_row muss relative sein */
.wpb_row:has(.bg-video-controls-overlay) {
  position: relative !important;
}

/* Controls Container - Links vom ea11y-widget Button positioniert */
.bg-video-controls-overlay {
  position: absolute !important;
  bottom: 24px !important;
  right: 30px !important; /* 44px (Button) + 24px (deren right) + 32px (Abstand) = 100px */
  display: flex !important;
  gap: 5px !important;
  z-index: 99999998 !important; /* Eins niedriger als ea11y (99999999) */
  pointer-events: auto !important;
  isolation: isolate !important;
  transition: right 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Smooth Animation */
}

/* Beim Scrollen: Buttons bewegen sich ganz nach rechts (ea11y-Button Position) */
body.scrolled .bg-video-controls-overlay {
  right: -20px !important; /* Weiter rechts für bessere Positionierung */
}

/* Button Basis-Styling - Einheitliche Größe für alle */
.bg-video-controls-overlay button,
.bg-video-controls-overlay .bg-video-play,
.bg-video-controls-overlay .bg-video-volume-icon {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  z-index: 99999999 !important;
  position: relative !important;
  margin: 0 2px !important;
  font-weight: 300 !important;
  user-select: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
  isolation: isolate !important;
  will-change: transform !important;
  pointer-events: all !important;
}

/* Icon-Größe einheitlich für alle Geräte */
.bg-video-play::before,
.bg-video-volume-icon::before {
  width: 15px !important;
  height: 15px !important;
}

/* Play-Button Icons - Apple Style SVG - Optimiert für einheitliche Größe */
.bg-video-play::before {
  content: '';
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.95)'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E") !important;
  background-size: 15px 15px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.bg-video-play.playing::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.95)'%3E%3Cpath d='M6 4h4v16H6V4zm8 0h4v16h-4V4z'/%3E%3C/svg%3E") !important;
  background-size: 15px 15px !important;
}

/* Volume Icons - Apple Style SVG - Optimiert für einheitliche Größe */
.bg-video-volume-icon.volume-muted::before {
  content: '';
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.95)'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath d='m15 8 6 6M21 8l-6 6' stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 15px 15px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.bg-video-volume-icon.volume-on::before {
  content: '';
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.95)'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath d='m15 9 3 3-3 3'/%3E%3C/svg%3E") !important;
  background-size: 15px 15px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Hover-Effekte */
.bg-video-controls-overlay button:hover,
.bg-video-controls-overlay .bg-video-play:hover,
.bg-video-controls-overlay .bg-video-volume-icon:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Active-Effekte */
.bg-video-controls-overlay button:active,
.bg-video-controls-overlay .bg-video-play:active,
.bg-video-controls-overlay .bg-video-volume-icon:active {
  transform: scale(0.95) !important;
  transition: all 0.1s ease !important;
}

/* Video-Klick Funktionalität */
.nectar-video-bg,
video[data-video-bg="true"],
.vc_column-inner video {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
}

.vc_column-inner:has(video) {
  cursor: pointer !important;
  user-select: none !important;
}

.nectar-video-wrap {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Overlay nicht blockieren */
.nectar-video-wrap .column-bg-overlay-wrap {
  pointer-events: none !important;
}

/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  .bg-video-controls-overlay {
    bottom: 80px !important; /* Weiter nach oben, damit sie nicht überlagern */
    top: auto !important;
    right: 0px !important;
    flex-direction: column !important; /* Buttons vertikal statt horizontal */
    gap: 8px !important;
    align-items: flex-end !important; /* Alle Buttons rechtsbündig ausrichten */
  }
  
  /* Beim Scrollen auf Mobile: Position beibehalten */
  body.scrolled .bg-video-controls-overlay {
    right: 0px !important; /* Gleiche Position, keine Bewegung */
    bottom: 80px !important;
  }
  
  .bg-video-controls-overlay button,
  .bg-video-controls-overlay .bg-video-play,
  .bg-video-controls-overlay .bg-video-volume-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    margin: 0 !important; /* Margin entfernen für saubere Ausrichtung */
  }
  
  .bg-video-play::before,
  .bg-video-volume-icon::before {
    width: 18px !important;
    height: 18px !important;
  }
  
  .bg-video-play::before {
    background-size: 18px 18px !important;
  }
  
  .bg-video-play.playing::before {
    background-size: 18px 18px !important;
  }
  
  .bg-video-volume-icon.volume-muted::before,
  .bg-video-volume-icon.volume-on::before {
    background-size: 18px 18px !important;
  }
}

/* Fallback für Browser ohne Emoji-Support */
@media screen and (monochrome), screen and (max-color: 2) {
  .bg-video-volume-icon.volume-muted::before {
    content: '✕' !important;
    color: #ff6b6b !important;
  }
  
  .bg-video-volume-icon.volume-on::before {
    content: '♪' !important;
    color: #6bcf7f !important;
  }
  
  .bg-video-play::before {
    content: '►' !important;
    color: #ffffff !important;
  }
  
  .bg-video-play.playing::before {
    content: '❚❚' !important;
    color: #ffffff !important;
  }
}