/* Adaptação para navegadores desktop, tablet e celular. */
html.web-browser, html.web-browser body { min-width: 0; min-height: 100%; }
.web-browser .menu, .web-browser .card, .web-browser .home3Card, .web-browser .movieBtn,
.web-browser .searchKey, .web-browser .searchTab, .web-browser .searchResult { cursor: pointer; }
.web-browser #avPlayerObject { display: none !important; }
.web-browser #player { width: 100%; height: 100%; object-fit: contain; }
.web-browser * { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1100px) {
  .web-browser #sidebar { width: 220px; }
  .web-browser #content { left: 220px; }
  .web-browser .home3Card { transform-origin: center; }
}

@media (max-width: 760px) {
  .web-browser body { overflow-x: hidden; }
  .web-browser #app { display: block; }
  .web-browser #sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 68px; z-index: 5000;
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    overflow-x: auto; overflow-y: hidden;
    background: rgba(7,9,14,.96); backdrop-filter: blur(16px);
  }
  .web-browser #brand { display: none; }
  .web-browser .menu {
    flex: 0 0 auto; min-width: max-content; padding: 12px 14px; margin: 0;
    font-size: 14px; border-radius: 12px;
  }
  .web-browser #content {
    position: absolute; left: 0; right: 0; top: 0; bottom: 68px;
    padding-left: 16px; padding-right: 16px;
  }
  .web-browser #topbar { padding-top: 18px; }
  .web-browser #topbar h1 { font-size: 30px; }
  .web-browser #clockHome { font-size: 18px; }
  .web-browser .home3RowList { overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
  .web-browser .home3Card { scroll-snap-align: start; }
  .web-browser #items:not(.home3Items) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .web-browser .card { width: auto !important; min-width: 0; }
  .web-browser #movieContent { padding: 24px 18px 90px; overflow-y: auto; }
  .web-browser #moviePoster { width: 34vw; min-width: 120px; }
  .web-browser #movieTitle { font-size: 34px; }
  .web-browser #searchScreen { overflow-y: auto; padding-bottom: 90px; }
  .web-browser #playerSidePanel { width: 100%; }
}

@media (max-width: 430px) {
  .web-browser #items:not(.home3Items) { grid-template-columns: 1fr 1fr; }
  .web-browser #status { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .web-browser #movieContent { display: block; }
  .web-browser #moviePoster { width: 44vw; margin-bottom: 18px; }
}


/* RibeiroTV Web v5: marca principal na navegação, sem texto ao lado. */
.web-browser #brand.brand-logo-only #brandLogoImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Marca d'água discreta dentro do player. */
.web-browser #playerWatermarkLogo {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 92px;
  height: 68px;
  object-fit: contain;
  opacity: .82;
  z-index: 10018;
  pointer-events: none;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.72));
}

/* Botão visível para mouse/toque ao abrir canal, filme ou série. */
.web-browser #playerBackButton {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 10025;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(5,9,16,.78);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
}
.web-browser #playerBackButton:hover,
.web-browser #playerBackButton:focus-visible {
  background: rgba(26,93,210,.92);
  border-color: rgba(93,159,255,.95);
  outline: none;
}
.web-browser #playerBackButton .playerBackArrow {
  font-size: 24px;
  line-height: 1;
}

/* Evita que as informações superiores fiquem atrás do botão Voltar. */
.web-browser #playerTop {
  left: 128px;
}

@media (max-width: 700px) {
  .web-browser #playerWatermarkLogo {
    left: 14px;
    bottom: 14px;
    width: 70px;
    height: 52px;
  }
  .web-browser #playerBackButton {
    left: 12px;
    top: 12px;
    min-height: 40px;
    padding: 0 12px;
  }
  .web-browser #playerTop {
    left: 105px;
  }
}


/* =========================================================
   RibeiroTV Web v9 - rolagem e controles por mouse/toque
   ========================================================= */
.web-browser body {
  overflow: hidden;
}

/* O menu lateral pode ser maior que a altura da tela. */
.web-browser #sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.78) rgba(255,255,255,.06);
  padding-bottom: 34px;
}

/* A lista principal também deve responder à roda do mouse/touchpad. */
.web-browser #items {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.78) rgba(255,255,255,.06);
  padding-right: 10px;
}

