/* =========================================================
   WL — Vídeo de Abertura (modal)
   Todas as classes usam o prefixo .wl-va para não afetar o site.
   ========================================================= */

.wl-va {
  /* Ajustes visuais rápidos */
  --wl-va-ratio: 0.5625;               /* largura/altura (definido no PHP) */
  --wl-va-max-w: 92vw;                 /* largura máxima na tela */
  --wl-va-max-h: 86vh;                 /* altura máxima na tela */
  --wl-va-limite: 1100px;              /* teto para telas muito grandes */
  --wl-va-fundo: rgba(10, 12, 10, .72);/* escurecimento do fundo */
  --wl-va-duracao: 240ms;

  position: fixed;
  inset: 0;
  z-index: 100000; /* acima da barra de admin (99999) e do modal de ajuda (3000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity var(--wl-va-duracao) ease;
}
@supports (height: 100dvh) {
  .wl-va { --wl-va-max-h: 86dvh; }
}
.wl-va[hidden] { display: none; }
.wl-va.is-aberto { opacity: 1; }

.wl-va__fundo {
  position: absolute;
  inset: 0;
  background: var(--wl-va-fundo);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.wl-va__caixa {
  position: relative;
  width: min(var(--wl-va-max-w), calc(var(--wl-va-max-h) * var(--wl-va-ratio)), var(--wl-va-limite));
  aspect-ratio: var(--wl-va-ratio);
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: translateY(12px) scale(.96);
  transition: transform var(--wl-va-duracao) cubic-bezier(.2, .8, .2, 1);
}
.wl-va.is-aberto .wl-va__caixa { transform: none; }

.wl-va__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* nunca corta o vídeo */
  background: #000;
}

/* Botão Fechar — sempre por cima do vídeo */
.wl-va__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px 8px 11px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #262429;
  font: 600 14px/1 var(--font-body, system-ui, sans-serif);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.wl-va__fechar:hover { background: #FDB900; }
.wl-va__fechar:active { transform: scale(.96); }
.wl-va__fechar:focus-visible {
  outline: 3px solid #62BA14;
  outline-offset: 2px;
}

/* Trava a rolagem da página enquanto o vídeo está aberto */
html.wl-va-travado,
html.wl-va-travado body { overflow: hidden; }

@media (max-width: 480px) {
  .wl-va { padding: 10px; }
  .wl-va__caixa { border-radius: 10px; }
  .wl-va__fechar { top: 8px; right: 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-va, .wl-va__caixa { transition: none; }
}