:root {
  /* Define variáveis CSS globais */
  --netflix-red: #e50914; /* Cor vermelha característica da Netflix */
  --dark-bg: #141414; /* Fundo escuro padrão */
  --text-color: #ffffff; /* Cor do texto branco */
}

* {
  /* Reset de margens e paddings para todos os elementos */
  margin: 0; /* Remove margem padrão */
  padding: 0; /* Remove padding padrão */
  box-sizing: border-box; /* Inclui padding e border na largura/altura */
}

body {
  /* Estilos para o corpo da página */
  font-family:
    "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Família de fontes */
  background-color: var(--dark-bg); /* Fundo escuro */
  color: var(--text-color); /* Cor do texto */
  overflow-x: hidden; /* Esconde overflow horizontal */
}

a {
  /* Estilos para links */
  text-decoration: none; /* Remove sublinhado */
  color: #e5e5e5; /* Cor cinza clara */
  transition: color 0.3s; /* Transição suave na cor */
}

a:hover {
  /* Estilo ao passar o mouse sobre links */
  color: #b3b3b3; /* Cor mais clara ao hover */
}

/* Navbar */
.navbar {
  /* Estilos para a barra de navegação */
  position: fixed; /* Fixa no topo */
  top: 0; /* No topo da página */
  width: 100%; /* Largura total */
  display: flex; /* Flexbox para alinhamento */
  justify-content: space-between; /* Espaço entre esquerda e direita */
  align-items: center; /* Centraliza verticalmente */
  padding: 0 4%; /* Padding lateral */
  height: 70px; /* Altura da navbar */
  z-index: 1000; /* Z-index alto para ficar acima */
  background-color: var(--dark-bg); /* Fundo escuro */
}

.navbar-left, /* Estilos para a parte esquerda da navbar */
.navbar-right {
  /* Estilos para a parte direita da navbar */
  display: flex; /* Flexbox */
  align-items: center; /* Centraliza verticalmente */
  gap: 20px; /* Espaço entre itens */
}

.logo {
  /* Estilos para o logo */
  width: 92px; /* Largura do logo */
  margin-right: 25px; /* Margem direita */
  cursor: pointer; /* Cursor de ponteiro */
}

.nav-links {
  /* Estilos para os links de navegação */
  list-style: none; /* Remove marcadores da lista */
  display: flex; /* Flexbox */
  gap: 20px; /* Espaço entre links */
  font-size: 13px; /* Tamanho da fonte */
}

.nav-links .active {
  /* Estilo para o link ativo */
  font-weight: bold; /* Negrito */
  color: white; /* Cor branca */
}

.icon {
  /* Estilos para ícones */
  font-size: 20px; /* Tamanho da fonte */
  cursor: pointer; /* Cursor de ponteiro */
}

.kids-link {
  /* Estilo para link de kids */
  font-size: 14px; /* Tamanho da fonte */
}

.nav-notification {
  /* Estilos para notificações */
  position: relative; /* Posição relativa para badge */
  cursor: pointer; /* Cursor de ponteiro */
}

.notification-badge {
  /* Estilo para o badge de notificação */
  position: absolute; /* Posição absoluta */
  top: -5px; /* Posição do topo */
  right: -8px; /* Posição da direita */
  background-color: var(--netflix-red); /* Fundo vermelho */
  color: white; /* Texto branco */
  font-size: 10px; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
  border-radius: 50%; /* Bordas arredondadas */
  width: 16px; /* Largura */
  height: 16px; /* Altura */
  display: flex; /* Flexbox */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
}

.profile-menu {
  /* Estilos para o menu de perfil */
  display: flex; /* Flexbox */
  align-items: center; /* Centraliza verticalmente */
  gap: 5px; /* Espaço entre itens */
  cursor: pointer; /* Cursor de ponteiro */
}

.profile-icon {
  /* Estilo para o ícone de perfil */
  width: 32px; /* Largura */
  border-radius: 4px; /* Bordas arredondadas */
}

/* Sliders */
.sliders-container {
  /* Container para os sliders */
  padding: 0 4%; /* Padding lateral */
  padding-top: 100px; /* Padding topo para navbar */
  /* Space for navbar */
  position: relative; /* Posição relativa */
  z-index: 3; /* Z-index */
  padding-bottom: 100px; /* Padding inferior */
}

.slider-section {
  /* Seção de cada slider */
  margin-bottom: 3.5vw; /* Margem inferior */
}

