/* Remover outline padrão do navegador */
*:focus {
    outline: none !important;
}

/* Garantir que a descrição do banner seja limitada imediatamente */
.splide__slide .banner-content-home .banner-description {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(1.4em * 3) !important;
    white-space: normal !important;
}

#banner-container,
.splide {
    height: 100vh;
    margin-bottom: -30vh;
    position: relative;
    z-index: auto;
}

.splide__slide {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.splide__pagination {
    bottom: 30vh !important;
    z-index: 9999 !important;
    position: relative;
    overflow: visible;
    padding: 20px;
    margin: -20px;
}

.splide__pagination__page {
    transition: all linear 0.1s !important;
    display: flex !important;
    height: 1vh !important;
    width: 1vh !important;
    margin: 0 0.2vw !important;
    background: linear-gradient(var(--color-app-secondary), var(--color-app-primary)) !important;
    filter: brightness(0.6);
    cursor: pointer;
    border: none;
    outline: none;
    padding: 15px;
    opacity: 1 !important;
    position: relative;
    overflow: visible;
    z-index: 10000 !important;
}

.splide__pagination__page:focus {
    filter: brightness(1);
    outline: none;
}

.splide__pagination__page.is-active {
    transform: scale(1.2) !important;
    width: 1.5vh !important;
    border-radius: 4vh !important;
    filter: brightness(1);
}

.splide__pagination__page.is-active:focus {
    filter: brightness(1.2);
    outline: none;
}

/* Estilos para o trailer */
#trailer-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1 !important;
    background: transparent;
}

#trailer-player {
    width: 100%;
    height: 100%;
    position: relative;
}

#trailer-player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#recomendados-container .swiper-container{
    position: relative;
    top: 70vh;
}

#content-list-container .swiper-container{
    position: relative;
    top: 70vh;
}

/* Aplicar gradiente através de overlay no player */
#trailer-player.playing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #000, transparent), linear-gradient(transparent, #000);
    pointer-events: none;
    z-index: 1;
}

/* Garantir que o trailer não interfira na navegação */
#trailer-container * {
    pointer-events: none;
}

/* Animação suave para o trailer */
#trailer-container {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#trailer-container[style*="block"] {
    opacity: 1;
}

/* Ocultar imagem de fundo quando trailer está tocando */
.splide__slide.trailer-playing {
    background-image: none !important;
}