/**
 * Três aparências distintas (nomes = referência visual), aplicadas no HTML
 * (classes wm-theme-*). Ajusta tokens --lfx-* e layout em homex / navegação VOD.
 * Não aplicar no reprodutor: body.lfx-video-mode fica fora do escopo.
 */
html.wm-theme-netflix {
  --lfx-primary: #e50914;
  --lfx-bg: #141414;
  --lfx-text: #e5e5e5;
  --lfx-card: #1a1a1a;
  --lfx-side: #0d0d0d;
  --wm-skin-rail-gap: 12px;
  --wm-skin-tile-radius: 4px;
  --wm-skin-hero-pad: 24px 28px 32px;
}

html.wm-theme-prime {
  --lfx-primary: #00a8e1;
  --lfx-bg: #0a1624;
  --lfx-text: #e8f1f7;
  --lfx-card: #122436;
  --lfx-side: #05192c;
  --wm-skin-rail-gap: 22px;
  --wm-skin-tile-radius: 8px;
  --wm-skin-hero-pad: 32px 32px 40px;
}

html.wm-theme-hbomax {
  --lfx-primary: #a78bfa;
  --lfx-bg: #0c0818;
  --lfx-text: #f3ecff;
  --lfx-card: #1a1430;
  --lfx-side: #10082a;
  --wm-skin-rail-gap: 18px;
  --wm-skin-tile-radius: 12px;
  --wm-skin-hero-pad: 28px 32px 36px;
}