.slider-header {
  /* Cabeçalho do slider */
  display: flex; /* Flexbox */
  justify-content: space-between; /* Espaço entre itens */
  align-items: flex-end; /* Alinha ao final */
  margin-bottom: 12px; /* Margem inferior */
}

.slider-title {
  /* Título do slider */
  font-size: 1.25vw; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
  color: #e5e5e5; /* Cor */
  line-height: 1.25vw; /* Altura da linha */
}

.slider-indicators {
  /* Indicadores do slider */
  display: flex; /* Flexbox */
  gap: 2px; /* Espaço entre indicadores */
  margin-bottom: 4px; /* Margem inferior */
}

.slider-indicators div {
  /* Cada indicador */
  width: 12px; /* Largura */
  height: 2px; /* Altura */
  background-color: #4d4d4d; /* Fundo */
}

.slider-indicators div.active {
  /* Indicador ativo */
  background-color: #aaa; /* Fundo mais claro */
}

.movie-row {
  /* Linha de filmes */
  display: flex; /* Flexbox */
  gap: 8px; /* Espaço entre cards */
  /* Small gap between movie cards */
  overflow-x: visible; /* Overflow visível */
  /* Let the expanded cards paint outside this box vertically */
  padding: 10px 4% 50px 4%; /* Padding */
  /* Added bottom padding to hold the expanding modal */
  margin: 0 -4%; /* Margem negativa */
  /* Pull edges back out so we don't double up padding from container */
  scroll-behavior: smooth; /* Rolagem suave */
  -ms-overflow-style: none; /* Esconde scrollbar no IE */
  scrollbar-width: none; /* Esconde scrollbar no Firefox */
}

.movie-row::-webkit-scrollbar {
  /* Esconde scrollbar no Webkit */
  display: none; /* Não exibe */
}

.movie-card {
  /* Card de filme */
  min-width: 250px; /* Largura mínima */
  width: 250px; /* Largura */
  height: 140px; /* Altura */
  background-color: #222; /* Fundo */
  border-radius: 4px; /* Bordas arredondadas */
  cursor: pointer; /* Cursor de ponteiro */
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s,
    border-radius 0.3s 0s,
    z-index 0s 0.3s,
    box-shadow 0.3s 0s; /* Transições */
  position: relative; /* Posição relativa */
  z-index: 1; /* Z-index */
  transform-origin: center center; /* Origem da transformação */
  /* Default origin */
}

/* Modifiers applied by JavaScript to prevent edge clipping */
.movie-card.origin-left {
  /* Modificador para origem esquerda */
  transform-origin: left center; /* Origem esquerda */
}

.movie-card.origin-right {
  /* Modificador para origem direita */
  transform-origin: right center; /* Origem direita */
}

.movie-card:hover {
  /* Estilo ao passar o mouse */
  transform: scale(1.6) translateY(-5%); /* Escala e translação */
  /* Reduced vertical translation since container has more padding */
  z-index: 99; /* Z-index alto */
  border-radius: 6px; /* Bordas mais arredondadas */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9); /* Sombra */
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
    border-radius 0.3s 0.6s,
    box-shadow 0.3s 0.6s,
    z-index 0s 0s; /* Transições atrasadas */
}

.movie-card img {
  /* Imagem do card */
  position: absolute; /* Posição absoluta */
  top: 0; /* Topo */
  left: 0; /* Esquerda */
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  object-fit: cover; /* Ajusta a imagem */
  border-radius: 4px; /* Bordas arredondadas */
  transition:
    opacity 0.3s ease,
    border-radius 0.3s; /* Transições */
  z-index: 2; /* Z-index */
}

.movie-card iframe {
  /* Iframe para vídeo */
  position: absolute; /* Posição absoluta */
  top: 0; /* Topo */
  left: 0; /* Esquerda */
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  opacity: 0; /* Opacidade inicial */
  border-radius: 4px; /* Bordas arredondadas */
  transition:
    opacity 0.3s ease,
    border-radius 0.3s; /* Transições */
  pointer-events: none; /* Desabilita eventos */
  z-index: 1; /* Z-index */
}

.movie-card iframe.playing {
  /* Quando o vídeo está tocando */
  opacity: 1; /* Opacidade total */
  z-index: 3; /* Z-index alto */
  border-radius: 6px 6px 0 0; /* Bordas arredondadas no topo */
}

.movie-card:hover img {
  /* Imagem ao hover */
  border-radius: 6px 6px 0 0; /* Bordas arredondadas no topo */
  transition: border-radius 0s 0.6s; /* Transição atrasada */
}

.movie-card img.playing-video {
  /* Imagem quando vídeo está tocando */
  opacity: 0; /* Opacidade zero */
}

