/* IPTV da Casa - modo celular (iPhone, iPad e Android no navegador).
   Só vale com <html class="mobile">, ligado no index.html. Samsung, LG, VIDAA, Xbox e PC não usam nada daqui.
   A tela virtual tem 720 px de largura em pé (ou 720 de altura deitado) e é escalada para o aparelho;
   em vez das setas do controle, tudo rola com o dedo e o toque abre. */

html.mobile, html.mobile body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

/* telas cheias acompanham o tamanho da tela virtual */
html.mobile #loading, html.mobile #activation, html.mobile #details, html.mobile #player, html.mobile #profiles,
html.mobile #dialog, html.mobile #video, html.mobile #avplayer { width: 100% !important; height: 100% !important; }

/* sem efeito de foco do controle remoto: no toque ele só atrapalha */
html.mobile .focus, html.mobile .btn.focus, html.mobile .card.focus, html.mobile .nav.focus,
html.mobile #profiles .tile.focus, html.mobile .ob.focus { -webkit-transform: none !important; transform: none !important; }
html.mobile .card.focus, html.mobile .cat.focus, html.mobile .row.focus, html.mobile .ep.focus,
html.mobile .opt.focus, html.mobile .btn.focus { border-color: transparent !important; }
html.mobile .card, html.mobile .btn, html.mobile .nav { -webkit-transition: none; transition: none; }

/* rolagem com o dedo */
html.mobile #home, html.mobile #grid, html.mobile #details, html.mobile #settings, html.mobile #cats .list,
html.mobile .rail .track, html.mobile #seasons { -webkit-overflow-scrolling: touch; }

/* ---------- carregando ---------- */
html.mobile #loading img { margin-top: 38%; width: 130px; height: 130px; }

/* ---------- ativação ---------- */
html.mobile #activation { overflow-y: auto; }
html.mobile #activation .card { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 24px; padding: 34px 30px 30px; border-radius: 26px; }
html.mobile #activation .hint { background: #1B2B45; border-radius: 16px; padding: 18px 22px; font-size: 19px; line-height: 1.5; color: #D1D5DB; margin-bottom: 26px; }
html.mobile #activation .hint b { color: #fff; }
html.mobile #activation h1 { font-size: 38px; }
html.mobile #activation .sub { font-size: 21px; }
html.mobile #activation .ids { margin-top: 28px; }
html.mobile #activation .id { margin-right: 0; }
html.mobile #activation .id.code { width: 100%; padding: 22px 26px; }
html.mobile #activation .id.code .v { font-size: 74px; letter-spacing: 10px; }
html.mobile #activation .ids.small .id { width: calc(50% - 8px) !important; margin-right: 12px; padding: 12px 16px; }
html.mobile #activation .ids.small .id:last-child { margin-right: 0; }
html.mobile #activation .ids.small .id .v { font-size: 22px; }
html.mobile #activation .steps { font-size: 20px; margin-top: 28px; line-height: 1.7; }
html.mobile #activation .row .btn { margin: 0 12px 12px 0; }

/* ---------- barra de seções: vira abas embaixo ---------- */
html.mobile #sidebar { top: auto; bottom: 0; width: 100%; height: 132px; border-right: 0; border-top: 2px solid rgba(255,255,255,0.08);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; padding: 6px 4px 26px; }
html.mobile #sidebar .logo, html.mobile #sidebar .brand { display: none; }
html.mobile .nav { position: relative; left: auto; top: auto !important; width: 96px; height: 96px; font-size: 15px; border: 0; }
html.mobile .nav img { width: 34px; height: 34px; margin-top: 14px; }
html.mobile #main { left: 0; top: 0; width: 100%; height: calc(100% - 132px); }