.web-browser #sidebar::-webkit-scrollbar,
.web-browser #items::-webkit-scrollbar {
  width: 10px;
}
.web-browser #sidebar::-webkit-scrollbar-track,
.web-browser #items::-webkit-scrollbar-track {
  background: rgba(255,255,255,.045);
  border-radius: 999px;
}
.web-browser #sidebar::-webkit-scrollbar-thumb,
.web-browser #items::-webkit-scrollbar-thumb {
  background: rgba(96,165,250,.72);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.22);
}
.web-browser #sidebar::-webkit-scrollbar-thumb:hover,
.web-browser #items::-webkit-scrollbar-thumb:hover {
  background: rgba(96,165,250,.96);
}

/* Home: preserva a rolagem vertical já prevista pelo layout. */
.web-browser #items.home3Items {
  overflow-y: auto !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Player: clique/toque revela os controles. */
.web-browser #playerScreen {
  cursor: default;
  touch-action: manipulation;
}
.web-browser #playerOverlay {
  z-index: 10020;
}
.web-browser #playerBackButton {
  z-index: 10030;
}
.web-browser #playerWatermarkLogo {
  z-index: 10019;
  transition: opacity .2s ease;
}
.web-browser #playerOverlay:not(.hide) ~ #playerWatermarkLogo,
.web-browser #playerScreen.controls-visible #playerWatermarkLogo {
  opacity: .55;
}

.web-browser #playerControls {
  pointer-events: auto;
}
.web-browser #playerControls .playerControl {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  padding: 0 14px;
}
.web-browser #playerControls .playerControl.main {
  color: #07101f;
}
.web-browser #playerControls .playerControl:hover,
.web-browser #playerControls .playerControl:focus-visible {
  transform: scale(1.06);
  border-color: rgba(111,168,255,.95);
  box-shadow: 0 0 0 3px rgba(22,119,255,.28);
  outline: none;
}
.web-browser #playerFullscreenButton,
.web-browser #playerMuteButton {
  min-width: 58px;
}

/* No celular o menu inferior continua rolável horizontalmente. */
@media (max-width: 760px) {
  .web-browser #sidebar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px;
  }
  .web-browser #content {
    overflow: hidden;
  }
  .web-browser #items {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .web-browser #playerBottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 12px 12px;
  }
  .web-browser #playerControls {
    gap: 8px;
    flex-wrap: wrap;
  }
  .web-browser #playerControls .playerControl {
    min-width: 54px;
    height: 44px;
    line-height: 42px;
    padding: 0 10px;
  }
  .web-browser #playerControls .playerControl.main {
    width: 54px;
    height: 54px;
    line-height: 52px;
  }
}

/* =========================================================
   RibeiroTV Web v10 - responsivo universal
   Desktop | notebook | celular | tablet | TV Box | Android TV
   ========================================================= */
:root {
  --rtv-safe-top: env(safe-area-inset-top, 0px);
  --rtv-safe-right: env(safe-area-inset-right, 0px);
  --rtv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rtv-safe-left: env(safe-area-inset-left, 0px);
}
.web-browser, .web-browser body { width:100%; max-width:100%; min-width:0; }
.web-browser body { overscroll-behavior:none; }
.web-browser img, .web-browser video { max-width:100%; }
.web-browser button, .web-browser input { font:inherit; }

/* Desktop / notebook */
@media (min-width: 1201px) {
  .web-browser #sidebar { width:250px; }
  .web-browser #content { left:250px; }
  .web-browser #items:not(.home3Items):not(.liveDashboardItems) {
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  }
}

/* Tablet landscape / telas médias */
@media (min-width: 761px) and (max-width: 1200px) {
  .web-browser #sidebar { width:190px; }
  .web-browser #content { left:190px; }
  .web-browser #brand.brand-logo-only #brandLogoImg { width:124px; height:124px; }
  .web-browser .menu { font-size:16px; padding-left:16px; padding-right:12px; }
  .web-browser #items:not(.home3Items):not(.liveDashboardItems) {
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  }
  .liveFeaturedRow,.liveAllGrid { grid-template-columns:repeat(4,minmax(130px,1fr)); }
}