/* Card Details Modal */
.card-details {
  /* Detalhes do card */
  position: absolute; /* Posição absoluta */
  top: 100%; /* Abaixo do card */
  left: 0; /* Esquerda */
  width: 100%; /* Largura total */
  background-color: #181818; /* Fundo */
  border-bottom-left-radius: 6px; /* Bordas arredondadas */
  border-bottom-right-radius: 6px; /* Bordas arredondadas */
  padding: 18px 16px; /* Padding */
  opacity: 0; /* Opacidade inicial */
  visibility: hidden; /* Visibilidade oculta */
  transition:
    opacity 0.3s 0s,
    visibility 0.3s 0s; /* Transições */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9); /* Sombra */
  display: flex; /* Flexbox */
  flex-direction: column; /* Coluna */
  gap: 12px; /* Espaço entre itens */
  z-index: 2; /* Z-index */
  cursor: default; /* Cursor padrão */
}

.movie-card:hover .card-details {
  /* Detalhes ao hover */
  opacity: 1; /* Opacidade total */
  visibility: visible; /* Visibilidade visível */
  transition:
    opacity 0.2s 0.6s,
    visibility 0s 0.6s; /* Transições atrasadas */
}

.details-buttons {
  /* Botões dos detalhes */
  display: flex; /* Flexbox */
  justify-content: space-between; /* Espaço entre */
  align-items: center; /* Centraliza */
}

.left-buttons, /* Botões à esquerda */
.right-buttons {
  /* Botões à direita */
  display: flex; /* Flexbox */
  gap: 8px; /* Espaço */
}

.btn-icon {
  /* Ícone de botão */
  width: 32px; /* Largura */
  height: 32px; /* Altura */
  border-radius: 50%; /* Circular */
  background-color: #2b2b2b; /* Fundo */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Borda */
  color: white; /* Cor */
  display: flex; /* Flexbox */
  justify-content: center; /* Centraliza */
  align-items: center; /* Centraliza */
  cursor: pointer; /* Cursor */
  font-size: 14px; /* Tamanho */
  transition:
    border-color 0.2s,
    background-color 0.2s; /* Transições */
}

.btn-icon:hover {
  /* Hover no botão */
  border-color: white; /* Borda branca */
  background-color: rgba(255, 255, 255, 0.2); /* Fundo claro */
}

.btn-play-icon {
  /* Botão de play */
  background-color: white; /* Fundo branco */
  color: black; /* Cor preta */
  border: none; /* Sem borda */
}

.btn-play-icon:hover {
  /* Hover no play */
  background-color: #e6e6e6; /* Fundo cinza claro */
}

.btn-play-icon i {
  /* Ícone dentro do play */
  margin-left: 2px; /* Margem esquerda */
}

.details-info {
  /* Informações dos detalhes */
  display: flex; /* Flexbox */
  align-items: center; /* Centraliza */
  gap: 8px; /* Espaço */
  font-size: 11px; /* Tamanho */
  font-weight: bold; /* Negrito */
}

.match-score {
  /* Pontuação de match */
  color: #46d369; /* Verde */
}

.age-badge {
  /* Badge de idade */
  background-color: transparent; /* Fundo transparente */
  border: 1px solid rgba(255, 255, 255, 0.4); /* Borda */
  color: white; /* Cor */
  padding: 1px 3px; /* Padding */
  border-radius: 2px; /* Bordas arredondadas */
  font-family: Arial, sans-serif; /* Fonte */
}

.age-badge.red-accent {
  /* Badge vermelho */
  background-color: #d32f2f; /* Fundo vermelho */
  border: none; /* Sem borda */
  font-weight: bold; /* Negrito */
}

.resolution {
  /* Resolução */
  border: 1px solid rgba(255, 255, 255, 0.4); /* Borda */
  padding: 1px 3px; /* Padding */
  border-radius: 2px; /* Bordas arredondadas */
  color: rgba(255, 255, 255, 0.9); /* Cor */
}

.duration {
  /* Duração */
  color: rgba(255, 255, 255, 0.9); /* Cor */
}

.details-tags {
  /* Tags dos detalhes */
  display: flex; /* Flexbox */
  gap: 6px; /* Espaço */
  font-size: 11px; /* Tamanho */
  color: rgba(255, 255, 255, 0.9); /* Cor */
  margin-top: 4px; /* Margem topo */
}

.details-tags span:not(:last-child)::after {
  /* Separador de tags */
  content: "•"; /* Ponto */
  color: #666; /* Cor */
  margin-left: 6px; /* Margem esquerda */
}