/* legacy → mesmo visual */
html.wm-theme-cinema { --lfx-primary: #e50914; }
html.wm-theme-elegant { --lfx-primary: #00a8e1; }
html.wm-theme-aurora { --lfx-primary: #a78bfa; }

/* Fundo geral: só navegação, não a página do player de vídeo */
html.wm-theme-netflix body.lfx-body:not(.lfx-video-mode),
html.wm-theme-cinema body.lfx-body:not(.lfx-video-mode) {
  background:
    radial-gradient(900px 420px at 88% 0%,
      color-mix(in srgb, #e50914 26%, transparent) 0%,
      transparent 55%),
    linear-gradient(185deg, #1b1b1b 0%, #0a0a0a 100%);
}

html.wm-theme-prime body.lfx-body:not(.lfx-video-mode),
html.wm-theme-elegant body.lfx-body:not(.lfx-video-mode) {
  background:
    radial-gradient(1000px 480px at 12% 0%,
      color-mix(in srgb, #00a8e1 24%, transparent) 0%,
      transparent 58%),
    linear-gradient(195deg, #0f2034 0%, #050d18 100%);
}

html.wm-theme-hbomax body.lfx-body:not(.lfx-video-mode),
html.wm-theme-aurora body.lfx-body:not(.lfx-video-mode) {
  background:
    radial-gradient(1100px 520px at 50% 0%,
      color-mix(in srgb, #7c3aed 30%, transparent) 0%,
      transparent 60%),
    linear-gradient(200deg, #1a0f2e 0%, #080410 100%);
}

/* Menu lateral: só quando não for modo vídeo (sidebar oculta no player) */
html.wm-theme-netflix body:not(.lfx-video-mode) .lfx-sidebar,
html.wm-theme-cinema body:not(.lfx-video-mode) .lfx-sidebar {
  background: linear-gradient(195deg, #1c1c1c, #0a0a0a);
  border-right: 1px solid rgba(229, 9, 20, 0.18);
}

html.wm-theme-prime body:not(.lfx-video-mode) .lfx-sidebar,
html.wm-theme-elegant body:not(.lfx-video-mode) .lfx-sidebar {
  background: linear-gradient(195deg, #0c2a3f, #051018);
  border-right: 1px solid rgba(0, 168, 225, 0.22);
}

html.wm-theme-hbomax body:not(.lfx-video-mode) .lfx-sidebar,
html.wm-theme-aurora body:not(.lfx-video-mode) .lfx-sidebar {
  background: linear-gradient(195deg, #24183f, #0c0618);
  border-right: 1px solid rgba(167, 139, 250, 0.22);
}

/* ========== homex e listas: três “modelos” de vitrine ========== */
html.wm-theme-netflix body.lfx-page-homex .lfx-hero,
html.wm-theme-cinema body.lfx-page-homex .lfx-hero {
  margin: 0 0 8px 0;
  min-height: 58vh;
  border-radius: 0;
  border: none;
  box-shadow: inset 0 -120px 80px rgba(0, 0, 0, 0.7);
}

html.wm-theme-netflix body.lfx-page-homex .lfx-hero-box,
html.wm-theme-cinema body.lfx-page-homex .lfx-hero-box {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.65);
  max-width: 46%;
}

html.wm-theme-netflix body.lfx-page-homex .lfx-section,
html.wm-theme-cinema body.lfx-page-homex .lfx-section {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 800;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 10px;
  border-left: 3px solid var(--lfx-primary);
  color: #fff;
}

html.wm-theme-netflix body.lfx-page-homex .lfx-grid,
html.wm-theme-cinema body.lfx-page-homex .lfx-grid {
  gap: var(--wm-skin-rail-gap);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin: 12px 16px 20px;
}

html.wm-theme-netflix body.lfx-page-homex .lfx-tile img,
html.wm-theme-cinema body.lfx-page-homex .lfx-tile img {
  height: 220px;
  border-radius: var(--wm-skin-tile-radius);
}

html.wm-theme-prime body.lfx-page-homex .lfx-hero {
  margin: 16px 20px 10px;
  min-height: 56vh;
  border-radius: 12px;
  border: 1px solid rgba(0, 168, 225, 0.22);
  box-shadow: 0 24px 60px rgba(0, 30, 50, 0.45);
}

html.wm-theme-prime body.lfx-page-homex .lfx-hero-box {
  border-radius: 10px;
  border: 1px solid rgba(0, 168, 225, 0.35);
  background: linear-gradient(145deg, rgba(8, 24, 40, 0.88), rgba(0, 0, 0, 0.5));
  max-width: 48%;
  padding: var(--wm-skin-hero-pad);
}

html.wm-theme-prime body.lfx-page-homex .lfx-section {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 36px 24px 8px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--lfx-primary);
  color: var(--lfx-text);
  letter-spacing: 0.02em;
}

html.wm-theme-prime body.lfx-page-homex .lfx-grid {
  gap: var(--wm-skin-rail-gap);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 16px 20px 24px;
}

html.wm-theme-prime body.lfx-page-homex .lfx-tile img {
  height: 280px;
  border-radius: var(--wm-skin-tile-radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-hero {
  margin: 18px 20px 12px;
  min-height: 60vh;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 70px rgba(20, 10, 40, 0.55);
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-hero-box {
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(45, 25, 80, 0.75), rgba(0, 0, 0, 0.55));
  border: 1px solid rgba(200, 180, 255, 0.2);
  max-width: 50%;
  padding: var(--wm-skin-hero-pad);
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-section {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 40px 24px 10px;
  color: #fff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--lfx-primary) 40%, transparent);
  border-left: none;
  padding-left: 0;
  position: relative;
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-section::after {
  content: "";
  display: block;
  height: 3px;
  width: 64px;
  margin-top: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #fff, var(--lfx-primary));
  opacity: 0.9;
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-grid {
  gap: var(--wm-skin-rail-gap);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin: 14px 20px 24px;
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-tile img {
  height: 260px;
  border-radius: var(--wm-skin-tile-radius);
}

/* Badges, chips, continuar: moldura muda com o serviço */
html.wm-theme-netflix body.lfx-page-homex .lfx-badges .lfx-badge-img,
html.wm-theme-cinema body.lfx-page-homex .lfx-badges .lfx-badge-img {
  border-radius: 4px;
}

html.wm-theme-prime body.lfx-page-homex .lfx-badges .lfx-badge-img {
  border-radius: 8px;
  border-color: rgba(0, 168, 225, 0.25);
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-badges .lfx-badge-img {
  border-radius: 12px;
  border-color: rgba(167, 139, 250, 0.3);
}

html.wm-theme-netflix body.lfx-page-homex .lfx-chip.is-active,
html.wm-theme-cinema body.lfx-page-homex .lfx-chip.is-active {
  border-width: 2px;
  border-color: #fff;
}

html.wm-theme-prime body.lfx-page-homex .lfx-chip,
html.wm-theme-elegant body.lfx-page-homex .lfx-chip {
  border-radius: 8px;
}

html.wm-theme-hbomax body.lfx-page-homex .lfx-personal,
html.wm-theme-aurora body.lfx-page-homex .lfx-personal,
html.wm-theme-hbomax body.lfx-page-homex .lfx-continue,
html.wm-theme-aurora body.lfx-page-homex .lfx-continue {
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: linear-gradient(160deg, rgba(40, 28, 70, 0.35), rgba(0, 0, 0, 0.2));
}

/* Catálogo / categorias (home.php, filmes) — trilhos e cartões */
html.wm-theme-netflix body.lfx-page-browse:not(.lfx-video-mode) .section-title,
html.wm-theme-cinema body.lfx-page-browse:not(.lfx-video-mode) .section-title {
  text-align: left;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-left: 3px solid var(--lfx-primary);
  padding-left: 10px;
  margin: 24px 20px 8px;
}

html.wm-theme-prime body.lfx-page-browse:not(.lfx-video-mode) .section-title,
html.wm-theme-elegant body.lfx-page-browse:not(.lfx-video-mode) .section-title {
  text-align: center;
  display: table;
  margin: 32px auto 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--lfx-primary);
  font-size: 1.15rem;
}

html.wm-theme-hbomax body.lfx-page-browse:not(.lfx-video-mode) .section-title,
html.wm-theme-aurora body.lfx-page-browse:not(.lfx-video-mode) .section-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 32px 16px 8px;
}

html.wm-theme-prime body.lfx-page-browse:not(.lfx-video-mode) .horizontal-container {
  padding: 20px 28px;
  gap: 22px;
  justify-content: flex-start;
}

html.wm-theme-hbomax body.lfx-page-browse:not(.lfx-video-mode) .item {
  border-radius: 14px;
  min-width: 280px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

html.wm-theme-netflix body.lfx-page-browse:not(.lfx-video-mode) .movie-list {
  gap: 14px 12px;
}

html.wm-theme-netflix body.lfx-page-browse:not(.lfx-video-mode) .movie-item {
  width: 150px;
  border-radius: 4px;
}

html.wm-theme-prime body.lfx-page-browse:not(.lfx-video-mode) .movie-item {
  width: 176px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 20, 40, 0.4);
  border: 1px solid rgba(0, 168, 225, 0.15);
}

html.wm-theme-hbomax body.lfx-page-browse:not(.lfx-video-mode) .movie-item {
  width: 168px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.2);
}