/* Tablet portrait */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .web-browser #sidebar {
    width:156px; padding-left:8px; padding-right:8px;
  }
  .web-browser #content { left:156px; }
  .web-browser #brand.brand-logo-only #brandLogoImg { width:104px; height:104px; }
  .web-browser .menu { font-size:14px; padding:13px 10px; }
  .web-browser #topbar h1,.web-browser #title { font-size:30px !important; }
  .web-browser #items:not(.home3Items):not(.liveDashboardItems) {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  }
  .liveFeaturedRow,.liveAllGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Celular: navegação fixa embaixo e conteúdo rolável */
@media (max-width: 600px) {
  .web-browser body { overflow:hidden; }
  .web-browser #sidebar {
    position:fixed !important;
    left:0; right:0; top:auto !important; bottom:0;
    width:100% !important; height:calc(70px + var(--rtv-safe-bottom)) !important;
    padding:8px 8px calc(8px + var(--rtv-safe-bottom)) !important;
    display:flex; flex-direction:row; align-items:center; gap:7px;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .web-browser #sidebar .menu {
    flex:0 0 auto; min-width:104px; min-height:48px; margin:0 !important;
    padding:10px 12px; display:flex; justify-content:center; align-items:center;
    text-align:center; font-size:13px; scroll-snap-align:center;
  }
  .web-browser #brand { display:none !important; }
  .web-browser #content {
    position:fixed !important;
    inset:var(--rtv-safe-top) 0 calc(70px + var(--rtv-safe-bottom)) 0 !important;
    padding:0 12px !important; overflow:hidden !important;
  }
  .web-browser #topbar { min-height:86px; padding:14px 4px 8px !important; }
  .web-browser #topbar h1,.web-browser #title { font-size:27px !important; line-height:1.05; }
  .web-browser #status { font-size:12px; max-width:72vw; }
  .web-browser #items {
    left:0 !important; right:0 !important;
    padding-left:4px !important; padding-right:4px !important;
    padding-bottom:28px !important;
  }
  .web-browser #items:not(.home3Items):not(.liveDashboardItems) {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important;
  }
  .web-browser .card { min-width:0 !important; }
  .web-browser #items.liveDashboardItems { top:92px !important; bottom:0 !important; padding:0 4px 28px !important; }
  .liveDashToolbar { padding-top:4px; }
  .liveDashSearch { height:48px; }
  .liveDashSection h2 { font-size:20px; }
  .liveAllGrid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px; }
  .liveFeaturedCard { flex-basis:155px; min-height:190px; }
  .liveDashName { font-size:14px; }
  .liveDashGroup { font-size:11px; }

  /* Player ocupa a viewport e respeita notch/barra gestual */
  .web-browser #playerScreen {
    position:fixed !important; inset:0 !important;
    width:100vw !important; height:100dvh !important;
  }
  .web-browser #playerBackButton {
    left:calc(10px + var(--rtv-safe-left)); top:calc(10px + var(--rtv-safe-top));
    min-height:42px; font-size:14px;
  }
  .web-browser #playerWatermarkLogo {
    left:calc(10px + var(--rtv-safe-left));
    bottom:calc(88px + var(--rtv-safe-bottom));
    width:60px; height:44px;
  }
  .web-browser #playerBottom {
    left:calc(8px + var(--rtv-safe-left)) !important;
    right:calc(8px + var(--rtv-safe-right)) !important;
    bottom:calc(8px + var(--rtv-safe-bottom)) !important;
    padding:10px !important;
  }
  .web-browser #playerControls {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px !important;
  }
  .web-browser #playerControls .playerControl {
    width:100% !important; min-width:0 !important; height:42px !important;
    padding:0 5px !important; font-size:14px;
  }
  .web-browser #playerControls .playerControl.main { height:46px !important; }
  .web-browser #playerTop { left:100px !important; right:10px !important; top:10px !important; }
}

/* Celulares muito estreitos */
@media (max-width: 380px) {
  .web-browser #sidebar .menu { min-width:92px; font-size:12px; }
  .web-browser #items:not(.home3Items):not(.liveDashboardItems) { grid-template-columns:1fr 1fr !important; }
  .liveAllGrid { grid-template-columns:1fr 1fr !important; }
  .web-browser #playerControls .playerControl span { display:none; }
}

