/* Player dos vídeos (public/js/player-videos.js): Te explico! do app e site eflight.app.br.
   O vídeo numa moldura de celular e, abaixo, um cartão da mesma largura com o progresso, o nome, a barra e o
   "Solicitar convite"; nunca em tela cheia. Opção A aprovada em 18/10: fundo claro, celular azul-marinho. */
.ex-player { --ex-larg: min(78vw, calc((100dvh - 250px) * 720 / 1340 + 20px));
  position: fixed; inset: 0; z-index: 3000; background: rgba(238, 241, 246, 0.97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); color: #12203a; }
.ex-player[hidden] { display: none; }
/* com o "Solicitar convite" o cartão de baixo fica mais alto: o celular encolhe um pouco */
.ex-player.com-convite { --ex-larg: min(78vw, calc((100dvh - 300px) * 720 / 1340 + 20px)); }

/* a moldura: raio externo 40, laterais e base 10 → raio interno 30; faixa de cima 26 com a ilha da câmera */
.ex-moldura { width: var(--ex-larg); border-radius: 40px; background: #0e1a33; padding: 26px 10px 10px; position: relative;
  box-shadow: 0 0 0 1px rgba(14, 26, 51, 0.25), 0 18px 40px rgba(14, 26, 51, 0.28); }
.ex-moldura::before { content: ""; position: absolute; top: 9px; left: 50%; width: 56px; height: 9px; margin-left: -28px; border-radius: 6px; background: #22304d; }
.ex-moldura video { display: block; width: 100%; aspect-ratio: 720 / 1340; border-radius: 22px 22px 30px 30px; background: #000; object-fit: cover; }

/* o cartão de baixo, da largura do celular */
.ex-abaixo { width: var(--ex-larg); display: grid; gap: 9px; justify-items: center; background: #fff; border-radius: 24px; padding: 12px 12px 14px;
  box-shadow: 0 0 0 1px rgba(14, 26, 51, 0.08), 0 10px 24px rgba(14, 26, 51, 0.12); }
.ex-prog { width: 100%; height: 3px; border-radius: 3px; background: rgba(14, 26, 51, 0.12); overflow: hidden; }
.ex-prog i { display: block; height: 100%; width: 0; background: #c9952a; }
.ex-info { text-align: center; display: grid; gap: 1px; }
.ex-info b { font: 600 15px 'Outfit', sans-serif; }
.ex-info small { color: #5b677c; font-size: 12px; }
.ex-barra { display: flex; gap: 6px; background: #0e1a33; border-radius: 99px; padding: 5px; }
.ex-barra button { all: unset; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; }
.ex-barra button:hover { background: rgba(255, 255, 255, 0.12); }
.ex-barra button:focus-visible { outline: 2px solid #f2c75c; }
.ex-barra .ex-principal { background: #f2c75c; color: #0e1a33; }
.ex-barra svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* o convite com a largura da barra: 5 botões de 40, 4 vãos de 6 e 5 de borda de cada lado */
.ex-convite { justify-self: center; width: calc(5 * 40px + 4 * 6px + 10px); box-sizing: border-box; text-align: center; background: #f2c75c; color: #0e1a33; font: 700 14px "Outfit", sans-serif; border-radius: 99px; padding: 11px 24px; text-decoration: none; }
.ex-convite[hidden] { display: none; }
.ex-convite:focus-visible { outline: 2px solid #0e1a33; outline-offset: 2px; }
.ex-aviso { margin: 0; text-align: center; font-size: 12.5px; color: #12203a; background: #eef1f6; border-radius: 10px; padding: 7px 12px; overflow-wrap: anywhere; }
.ex-aviso[hidden] { display: none; }
html.ex-aberto { overflow: hidden; }