/* Badges */
.badge-top10 {
  /* Badge Top 10 */
  position: absolute; /* Posição absoluta */
  top: 0; /* Topo */
  right: 0; /* Direita */
  width: 22px; /* Largura */
  height: 28px; /* Altura */
  background-color: var(--netflix-red); /* Fundo vermelho */
  color: white; /* Cor branca */
  display: flex; /* Flexbox */
  flex-direction: column; /* Coluna */
  justify-content: center; /* Centraliza */
  align-items: center; /* Centraliza */
  font-weight: bold; /* Negrito */
  z-index: 4; /* Z-index */
  border-bottom-left-radius: 2px; /* Bordas arredondadas */
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Fonte */
}

.badge-top10 span.top {
  /* Texto "TOP" */
  font-size: 7px; /* Tamanho */
  letter-spacing: 0.5px; /* Espaçamento */
  line-height: 8px; /* Altura da linha */
}

.badge-top10 span.number {
  /* Número */
  font-size: 13px; /* Tamanho */
  line-height: 13px; /* Altura da linha */
}

.badge-bottom {
  /* Badge inferior */
  position: absolute; /* Posição absoluta */
  bottom: 8px; /* Inferior */
  left: 50%; /* Centro horizontal */
  transform: translateX(-50%); /* Centraliza */
  padding: 2px 4px; /* Padding */
  font-size: 10px; /* Tamanho */
  font-weight: bold; /* Negrito */
  border-radius: 2px; /* Bordas arredondadas */
  z-index: 4; /* Z-index */
  white-space: nowrap; /* Não quebra linha */
  text-transform: uppercase; /* Maiúsculo */
}

.movie-card.has-progress .badge-bottom {
  /* Ajuste se tem progresso */
  bottom: 12px; /* Posição inferior ajustada */
}

.badge-bottom.red {
  /* Badge vermelho */
  background-color: var(--netflix-red); /* Fundo vermelho */
  color: white; /* Cor branca */
}

.badge-bottom.white {
  /* Badge branco */
  background-color: white; /* Fundo branco */
  color: black; /* Cor preta */
}

/* Progress bar */
.progress-bar-container {
  /* Container da barra de progresso */
  position: absolute; /* Posição absoluta */
  bottom: 0; /* Inferior */
  left: 0; /* Esquerda */
  width: 100%; /* Largura total */
  height: 4px; /* Altura */
  background-color: rgba(100, 100, 100, 0.7); /* Fundo */
  z-index: 5; /* Z-index */
  border-bottom-left-radius: 4px; /* Bordas arredondadas */
  border-bottom-right-radius: 4px; /* Bordas arredondadas */
}

.progress-value {
  /* Valor da barra */
  height: 100%; /* Altura total */
  background-color: var(--netflix-red); /* Fundo vermelho */
  border-bottom-left-radius: 4px; /* Bordas arredondadas */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  /* Media query para mobile */
  .nav-links {
    /* Esconde links de navegação */
    display: none; /* Não exibe */
  }

  .movie-card {
    /* Ajusta tamanho do card */
    min-width: 200px; /* Largura mínima */
    width: 200px; /* Largura */
    height: 112px; /* Altura */
  }

  .slider-title {
    /* Ajusta título do slider */
    font-size: 4vw; /* Tamanho relativo */
    line-height: 4.5vw; /* Altura da linha */
  }
}

/* Footer */
footer {
  /* Estilos do rodapé */
  padding: 0 4%; /* Padding lateral */
  color: #737373; /* Cor do texto */
  font-size: 13px; /* Tamanho da fonte */
  margin-bottom: 20px; /* Margem inferior */
}

.footer-content {
  /* Conteúdo do rodapé */
  max-width: 980px; /* Largura máxima */
  margin: 0 auto; /* Centraliza */
}

.footer-content p {
  /* Parágrafo do rodapé */
  margin-bottom: 30px; /* Margem inferior */
}

.footer-links {
  /* Links do rodapé */
  list-style: none; /* Remove marcadores */
  display: grid; /* Grid */
  grid-template-columns: repeat(4, 1fr); /* 4 colunas */
  grid-gap: 15px; /* Espaço entre */
}

.footer-links a {
  /* Links */
  color: #737373; /* Cor */
}

.footer-links a:hover {
  /* Hover nos links */
  text-decoration: underline; /* Sublinhado */
}

@media (max-width: 768px) {
  /* Media query para mobile no footer */
  .footer-links {
    /* Ajusta grid */
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
  }
}