/* TV Box / Android TV / telas 10-foot UI */
.web-browser.tv-ui #sidebar { width:270px; }
.web-browser.tv-ui #content { left:270px; }
.web-browser.tv-ui .menu { min-height:58px; font-size:20px; border:2px solid transparent; }
.web-browser.tv-ui .menu.active,
.web-browser.tv-ui .menu:focus-visible,
.web-browser.tv-ui .focused,
.web-browser.tv-ui button:focus-visible,
.web-browser.tv-ui input:focus-visible {
  outline:3px solid #58a0ff !important;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(36,121,255,.22),0 10px 28px rgba(0,0,0,.38) !important;
}
.web-browser.tv-ui .card,
.web-browser.tv-ui .home3Card,
.web-browser.tv-ui .liveDashCard,
.web-browser.tv-ui .liveFeaturedCard { transform-origin:center; }
.web-browser.tv-ui #items:not(.home3Items):not(.liveDashboardItems) {
  grid-template-columns:repeat(5,minmax(170px,1fr)); gap:20px;
}
.web-browser.tv-ui .liveFeaturedRow,.web-browser.tv-ui .liveAllGrid {
  grid-template-columns:repeat(5,minmax(155px,1fr)); gap:18px;
}
.web-browser.tv-ui #playerControls .playerControl { min-width:76px; height:58px; font-size:20px; }
.web-browser.tv-ui #playerControls .playerControl.main { width:70px; height:70px; }

/* TV 720p */
@media (min-width: 1000px) and (max-height: 760px) {
  .web-browser.tv-ui #sidebar { width:220px; }
  .web-browser.tv-ui #content { left:220px; }
  .web-browser.tv-ui #brand.brand-logo-only #brandLogoImg { width:110px; height:110px; }
  .web-browser.tv-ui .menu { min-height:46px; font-size:17px; }
  .web-browser.tv-ui #items:not(.home3Items):not(.liveDashboardItems) { grid-template-columns:repeat(5,minmax(135px,1fr)); }
}

/* Touch: alvos maiores e sem hover preso */
.web-browser.touch-ui .menu,
.web-browser.touch-ui button,
.web-browser.touch-ui .card,
.web-browser.touch-ui .home3Card,
.web-browser.touch-ui .liveDashCard,
.web-browser.touch-ui .liveFeaturedCard { min-touch-target-size:44px; }
@media (hover:none) {
  .web-browser .liveFeaturedCard:hover,.web-browser .liveDashCard:hover { transform:none; }
}

/* =========================================================
   RibeiroTV Web v11 - visual clean / image first
   Mais banner, menos ruído visual
   ========================================================= */
.web-browser {
  --clean-bg:#05080d;
  --clean-panel:#0b111a;
  --clean-panel-2:#0f1723;
  --clean-border:rgba(255,255,255,.08);
  --clean-muted:#95a3b8;
  --clean-accent:#2382ff;
}
.web-browser body { background:var(--clean-bg); }
.web-browser #backgroundImage { opacity:.11; filter:blur(28px); }
.web-browser #backgroundGradient {
  background:linear-gradient(90deg,rgba(3,6,10,.98),rgba(3,6,10,.72),rgba(3,6,10,.94));
}
.web-browser #sidebar {
  background:rgba(5,9,14,.94);
  border-right:1px solid var(--clean-border);
  box-shadow:none;
}
.web-browser .menu {
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  border-radius:13px;
  margin-bottom:7px;
}
.web-browser .menu.active,
.web-browser .menu.focus,
.web-browser .menu:hover {
  background:rgba(35,130,255,.13);
  border-color:rgba(76,151,255,.35);
  box-shadow:none;
}
.web-browser #content { background:transparent; }
.web-browser #topbar { background:linear-gradient(180deg,rgba(5,8,13,.88),rgba(5,8,13,0)); }

/* Hero mais cinematográfico, com texto ocupando menos espaço. */
.web-browser #homeHero {
  border:1px solid var(--clean-border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.web-browser #homeHeroShade {
  background:linear-gradient(90deg,rgba(3,6,10,.92) 0%,rgba(3,6,10,.60) 36%,rgba(3,6,10,.12) 68%,rgba(3,6,10,.32) 100%),
             linear-gradient(0deg,rgba(3,6,10,.72),transparent 55%);
}
.web-browser #homeHeroContent { max-width:48%; }
.web-browser #homeHeroTitle { font-size:clamp(30px,3vw,48px); line-height:1.04; }
.web-browser #homeHeroPlot { max-width:650px; color:#c6d0dd; line-height:1.45; }
.web-browser .homeHeroButton { border-radius:999px; padding-left:18px; padding-right:18px; }

