/* Player de vídeo/áudio do site (public/js/fb-player.js). Sem JS, vale o player nativo com a altura limitada. */
.fbp-bloco { margin: 18px 0; }
.fbp-bloco > video { display: block; width: 100%; max-height: 75vh; background: #000; border-radius: 12px; object-fit: contain; }
.fbp-bloco > audio { display: block; width: 100%; }

.fbp {
  --fbp-max: 75vh;             /* altura máxima do vídeo na página (vertical não passa disso) */
  --r: 1.7778;                 /* proporção largura/altura; o JS troca pela real do vídeo */
  --fbp-cor: #84d94a;
  position: relative; box-sizing: border-box; margin: 0 auto; overflow: hidden; border-radius: 14px;
  background: #000; color: #fff; outline: none;
  width: min(100%, calc(var(--fbp-max) * var(--r)));
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.fbp:focus-visible { box-shadow: 0 0 0 3px rgba(132, 217, 74, .6); }
.fbp * { box-sizing: border-box; }
.fbp-stage { position: relative; width: 100%; aspect-ratio: var(--r); max-height: var(--fbp-max); background: #000; }
.fbp-stage video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; background: #000; border-radius: 0; display: block; }

/* botões */
.fbp [hidden] { display: none !important; }
.fbp-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; flex: none; min-width: 34px; height: 34px; padding: 0 4px; border-radius: 10px; color: #fff; font: 700 12px/1 system-ui, sans-serif; transition: background .15s, transform .15s; }
.fbp-btn:hover { background: rgba(255, 255, 255, .14); }
.fbp-btn:active { transform: scale(.94); }
.fbp-btn:focus-visible { outline: 2px solid var(--fbp-cor); outline-offset: 1px; }
.fbp-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* botão grande no centro: verde-limão com o triângulo branco */
.fbp-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; min-width: 84px; padding: 0; border-radius: 50%; background: var(--fbp-cor); color: #fff; box-shadow: 0 0 0 10px rgba(132, 217, 74, .28), 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .2s, transform .2s, box-shadow .2s; }
.fbp-big:hover { background: #95e55c; transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 14px rgba(132, 217, 74, .28), 0 12px 34px rgba(0, 0, 0, .4); }
.fbp-big svg { width: 42px; height: 42px; margin-left: 5px; }
.fbp--playing .fbp-big, .fbp--erro .fbp-big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }

.fbp-spin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 4px solid rgba(255, 255, 255, .3); border-top-color: var(--fbp-cor); border-radius: 50%; opacity: 0; pointer-events: none; animation: fbp-gira .8s linear infinite; }
.fbp--wait .fbp-spin { opacity: 1; }
@keyframes fbp-gira { to { transform: rotate(360deg); } }
.fbp-err { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; background: rgba(0, 0, 0, .78); font-size: 14px; }

/* barra de controles: escura, arredondada, flutuando sobre o vídeo (no áudio fica fixa) */
.fbp-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 8px; border-radius: 16px; background: rgba(15, 23, 42, .9); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .25s, transform .25s; }
.fbp--idle .fbp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.fbp--idle { cursor: none; }
.fbp--audio { background: #0f172a; border-radius: 16px; }
.fbp--audio .fbp-bar { position: static; margin: 0; border-radius: 0; background: none; box-shadow: none; padding: 8px 10px; backdrop-filter: none; }
.fbp-row { display: flex; align-items: center; gap: 6px; }
.fbp-time { flex: none; font-variant-numeric: tabular-nums; padding: 0 4px; white-space: nowrap; font-size: 13px; }
.fbp-speed { min-width: 40px; }

.fbp-prog { position: relative; flex: 1 1 auto; min-width: 40px; height: 22px; cursor: pointer; touch-action: none; outline: none; }
.fbp-prog::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); transition: height .12s, top .12s; }
.fbp-prog i { position: absolute; left: 0; top: 8px; height: 6px; border-radius: 6px; width: 0; transition: height .12s, top .12s; }
.fbp-buf { background: rgba(255, 255, 255, .22); }
.fbp-played { background: var(--fbp-cor); }
.fbp-knob { position: absolute; top: 4px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); transform: scale(0); transition: transform .12s; }
.fbp-prog:hover .fbp-knob, .fbp-prog:focus-visible .fbp-knob { transform: scale(1); }
.fbp-prog:hover::before, .fbp-prog:hover i { top: 7px; height: 8px; }

/* volume: o ícone de som e, ao passar o mouse, a barrinha (no celular só o ícone) */
.fbp-volbox { display: inline-flex; align-items: center; flex: none; }
.fbp-vol { -webkit-appearance: none; appearance: none; width: 0; opacity: 0; height: 4px; margin: 0; border-radius: 4px; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .2s, opacity .2s, margin .2s; }
.fbp-volbox:hover .fbp-vol, .fbp-volbox:focus-within .fbp-vol { width: 64px; opacity: 1; margin: 0 8px 0 2px; }
.fbp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.fbp-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
@media (max-width: 520px) {
  .fbp-vol { display: none; }
  .fbp-big { width: 68px; height: 68px; min-width: 68px; }
  .fbp-big svg { width: 34px; height: 34px; }
  .fbp-bar { left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; }
  .fbp-row { gap: 2px; }
  .fbp-btn { min-width: 32px; height: 32px; }
  .fbp-speed { display: none; }
}

/* tela cheia */
.fbp:fullscreen { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
.fbp:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
.fbp:fullscreen .fbp-stage { aspect-ratio: auto; height: 100%; max-height: none; }
.fbp:-webkit-full-screen .fbp-stage { aspect-ratio: auto; height: 100%; max-height: none; }

/* página do embed (iframe em outro site): ocupa todo o quadro */
.fbp-embedpage { margin: 0; height: 100vh; background: #000; overflow: hidden; }
.fbp-embedpage .fbp-bloco { margin: 0; height: 100vh; }
.fbp-embedpage .fbp { width: 100vw; height: 100vh; margin: 0; border-radius: 0; max-width: none; }
.fbp-embedpage .fbp-stage { aspect-ratio: auto; height: 100%; max-height: none; }
.fbp-embedpage--audio { background: #0b3d1b; display: grid; align-items: center; }
.fbp-embedpage--audio .fbp-bloco { height: auto; padding: 8px; }
.fbp-embedpage--audio .fbp { height: auto; }

/* editor da matéria: o bloco do player com o X para remover (o X nunca é salvo: o servidor o descarta) */
#richEditor .fbp-bloco { position: relative; max-width: 480px; margin: 14px 0; border: 2px dashed #94a3b8; border-radius: 14px; padding: 6px; background: #f8fafc; }
#richEditor .fbp-bloco > video { max-height: 55vh; margin: 0 auto; }
#richEditor .fbp-x { position: absolute; top: -12px; right: -12px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; background: #dc2626; color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
#richEditor .fbp-x::before { content: "\00d7"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px/1 system-ui, sans-serif; }
#richEditor .fbp-x:hover { background: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .fbp *, .fbp-big { transition: none !important; animation: none !important; } }