/**
 * YouTube Background Widget Styles
 * Izolované CSS bez globálních overrides
 */

/* ========== CONTAINER ========== */
.yt-bg-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  /* Výška se nastavuje přes Elementor controls */
}

/* Fullwidth breakout - bezpečný způsob bez overflow: visible */
.yt-bg-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ========== VIDEO WRAPPER ========== */
.yt-bg-video-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Rozměry se vypočítají v JS pro cover effect */
  width: 100%;
  height: 100%;
  pointer-events: none; /* Žádné klikání na video */
}

.yt-bg-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.yt-bg-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none; /* Blokuje YouTube UI interakce */
}

/* ========== LOADING STATE ========== */
.yt-bg-container.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: yt-bg-spin 0.8s linear infinite;
  z-index: 1;
}

@keyframes yt-bg-spin {
  to { transform: rotate(360deg); }
}

.yt-bg-container.loaded::before {
  display: none;
}

/* ========== RESPONSIVE ADAPTACE ========== */
/* Mobilní zařízení - žádné černé pruhy */
@media (max-width: 767px) {
  .yt-bg-container {
    /* Na mobilu se výška dynamicky přepočítává v JS podle zoom */
  }
  
  /* Zajistí, že video bude vždy cover, nikdy contain */
  .yt-bg-video-wrapper {
    min-width: 100%;
    min-height: 100%;
  }
}

/* ========== ELEMENTOR EDITOR ========== */
.elementor-editor-active .yt-bg-container {
  /* V editoru zobrazíme placeholder */
  min-height: 300px;
}

.elementor-editor-active .yt-bg-container::after {
  content: '▶ YouTube Background';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 2;
}

/* ========== SOUND TOGGLE ========== */
.yt-bg-sound-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: calc(var(--yt-sound-size, 62px) * 1.23);
  height: calc(var(--yt-sound-size, 62px) * 1.23);
  min-width: calc(var(--yt-sound-size, 62px) * 1.23) !important;
  min-height: calc(var(--yt-sound-size, 62px) * 1.23) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  color: #fff !important;
  line-height: 1 !important;
  z-index: 999 !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
}