/* Linhas da home: cabeçalho discreto e cards com mais imagem. */
.web-browser .home3Row { margin-bottom:24px; }
.web-browser .home3RowHeader { margin-bottom:8px; }
.web-browser .home3RowIcon { opacity:.75; }
.web-browser .home3RowTitle { font-size:22px; font-weight:750; letter-spacing:-.2px; }
.web-browser .home3RowCount { opacity:.6; }
.web-browser .home3RowList {
  height:250px;
  padding:7px 4px 18px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.web-browser .home3RowList::-webkit-scrollbar { height:5px; }
.web-browser .home3RowList::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:8px; }
.web-browser .home3Card {
  width:310px;
  height:225px;
  margin-right:14px;
  border-radius:16px;
  border:1px solid var(--clean-border);
  background:var(--clean-panel);
  box-shadow:none;
  scroll-snap-align:start;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.web-browser .home3CardImage {
  height:172px;
  background-size:cover;
  background-position:center;
  background-color:#0c1118;
}
/* Canal: logo inteira visível, sem cortar. */
.web-browser .home3Card-live .home3CardImage,
.web-browser .home3Card-lastchannel .home3CardImage {
  background-size:contain;
  background-color:#080d13;
  padding:6px;
}
.web-browser .home3CardInfo { height:53px; padding:8px 11px 7px; }
.web-browser .home3CardTitle { font-size:16px; height:22px; line-height:21px; }
.web-browser .home3CardSub { font-size:12px; height:18px; line-height:17px; opacity:.78; }
.web-browser .home3CardTypeIcon { display:none !important; }
.web-browser .home3Card.focus,
.web-browser .home3Card:hover {
  transform:translateY(-3px) scale(1.018);
  border-color:rgba(74,151,255,.9);
  background:var(--clean-panel-2);
  box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 0 2px rgba(35,130,255,.20);
}

/* Filmes e séries: pôster grande e título limpo. */
.web-browser .home3Row-movie .home3RowList,
.web-browser .home3Row-series .home3RowList { height:385px; }
.web-browser .home3Card-movie,
.web-browser .home3Card-series { width:205px; height:360px; }
.web-browser .home3Card-movie .home3CardImage,
.web-browser .home3Card-series .home3CardImage { height:302px; background-size:cover; }
.web-browser .home3Card-movie .home3Placeholder,
.web-browser .home3Card-series .home3Placeholder { height:302px; line-height:302px; }
.web-browser .home3Card-movie .home3CardInfo,
.web-browser .home3Card-series .home3CardInfo { height:58px; }

/* Grade de canais: imagem/logo ocupa quase todo o card. */
.web-browser .card-live {
  width:270px;
  height:210px;
  border:1px solid var(--clean-border);
  border-radius:16px;
  background:var(--clean-panel);
  box-shadow:none;
  overflow:hidden;
}
.web-browser .card-live .cardLogo {
  height:160px;
  background-size:contain;
  background-position:center;
  background-color:#090e15;
}
.web-browser .card-live .logoPlaceholder { height:160px; line-height:160px; }
.web-browser .card-live .cardTitle {
  height:50px;
  line-height:50px;
  font-size:16px;
  font-weight:700;
  text-align:left;
  padding:0 14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Filmes: pôster mais largo/alto, metadados sem ocupar imagem. */
.web-browser .card.card-movie {
  width:220px !important;
  height:390px !important;
  margin:10px !important;
  border-radius:16px;
  border:1px solid var(--clean-border);
  background:var(--clean-panel);
  box-shadow:none;
}
.web-browser .card-movie .moviePosterBanner { height:318px !important; }
.web-browser .card-movie .cardTitle { font-size:16px !important; height:39px !important; padding:9px 11px 0 !important; }
.web-browser .card-movie .cardSub { font-size:12px !important; height:27px !important; padding:0 11px !important; color:var(--clean-muted); }
.web-browser .card.card-movie.focus,
.web-browser .card.card-movie:hover {
  background:var(--clean-panel-2);
  border-color:rgba(74,151,255,.9);
  box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 0 2px rgba(35,130,255,.20);
  transform:translateY(-3px) scale(1.018);
}

/* Badges menores para não cobrir banners. */
.web-browser .home3LiveBadge,
.web-browser .qualityBadge,
.web-browser .smartBadge,
.web-browser .newBadge,
.web-browser .continueBadge,
.web-browser .favoriteBadge,
.web-browser .watchedBadge {
  transform:scale(.88);
  transform-origin:top left;
}

/* Celular: 1 card de canal bem visível ou 2 posters. */
@media (max-width:600px) {
  .web-browser #homeHero { min-height:235px; border-radius:15px; }
  .web-browser #homeHeroContent { max-width:75%; padding-left:16px; }
  .web-browser #homeHeroTitle { font-size:25px; }
  .web-browser #homeHeroPlot { display:none; }
  .web-browser #homeHeroClock { display:none; }
  .web-browser .home3RowList { height:218px; }
  .web-browser .home3Card { width:78vw; max-width:320px; height:194px; }
  .web-browser .home3CardImage { height:145px; }
  .web-browser .home3CardInfo { height:49px; }
  .web-browser .home3Row-movie .home3RowList,
  .web-browser .home3Row-series .home3RowList { height:325px; }
  .web-browser .home3Card-movie,
  .web-browser .home3Card-series { width:42vw; min-width:145px; max-width:180px; height:300px; }
  .web-browser .home3Card-movie .home3CardImage,
  .web-browser .home3Card-series .home3CardImage { height:248px; }
  .web-browser .home3Card-movie .home3Placeholder,
  .web-browser .home3Card-series .home3Placeholder { height:248px; line-height:248px; }
  .web-browser .card.card-movie { width:calc(50vw - 25px) !important; height:330px !important; margin:5px !important; }
  .web-browser .card-movie .moviePosterBanner { height:265px !important; }
  .web-browser .card-live { width:100% !important; height:205px !important; }
}

/* TV: banners grandes e legíveis a distância. */
.web-browser.tv-ui .home3Card { width:340px; height:240px; }
.web-browser.tv-ui .home3CardImage { height:184px; }
.web-browser.tv-ui .home3Card-movie,
.web-browser.tv-ui .home3Card-series { width:220px; height:382px; }
.web-browser.tv-ui .home3Card-movie .home3CardImage,
.web-browser.tv-ui .home3Card-series .home3CardImage { height:322px; }
.web-browser.tv-ui .home3Card.focus,
.web-browser.tv-ui .card.focus { transform:scale(1.045); }

/* =========================================================
   RIBEIRO TV WEB 12 — VOD CLEAN / REFERÊNCIA TV
   ========================================================= */
.web-browser #content:not(.home3-active) #items:not(.liveDashboardItems){
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-content:start;
  padding:8px 26px 34px !important;
}
.web-browser .card.card-vod{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  margin:0 !important;
  border-radius:18px !important;
  overflow:hidden;
  background:#121a28 !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  transform:translateZ(0);
}
.web-browser .card.card-vod.focus,
.web-browser .card.card-vod:hover{
  transform:translateY(-2px) scale(1.018) !important;
  border-color:#26dbef !important;
  box-shadow:0 0 0 4px #e9fbff,0 0 0 8px #1dd8ec,0 16px 34px rgba(0,0,0,.42) !important;
}
.web-browser .card.card-vod .cardTitle{
  height:auto !important;
  min-height:45px !important;
  padding:12px 15px 4px !important;
  font-size:17px !important;
  line-height:21px !important;
  font-weight:750 !important;
  white-space:normal !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.web-browser .card.card-vod .cardSub{
  height:33px !important;
  padding:1px 15px 12px !important;
  font-size:13px !important;
  color:#9aa7b8 !important;
}
.web-browser .card-movie .moviePosterBanner,
.web-browser .card-series .posterBanner{
  height:auto !important;
  aspect-ratio:2/3;
  background-size:cover !important;
  background-position:center !important;
}
.web-browser .card-series .posterBanner{ aspect-ratio:16/10; }
.web-browser .categoryVisual{
  position:relative;
  height:155px;
  background:#171717 center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}
.web-browser .categoryVisualShade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.63));
  backdrop-filter:blur(1px);
}
.web-browser .categoryVisualPlaceholder{background:#181818}
.web-browser .categoryIcon{position:relative;z-index:1;font-size:58px;filter:grayscale(.15)}
.web-browser .card.card-vod:has(.categoryVisual) .cardTitle{min-height:38px !important;font-size:18px !important;text-transform:uppercase}

/* Ficha VOD mais cinematográfica e legível */
.web-browser #movieDetails,
.web-browser #seriesHero.seriesHeroPremium{
  background-color:#060b12 !important;
}
.web-browser #movieInfo{
  max-width:880px;
}
.web-browser #movieSynopsis,
.web-browser .seriesHeroPlot{
  font-size:clamp(16px,1.35vw,23px) !important;
  line-height:1.45 !important;
}