/* ---------- Início: tudo numa coluna que rola ---------- */
html.mobile #home { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
html.mobile #home .head { position: relative; left: auto; top: auto; padding: 30px 150px 0 30px; }
html.mobile #home .hello { font-size: 36px; }
html.mobile #home .counts { font-size: 19px; }
html.mobile #home .chip { position: relative; right: auto; top: auto; display: inline-block; margin: 16px 30px 0; font-size: 16px; padding: 10px 16px; }
html.mobile #home .clock { right: 30px; top: 30px; font-size: 30px; }
html.mobile #home #hero, html.mobile #home #hero.hidden { display: block !important; position: relative; top: auto; width: 100%; height: 470px; margin-top: 16px; }
html.mobile #hero .bd, html.mobile #hero .fade { width: 100%; height: 470px; }
html.mobile #hero .fade { background: linear-gradient(to top, #07080A 0%, rgba(7,8,10,0.75) 45%, rgba(7,8,10,0.1) 100%); }
html.mobile #hero .info { left: 30px; right: 30px; top: auto; bottom: 10px; width: auto; }
html.mobile #hero h2 { font-size: 42px; white-space: normal; max-height: 104px; }
html.mobile #hero .plot { font-size: 19px; height: 56px; }
html.mobile #hero .acts { white-space: normal; margin-top: 18px; }
html.mobile #hero .acts .btn { margin: 0 12px 12px 0; height: 62px; line-height: 58px; font-size: 22px; padding: 0 26px; }
html.mobile #heroLast { max-width: 100%; }
html.mobile #rails { position: relative !important; top: auto !important; height: auto !important; width: 100%; overflow: visible; margin-top: 10px; }
html.mobile #rails .inner { position: relative; width: 100%; -webkit-transform: none !important; transform: none !important; }
html.mobile .rail, html.mobile .rail.ch { height: auto; padding-bottom: 26px; }
html.mobile .rail h3 { position: relative; left: auto; top: auto; padding: 0 30px; font-size: 26px; margin-bottom: 14px; }
html.mobile .rail h3 span { display: block; margin: 4px 0 0; font-size: 16px; }
html.mobile .rail .track { position: relative; left: auto; top: auto; height: auto; padding: 0 30px; overflow-x: auto; overflow-y: hidden;
  -webkit-transform: none !important; transform: none !important; }
html.mobile .rail .card.poster { width: 180px; height: 266px; margin-right: 16px; }
html.mobile .rail .card.channel { width: 300px; height: 130px; margin-right: 16px; }
html.mobile .card.channel .logo { width: 84px; height: 84px; top: 20px; }
html.mobile .card.channel .nm { left: 118px; top: 30px; font-size: 21px; }
html.mobile .card.channel .lv { left: 118px; top: 70px; }
html.mobile .rail .card.resume { width: 320px; height: 220px; }
html.mobile .card.resume .img { height: 162px; }
html.mobile .card.resume .bar { top: 158px; }
html.mobile .card.resume .nm { top: 172px; }

/* ---------- Canais, Filmes, Séries, Favoritos ---------- */
html.mobile #browse { width: 100%; height: 100%; }
html.mobile #bhead { left: 30px; top: 22px; width: calc(100% - 60px); }
html.mobile #bhead .t { font-size: 32px; max-width: 70%; }
html.mobile #bhead .n { font-size: 17px; }
html.mobile #cats { left: 0; top: 104px; width: 100%; height: 76px; background: transparent; border-right: 0; }
html.mobile #cats .h { display: none; }
html.mobile #cats .list { left: 0; top: 0; width: 100%; height: 76px; overflow-x: auto; overflow-y: hidden; }
html.mobile #cats .list .inner { position: relative; width: auto; white-space: nowrap; padding: 0 22px 0 30px; -webkit-transform: none !important; transform: none !important; }
html.mobile .cat { display: inline-block; height: 56px; line-height: 50px; margin: 10px 10px 0 0; padding: 0 22px; background: #141822; font-size: 19px; max-width: 420px; }
html.mobile #search { left: 30px; right: 30px; top: 196px; width: auto; height: 62px; font-size: 20px; }
html.mobile #searchIcon { left: 50px; right: auto; top: 214px; }
html.mobile #grid { left: 0; top: 274px; width: 100%; height: calc(100% - 274px); overflow-y: auto; overflow-x: hidden; padding: 8px 14px 40px 30px; }
html.mobile #grid .card.poster { width: 204px; height: 302px; margin: 0 16px 18px 0; }
html.mobile #grid .card.channel { width: calc(100% - 16px); height: 120px; margin: 0 0 14px 0; }
html.mobile #grid .card.channel .logo { top: 16px; }
html.mobile #grid .card.channel .nm { top: 26px; }
html.mobile #grid .card.channel .lv { top: 66px; }

/* ---------- detalhes ---------- */
html.mobile #details { overflow-y: auto; overflow-x: hidden; }
html.mobile #dtBack { position: absolute; left: 24px; top: 24px; z-index: 5; height: 58px; line-height: 54px; font-size: 21px; padding: 0 22px; background: rgba(20,24,34,0.85); }
html.mobile #details .bd, html.mobile #details .fade { width: 100%; height: 520px; }
html.mobile #details .fade { background: linear-gradient(to top, #07080A 0%, rgba(7,8,10,0.4) 60%, rgba(7,8,10,0.2) 100%); }
html.mobile #details .poster { position: relative; left: auto; top: auto; width: 230px; height: 340px; margin: 110px auto 0; }
html.mobile #details .info { position: relative; left: auto; top: auto; width: auto; padding: 26px 30px 0; }
html.mobile #details h1 { font-size: 36px; }
html.mobile #details .meta { font-size: 19px; }
html.mobile #details .plot { font-size: 20px; max-height: none; }
html.mobile #details .acts .btn { margin: 0 12px 12px 0; }
html.mobile #seasons { position: relative; left: auto; top: auto; width: 100%; padding: 20px 30px 0; overflow-x: auto; overflow-y: hidden;
  -webkit-transform: none !important; transform: none !important; }
