/* public/css/site/components/playlist-slider-section.css */

.playlist-slider-section {
    background-color: #0c0c0c;
}

.playlist-slider-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.playlist-slider-wrapper {
    overflow: hidden; /* Esta é a "janela" que esconde o resto */
    width: 100%;
}

.playlist-slider-track {
    display: flex;
    /* A largura de cada item é controlada via JS pela variável --item-width */
    --item-width: calc(100% / 3);
}

.playlist-item {
    width: var(--item-width);
    flex-shrink: 0; /* Impede que os itens encolham */
    padding: 0 15px; /* Espaçamento entre os itens */
    box-sizing: border-box;
}

.playlist-item-thumbnail {
    position: relative;
    aspect-ratio: 1 / 1; /* Garante que a thumbnail seja quadrada */
    border-radius: 12px;
    overflow: hidden;
    border-bottom: 3px solid var(--color-primary);
    background-color: #000;
}

.playlist-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* O botão agora é um container transparente */
.btn-playlist-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* O transform, opacity e transition são mantidos para o efeito de hover */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.3s ease;

    /* Removemos o fundo, borda, etc. pois agora são do ícone interno */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* Garante que não há padding extra */
}

/* Efeitos de Hover no Item (este se mantém igual) */
.playlist-item:hover .btn-playlist-popup {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Define o tamanho do novo ícone de play */
.btn-playlist-popup .popup-play-icon {
  position: relative;
  width: 60px; /* Mesmo tamanho que o botão tinha antes */
  height: 60px;
}

/* A borda que faz a animação */
.btn-playlist-popup .popup-play-icon-border {
  width: 100%;
  height: 100%;
  color: white; /* A cor da animação 'button-ripple' */
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  position: relative;
  z-index: 6;
  transition: all 0.4s ease;
  background: rgba(0, 0, 0, 0.5); /* Adiciona um leve fundo escuro para destacar */
}

/* O elemento que cria a animação 'ripple' */
.btn-playlist-popup .popup-play-icon-border:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: button-ripple 2s infinite;
  opacity: 0.6;
  z-index: -1;
}

/* O ícone de 'play' (triângulo) */
.btn-playlist-popup i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 2px; /* Ajuste fino para centralizar o ícone */
  transform: translate(-50%, -50%);
  z-index: 50;
  display: inline-block;
  font-size: 22px;
  color: #ffffff;
}

/* Efeito hover no ícone */
.btn-playlist-popup:hover .popup-play-icon-border {
  background: var(--color-primary); /* Preenche ao passar o mouse */
}

/* A animação 'ripple' (copiada 1:1 do main-banner-section.css) */
@keyframes button-ripple {
  0% { background: transparent; }
  40% { background: rgba(255, 255, 255, 0.5); }
  70% { box-shadow: 0 0 0 15px currentColor; opacity: 0; background: transparent; }
  100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

.playlist-item-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-top: 20px;
    line-height: 1.4;
}

/* Setas de Navegação */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--color-bright-transparency-1);
    color: #ffffff;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);

    display: none;
}

@media (hover: hover) {
    .slider-arrow:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }
}

/* MODIFICADO: Aplicada a sua alteração para -60px */
.slider-arrow.prev {
    left: -60px;
}

.slider-arrow.next {
    right: -60px;
}

/* === RESPONSIVIDADE PARA O SLIDER === */

@media (max-width: 992px) {
    /* (O JS já muda para 2 itens) */

    /* MODIFICADO: Aproxima as setas da borda do slider */
    .slider-arrow.prev {
        left: -15px;
    }

    .slider-arrow.next {
        right: -15px;
    }
}

@media (max-width: 768px) {
    /* (O JS já muda para 1 item em 576px, mas aqui já ajustamos as setas) */

    /* Adiciona espaço em baixo para as setas */
    .playlist-slider-container {
        padding-bottom: 80px; 
    }

    .slider-arrow {
        top: auto; /* Remove o posicionamento 'top' */
        bottom: 10px; /* Posiciona na área do padding-bottom */
        transform: translateY(0); /* Remove a centralização vertical */
    }

    .slider-arrow.prev {
        left: 50%; /* Centraliza */
        margin-left: -60px; /* Puxa para a esquerda (metade da largura + gap) */
    }
    
    .slider-arrow.next {
        right: 50%; /* Centraliza */
        margin-right: -60px; /* Puxa para a direita (metade da largura + gap) */
    }
}

@media (max-width: 576px) {
    /* (O JS já muda para 1 item) */
    .playlist-item {
        padding: 0 10px; /* Reduz o padding lateral */
    }
}