@media (min-width:1500px){
  .web-browser #content:not(.home3-active) #items:not(.liveDashboardItems){grid-template-columns:repeat(5,minmax(0,1fr)) !important}
}
@media (max-width:1100px){
  .web-browser #content:not(.home3-active) #items:not(.liveDashboardItems){grid-template-columns:repeat(3,minmax(0,1fr)) !important;padding-left:18px !important;padding-right:18px !important}
}
@media (max-width:760px){
  .web-browser #content:not(.home3-active) #items:not(.liveDashboardItems){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;padding:8px 12px 90px !important}
  .web-browser .categoryVisual{height:112px}
  .web-browser .categoryIcon{font-size:42px}
  .web-browser .card.card-vod .cardTitle{font-size:14px !important;line-height:18px !important;padding:9px 10px 3px !important}
  .web-browser .card.card-vod .cardSub{font-size:11px !important;padding:1px 10px 9px !important}
}
.web-browser.tv-ui #content:not(.home3-active) #items:not(.liveDashboardItems){grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:22px !important}
.web-browser.tv-ui .card.card-vod .cardTitle{font-size:20px !important;line-height:25px !important}

/* =========================================================
   RIBEIRO TV WEB 12.1 — CORREÇÃO DEFINITIVA DA GRADE VOD
   Evita cards achatados em desktop/TV e preserva posters 2:3.
   ========================================================= */
