/* Popup de vídeo (mow-video-modal.js). Tudo scoped em .mow-vm para não depender do tema. */
.mow-vm-lock { overflow: hidden !important; padding-right: var(--mow-vm-scrollbar, 0); }

.mow-vm {
  --mow-vm-green: #b6d337;
  --mow-vm-ink: #313041;
  --mow-vm-ratio: 1.7778;
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .22s ease;
  font-family: "DM Sans", system-ui, sans-serif;
}
.mow-vm[hidden] { display: none; }
.mow-vm.is-open { opacity: 1; }

.mow-vm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 22, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.mow-vm__dialog {
  position: relative;
  width: min(1100px, 100%, calc((100dvh - 136px) * var(--mow-vm-ratio)));
  transform: translateY(12px) scale(.98);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  outline: none;
}
.mow-vm.is-open .mow-vm__dialog { transform: none; }

.mow-vm__stage {
  position: relative;
  aspect-ratio: var(--mow-vm-ratio);
  overflow: hidden;
  border-radius: 1.5rem;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}

.mow-vm__clip { position: absolute; inset: 0; }
/* O iframe é sempre 16:9 à largura do palco e fica centrado; um palco mais panorâmico corta-lhe
   o topo e a base, onde vivem o título e a barra "Mais vídeos" do YouTube. */
.mow-vm .mow-vm__clip iframe,
.mow-vm .mow-vm__mount {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(1.006); /* evita a linha de 1px preta por arredondamento */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.mow-vm.is-ready .mow-vm__clip iframe { opacity: 1; }
.mow-vm.is-ended .mow-vm__clip iframe { opacity: 0; }

/* Camada por cima do iframe: apanha o clique (play/pause) e bloqueia os links do YouTube. */
.mow-vm .mow-vm__surface {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mow-vm .mow-vm__surface:focus-visible { outline: 3px solid var(--mow-vm-green); outline-offset: -3px; border-radius: 1.5rem; }

.mow-vm__state {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  background: var(--mow-vm-green);
  color: var(--mow-vm-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.mow-vm__state svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.mow-vm.is-paused .mow-vm__state { opacity: 1; transform: none; }

.mow-vm__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--mow-vm-green);
  border-radius: 50%;
  opacity: 0;
  animation: mow-vm-spin .8s linear infinite;
  transition: opacity .2s ease;
}
.mow-vm.is-loading .mow-vm__spinner { opacity: 1; }
@keyframes mow-vm-spin { to { transform: rotate(360deg); } }

.mow-vm .mow-vm__close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mow-vm .mow-vm__close svg { width: 20px; height: 20px; }
.mow-vm .mow-vm__close:hover { background: var(--mow-vm-green); color: var(--mow-vm-ink); transform: rotate(90deg); }
.mow-vm .mow-vm__close:focus-visible { outline: 3px solid var(--mow-vm-green); outline-offset: 2px; }

@media (max-width: 600px) {
  .mow-vm { padding: 12px; }
  .mow-vm__stage { border-radius: 1rem; }
  .mow-vm__state { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .mow-vm__state svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .mow-vm, .mow-vm__dialog, .mow-vm__state, .mow-vm .mow-vm__close, .mow-vm__clip iframe { transition: none; }
  .mow-vm .mow-vm__close:hover { transform: none; }
  .mow-vm__spinner { animation-duration: 1.6s; }
}