/* ════════════════════════════════════════════════════════════════════
   MeTeach English — Shorts
   css/shorts.css — feed vertical estilo YouTube Shorts dentro da view
   "Shorts" do app (#view-shorts). Sempre em tema escuro (igual a
   qualquer feed de vídeo em tela cheia), independente do tema
   claro/escuro do resto do site.
   ════════════════════════════════════════════════════════════════════ */

#view-shorts{ padding:0 !important; background:#05080f; }
#view-shorts.active{ display:block; }

.mts-wrap{
  position:relative;
  height:calc(100vh - 0px);
  background:#05080f;
}
@supports (height: 100dvh){ .mts-wrap{ height:100dvh; } }

.mts-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#9aa8b8; font:600 15px/1.4 Nunito,sans-serif;
}

.mts-feed{
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.mts-feed::-webkit-scrollbar{ display:none; }

.mts-slide{
  position:relative;
  height:100%;
  width:100%;
  max-width:480px;
  margin:0 auto;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#0b1016;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.mts-video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#0b1016;
}

.mts-topbar{
  position:absolute; top:0; left:0; right:0;
  padding:18px 16px;
  display:flex; justify-content:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
  pointer-events:none;
}
.mts-count{
  font:700 13px Nunito,sans-serif; color:#cfd8e6;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);
  border-radius:99px; padding:4px 12px;
}

.mts-meta{
  position:absolute; left:18px; right:70px; bottom:28px;
  color:#fff; pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.mts-meta-brand{ font:800 13px Nunito,sans-serif; color:#4a9eff; margin-bottom:4px; }
.mts-meta-cat{ font:800 19px Nunito,sans-serif; line-height:1.3; }

/* Botão "assistir": aparece enquanto o Short está parado (nada toca sozinho ao abrir). */
.mts-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%;
  background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.85);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0 0 0 5px; transition:opacity .2s ease;
}
.mts-slide.mts-tocando .mts-play{ opacity:0; pointer-events:none; }

/* ── Card de bloqueio (short premium) ───────────────────────────── */
.mts-slide.mts-locked{
  background:radial-gradient(circle at 50% 30%, #182338, #05080f 70%);
}
.mts-locked-card{
  width:min(86%,360px);
  text-align:center;
  padding:34px 26px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
}
.mts-lock-icon{
  width:62px; height:62px; margin:0 auto 18px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,149,43,.16); color:#ff9b2b;
}
.mts-locked-cat{ font:700 13px Nunito,sans-serif; color:#8fa2c2; margin-bottom:6px; }
.mts-locked-title{ font:900 22px Nunito,sans-serif; color:#fff; margin-bottom:10px; }
.mts-locked-sub{ font:500 14px/1.6 Nunito,sans-serif; color:#aab7cc; margin:0 0 22px; }
.mts-locked-btns{ display:flex; flex-direction:column; gap:10px; }
.mts-btn{
  border:none; border-radius:12px; padding:13px 18px; font:800 14px Nunito,sans-serif;
  cursor:pointer;
}
.mts-btn-primary{ background:linear-gradient(90deg,#f5a623,#ffad3d); color:#1a1200; }
.mts-btn-primary:hover{ filter:brightness(1.06); }
.mts-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); }
.mts-btn-ghost:hover{ background:rgba(255,255,255,.14); }

@media(min-width:900px){
  .mts-slide{ border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
  .mts-feed{ padding:24px 0; }
}

/* ── Versão "encaixada" (aba Shorts dentro da Sala de Aula) ────────
   Em vez de tela cheia, mostra como uma vitrine de celular dentro
   do card da aba, do mesmo jeito que as outras abas (Vídeos,
   MeGame etc.) mostram o conteúdo dentro de um cartão. ─────────── */
.mtm-page .mts-wrap.mts-embed{
  height:min(760px,78vh);
  max-width:380px;
  margin:10px auto 40px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(15,37,72,.18);
  border:1px solid #0b1016;
}
.mtm-page .mts-wrap.mts-embed .mts-slide{ border-radius:0; }
.mtm-page .mts-warn{
  max-width:380px; margin:0 auto 14px; padding:12px 16px;
  background:#fff4e5; border:1px solid #ffd79a; color:#8a5a00;
  border-radius:12px; font:600 13px/1.5 Nunito,sans-serif; text-align:center;
}