.web-browser #content:not(.home3-active) #items:not(.liveDashboardItems){
  overflow-y:auto !important;
  overflow-x:hidden !important;
  grid-auto-flow:row !important;
  grid-auto-rows:max-content !important;
  align-items:start !important;
  justify-items:stretch !important;
  align-content:start !important;
}
.web-browser #content:not(.home3-active) #items:not(.liveDashboardItems) > .card{
  align-self:start !important;
  min-height:0;
}
/* Categorias: cards horizontais como a referência */
.web-browser .card.card-vod:has(.categoryVisual){
  min-height:235px !important;
  height:235px !important;
}
.web-browser .card.card-vod:has(.categoryVisual) .categoryVisual{
  display:flex !important;
  width:100% !important;
  height:155px !important;
  min-height:155px !important;
  aspect-ratio:auto !important;
  flex:none !important;
}
.web-browser .card.card-vod:has(.categoryVisual) .cardTitle{
  min-height:43px !important;
  height:43px !important;
  padding:10px 15px 2px !important;
}
.web-browser .card.card-vod:has(.categoryVisual) .cardSub{
  min-height:32px !important;
  height:32px !important;
}
/* Filmes: poster vertical 2:3, sem esmagamento */
.web-browser .card.card-movie{
  min-height:390px !important;
  height:auto !important;
}
.web-browser .card.card-movie .moviePosterBanner{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:300px !important;
  aspect-ratio:2/3 !important;
  background-size:cover !important;
  background-position:center !important;
}
/* Séries e temporadas: poster vertical, igual aos filmes */
.web-browser .card.card-series,
.web-browser .card.card-season{
  min-height:390px !important;
  height:auto !important;
}
.web-browser .card.card-series .posterBanner,
.web-browser .card.card-season .posterBanner{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:300px !important;
  aspect-ratio:2/3 !important;
  line-height:normal !important;
  background-size:cover !important;
  background-position:center !important;
}
/* Plataformas e episódios continuam horizontais */
.web-browser .card.card-platform,
.web-browser .card.card-episode{
  min-height:235px !important;
  height:auto !important;
}
.web-browser .card-platform .platformBanner,
.web-browser .card-episode .episodeBanner{
  display:block !important;
  width:100% !important;
  min-height:155px !important;
  height:155px !important;
  aspect-ratio:auto !important;
}
@media (max-width:760px){
  .web-browser .card.card-vod:has(.categoryVisual){height:190px !important;min-height:190px !important}
  .web-browser .card.card-vod:has(.categoryVisual) .categoryVisual{height:112px !important;min-height:112px !important}
  .web-browser .card.card-movie,
  .web-browser .card.card-series,
  .web-browser .card.card-season{min-height:300px !important}
  .web-browser .card.card-movie .moviePosterBanner,
  .web-browser .card.card-series .posterBanner,
  .web-browser .card.card-season .posterBanner{min-height:220px !important}
}