.yt-bg-sound-toggle:hover,
.yt-bg-sound-toggle:active,
.yt-bg-sound-toggle:focus,
.yt-bg-sound-toggle:focus-visible {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

.yt-bg-sound-toggle svg {
  width: var(--yt-sound-size, 62px) !important;
  height: var(--yt-sound-size, 62px) !important;
  min-width: var(--yt-sound-size, 62px) !important;
  min-height: var(--yt-sound-size, 62px) !important;
  display: block !important;
  opacity: 1 !important;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.12s ease;
  pointer-events: none;
}

.yt-bg-sound-toggle:hover svg {
  opacity: 1 !important;
}

.yt-bg-sound-toggle:active svg {
  transform: scale(0.92);
}

.yt-bg-sound-toggle .icon-on,
.yt-bg-sound-toggle .icon-off {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.yt-bg-sound-toggle .icon-on {
  display: none !important;
  visibility: hidden !important;
}

.yt-bg-sound-toggle .icon-off {
  display: block !important;
  visibility: visible !important;
}

.yt-bg-sound-toggle.is-unmuted .icon-on {
  display: block !important;
  visibility: visible !important;
}

.yt-bg-sound-toggle.is-unmuted .icon-off {
  display: none !important;
  visibility: hidden !important;
}

.yt-bg-sound-toggle *,
.yt-bg-sound-toggle::before,
.yt-bg-sound-toggle::after {
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: none !important;
}

@media (max-width: 767px) {
  .yt-bg-sound-toggle {
    right: 12px;
    bottom: 12px;
    width: calc(var(--yt-sound-size, 62px) * 1.08);
    height: calc(var(--yt-sound-size, 62px) * 1.08);
    min-width: calc(var(--yt-sound-size, 62px) * 1.08) !important;
    min-height: calc(var(--yt-sound-size, 62px) * 1.08) !important;
  }

  .yt-bg-sound-toggle svg {
    width: calc(var(--yt-sound-size, 62px) * 0.85) !important;
    height: calc(var(--yt-sound-size, 62px) * 0.85) !important;
    min-width: calc(var(--yt-sound-size, 62px) * 0.85) !important;
    min-height: calc(var(--yt-sound-size, 62px) * 0.85) !important;
  }
}


/* ========== SOUND TOGGLE CORNERS ========== */
.yt-sound-corner-top-left .yt-bg-sound-toggle {
  left: 18px;
  top: 18px;
  right: auto;
  bottom: auto;
}

.yt-sound-corner-top-right .yt-bg-sound-toggle {
  right: 18px;
  top: 18px;
  left: auto;
  bottom: auto;
}

.yt-sound-corner-bottom-left .yt-bg-sound-toggle {
  left: 18px;
  bottom: 18px;
  right: auto;
  top: auto;
}

.yt-sound-corner-bottom-right .yt-bg-sound-toggle {
  right: 18px;
  bottom: 18px;
  left: auto;
  top: auto;
}

@media (max-width: 767px) {
  .yt-sound-corner-top-left .yt-bg-sound-toggle {
    left: 12px;
    top: 12px;
    right: auto;
    bottom: auto;
  }

  .yt-sound-corner-top-right .yt-bg-sound-toggle {
    right: 12px;
    top: 12px;
    left: auto;
    bottom: auto;
  }

  .yt-sound-corner-bottom-left .yt-bg-sound-toggle {
    left: 12px;
    bottom: 12px;
    right: auto;
    top: auto;
  }

  .yt-sound-corner-bottom-right .yt-bg-sound-toggle {
    right: 12px;
    bottom: 12px;
    left: auto;
    top: auto;
  }
}


.yt-sound-corner-middle-right .yt-bg-sound-toggle {
  right: 18px;
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
}

.yt-sound-corner-top-left .yt-bg-sound-toggle,
.yt-sound-corner-top-right .yt-bg-sound-toggle,
.yt-sound-corner-bottom-left .yt-bg-sound-toggle,
.yt-sound-corner-bottom-right .yt-bg-sound-toggle {
  transform: none;
}

@media (max-width: 767px) {
  .yt-sound-corner-middle-right .yt-bg-sound-toggle {
    right: 12px;
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  .yt-bg-sound-toggle svg {
    opacity: var(--yt-sound-mobile-opacity, 0.75) !important;
  }

  .yt-bg-sound-toggle:hover svg {
    opacity: var(--yt-sound-mobile-opacity, 0.75) !important;
  }
}


/* ========== CLICK TO PLAY MODE ========== */
.yt-bg-play-overlay {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(92px, 10vw, 150px);
  height: clamp(92px, 10vw, 150px);
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1001;
}

.yt-bg-play-overlay:hover,
.yt-bg-play-overlay:focus,
.yt-bg-play-overlay:active,
.yt-bg-play-overlay:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

.yt-bg-play-overlay-inner,
.yt-bg-play-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}

.yt-play-mode-autoplay .yt-bg-play-overlay {
  display: none !important;
}

.yt-play-mode-click .yt-bg-sound-toggle {
  display: none !important;
}

.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay {
  display: block;
}

.yt-play-mode-click.play-started .yt-bg-play-overlay {
  display: none !important;
}

.yt-play-mode-click .yt-bg-video-wrapper,
.yt-play-mode-click .yt-bg-player,
.yt-play-mode-click .yt-bg-player iframe {
  pointer-events: auto !important;
}

@media (max-width: 767px) {
  .yt-bg-play-overlay {
    width: clamp(84px, 24vw, 120px);
    height: clamp(84px, 24vw, 120px);
  }
}


/* Clean lazy click-to-play: no YouTube UI before click */
.yt-play-mode-click.waiting-for-play .yt-bg-video-wrapper,
.yt-play-mode-click.waiting-for-play .yt-bg-player {
  background: transparent !important;
}

.yt-play-mode-click.waiting-for-play .yt-bg-player iframe {
  opacity: 0 !important;
  pointer-events: none !important;
}

.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay {
  display: block !important;
  opacity: 1 !important;
}

.yt-play-mode-click.play-started .yt-bg-play-overlay {
  display: none !important;
}



.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay:hover,
.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay:focus,
.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay:active,
.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay:focus-visible {
  opacity: 1 !important;
}


/* Preview thumbnail before click - matches same cover math as video */
.yt-bg-preview-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.yt-bg-preview-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.yt-bg-play-overlay {
  overflow: hidden;
}

.yt-bg-play-overlay-inner {
  position: relative;
  z-index: 1;
}

.yt-play-mode-click.waiting-for-play .yt-bg-preview-layer {
  display: block !important;
}

.yt-play-mode-click.play-started .yt-bg-preview-layer {
  display: none !important;
}

.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

.yt-play-mode-click.waiting-for-play .yt-bg-play-overlay svg {
  width: clamp(92px, 10vw, 150px);
  height: clamp(92px, 10vw, 150px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .yt-play-mode-click.waiting-for-play .yt-bg-play-overlay svg {
    width: clamp(84px, 24vw, 120px);
    height: clamp(84px, 24vw, 120px);
  }
}


/* Mobile native YouTube controls in click-to-play mode */
@media (max-width: 767px) {
  .yt-play-mode-click.mobile-native-youtube .yt-bg-play-overlay,
  .yt-play-mode-click.mobile-native-youtube .yt-bg-preview-layer {
    display: none !important;
  }

  .yt-play-mode-click.mobile-native-youtube .yt-bg-video-wrapper,
  .yt-play-mode-click.mobile-native-youtube .yt-bg-player,
  .yt-play-mode-click.mobile-native-youtube .yt-bg-player iframe {
    pointer-events: auto !important;
  }
}


/* Native YouTube controls in click-to-play mode on all devices */
.yt-play-mode-click.native-youtube-controls .yt-bg-play-overlay,
.yt-play-mode-click.native-youtube-controls .yt-bg-preview-layer,
.yt-play-mode-click.native-youtube-controls .yt-bg-sound-toggle {
  display: none !important;
}

.yt-play-mode-click.native-youtube-controls .yt-bg-video-wrapper,
.yt-play-mode-click.native-youtube-controls .yt-bg-player,
.yt-play-mode-click.native-youtube-controls .yt-bg-player iframe {
  pointer-events: auto !important;
}