html.mobile #seasons .btn { margin-bottom: 4px; }
html.mobile #episodes { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 16px 30px 40px; overflow: visible; }
html.mobile #episodes .inner { position: relative; width: auto; -webkit-transform: none !important; transform: none !important; }
html.mobile .ep { height: auto; line-height: 1.4; padding: 18px 20px; white-space: normal; font-size: 20px; }
html.mobile .ep .w { float: none; display: block; margin-top: 4px; }

/* ---------- ajustes ---------- */
html.mobile #settings { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
html.mobile #settings h1 { position: relative; left: auto; top: auto; padding: 30px 30px 0; font-size: 34px; }
html.mobile #settings .box { position: relative; left: auto; top: auto; width: auto; margin: 20px 30px 0; -webkit-transform: none !important; transform: none !important; }
html.mobile .row .l { font-size: 22px; }
html.mobile .row input { font-size: 22px; height: 62px; }
html.mobile #settings .about { position: relative; left: auto; top: auto; width: auto; margin: 10px 30px 40px; font-size: 19px; }

/* ---------- player: controles do aparelho + botão Voltar ---------- */
html.mobile #player #osd, html.mobile #player #osd.hidden { display: block !important; pointer-events: none; }
html.mobile #osd .top { width: 100%; height: 150px; }
html.mobile #osd .bot, html.mobile #pProg, html.mobile #pBtns, html.mobile #pGroup, html.mobile #pInfo .pill,
html.mobile #pInfo .sub, html.mobile #pZap, html.mobile #pRetry { display: none !important; }
html.mobile #pBack { left: 24px; top: 24px; pointer-events: auto; height: 58px; line-height: 54px; font-size: 21px; padding: 0 22px; }
html.mobile #pInfo { left: 190px; right: 24px; top: 32px; bottom: auto; width: auto; }
html.mobile #pInfo .name { font-size: 24px; margin-top: 0; }
html.mobile #pspin { left: 50%; top: 50%; margin: -23px 0 0 -23px; }
html.mobile #skipBtn { right: 24px; bottom: 150px; }
html.mobile #nextCard { right: 24px; bottom: 150px; width: calc(100% - 48px); }
html.mobile #tracks { left: 24px; right: 24px; width: auto; top: 120px; }

/* ---------- perfis, diálogos e avisos ---------- */
html.mobile #profiles { overflow-y: auto; }
html.mobile #profiles h1 { margin-top: 140px; font-size: 40px; }
html.mobile #profiles .tiles { height: auto; margin-top: 50px; padding: 0 20px; }
html.mobile #profiles .tile { width: 190px; margin: 0 10px 30px; }
html.mobile #profiles .sq { width: 160px; height: 160px; line-height: 160px; font-size: 72px; }
html.mobile #dialog .box { left: 30px; right: 30px; width: auto; top: 22%; padding: 36px 30px; }
html.mobile #dialog .acts .btn { margin: 0 8px 12px; }
html.mobile #toast { bottom: 170px; max-width: 90%; font-size: 20px; }
html.mobile .row .d { padding-right: 104px; }