/* V12.3 — Séries: sem destaque gigante na tela de categorias/plataformas.
   O hero continua disponível ao entrar em uma série/temporada/episódio. */
.web-browser #seriesHero.hidden{display:none !important;}


/* V12.3 — grade de Séries sem hero/destaque durante a navegação. */
.web-browser body.series-grid-clean #seriesHero,
.web-browser #seriesHero.hidden{display:none !important;}


/* V12.4 — ficha da série separada da navegação de temporadas */
body.r7-vod-series-active .seriesHeroAction{cursor:pointer;}
.seriesDetailItems{display:none !important;}
body.r7-vod-series-active #seriesHero:not(.hidden){margin-bottom:18px;}
@media (max-width: 700px){
    body.r7-vod-series-active #seriesHero:not(.hidden){margin-bottom:10px;}
}

/* =========================================================
   V12.5 — Fluxo de Séries em três telas
   1) ficha ocupa a área útil inteira;
   2) temporadas sem hero;
   3) episódios sem hero.
   ========================================================= */
.web-browser body.series-detail-page #seriesHero:not(.hidden){
    display:flex !important;
    width:calc(100% - 24px) !important;
    min-height:calc(100vh - 205px) !important;
    height:auto !important;
    margin:10px 12px 24px !important;
    border-radius:28px !important;
    background-position:center !important;
    background-size:cover !important;
    align-items:flex-end !important;
}
.web-browser body.series-detail-page #seriesHero .seriesHeroContent{
    width:min(760px,72%) !important;
    padding:42px 34px 36px !important;
}
.web-browser body.series-detail-page #items,
.web-browser body.series-detail-page .seriesDetailItems{
    display:none !important;
}
.web-browser body.series-seasons-page #seriesHero,
.web-browser body.series-episodes-page #seriesHero{
    display:none !important;
}
.web-browser body.series-seasons-page #items,
.web-browser body.series-episodes-page #items{
    margin-top:8px !important;
}
@media (max-width:760px){
    .web-browser body.series-detail-page #seriesHero:not(.hidden){
        min-height:calc(100vh - 170px) !important;
        width:calc(100% - 16px) !important;
        margin:8px !important;
        border-radius:20px !important;
    }
    .web-browser body.series-detail-page #seriesHero .seriesHeroContent{
        width:100% !important;
        padding:24px 18px 20px !important;
    }
}


/* =========================================================
   V12.7 - Botão Voltar REAL e sempre visível nas páginas de Séries
   ========================================================= */
#topbar{position:absolute!important;z-index:80!important;overflow:visible!important;}
.web-browser #seriesPageBack,
#seriesPageBack{
    position:absolute!important;
    right:128px!important;
    top:4px!important;
    z-index:1000!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-width:118px!important;
    min-height:52px!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(255,255,255,.30)!important;
    border-radius:14px!important;
    background:#151c28!important;
    color:#fff!important;
    font:inherit!important;
    font-size:17px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
    box-shadow:0 8px 24px rgba(0,0,0,.26)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
}
#seriesPageBack .seriesPageBackArrow{font-size:23px;line-height:1;}
#seriesPageBack:hover,#seriesPageBack:focus-visible{
    border-color:#23d8ff!important;
    background:#1c2940!important;
    outline:3px solid rgba(35,216,255,.28)!important;
}
#seriesPageBack.hidden{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
}
@media(max-width:760px){
    #seriesPageBack{
        right:6px!important;
        top:62px!important;
        min-width:98px!important;
        min-height:42px!important;
        padding:0 12px!important;
        font-size:15px!important;
    }
}