/* ========================================
   MELHORIAS SIMPLES - APATHANY
   CSS mínimo e específico sem conflitos
   ======================================== */

/* === OTIMIZAÇÃO DE AVATARES === */
.item-media-content,
.avatar {
    will-change: auto;
    background-color: rgba(120, 120, 120, 0.1);
}

/* Placeholder durante carregamento */
.item-media-content:not([style*="background-image"]) {
    background: linear-gradient(90deg, 
        rgba(120, 120, 120, 0.1) 25%, 
        rgba(120, 120, 120, 0.15) 50%, 
        rgba(120, 120, 120, 0.1) 75%);
    background-size: 200% 100%;
    animation: avatar-loading 1.5s infinite;
}

@keyframes avatar-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Melhor transição de carregamento */
.item-media-content {
    transition: opacity 0.3s ease;
}

.item-media-content[loading="lazy"] {
    opacity: 0;
    animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

/* Otimização para avatares pequenos no menu */
.avatar.w-32 img,
.avatar.avatar-32 {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Prevenir layout shift */
.item-media {
    min-height: 100%;
    background-color: rgba(120, 120, 120, 0.05);
}

/* === MELHORIAS APENAS NOS CARDS DE MÚSICA === */
.item.r {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.item.r:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* === MELHORIAS NOS BOTÕES DE PLAY === */
.btn-playpause {
    transition: all 0.2s ease;
}

.btn-playpause:hover {
    transform: scale(1.05);
}

/* === MELHORIAS NOS TÍTULOS === */
.item-title a {
    transition: color 0.2s ease;
}

.item-title a:hover {
    color: #ff0048 !important;
}

/* === MELHORIAS NOS OVERLAYS === */
.item-overlay {
    transition: opacity 0.2s ease;
}

.item:hover .item-overlay {
    opacity: 0.8;
}

/* === MELHORIAS NO HEADER === */
.app-header {
    transition: box-shadow 0.2s ease;
}

/* === MELHORIAS NOS LINKS DE NAVEGAÇÃO === */
.nav-link {
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #ff0048 !important;
}

/* === MELHORIAS NO PLAYER === */
.video-player-container {
    border-radius: 8px;
    overflow: hidden;
}

/* === AJUSTE DO BOTÃO SETA PARA CIMA NO PLAYER === */
/* O botão com seta para cima aparece apenas na home, oculto em outras páginas */
/* Por padrão, oculta o botão customizado */
.playlist .mejs-controls .mejs-button[data-mep-control],
.playlist .mejs-controls .mejs-button:not(.mejs-playpause-button):not(.mejs-previous-button):not(.mejs-next-button):not(.mejs-volume-button):not(.mejs-toggle-playlist-button):not(.mejs-repeat-button):not(.mejs-shuffle-button):not(.mejs-youtube-button) {
    display: none !important;
}

/* Mostra o botão apenas na home */
body.home .playlist .mejs-controls .mejs-button[data-mep-control],
body.page-template-template-home .playlist .mejs-controls .mejs-button[data-mep-control],
body.page-template-template-home-moderna .playlist .mejs-controls .mejs-button[data-mep-control],
body.home .playlist .mejs-controls .mejs-button:not(.mejs-playpause-button):not(.mejs-previous-button):not(.mejs-next-button):not(.mejs-volume-button):not(.mejs-toggle-playlist-button):not(.mejs-repeat-button):not(.mejs-shuffle-button):not(.mejs-youtube-button),
body.page-template-template-home .playlist .mejs-controls .mejs-button:not(.mejs-playpause-button):not(.mejs-previous-button):not(.mejs-next-button):not(.mejs-volume-button):not(.mejs-toggle-playlist-button):not(.mejs-repeat-button):not(.mejs-shuffle-button):not(.mejs-youtube-button),
body.page-template-template-home-moderna .playlist .mejs-controls .mejs-button:not(.mejs-playpause-button):not(.mejs-previous-button):not(.mejs-next-button):not(.mejs-volume-button):not(.mejs-toggle-playlist-button):not(.mejs-repeat-button):not(.mejs-shuffle-button):not(.mejs-youtube-button) {
    display: block !important;
    top: -45px !important;
    transform: translateY(-45px);
    z-index: 2;
}

/* Ajuste para botões customizados adicionados via mepicons na home */
body.home .playlist .mejs-controls .mejs-button[data-mep-control] button,
body.page-template-template-home .playlist .mejs-controls .mejs-button[data-mep-control] button,
body.page-template-template-home-moderna .playlist .mejs-controls .mejs-button[data-mep-control] button {
    position: relative;
}

/* Garante que a barra de progresso fique abaixo do botão */
.playlist .mejs-controls div.mejs-time-rail {
    z-index: 1;
}

/* === FIX: PERMITIR INTERAÇÃO COM CONTEÚDO ABAIXO DA LINHA DIVISÓRIA === */
/* A linha divisória criada pelo :after não deve bloquear cliques */
.item-list .item-info:after {
    pointer-events: none !important;
}

/* Garantir que elementos abaixo (pagination, etc) sejam clicáveis */
.item-list .row,
.item-list #post-widget-tracks-pendentes,
.item-list #post-widget-tracks-aprovadas {
    position: relative;
    z-index: 1;
}

/* === MELHORIAS RESPONSIVAS === */
@media (max-width: 768px) {
    .item.r:hover {
        transform: none;
    }
    
    .btn-playpause:hover {
        transform: none;
    }
}