/* Vídeos dos Clips (módulo js/videos.js). Herda as cores do loja.css. */

/* selo discreto dentro do contador de fotos do card */
.selo-video { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.selo-video-sep { opacity: .6; }

/* miniatura do vídeo na galeria (60×60 como as fotos) */
.gal-miniaturas .gal-mini-video { position: relative; display: grid; place-items: center; }
.gal-miniaturas .gal-mini-video img { position: absolute; inset: 0; opacity: .45; }
.gal-miniaturas .gal-mini-video span {
  position: relative; z-index: 1; font-size: .75rem; font-weight: 700; line-height: 1.15; text-align: center;
  color: #FFFFFF; background: rgba(15, 26, 43, .82); border-radius: 6px; padding: 3px 5px;
}

/* palco: poster + botão grande; o <video> só ganha controles depois do toque */
.vid-caixa { position: relative; width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: hidden; display: grid; place-items: center; }
.vid-caixa video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; background: #000; border-radius: 12px; }
.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 56px; padding: 12px 22px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 700 1rem/1 var(--f-titulo, inherit); color: #FFFFFF; background: rgba(15, 26, 43, .88);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.vid-play:hover { background: var(--navy, #0F1A2B); }
.vid-play:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.vid-play[disabled] { opacity: .7; cursor: progress; }
.vid-play-ico { font-size: 1.25rem; }
.vid-caixa.tocando .vid-play { display: none; }
.vid-caixa.carregando .vid-play span:last-child::after { content: '\2026'; }
.vid-aviso {
  position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 10px 12px; border-radius: 10px;
  font-size: .875rem; color: var(--alerta-ink, #5A3B00); background: var(--alerta-bg, #FFF4D6); text-align: center;
}