/*
 * Maná Kids — Player de vídeo (player.css)
 * Modal de vídeo em tela cheia, container 16:9 responsivo, barra de assistido,
 * card de próxima história, modal de upgrade e placeholder "em produção".
 * Animações respeitam prefers-reduced-motion (bloco final).
 */

/* ===================== Modal de vídeo ===================== */
#videoModal,
#upgradeModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: #140427;
  color: #fff;
  overflow-y: auto;
}
#videoModal.active,
#upgradeModal.active {
  display: block;
  animation: modalEntra 280ms ease both;
}
#videoModal.saindo,
#upgradeModal.saindo { animation: modalSai 220ms ease both; }

/* Header do modal */
.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(20, 4, 39, 0.92);
  backdrop-filter: blur(6px);
}
.modal-header .historia-titulo { font-family: var(--fonte-titulo); font-weight: 800; }
.modal-header button {
  min-height: var(--toque-min);
  min-width: var(--toque-min);
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 1rem;
}
.modal-header button:hover { background: rgba(255, 255, 255, 0.22); }

/* Container do vídeo (16:9 responsivo) */
.video-container {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-container #youtubePlayer,
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Overlay de loading */
#videoLoading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #0d0220;
  color: #fff;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--cor-secundaria);
  animation: girar 0.9s linear infinite;
}

/* ===================== Controles ===================== */
.video-controls {
  max-width: 980px;
  margin-inline: auto;
  padding: 1.2rem 1rem 3rem;
}

/* Barra de progresso de assistido */
.watch-progress { margin-bottom: 1rem; }
.watch-progress .progress-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.watch-progress #watchedBar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria));
  border-radius: 999px;
  transition: width 400ms ease;
}
.watch-progress #watchedPct {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--fonte-numeros);
  font-weight: 700;
  font-size: 0.85rem;
  color: #d9c9ff;
}

.historia-info h2 { color: #fff; }
.historia-info .moral { color: var(--cor-secundaria); font-weight: 700; margin-top: 0.4rem; }

/* Botão "Marcar como concluída" (destacado) */
.btn-completar {
  display: none;
  width: 100%;
  min-height: 56px;
  margin-top: 1.2rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cor-secundaria), #ffb347);
  color: #3a2400;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.4);
  animation: pulso 1.6s ease-in-out infinite;
}
.btn-completar:hover { filter: brightness(1.05); }

/* Card da próxima história */
.proxima-historia { margin-top: 1.6rem; }
.proxima-historia > span { color: #b7a6e0; font-weight: 700; font-size: 0.9rem; }
.proxima-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-grande);
  cursor: pointer;
}
.proxima-card:hover { background: rgba(255, 255, 255, 0.16); }
.proxima-card .proxima-emoji { font-size: 2rem; }
.proxima-card .proxima-titulo { font-family: var(--fonte-titulo); font-weight: 800; }

/* Placeholder "vídeo em produção" */
.video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0533, #2d1b69);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: #fff;
}
.video-placeholder .pl-emoji { font-size: 5rem; margin-bottom: 1rem; }
.video-placeholder .pl-tag {
  margin-top: 1.2rem;
  background: rgba(245, 166, 35, 0.2);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  font-size: 0.85rem;
  color: var(--cor-secundaria);
  font-weight: 700;
}

/* ===================== Modal de upgrade (bloqueio) ===================== */
#upgradeModal .upgrade-box {
  max-width: 440px;
  margin: 10vh auto;
  background: #fff;
  color: var(--cor-texto);
  border-radius: var(--raio-grande);
  padding: 2rem 1.6rem;
  text-align: center;
  box-shadow: var(--sombra-flutuante);
}
#upgradeModal .upgrade-box .cadeado { font-size: 3.5rem; }
.precos-preview {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}
.precos-preview .preco-chip {
  background: #f3edfb;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--fonte-numeros);
  font-weight: 800;
  color: var(--cor-primaria);
}

/* ===================== Grid de histórias (cards de vídeo) ===================== */
.historia-card { position: relative; cursor: pointer; padding: 0; overflow: hidden; }
.historia-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #6c3fc8, #f5a623);
  display: grid;
  place-items: center;
  font-size: 3.4rem;
}
.historia-thumb img { width: 100%; height: 100%; object-fit: cover; }
.historia-thumb .play-icon {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: grid; place-items: center;
  color: #fff; font-size: 1.3rem;
}
.historia-card .corpo { padding: 0.9rem 1rem 1.1rem; }
.badge-conteudo {
  position: absolute; top: 10px; left: 10px;
  font-size: 0.72rem; font-weight: 800;
  padding: 0.25rem 0.7rem; border-radius: 999px;
}
.badge-gratis { background: var(--cor-acento); color: #06351f; }
.badge-plus { background: #6c3fc8; color: #fff; }
.badge-feita { position: absolute; top: 10px; right: 10px; font-size: 1.2rem; }

/* ===================== Keyframes ===================== */
@keyframes modalEntra { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
@keyframes modalSai { from { opacity: 1; } to { opacity: 0; } }

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce) {
  #videoModal.active, #upgradeModal.active, #videoModal.saindo, #upgradeModal.saindo { animation: none; }
  .btn-completar, .loading-spinner { animation: none; }
}