/*
   IZUA CHILD CUSTOM CSS — Angola Músicas (Izua Digital)
   -----------------------------------------------------------------
   FUSÃO (ago/2026): este ficheiro é todo o CSS personalizado que
   antes vivia num child theme separado ("Miraculous Child").
   Foi fundido diretamente no tema pai e ficou dedicado só a ele,
   carregado sempre por ÚLTIMO entre todos os ficheiros CSS do tema
   (ver a chamada wp_enqueue_style('izua-custom', ...) no fim de
   vendor/include/miraculous-enqueue.php) — garante, de forma simples
   e sem depender de prioridades de hooks a competir entre dois
   ficheiros functions.php diferentes, que as nossas regras ganham
   sempre qualquer empate de especificidade com o resto do tema.
*/


/* ============================================================
   ANGOLA MUSICAS – SIDEBAR & MOBILE MENU FIXES
   Aplicado via Child Theme para não alterar ficheiros do tema pai
   ============================================================ */

/* --- 0. Fundo escuro do body, garantido aqui --- */
/* CORREÇÃO (ago/2026, Izua Digital): o style.css da RAIZ do tema pai
   (diferente do assets/css/miraculous-custom-style.css) tem
   "body { background: #fff; }" como cor de reserva padrão do
   WordPress ("Fallback for when there is no custom background color
   defined" — comentário original do tema). Isto nunca foi um
   problema enquanto o nosso CSS carregava por último... até termos
   mudado a prioridade do carregamento (correção do leitor) para
   depois do resto do tema pai, o que por acidente fez esta regra de
   fundo BRANCO passar a carregar depois da regra de fundo ESCURO do
   miraculous-custom-style.css, ganhando o empate. Definimos aqui a
   cor de fundo correta, no ficheiro que sabemos que carrega sempre
   por último — não depende de nenhuma ordem de carregamento futura. */
body {
    background-color: #0b1828;
}

/* --- 1. Overlay escuro quando o menu lateral abre no mobile --- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}
body.slide_menu::before {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* --- 2. Garantir z-index correto do sidebar sobre o overlay --- */
.ms_sidemenu_wrapper {
    z-index: 10000 !important;
}

/* --- 3. Botão de fechar (×) maior e mais fácil de tocar no mobile --- */
.ms_nav_close {
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* --- 4. Suavizar animação de abertura/fecho do sidebar no mobile --- */
@media (max-width: 991px) {
    .ms_sidemenu_wrapper {
        transform: translateX(0);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: left;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Garante que a sidebar fecha completamente (sem ficar com borda visível) */
    .ms_sidemenu_wrapper:not(.open_menu) {
        left: -260px !important;
        box-shadow: none;
    }

    /* Quando aberta: ocupa largura confortável e fica visível */
    .ms_sidemenu_wrapper.open_menu {
        left: 0 !important;
        width: 260px !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }
    .ms_sidemenu_wrapper.open_menu .ms_sidemenu_inner {
        width: 260px !important;
    }

    /* Conteúdo principal não deve deslocar no mobile */
    .ms_content_wrapper {
        margin-left: 0 !important;
    }
    .ms_header {
        left: 0 !important;
    }

    /* Submenus: scroll interno em vez de overflow escondido */
    .ms_nav_wrapper {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 100px;
    }
}

/* --- 5. Submenu lateral no desktop: evita corte fora da tela --- */
@media (min-width: 992px) {
    .ms_nav_wrapper ul li ul.sub-menu {
        left: 100%;
        top: 0;
        min-width: 200px;
        max-height: 80vh;
        overflow-y: auto;
    }
    /* Se o item for dos últimos, o submenu abre para cima */
    .ms_nav_wrapper ul li:nth-last-child(-n+3) ul.sub-menu {
        top: auto;
        bottom: 0;
    }

    /**
     * CORREÇÃO (ago/2026): a regra acima ("left: 100%") foi escrita
     * pensando num menu horizontal comum. No menu lateral em modo
     * ícone (Header Style Two), "100% do item" fica DENTRO da própria
     * barra lateral (que é larga o suficiente para conter isso),
     * então o submenu acabava sobrepondo os outros itens do mesmo
     * menu (ex.: submenu de "Artistas" cobrindo "Álbuns") em vez de
     * abrir por cima do conteúdo da página.
     * Aqui ele passa a "voar" sempre para fora da barra INTEIRA,
     * usando a largura real medida por JavaScript (--izua-sidebar-width,
     * ver functions.php) — acompanha automaticamente se o menu está
     * recolhido (80px) ou expandido (200px, ao passar o rato).
     */
    .ms_sidemenu_wrapper .ms_nav_wrapper ul li ul.sub-menu {
        position: fixed !important;
        left: var(--izua-sidebar-width, 80px) !important;
        top: auto !important;
        bottom: auto !important;
        background-color: #1c2138 !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
        z-index: 10060;
        border-radius: 0 4px 4px 0;
    }
}

/* --- Logótipo expandido do menu lateral: fundo sólido, sem vazar
   texto por cima do conteúdo da página (ago/2026) --- */
.ms_sidemenu_wrapper.open_menu .ms_logo_open {
    position: relative;
    z-index: 2;
    background-color: #1b2039;
    width: 100%;
}

/* --- 6. Items do menu lateral com área de toque adequada (≥44px) ---
   CORREÇÃO (auditoria ago/2026): a regra original usava o seletor
   ".ms_sidemenu_wrapper a", que também atinge o link da logo
   (.ms_logo a / .ms_logo_open a) e os submenus do DESKTOP — não só os
   itens de menu no mobile, que era a intenção. Isso forçava
   "display:flex" fora do contexto do problema (toque no mobile),
   podendo desalinhar a logo e os submenus em telas grandes.
   Corrigido: seletor restrito ao menu de navegação (.ms_nav_wrapper) e
   a regra só entra dentro do breakpoint mobile (≤991px). */
@media (max-width: 991px) {
    .ms_nav_wrapper a {
        min-height: 44px;
        display: flex !important;
        align-items: center;
    }
}

/* --- 7. Ícone de toggle do menu (hamburger) visível no mobile --- */
@media (max-width: 991px) {
    .ms_nav_close {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 10001;
        background: rgba(27, 32, 57, 0.92);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    /* Quando o menu abre, o botão vai junto com a sidebar */
    .ms_sidemenu_wrapper.open_menu .ms_nav_close {
        left: 215px !important;
        background: transparent;
        box-shadow: none;
    }
}

/* --- 8. Evitar scroll horizontal no body quando o menu está fechado --- */
body:not(.slide_menu) {
    overflow-x: hidden;
}

/* --- 9. Correções de modal popup no mobile pequeno --- */
@media (max-width: 580px) {
    .modal-dialog .close {
        right: 6px;
        top: 3px;
    }
}
@media (max-width: 991px) {
    .ms_register_popup .modal-content {
        max-height: 500px;
    }
}
@media (max-width: 375px) {
    .popup_forgot {
        margin-top: 25px;
        text-align: center;
    }
}

/* ============================================================
   AUDITORIA DE DESIGN E RESPONSIVIDADE — ago/2026 (Izua Digital)
   Correções adicionais encontradas na revisão do tema pai + child.
   ============================================================ */

/* --- 10. Empate de z-index entre o player fixo e o menu mobile ---
   O tema define ".ms_player_wrapper" (barra de áudio fixa no rodapé)
   com z-index:10000. O item 2 deste child theme também definiu
   ".ms_sidemenu_wrapper" com z-index:10000. Com o mesmo valor, quem
   fica visualmente por cima passa a depender só da ordem no HTML — não
   é garantido — e em alguns aparelhos o player pode cobrir a parte de
   baixo do menu aberto, tornando itens inacessíveis ao toque.
   Corrigido: o menu, seu botão de fechar e o overlay escuro (item 1)
   sobem numa camada acima do player, de forma explícita e garantida. */
.ms_sidemenu_wrapper {
    z-index: 10050 !important;
}
.ms_nav_close {
    z-index: 10051 !important;
}
body.slide_menu::before {
    z-index: 10040; /* overlay: acima do player (10000), abaixo do menu (10050) */
}

/* --- 11. Rodapé coberto pelo player em telas muito pequenas ---
   O tema compensa a barra do player fixa no rodapé com
   ".ms_footer_wrapper { margin-bottom: 75px }" no desktop, e reduz
   para 70px a partir de 768px. Só que em telas bem pequenas o próprio
   tema AUMENTA a altura do player (120px em ≤513px, 110px em ≤414px)
   sem atualizar essa margem — resultado: nos celulares mais comuns
   (ex.: 360–414px de largura), uns 40-50px do fim do rodapé (links,
   copyright) ficam escondidos atrás da barra de áudio quando ela está
   aberta. Corrigido abaixo, acompanhando a altura real do player. */
@media (max-width: 513px) {
    .ms_footer_wrapper {
        margin-bottom: 130px;
    }
}
@media (max-width: 414px) {
    .ms_footer_wrapper {
        margin-bottom: 120px;
    }
}

/* --- 12. Estilo visual + responsivo para os recursos novos do Passo 5
   (ranking [izua_ranking], agenda [izua_agenda], denúncia [izua_denuncia])
   ---
   Esses três shortcodes foram adicionados sem nenhum CSS próprio, então
   herdam só o estilo padrão do navegador: lista numerada branca sobre
   fundo escuro, formulário sem identidade visual nenhuma. Como o tema
   inteiro é escuro com destaque vermelho/âmbar da marca (Passo 6), o
   contraste ficava ruim e a aparência destoava do resto do site.
   Estilo abaixo usa as mesmas cores já aplicadas na marca
   (#BE3636 terracota / #E09B2D âmbar) e é responsivo por padrão, sem
   precisar de media queries extras (empilha naturalmente em telas
   pequenas por já usar largura fluida). */

/* ============================================================
   PALETA DA MARCA (Izua Digital, ago/2026) — refresh "mais amigável"
   ------------------------------------------------------------
   Mantém o vermelho/âmbar da logo como cor principal, mas acrescenta
   cores de destaque por secção (como o Sua Música faz: azul para
   rankings, âmbar para downloads, verde para artistas/social) para a
   página não ficar monótona de vermelho do topo ao rodapé. O fundo
   deixa de ser preto puro e passa a um antracite mais quente — menos
   "duro" ao olhar em sessões longas.
   ============================================================ */
:root {
    --izua-primary: #BE3636;
    --izua-primary-soft: #D9564F;
    --izua-amber: #E09B2D;
    --izua-teal: #2D8B7F;
    --izua-blue: #3B6FD8;
    --izua-bg-page: #17141C;
    --izua-bg-card: rgba(255, 255, 255, 0.045);
    --izua-text-muted: #b9b3bb;
    --izua-radius: 10px;
}

/* Secções da home ganham uma cor de destaque própria na barrinha do
   título, em vez de vermelho sempre — igual à ideia do Sua Música de
   cada bloco (Top CDs, Estourados, Playlists) ter a sua cor. */
.izua-home-section--accent-blue .izua-section-header { border-left-color: var(--izua-blue); }
.izua-home-section--accent-amber .izua-section-header { border-left-color: var(--izua-amber); }
.izua-home-section--accent-teal .izua-section-header { border-left-color: var(--izua-teal); }

/* Ranking (Mais Ouvidas / Mais Baixadas) — carrossel de capas com selo
   numerado, ao estilo "Top CDs" / "Estourados" do Sua Música. */
.izua-ranking-carousel-wrap,
.izua-artista-carrossel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.izua-ranking-carousel,
.izua-artista-carrossel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 4px 2px 10px;
    flex: 1 1 auto;
    scrollbar-width: thin;
}
.izua-carousel-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s ease;
}
.izua-carousel-arrow:hover { background: var(--izua-primary); }

.izua-ranking-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 168px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
}
.izua-ranking-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--izua-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.izua-ranking-card:hover .izua-ranking-thumb { transform: translateY(-3px); }
.izua-ranking-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--izua-primary);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.izua-ranking-titulo {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-ranking-artista {
    color: var(--izua-text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-ranking-count {
    color: var(--izua-amber);
    font-size: 11px;
    margin-top: 2px;
}

/* Perfis em Destaque — avatar redondo + botão Seguir */
.izua-artista-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 130px;
    text-align: center;
}
.izua-artista-avatar {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.08);
    border: 2px solid var(--izua-teal);
}
.izua-artista-nome {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua_follow_btn_home {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--izua-teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}
.izua_follow_btn_home:hover { background: #256e64; color: #fff; }
.izua_follow_btn_home.is_following {
    background: transparent;
    border: 1px solid var(--izua-text-muted);
    color: var(--izua-text-muted);
}

/* Agenda de shows */
.izua-agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.izua-agenda-item {
    padding: 14px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #E09B2D;
    border-radius: 4px;
    color: #e5e5e5;
    line-height: 1.6;
}
.izua-agenda-item strong {
    color: #fff;
    font-size: 15px;
}
.izua-agenda-item a {
    color: #E09B2D;
    text-decoration: underline;
}

/* Formulário de denúncia de conteúdo */
.izua-denuncia-form {
    max-width: 500px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    padding: 20px;
    border-radius: 6px;
}
.izua-denuncia-form label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.izua-denuncia-form input[type="url"],
.izua-denuncia-form input[type="email"],
.izua-denuncia-form select,
.izua-denuncia-form textarea {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    /* 16px, não 14px: abaixo de 16px o Safari do iOS dá zoom
       automático ao focar o campo — obrigatório em qualquer input
       tocável no telemóvel. */
    font-size: 16px;
    min-height: 44px;
    box-sizing: border-box;
}
.izua-denuncia-form textarea {
    min-height: 90px;
    resize: vertical;
}
.izua-denuncia-form button[type="submit"] {
    background: #BE3636;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    width: 100%;
    transition: background 0.2s ease;
}
.izua-denuncia-form button[type="submit"]:hover {
    background: #a02e2e;
}
@media (max-width: 480px) {
    .izua-denuncia-form {
        padding: 15px;
    }
}

/* --- 13. Botões "Baixar Música" / "Favoritar" / "Adicionar à Playlist" / "Seguir" ---
   Reaproveitam a classe ".ms_btn" (mesma do botão "Reproduzir"), só ajusta
   o ícone. Herdam cor, tamanho e espaçamento automaticamente do tema,
   incluindo em telas pequenas — sem precisar de mais CSS. */
.izua_download_btn .fa,
.izua_favorite_btn .fa,
.izua_playlist_btn .fa,
.izua_follow_btn .fa {
    margin-right: 6px;
}
.izua_favorite_btn.is_favorited .fa,
.izua_follow_btn.is_following .fa {
    color: #BE3636;
}

/* ============================================================
   PASSO 6 (ago/2026) — Perfil de artista, géneros, lançamentos
   ============================================================ */

/* Perfil de artista: seguidores + redes sociais + bio, injetados
   depois do conteúdo na página pública do artista. */
.izua-artist-extra {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.izua-artist-followers {
    display: block;
    color: #e5e5e5;
    font-size: 14px;
    margin-bottom: 10px;
}
.izua-artist-followers strong {
    color: #E09B2D;
}
.izua-artist-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.izua-artist-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: #fff;
    transition: background 0.2s ease, color 0.2s ease;
}
.izua-artist-social-link:hover {
    background: #BE3636;
    color: #fff;
}
.izua-artist-bio {
    color: #cfcfcf;
    font-size: 14px;
    line-height: 1.6;
}

/* Descoberta por género: cartões em grade fluida (empilha sozinho
   em telas pequenas, sem precisar de media query). */
.izua-genero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.izua-genero-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    min-height: 100px;
    justify-content: flex-end;
    border-radius: var(--izua-radius);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.izua-genero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}
.izua-genero-icone {
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.85);
}
.izua-genero-nome {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.izua-genero-count {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

/* Lançamentos: grade de capas, mesma lógica fluida. */
.izua-lancamentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.izua-lancamento-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}
.izua-lancamento-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
}
.izua-lancamento-titulo {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 10px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-lancamento-data {
    color: #b8b8b8;
    font-size: 12px;
    padding: 0 10px 10px;
}

/* Busca com filtros (género / tipo de conteúdo) */
.izua-busca-avancada {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.izua-busca-input {
    flex: 1 1 220px;
    min-height: 44px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    /* 16px para não disparar o zoom automático do Safari/iOS ao focar. */
    font-size: 16px;
}
.izua-busca-input::placeholder {
    color: #b8b8b8;
}
.izua-busca-select {
    flex: 1 1 160px;
    min-height: 44px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
}
.izua-busca-select option {
    background: #14182a;
    color: #fff;
}
.izua-busca-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 22px;
    background: #BE3636;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.izua-busca-btn:hover {
    background: #a02e2e;
}
@media (max-width: 480px) {
    .izua-busca-avancada {
        flex-direction: column;
    }
    .izua-busca-input,
    .izua-busca-select,
    .izua-busca-btn {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ============================================================
   PÁGINA INICIAL (front-page.php) — ago/2026
   ============================================================ */

/* Hero "spotlight": foto + título + descrição + botões, montado a
   partir do ranking real (substitui o slide de demonstração do
   Revolution Slider que vinha com o tema). */
/* ============================================================
   HERO — REDESENHO (ago/2026) — de caixa plana e genérica para algo
   com profundidade: fundo ambiente desfocado com a cor da própria
   capa, imagem maior com brilho, badge, tipografia com mais impacto.
   ============================================================ */
/* ============================================================
   CAUSA RAIZ FINALMENTE ENCONTRADA (ago/2026) — a folga vazia acima
   do hero nunca teve nada a ver com o hero em si. É o próprio tema
   Miraculous que define, no seu CSS principal:
       #primary { padding-top: 60px; }
   ...e só a remove automaticamente quando o body tem a classe
   ".div-wrapper-style-two" (um estilo de cabeçalho alternativo que
   este site não usa — o nosso usa "div-wrapper-style-one"). Por isso
   nenhuma das tentativas anteriores dentro do hero resolvia: o espaço
   vinha de um elemento inteiramente diferente, por fora dele.
   ============================================================ */
#primary {
    padding-top: 0 !important;
}

.izua-hero-spotlight {
    background: linear-gradient(160deg, #2a1015 0%, #14121d 55%, #0c0e1a 100%);
    overflow: hidden;
    position: relative;
}
.izua-hero-spotlight-ambient {
    position: absolute;
    inset: -30%;
    background-image: var(--izua-hero-ambient, none);
    background-size: cover;
    background-position: center;
    filter: blur(50px) saturate(1.5) brightness(0.6);
    transform: scale(1.6);
    z-index: 0;
}
.izua-hero-spotlight::after {
    /* Escurece o fundo ambiente por baixo do texto, para continuar
       legível independentemente das cores da capa. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12,14,26,0.55) 0%, rgba(12,14,26,0.92) 55%, #0c0e1a 100%);
    z-index: 1;
}
.izua-hero-spotlight-inner {
    display: flex;
    align-items: center;
    gap: 44px;
    min-height: 440px;
    padding: 40px 0;
    position: relative;
    z-index: 2;
}
.izua-hero-spotlight-photo-wrap {
    flex: 0 0 320px;
    align-self: stretch;
    position: relative;
    animation: izua-hero-in 0.8s ease both;
}
.izua-hero-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    background: var(--izua-primary, #BE3636);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.izua-hero-spotlight-photo {
    height: 100%;
    min-height: 360px;
    background-size: cover;
    background-position: center top;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.izua-hero-spotlight-content {
    flex: 1 1 auto;
    min-width: 0;
    animation: izua-hero-in 0.8s ease 0.12s both;
}
@keyframes izua-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .izua-hero-spotlight-photo-wrap,
    .izua-hero-spotlight-content {
        animation: none;
    }
}
.izua-hero-eyebrow {
    display: inline-block;
    color: var(--izua-amber, #E09B2D);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.izua-hero-headline {
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.izua-hero-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 0 32px;
}
.izua-hero-desc strong {
    color: #fff;
}
.izua-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.izua-hero-btn-primary,
.izua-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 30px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.izua-hero-btn-primary {
    background: var(--izua-primary, #BE3636);
    color: #fff;
    box-shadow: 0 8px 24px rgba(190, 54, 54, 0.35);
}
.izua-hero-btn-primary:hover {
    background: var(--izua-primary-soft, #D9564F);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(190, 54, 54, 0.45);
}
.izua-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.izua-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 767px) {
    .izua-hero-spotlight-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 30px;
        min-height: 0;
        gap: 24px;
    }
    .izua-hero-spotlight-photo-wrap {
        flex-basis: auto;
        min-height: 260px;
    }
    .izua-hero-spotlight-photo {
        border-radius: 0;
        min-height: 260px;
    }
    .izua-hero-spotlight-content {
        padding: 0 20px;
    }
    .izua-hero-headline {
        font-size: 28px;
    }
}

.izua-hero {
    background: linear-gradient(135deg, #1a0d0d 0%, #14182a 60%, #1a1408 100%);
    padding: 40px 0 50px;
    text-align: center;
}
.izua-hero-title {
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 10px;
}
.izua-hero-subtitle {
    color: #cfcfcf;
    font-size: 16px;
    margin: 0 auto 28px;
    max-width: 560px;
}
.izua-hero-search {
    max-width: 700px;
    margin: 0 auto;
}

.izua-home-sections {
    padding: 40px 0 60px;
}
.izua-home-section {
    margin-bottom: 48px;
}
.izua-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-left: 12px;
    border-left: 4px solid #BE3636;
}
.izua-section-header h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* Lançamentos + Vídeos lado a lado (estilo "Lançamentos em Destaque" + "TV") */
.izua-home-split {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
    align-items: start;
}
.izua-home-split-col .izua-video-grid {
    /* Coluna mais estreita: 1 vídeo por linha, em lista vertical,
       como o painel "TV Sua Música". */
    grid-template-columns: 1fr;
}
@media (max-width: 900px) {
    .izua-home-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .izua-home-split-col .izua-video-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.izua-home-cta {
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 40px 20px;
}
.izua-home-cta h2 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 8px;
}
.izua-home-cta p {
    color: #cfcfcf;
    margin: 0 0 20px;
}
.izua-home-cta-btn {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 28px;
    background: #E09B2D;
    color: #14182a;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
}
.izua-home-cta-btn:hover {
    background: #c9861f;
    color: #14182a;
}

@media (max-width: 600px) {
    .izua-hero {
        padding: 45px 0 35px;
    }
    .izua-hero-title {
        font-size: 27px;
    }
    .izua-hero-subtitle {
        font-size: 14px;
        padding: 0 16px;
    }
}

/* ============================================================
   CABEÇALHO ESTILO "PLATAFORMA" — ago/2026
   Reveste os elementos existentes do cabeçalho (busca, login,
   registo) em formato de pílula, deixando tudo mais limpo e
   parecido com o padrão usado pelos grandes sites do setor —
   mantendo a paleta vermelho/âmbar da AngolaMusicas.
   ============================================================ */
.ms_top_search {
    border-radius: 30px !important;
    overflow: hidden;
}
.ms_top_search input.searchinput {
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
a.ms_btn.reg_btn,
a.ms_btn.login_btn {
    border-radius: 30px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}
a.ms_btn.reg_btn {
    background: #BE3636 !important;
    border-color: #BE3636 !important;
}
a.ms_btn.login_btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
a.ms_btn.reg_btn:hover {
    background: #a02e2e !important;
}
a.ms_btn.login_btn:hover {
    border-color: #E09B2D !important;
    color: #E09B2D !important;
}

/* ============================================================
   BARRA DE NAVEGAÇÃO SECUNDÁRIA (Ranking / Explorar / Géneros / Vídeos)
   ============================================================ */
.izua-subnav {
    background: #14182a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.izua-subnav-inner {
    display: flex;
    justify-content: center;
}
.izua-subnav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.izua-subnav-item {
    position: relative;
}
.izua-subnav-item > a {
    display: block;
    padding: 14px 18px;
    min-height: 44px;
    line-height: 16px;
    color: #e5e5e5;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.izua-subnav-item > a:hover,
.izua-subnav-item:hover > a {
    color: #E09B2D;
}
.izua-subnav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #1c2138;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 200;
}
.izua-subnav-item.has-dropdown:hover .izua-subnav-dropdown {
    display: block;
}
.izua-subnav-dropdown li a {
    display: block;
    padding: 10px 18px;
    min-height: 40px;
    color: #cfcfcf;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.izua-subnav-dropdown li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
/* Ícones nos itens do menu */
.izua-subnav-item > a i.fa {
    margin-right: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.izua-subnav-item > a:hover i.fa,
.izua-subnav-item:hover > a i.fa {
    color: inherit;
}
.izua-subnav-caret {
    margin-left: 6px !important;
    margin-right: 0 !important;
    font-size: 9px !important;
    transition: transform 0.2s ease;
}
.izua-subnav-item.izua-subnav-open .izua-subnav-caret {
    transform: rotate(180deg);
}
.izua-subnav-dropdown li a i.fa {
    margin-right: 8px;
    width: 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* Estado "aberto" ao tocar (telemóvel) — o JS (izua_subnav_touch_js)
   junta esta classe; sem JS/toque, o CSS ainda cai para trás no
   :hover normal em ecrãs com rato. */
.izua-subnav-item.izua-subnav-open > .izua-subnav-dropdown {
    display: block;
}

/* CORREÇÃO REAL DO MENU MOBILE (ago/2026): havia aqui uma regra que
   escondia os submenus por completo em ecrãs pequenos
   ("display:none !important"), tornando Explorar/Géneros
   impossíveis de abrir no telemóvel — não era só o hover que faltava,
   era mesmo bloqueado. Agora: menu principal desliza horizontalmente
   (como os carrosséis), e os submenus abrem a toque a seguir ao
   item, ocupando a largura toda — mais fácil de usar com o dedo do
   que uma caixa pequena a flutuar por cima. */
@media (max-width: 767px) {
    .izua-subnav-inner {
        justify-content: flex-start;
    }
    .izua-subnav-inner {
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
    .izua-subnav-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        width: 100%;
    }
    .izua-subnav-menu::-webkit-scrollbar {
        display: none;
    }
    .izua-subnav-item {
        flex: 0 0 auto;
    }
    .izua-subnav-item > a {
        padding: 12px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
    .izua-subnav-dropdown {
        display: none;
        position: absolute;
        left: 0;
        min-width: 220px;
        max-width: 80vw;
    }
    .izua-subnav-item.izua-subnav-open > .izua-subnav-dropdown {
        display: block;
    }
    .izua-subnav-dropdown li a {
        padding: 12px 18px;
        white-space: normal;
    }
}

/* ============================================================
   HERO — fundo dinâmico (capa da faixa nº1) + camada escura +
   estatísticas do site
   ============================================================ */
.izua-hero {
    position: relative;
    padding: 90px 0 60px;
    text-align: center;
    background-color: #14182a;
    background-image: var(--izua-hero-bg, none);
    background-size: cover;
    background-position: center 30%;
    overflow: hidden;
}
.izua-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 8, 8, 0.55) 0%, rgba(15, 12, 12, 0.85) 55%, #14182a 100%);
}
.izua-hero-content {
    position: relative;
    z-index: 2;
}
.izua-hero-stats {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.izua-hero-stat {
    display: flex;
    flex-direction: column;
}
.izua-hero-stat strong {
    color: #E09B2D;
    font-size: 24px;
    font-weight: 800;
}
.izua-hero-stat span {
    color: #cfcfcf;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.izua-section-more {
    color: #E09B2D;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.izua-section-more:hover {
    color: #fff;
}

/* ============================================================
   VÍDEOS DO YOUTUBE — grade + modal
   ============================================================ */
.izua-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.izua-video-card {
    cursor: pointer;
}
.izua-video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.izua-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(190, 54, 54, 0.9);
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    transition: background 0.2s ease;
}
.izua-video-card:hover .izua-video-play {
    background: #BE3636;
}
.izua-video-title {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}
.izua-video-modal.is-open {
    display: flex;
}
.izua-video-modal-inner {
    position: relative;
    width: min(900px, 92vw);
    aspect-ratio: 16 / 9;
}
.izua-video-modal-frame,
.izua-video-modal-frame iframe {
    width: 100%;
    height: 100%;
}
.izua-video-modal-close {
    position: absolute;
    top: -36px;
    right: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Arquivo de vídeos (archive-izua-video.php) */
.izua-video-archive {
    padding: 40px 0 60px;
}

/* ============================================================
   PLAYER FIXO — visual alinhado à marca (ago/2026)
   ============================================================ */

/* Botão "Queue": da cor padrão do tema (ciano) para a marca */
.jp_queue_btn a {
    background-color: #BE3636 !important;
}
.jp_queue_btn a:hover {
    background-color: #a02e2e !important;
}

/* Barra de progresso e volume: gradiente da marca em vez de cor lisa,
   com um ponto que só aparece ao passar o rato (menos "ruído" visual
   quando não se está a interagir). */
.jp-play-bar,
.jp-seek-bar .jp-play-bar {
    background: linear-gradient(90deg, var(--izua-primary, #BE3636), var(--izua-amber, #E09B2D)) !important;
    transition: height 0.15s ease;
}
.jp-progress .bullet {
    background: var(--izua-amber, #E09B2D) !important;
    border-color: var(--izua-amber, #E09B2D) !important;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.jp-progress:hover .bullet {
    opacity: 1;
}

/* Fundo do player: mesmo tom escuro do resto do site, não cinza claro
   genérico — deixa a barra parecer parte do mesmo sistema visual. */
.ms_player_wrapper {
    background-color: #14182a !important;
    border-top: none;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    /* CORREÇÃO (ago/2026, Izua Digital): esta regra tinha "position:
       relative", que substituía sem querer o "position: fixed; bottom:
       0;" que o tema pai define para prender o leitor ao fundo do ecrã.
       Resultado: o leitor deixava de flutuar fixo e passava a aparecer
       encaixado no meio do conteúdo, logo acima do rodapé — exatamente
       o que apareceu num print do cliente. "fixed" mantém o leitor
       sempre visível no fundo E continua a servir de âncora válida para
       o ::before por baixo (position:fixed também estabelece contexto
       de posicionamento para descendentes absolutos, tal como
       "relative" fazia). */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}
/* Fio de cor da marca no topo do player, em vez de uma linha cinza
   simples — o mesmo tipo de acabamento discreto que o hero já tem. */
.ms_player_wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--izua-primary, #BE3636), var(--izua-amber, #E09B2D));
    opacity: 0.8;
}

/* ============================================================
   PLAYER FINO, UMA SÓ LINHA (ago/2026, correção)
   -----------------------------------------------------------------
   A tentativa anterior (display:contents com "order") partiu-se
   dentro do sistema de flex-wrap do jPlayer — cada grupo (controlos,
   progresso, volume) acabou por cair numa linha própria, deixando a
   barra alta em vez de fina. Correção: forçar TUDO numa única linha
   com "flex-wrap: nowrap !important" no contentor principal, e uma
   altura máxima fixa como rede de segurança.
   ============================================================ */
.ms_player_wrapper .jp-gui.jp-interface,
.ms_player_wrapper .jp-type-playlist,
.ms_player_wrapper .flex-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px;
}
.ms_player_wrapper .jp-gui.jp-interface {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* CORREÇÃO DEFINITIVA (ago/2026): o JavaScript do jPlayer põe a capa
   como imagem de fundo diretamente neste elemento — e este mesmo
   elemento também contém o nome da faixa/artista lá dentro. Antes
   tínhamos duas regras a competir (uma tratava-o como só-a-capa,
   60x60px; outra como só-contentor-de-texto) — o resultado era uma
   miniatura e um texto a lutarem pelo mesmo espaço. Agora: a imagem
   de fundo fica limitada a um quadrado 56x56 encostado à esquerda
   (background-size fixo, não "cover" a esticar por todo o lado), e o
   texto ganha padding para começar já depois desse quadrado. */
/* CORREÇÃO DEFINITIVA (ago/2026) — descoberta no JavaScript real do
   tema (assets/js/plugins/player/audio-player.js): a capa NÃO é um
   fundo (background-image) do .player_left, como eu tinha assumido.
   É uma tag <img> normal, inserida pelo JavaScript sempre que a
   música muda, dentro de ".que_img" — e nunca lhe tínhamos dado
   tamanho nenhum, por isso aparecia enorme (o tamanho original do
   ficheiro). A estrutura real, confirmada no código:

     .jp-now-playing
       .jp-track-name (o wrapper, apesar do nome)
         .que_img > img          ← A CAPA (isto é que faltava estilizar)
         .que_data                ← nome da música
           .jp-artist-name        ← artista, aninhado AQUI dentro
*/
/* CORREÇÃO DE VERDADE (ago/2026): .player_left e o resto dos
   controlos (dentro de .jp-type-playlist) são IRMÃOS dentro de
   ".jp-audio" — e essa classe nunca tinha sido posta em flex, por
   isso empilhavam-se como blocos normais, um por baixo do outro,
   independentemente do espaço disponível no ecrã. */
.jp-audio {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px;
    width: 100%;
}
.jp-type-playlist {
    flex: 1 1 auto;
    min-width: 0;
}

.player_left {
    /* CORREÇÃO DEFINITIVA (ago/2026): o tema pai define esta classe
       como "position: absolute" (para um layout antigo que já não
       usamos) — nunca tínhamos anulado isso explicitamente, por isso
       a capa "escapava" do fluxo normal da barra e flutuava por cima
       de tudo, incluindo por cima do hero. */
    position: static !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.jp-track-name {
    /* CORREÇÃO (ago/2026): o tema pai tem uma regra ".jp-track-name
       { flex-direction: column }" que devia estar limitada ao estilo
       de leitor alternativo ".ms_player-style-two" (que não usamos),
       mas por engano do próprio tema aplica-se sempre — é essa regra
       que empilhava a capa por cima do texto. Forçamos "row" com
       !important para garantir que ganha sempre. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
}
.que_img {
    flex: 0 0 auto;
    line-height: 0;
    width: 44px !important;
}
.que_img img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.que_data {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Sora', 'Maven Pro', sans-serif;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    width: auto !important;
    max-width: 340px;
    overflow: hidden;
}
/* Alinhamento vertical (ago/2026): o tema pai define ".ms_play_song"
   como "display:inline-block" — o que faz o conteúdo alinhar-se pela
   base do texto (baseline), não ao centro da linha, deixando a capa
   e o título ligeiramente desalinhados dos botões de play ao lado.
   Forçamos toda a cadeia a usar flex + centrado verticalmente. */
.ms_play_song,
.play_song_name,
.play_song_name a {
    display: flex !important;
    align-items: center;
}
.player_left,
.jp-controls.flex-item,
.jp-toggles {
    align-self: center;
}

.que_data > * {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remover o fundo em gradiente atrás da capa/título — não consigo
   confirmar ao certo qual elemento específico o está a causar sem
   ver o site ao vivo, por isso neutralizo o fundo em todos os
   candidatos prováveis nesta zona do player. */
.player_left,
.ms_play_song,
.play_song_name,
.play_song_name a,
.jp-now-playing,
.jp-track-name {
    background: transparent !important;
    background-image: none !important;
}

/* NOTA (ago/2026): tinha posto um limite rígido de altura aqui para
   deixar o leitor mais fino, mas isso corria o risco de empurrar
   outros elementos para fora da área visível se precisassem de mais
   espaço. Removido — o leitor ajusta a altura ao que o conteúdo
   precisar, com folgas reduzidas (ver .player_mid abaixo) em vez de
   um limite rígido. */
.player_mid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   REORGANIZAÇÃO DO PLAYER (ago/2026) — mais respiração entre
   grupos, tipografia clara para título/artista, controlos redondos.
   Só CSS: nenhuma classe usada pelo jPlayer foi tocada, para não
   arriscar a reprodução em si.
   ============================================================ */

/* CORREÇÃO (ago/2026, pedido do cliente): a capa fica bem à esquerda,
   junto ao título — voltámos atrás na tentativa de "flutuar" o texto
   centrado sobre a barra toda, porque estava a criar mais problemas
   do que resolvia. Este é o layout definitivo. */
.jp-now-playing {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.jp-artist-name {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 400;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jp-artist-name::before {
    content: '— ';
    color: rgba(255, 255, 255, 0.35);
}
.jp-artist-name:empty {
    display: none;
}

/* Seta pequena junto ao título (.play-left-arrow) — abre um menu
   extra de download/favoritos/playlist que já existe na própria
   página da música. Escondida a pedido, para limpar o visual. */
.play-left-arrow {
    display: none !important;
}
/* (a regra que escondia a capa por completo no telemóvel foi
   substituída — ver a secção "LEITOR NO TELEMÓVEL" mais abaixo, que
   encolhe a capa e o título em vez de os esconder) */

/* Controlos (anterior / play / seguinte): botões discretos e
   consistentes — mais parecido com o estilo comedido do Sua Música
   do que com círculos grandes e vermelhos. */
.jp-controls.flex-item {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.jp-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}
.jp-controls button:hover {
    background: rgba(255, 255, 255, 0.16);
}
.jp-controls button.jp-play {
    background: var(--izua-primary, #BE3636);
    box-shadow: 0 4px 14px rgba(190, 54, 54, 0.45);
}
.jp-controls button.jp-play:hover {
    background: var(--izua-primary-soft, #D9564F);
    box-shadow: 0 6px 18px rgba(190, 54, 54, 0.6);
    transform: scale(1.06);
}

/* Tempo + barra de progresso — CORREÇÃO DEFINITIVA (ago/2026):
   o próprio tema já separa os dois tempos com position:absolute
   (.jp-current-time à esquerda, .jp-duration à direita, dentro de
   .jp-time-holder). Ao pôr "display:flex" nesse contentor nas
   tentativas anteriores, ele perdeu a largura (elementos absolutos
   não contam para o tamanho automático de um flex item), e os dois
   tempos colapsaram quase para o mesmo sítio — daí ficarem colados.
   Corrigido: já não tocamos no "display" do .jp-time-holder, só
   garantimos que tem a largura toda do espaço disponível. */
.jp-progress-container {
    flex: 1 1 auto;
    min-width: 140px;
}
.jp-time-holder {
    width: 100%;
}
.jp-progress {
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

/* Ícones de ação (download, favoritos, playlist, partilhar): mais
   espaçados e com um estado de hover claro, em vez de ficarem
   espremidos uns contra os outros. */
.play_song_options ul {
    display: flex;
    gap: 4px;
}
.play_song_options ul li a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.play_song_options ul li a:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Shuffle / Repeat: mesma linguagem visual discreta dos controlos principais */
.jp-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
}
.jp-toggles button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}
.jp-toggles button:hover,
.jp-toggles button.jp-shuffle-active,
.jp-toggles button.jp-repeat-active {
    background: var(--izua-primary, #BE3636);
}

/* Botão "Queue": pílula consistente com o resto da marca, já não só
   com a cor — também com espaçamento e alinhamento vertical certos. */
.que_text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
}
/* Mover o botão "Queue" para a direita da barra do leitor (pedido do
   cliente) — estava entre a capa/título e os controlos de reprodução;
   com "order" no contexto flex do ".jp-audio", fica sempre no fim da
   linha, à direita de tudo o resto, sem precisar de mexer no HTML
   (que é gerado pelo jPlayer/plugin, não pelo child theme). */
.jp-audio > .que_text,
.ms_player_wrapper .que_text {
    order: 10;
}
.jp-audio > .player_left {
    order: 1;
}
.jp-audio > .jp-type-playlist {
    order: 2;
}

/* Painel da fila (lista de músicas em espera): itens espaçados e
   legíveis, em vez de encostados uns aos outros. */
.jp-playlist ul li {
    padding: 10px 14px;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.jp-playlist ul li:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   CORREÇÃO: ÍCONES DO MENU LATERAL (ago/2026)
   O span original usa uma sprite de imagem (background-image) que só
   cobre ~9 termos musicais do tema. Para os itens onde injetamos um
   ícone Font Awesome de verdade (functions.php), neutralizamos essa
   sprite e centralizamos/dimensionamos o ícone certo no lugar.
   ============================================================ */
.ms_nav_wrapper span.nav_icon > .icon.izua-menu-icon {
    background-image: none !important;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Itens sem nenhum wrapper ".nav_icon" nativo (o tema só cria esse
   wrapper quando há imagem configurada em Aparência → Menus) — o
   nosso ícone é inserido direto no link, então garantimos o espaço
   certo aqui também. */
.ms_nav_wrapper ul li > a > .icon.izua-menu-icon {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    vertical-align: middle;
}
.izua-menu-icon .fa {
    font-size: 18px;
    color: #cfcfcf;
    transition: color 0.2s ease;
}
.ms_nav_wrapper ul li a:hover .izua-menu-icon .fa,
.ms_nav_wrapper ul li.current_page_item a .izua-menu-icon .fa {
    color: #E09B2D;
}

/* ============================================================
   PÁGINA DE FAIXA ÚNICA: texto mal posicionado ao lado da capa
   ============================================================
   O tema usa "float" para colocar a capa e o texto lado a lado, mas
   float não centraliza verticalmente — o texto (título, descrição,
   botões) ficava grudado no topo, com um vão vazio embaixo quando a
   capa é mais alta que o texto. Passa a usar flexbox, centralizando
   os dois verticalmente um em relação ao outro. As larguras e o
   empilhamento no telemóvel (já existentes no tema) continuam
   funcionando normalmente. */
.album_single_data.single-tack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.album_single_data.single-tack .album_single_img,
.album_single_data.single-tack .album_single_text {
    float: none;
}
/* ============================================================
   RODAPÉ COMPLETO (Izua Digital, ago/2026)
   ============================================================ */
.izua-mega-footer {
    background: #0f0d13;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 48px 0 0;
    margin-top: 40px;
}
.izua-mega-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding-bottom: 32px;
}
.izua-mega-footer-col h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 16px;
}
.izua-mega-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.izua-mega-footer-col ul li {
    margin-bottom: 10px;
}
.izua-mega-footer-col ul li a {
    color: var(--izua-text-muted);
    text-decoration: none;
    font-size: 14px;
}
.izua-mega-footer-col ul li a:hover {
    color: var(--izua-amber);
}
.izua-mega-footer-social {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.izua-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease;
}
.izua-social-icon:hover { background: var(--izua-primary); color: #fff; }
.izua-mega-footer-blurb {
    color: var(--izua-text-muted);
    font-size: 13px;
    line-height: 1.6;
    max-width: 320px;
}
.izua-mega-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 18px 0;
    /* Espaço extra para o player fixo no rodapé não tapar o texto */
    margin-bottom: 70px;
}
.izua-mega-footer-bottom p {
    color: var(--izua-text-muted);
    font-size: 12px;
    margin: 0;
    text-align: center;
}
@media (max-width: 900px) {
    .izua-mega-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ============================================================
   PLAYLISTS RECOMENDADAS
   ============================================================ */
.izua-playlist-carrossel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.izua-playlist-carrossel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 4px 2px 10px;
    flex: 1 1 auto;
}
.izua-playlist-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 170px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.izua-playlist-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--izua-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.izua-playlist-thumb--vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 32px;
    background: linear-gradient(135deg, #2c2836, #17141c);
}
.izua-playlist-titulo {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-playlist-autor {
    color: var(--izua-blue);
    font-size: 12px;
    font-weight: 600;
}

/* Página de uma playlist */
.izua-playlist-single { padding: 40px 0 60px; }
.izua-playlist-single-header {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.izua-playlist-single-capa {
    width: 200px;
    height: 200px;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
    border-radius: var(--izua-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.izua-playlist-single-eyebrow {
    color: var(--izua-blue);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.izua-playlist-single-info h1 {
    color: #fff;
    font-size: 30px;
    margin: 4px 0;
}
.izua-playlist-single-autor,
.izua-playlist-single-total {
    color: var(--izua-text-muted);
    font-size: 14px;
    margin: 2px 0;
}
.izua-playlist-single-tracks {
    list-style: none;
    margin: 0;
    padding: 0;
}
.izua-playlist-single-track {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
}
.izua-playlist-single-track:hover { background: rgba(255, 255, 255, 0.04); }
.izua-playlist-single-track-num {
    color: var(--izua-text-muted);
    font-size: 13px;
    width: 22px;
    text-align: center;
    flex: 0 0 auto;
}
.izua-playlist-single-track-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
}
.izua-playlist-single-track-titulo {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.izua-playlist-single-track-artista {
    color: var(--izua-text-muted);
    font-size: 12px;
    font-weight: 400;
}
.izua-playlist-single-track-add {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.izua-playlist-single-track-add:hover { background: var(--izua-primary); color: #fff; }

/* ============================================================
   NOTÍCIAS
   ============================================================ */
.izua-noticias-destaque {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}
.izua-noticia-principal {
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--izua-radius);
    text-decoration: none;
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.izua-noticia-principal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.05) 60%);
}
.izua-noticia-principal-titulo {
    position: relative;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}
.izua-noticias-secundarias {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.izua-noticia-secundaria {
    display: flex;
    gap: 12px;
    text-decoration: none;
    align-items: center;
}
.izua-noticia-secundaria-thumb {
    width: 84px;
    height: 64px;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.06);
}
.izua-noticia-secundaria-titulo {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
@media (max-width: 900px) {
    .izua-noticias-destaque { grid-template-columns: 1fr; }
}

.izua-noticias-lista { list-style: none; margin: 0; padding: 0; }
.izua-noticia-item { margin-bottom: 8px; }
.izua-noticia-item a {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    padding: 8px;
    border-radius: 6px;
}
.izua-noticia-item a:hover { background: rgba(255, 255, 255, 0.04); }
.izua-noticia-item-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
}
.izua-noticia-item-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.izua-noticia-item-titulo {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-noticia-item-data { color: var(--izua-text-muted); font-size: 11px; }

/* ============================================================
   UM SÓ MENU (ago/2026) — esconder o menu lateral de ícones
   nativo do tema (.ms_sidemenu_wrapper, gerado pelo plugin
   Miraculous Core) e libertar o espaço de 80px que ele reservava,
   já que agora a navegação vive só na barra .izua-subnav.
   ============================================================ */
body.izua-sem-sidemenu .ms_sidemenu_wrapper,
body.izua-sem-sidemenu .ms_nav_close {
    display: none !important;
}
/* CORREÇÃO (ago/2026, 2ª tentativa): confirmámos no CSS do próprio
   tema que quem reserva o espaço do menu lateral não é #content nem
   #primary (isso não existia no tema) — é esta classe específica:
   .ms_content_wrapper { margin-left:160px; margin-right:80px; } —
   usada em TODAS as páginas gerais do site (front-page.php inclusive,
   como confirmámos ao ler o próprio ficheiro). Zeramos as duas. */
body.izua-sem-sidemenu .ms_content_wrapper,
body.izua-sem-sidemenu.div-wrapper-style-two .ms_content_wrapper,
body.izua-sem-sidemenu.slide_menu.div-wrapper-style-two .ms_content_wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.izua-sem-sidemenu .ms_header {
    display: none !important;
}
body.izua-sem-sidemenu .breadcrumbs_wrapper,
body.izua-sem-sidemenu .ms_footer_inner,
body.izua-sem-sidemenu .ms_footer_logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.izua-subnav {
    background: #100e15;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 500;
}

/* ============================================================
   BARRA SUPERIOR NOVA (logótipo + pesquisa + Registar/Login)
   ============================================================ */
.izua-top-bar {
    background: #1b2039;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.izua-top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.izua-top-bar-logo {
    flex: 0 0 auto;
    display: block;
}
.izua-top-bar-logo img {
    height: 46px;
    width: auto;
    display: block;
}
.izua-top-bar-search {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.izua-top-bar-search .search-form {
    display: flex;
    width: 100%;
    max-width: 480px;
}
.izua-top-bar-search .searchinput {
    flex: 1 1 auto;
    height: 44px;
    border-radius: 6px 0 0 6px;
    border: none;
    padding: 0 16px;
    /* 16px, não 14px: campo tocado em quase todas as visitas em
       telemóvel — abaixo de 16px o Safari/iOS faz zoom automático
       ao focar, o que atrapalha a experiência logo na primeira
       interação com o site. */
    font-size: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.izua-top-bar-search .searchinput::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.izua-top-bar-search .search-submit {
    flex: 0 0 auto;
    width: 48px;
    height: 44px;
    border: none;
    border-radius: 0 6px 6px 0;
    background: var(--izua-primary);
    color: #fff;
    cursor: pointer;
}
.izua-top-bar-search .search-submit:hover {
    background: var(--izua-primary-soft);
}
.izua-top-bar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.izua-top-bar-actions .ms_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.izua-top-bar-actions .ms_btn span {
    display: inline-block;
    line-height: 1;
}
.izua-top-bar-ou {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}
.izua-top-bar-actions .reg_btn {
    background: var(--izua-primary);
    color: #fff;
}
.izua-top-bar-actions .reg_btn:hover {
    background: var(--izua-primary-soft);
    color: #fff;
}
.izua-top-bar-actions .login_btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
.izua-top-bar-actions .login_btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
@media (max-width: 900px) {
    .izua-top-bar-actions .ms_btn.reg_btn::after,
    .izua-top-bar-actions .ms_btn.login_btn::after {
        /* O tema pai injeta um ícone aqui em ecrãs estreitos — como
           reaproveitámos as classes "reg_btn"/"login_btn" para os
           nossos botões (para a pesquisa/login continuarem a
           funcionar), herdámos esse ícone sem querer, duplicando o
           que já mostramos como texto. */
        content: none !important;
    }
    .izua-top-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
    .izua-top-bar-search {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .izua-top-bar-search .search-form {
        width: 100%;
        max-width: 100%;
    }
    .izua-top-bar-search .searchinput {
        flex: 1 1 auto;
        width: auto !important;
    }
}

/* ============================================================
   DINAMISMO (ago/2026) — animações de entrada, shimmer nas capas
   vazias, e leve automação nos carrosséis
   ============================================================ */

/* Secções da home aparecem suavemente ao entrar no ecrã (JS adiciona
   .izua-reveal--pending + .is-visible via IntersectionObserver — ver
   izua_scroll_dynamics_js).
   IMPORTANTE (ago/2026): já tivemos secções inteiras a ficar invisíveis
   por o JavaScript de revelação não disparar em certas condições. Para
   nunca mais acontecer, o estado por OMISSÃO é visível — só fica
   escondido (para a animação de entrada) nos casos em que o próprio JS
   confirma, no momento, que o elemento ainda não está à vista. Se o
   JavaScript não correr de todo, o conteúdo aparece sempre normalmente. */
.izua-reveal {
    opacity: 1;
    transform: none;
}
.izua-reveal.izua-reveal--pending {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.izua-reveal.izua-reveal--pending.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Quem prefere menos movimento no sistema não fica sujeito à animação */
@media (prefers-reduced-motion: reduce) {
    .izua-reveal,
    .izua-reveal.izua-reveal--pending {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Efeito "shimmer" nas capas/avatares que ainda não têm imagem —
   fica muito mais vivo do que uma caixa escura parada. */
.izua-ranking-thumb--vazio,
.izua-playlist-thumb--vazio,
.izua-avatar--vazio {
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.04) 30%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 70%
    );
    background-size: 200% 100%;
    animation: izua-shimmer 2.2s ease-in-out infinite;
}
@keyframes izua-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .izua-ranking-thumb--vazio,
    .izua-playlist-thumb--vazio,
    .izua-avatar--vazio {
        animation: none;
    }
}

/* Hover mais rico nos cartões existentes — leve escala + sombra,
   junta-se ao translateY que já existia nas capas de ranking. */
.izua-genero-card,
.izua-playlist-card,
.izua-artista-avatar,
.izua-video-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.izua-genero-card:hover {
    transform: translateY(-4px) scale(1.02);
}
.izua-playlist-card:hover .izua-playlist-thumb {
    transform: translateY(-3px) scale(1.03);
}
.izua-playlist-thumb {
    transition: transform 0.25s ease;
}
.izua-artista-card:hover .izua-artista-avatar {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

/* Carrosséis: cursor e leve indicação de que se pode arrastar */
/* Esconder a barra de scroll nativa — já há setas e arrasto para
   navegar, a barra cinzenta por baixo não ficava com ar profissional. */
.izua-ranking-carousel,
.izua-artista-carrossel,
.izua-playlist-carrossel {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge legado */
}
.izua-ranking-carousel::-webkit-scrollbar,
.izua-artista-carrossel::-webkit-scrollbar,
.izua-playlist-carrossel::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Edge novo */
}

.izua-ranking-carousel,
.izua-artista-carrossel,
.izua-playlist-carrossel {
    scroll-behavior: smooth;
    cursor: grab;
}
.izua-ranking-carousel:active,
.izua-artista-carrossel:active,
.izua-playlist-carrossel:active {
    cursor: grabbing;
}

/* ============================================================
   RESPONSIVIDADE — RONDA GERAL (ago/2026)
   ============================================================ */

/* Leitor de música: esquecido nos ajustes anteriores — forçámos tudo
   numa linha só a pensar no desktop. Em ecrãs pequenos isso fica
   apertado, por isso simplificamos: escondemos o que é menos
   essencial (nome do artista, atalhos de shuffle/repeat, texto do
   botão Queue) e deixamos só o essencial — play, progresso, volume. */
/* LEITOR NO TELEMÓVEL (ago/2026, revisto) — a versão anterior desta
   secção apontava para a estrutura antiga (antes de sabermos que
   ".jp-track-name" é o CONTENTOR da capa+texto, não o texto em si) e
   escondia a capa por completo. Agora: mantém a capa pequena e o
   título (encolhidos), esconde só o que é dispensável num ecrã
   pequeno — nome do artista, atalhos de shuffle/repetir, texto do
   botão Queue, e o controlo de volume nos telemóveis mais estreitos
   (o volume físico do aparelho já trata disso). */
@media (max-width: 700px) {
    .player_left {
        max-width: 130px;
    }
    .que_img img {
        width: 34px;
        height: 34px;
    }
    .que_data {
        font-size: 12px;
        max-width: 80px;
    }
    .jp-artist-name {
        display: none;
    }
    .jp-toggles {
        display: none;
    }
    .que_text span {
        display: none;
    }
    .que_text {
        padding: 8px 12px;
    }
    .jp-controls button {
        width: 28px;
        height: 28px;
    }
    .izua-volume-slider {
        width: 56px;
    }
}
@media (max-width: 480px) {
    .play_song_options {
        display: none;
    }
    .izua-volume-slider-wrap {
        display: none;
    }
    .jp-audio {
        gap: 10px;
    }
    .que_data {
        max-width: 60px;
    }
}

/* Fundo ambiente do hero: o desfoque grande (blur 50px + escala 1.6)
   pode ficar pesado em telemóveis mais fracos — simplificamos para um
   gradiente liso nesses ecrãs, mantendo o efeito só onde há mais
   folga de processamento (tablet/desktop). */
@media (max-width: 600px) {
    .izua-hero-spotlight-ambient {
        display: none;
    }
}

/* Carrosséis (ranking, artistas, playlists): cartões um pouco mais
   pequenos em ecrãs estreitos, para caber mais que "meio cartão" e
   dar a entender melhor que há mais para o lado. */
@media (max-width: 480px) {
    .izua-ranking-card {
        width: 132px;
    }
    .izua-playlist-card {
        width: 130px;
    }
    .izua-artista-card {
        width: 100px;
    }
    .izua-artista-avatar {
        width: 76px;
        height: 76px;
    }
}

/* Secções da home: menos espaço vertical entre blocos em ecrãs
   pequenos — no desktop faz sentido "respirar" mais, no telemóvel só
   empurra o conteúdo importante para baixo sem necessidade. */
@media (max-width: 600px) {
    .izua-home-section,
    .izua-home-split {
        margin-bottom: 32px;
    }
    .izua-section-header h2 {
        font-size: 17px;
    }
}

/* Página de uma playlist: capa e texto empilhados em vez de lado a
   lado, como já acontece no resto do site em ecrãs estreitos. */
@media (max-width: 600px) {
    .izua-playlist-single-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .izua-playlist-single-capa {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Rodapé: já empilha as colunas, falta só apertar o espaçamento para
   não ficar com demasiado vazio entre secções num ecrã pequeno. */
@media (max-width: 600px) {
    .izua-mega-footer {
        padding-top: 32px;
    }
    .izua-mega-footer-grid {
        gap: 28px;
    }
}

/* ============================================================
   HERO NÍVEL PREMIUM (ago/2026) — fonte Google Fonts (Sora), fundo
   ambiente com várias cores em movimento lento (como o "Now Playing"
   do Spotify), equalizador animado, e cartão em vidro fosco.
   ============================================================ */

/* Tipografia premium — só nos títulos de destaque */
.izua-hero-headline,
.izua-section-header h2,
.izua-noticia-principal-titulo {
    font-family: 'Sora', 'Maven Pro', sans-serif;
}
.izua-hero-headline {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Fundo ambiente enriquecido: a camada desfocada da capa (já existia)
   + duas "manchas" de cor extra, lentas e suaves, para dar a sensação
   de profundidade que o Spotify/Deezer usam nos ecrãs "A tocar agora". */
.izua-hero-spotlight-ambient {
    position: absolute;
    inset: -30%;
    background-image: var(--izua-hero-ambient, none);
    background-size: cover;
    background-position: center;
    filter: blur(50px) saturate(1.6) brightness(0.6);
    transform: scale(1.6);
    z-index: 0;
}
.izua-hero-spotlight-blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.izua-hero-spotlight-blobs::before,
.izua-hero-spotlight-blobs::after {
    content: '';
    position: absolute;
    width: 55vw;
    height: 55vw;
    max-width: 700px;
    max-height: 700px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    animation: izua-blob-drift 18s ease-in-out infinite alternate;
}
.izua-hero-spotlight-blobs::before {
    background: var(--izua-primary, #BE3636);
    top: -20%;
    left: -10%;
}
.izua-hero-spotlight-blobs::after {
    background: var(--izua-blue, #3B6FD8);
    bottom: -25%;
    right: -10%;
    animation-delay: -9s;
}
@keyframes izua-blob-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(4%, 3%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .izua-hero-spotlight-blobs::before,
    .izua-hero-spotlight-blobs::after {
        animation: none;
    }
}
@media (max-width: 600px) {
    .izua-hero-spotlight-blobs {
        display: none;
    }
}

/* Equalizador animado — o mesmo tipo de indicador "a tocar agora" das
   grandes plataformas, junto ao texto "Esta Semana". */
.izua-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.izua-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}
.izua-eq i {
    display: block;
    width: 3px;
    background: var(--izua-amber, #E09B2D);
    border-radius: 1px;
    animation: izua-eq-bounce 1s ease-in-out infinite;
}
.izua-eq i:nth-child(1) { height: 40%; animation-delay: -0.9s; }
.izua-eq i:nth-child(2) { height: 100%; animation-delay: -0.6s; }
.izua-eq i:nth-child(3) { height: 65%; animation-delay: -0.3s; }
.izua-eq i:nth-child(4) { height: 85%; animation-delay: 0s; }
@keyframes izua-eq-bounce {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
    .izua-eq i { animation: none; transform: scaleY(0.7); }
}

/* Cartão em vidro fosco por trás do texto — dá profundidade extra e
   garante contraste seja qual for a cor da capa em destaque. */
.izua-hero-spotlight-content {
    background: rgba(12, 14, 26, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 32px 36px;
}
@media (max-width: 767px) {
    .izua-hero-spotlight-content {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        padding: 0 20px;
    }
}

/* Botão principal: círculo de play destacado, ao estilo do botão
   verde do Spotify — mais icónico do que um ícone dentro do texto. */
.izua-hero-btn-primary {
    padding-left: 24px;
}
.izua-hero-btn-primary i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    font-size: 11px;
}

/* ============================================================
   VOLUME HORIZONTAL (ago/2026) — substitui o botão giratório
   ============================================================ */
.izua-volume-knob-hidden {
    display: none !important;
}
.izua-volume-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.izua-volume-icon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    width: 16px;
    text-align: center;
}
.izua-volume-icon:hover {
    color: #fff;
}
.izua-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--izua-amber, #E09B2D) 0%,
        var(--izua-amber, #E09B2D) 80%,
        rgba(255, 255, 255, 0.15) 80%,
        rgba(255, 255, 255, 0.15) 100%
    );
    cursor: pointer;
}
.izua-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.izua-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
@media (max-width: 480px) {
    .izua-volume-slider-wrap {
        display: none;
    }
}

/* ============================================================
   POLIMENTO FINAL — LEITOR MOBILE E ALVOS DE TOQUE (ago/2026)
   -----------------------------------------------------------------
   Ronda de acabamento: o visual do leitor já estava fino e alinhado
   à marca, mas nunca tínhamos revisto especificamente o que só se
   sente num telemóvel real — zoom automático do Safari, botões
   pequenos demais para o dedo, barra de progresso de 3px (herdada
   do tema pai) difícil de acertar, e o fundo do leitor a ficar por
   baixo da faixa de "gesto de casa" em iPhones recentes.
   Nada disto muda o VISUAL já aprovado — só a área que reage ao
   toque, que fica invisível e maior que o elemento visível.
   ============================================================ */

/* --- Espaço de segurança para iPhones com "gesto de casa" ---
   Sem isto, o leitor fixo fica parcialmente tapado por essa faixa
   de sistema, e o botão de play mais à direita pode ficar por baixo
   dela. env() com um valor de recuo (0) garante que não muda nada em
   telemóveis/navegadores que não têm essa faixa. */
.ms_player_wrapper {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* --- Sem o "flash" cinzento padrão ao tocar --- */
.ms_player_wrapper button,
.ms_player_wrapper a {
    -webkit-tap-highlight-color: transparent;
}

/* --- Sem seleção de texto acidental ao tocar repetidamente nos
   controlos (comum em barras de reprodução no telemóvel) — mas o
   título/artista continuam selecionáveis, para quem quiser copiar. --- */
.ms_player_wrapper {
    -webkit-user-select: none;
    user-select: none;
}
.que_data,
.jp-artist-name {
    -webkit-user-select: text;
    user-select: text;
}

/* --- Alvos de toque reais ≥ 40px nos botões do leitor ---
   O botão continua a parecer do mesmo tamanho (30px / 28px), mas um
   pseudo-elemento invisível maior garante que um toque "quase certo"
   ao lado do botão ainda regista. Recomendação Apple/Google: 44px;
   usamos 40px para não sobrepor botões vizinhos que ficam próximos
   uns dos outros no leitor. */
@media (max-width: 991px) {
    .jp-controls button,
    .jp-toggles button {
        position: relative;
        touch-action: manipulation;
    }
    .jp-controls button::after,
    .jp-toggles button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
    .izua-volume-icon {
        padding: 10px;
        margin: -10px;
        touch-action: manipulation;
    }
}

/* --- Barra de progresso: área de toque maior, visual igual ---
   O tema pai desenha a barra com só 3px de altura — elegante ao
   olhar, mas fácil de falhar com o dedo. Aqui aumentamos a altura
   real de ".jp-seek-bar" (o elemento a que o jPlayer liga o clique/
   toque para avançar a música), mas com "background-clip: content-box"
   a barra branca visível fica exatamente com os mesmos 3px de sempre
   — só a moldura invisível à volta é que cresce. A largura (usada
   para calcular a posição do clique) não é tocada, por isso a
   precisão de "avançar para X segundos" continua exata. */
@media (max-width: 991px) {
    .jp-seek-bar {
        box-sizing: content-box;
        padding: 9px 0;
        background-clip: content-box;
    }
    .jp-progress-container {
        cursor: pointer;
    }
}

/* --- Título/artista: garantir que nunca ultrapassam o espaço
   disponível em ecrãs muito estreitos (320-360px), mesmo com nomes
   longos, sem empurrar os controlos de play para fora da tela. --- */
@media (max-width: 360px) {
    .que_data {
        max-width: 48px;
    }
    .player_left {
        max-width: 96px;
    }
    .jp-audio {
        gap: 8px;
    }
    .jp-controls.flex-item {
        gap: 4px;
    }
}

/* ============================================================
   CORREÇÃO DEFINITIVA — GUERRA DE ESPECIFICIDADE COM O CSS DO
   TEMA PAI (ago/2026)
   -----------------------------------------------------------------
   DESCOBERTA (a causa raiz de o leitor aparecer "partido" no
   telemóvel, apesar de todas as correções já feitas): o ficheiro
   do tema pai assets/css/miraculous-custom-style.css tem o
   conteúdo inteiro repetido DUAS VEZES dentro do mesmo ficheiro
   (17 500 linhas — parece ter sido copiado/colado numa
   reformulação antiga e nunca limpo), e por todo o lado há dezenas
   de regras — muitas dentro de media queries diferentes, para
   larguras de ecrã diferentes — que ainda pertencem ao desenho
   ORIGINAL do leitor (baseado em position:absolute, alturas fixas
   tipo 60/80px, margens de 60px, botões redondos genéricos sem
   estilo), de antes de o termos reconstruído em flexbox.

   Já sabíamos disto para a propriedade "position" do .player_left
   (por isso já lá tínhamos !important), mas NUNCA tínhamos guardado
   "height", "margin", "padding" nem o VISUAL dos botões da mesma
   forma. E o problema é pior do que "o tema pai é mais específico":
   nalguns pontos, os nossos seletores têm a MESMA especificidade
   que os do tema pai (ex: ".jp-controls button.jp-play" contra
   ".jp-interface .jp-controls button") — nesses empates, quem
   ganha é quem carrega POR ÚLTIMO na página, e não temos garantia
   de que seja sempre o nosso ficheiro (o tema pai regista o seu
   próprio carregamento de CSS separadamente do nosso, e a ordem
   entre os dois pode variar consoante o que mais estiver ativo no
   site — por isso via captura de ecrã real via o cliente, o leitor
   apareceu com a capa deformada, a fila deslocada 60px para a
   direita e um botão de play genérico em vez do nosso círculo
   vermelho).

   Esta secção fecha esses buracos de propósito, com !important em
   cada propriedade que descobrimos estar em disputa — assim, seja
   qual for a ordem de carregamento ou qual das duas cópias do CSS
   do tema pai "ganhar" num dado ecrã, o nosso valor é sempre o que
   fica visível.
   ============================================================ */

/* --- Capa + título: nunca mais altura 0 nem posição absoluta --- */
.ms_player_wrapper .player_left,
.ms_player_wrapper.ms_player-style-one .player_left {
    position: static !important;
    height: auto !important;
    top: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
}
.ms_player_wrapper .que_img,
.ms_player_wrapper.ms_player-style-one .play_song_name span.que_img {
    width: 44px !important;
    height: 44px !important;
    float: none !important;
    position: static !important;
    top: auto !important;
}
.ms_player_wrapper .que_data,
.ms_player_wrapper.ms_player-style-one .play_song_name .que_data {
    width: auto !important;
    max-width: 340px !important;
    padding: 0 !important;
    float: none !important;
}

/* --- Grupo de controlos: nunca mais 60px de margem a mais --- */
.ms_player_wrapper .jp-type-playlist {
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.ms_player_wrapper .jp-gui.jp-interface.flex-wrap {
    left: auto !important;
    margin-left: 0 !important;
    top: auto !important;
}

/* --- Barra de progresso: nunca mais presa a 20-50% de largura,
   consoante o breakpoint do tema pai que calhar "ganhar" --- */
.ms_player_wrapper .jp-progress-container,
.ms_player_wrapper .jp-progress-container.flex-item {
    max-width: none !important;
    margin-left: 0 !important;
    flex: 1 1 auto !important;
    min-width: 100px !important;
}

/* --- Botões (anterior/play/seguinte): reforço do visual redondo
   discreto — mesma aparência já desenhada antes, agora garantida
   mesmo se o CSS do tema pai carregar depois do nosso. --- */
.ms_player_wrapper .jp-controls button {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
}
.ms_player_wrapper .jp-controls button.jp-play {
    background: var(--izua-primary, #BE3636) !important;
    box-shadow: 0 4px 14px rgba(190, 54, 54, 0.45) !important;
}
.ms_player_wrapper .jp-controls button.jp-play:hover {
    background: var(--izua-primary-soft, #D9564F) !important;
}
.ms_player_wrapper .jp-toggles button {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
}

/* --- Botão "Queue": pílula fina, nunca mais o ícone empilhado
   por cima do texto (isso acontece quando o tema pai o trata como
   bloco em vez de linha). --- */
.ms_player_wrapper .que_text {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    .ms_player_wrapper .jp-controls button {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ============================================================
   PÁGINA DE FAIXA INDIVIDUAL — DESCRIÇÃO MAIS PROFISSIONAL (set/2026)
   -----------------------------------------------------------------
   Estrutura original do tema (capa + texto): ".album_single_img" e
   ".album_single_text" lado a lado com float — funciona, mas sem
   limite de largura no parágrafo da descrição (texto a esticar de
   ponta a ponta do ecrã em monitores largos, difícil de ler) e sem
   espaçamento consistente entre título, artista, descrição e botões.
   Passamos para flexbox (mais previsível, incluindo em mobile — pilha
   verticalmente sozinho) e desenhamos a descrição como um bloco de
   texto legível, com largura máxima e respiração à volta.
   ============================================================ */
.album_single_data {
    display: flex !important;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}
.album_single_img {
    float: none !important;
    width: 240px;
    flex: 0 0 240px;
}
.album_single_text {
    float: none !important;
    width: auto !important;
    flex: 1 1 320px;
    min-width: 0;
    padding-left: 0 !important;
}
.album_single_text h2 {
    font-size: 26px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}
.album_single_text p.singer_name {
    font-size: 15px !important;
    opacity: 0.75;
    margin-bottom: 22px !important;
}
.about_artist {
    max-width: 640px;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 28px;
    padding-right: 0 !important;
    /* Sem caixa de scroll interna (o tema pai usa ".truncate" com
       max-height:90px + overflow:auto por definição — preferimos
       mostrar o texto completo, sem essa "caixinha" a fazer scroll
       à parte, mais alinhado com o resto do site). */
    overflow: visible !important;
    max-height: none !important;
}
.about_artist p {
    margin: 0 0 14px;
}
.about_artist p:last-child {
    margin-bottom: 0;
}
.album_btn {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 640px) {
    .album_single_data {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .album_single_img {
        width: 200px;
        flex-basis: 200px;
    }
    .about_artist {
        max-width: 100%;
    }
    .album_btn {
        justify-content: center;
    }
}


/* ============================================================
   PÁGINA DE FAIXA — BREADCRUMB, METADADOS, RELACIONADAS E
   COMENTÁRIOS (set/2026)
   -----------------------------------------------------------------
   Estas três secções já existiam no plugin (breadcrumb é novo, as
   outras duas nunca tinham sido tocadas por nós) — juntamos a
   linguagem visual do resto do site: mesma tipografia, mesmos
   espaçamentos, mesmo acento de cor.
   ============================================================ */

/* --- Breadcrumb --- */
.izua-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}
.izua-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
.izua-breadcrumb a:hover {
    color: #fff;
}
.izua-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.3);
}
.izua-breadcrumb-current {
    color: rgba(255, 255, 255, 0.8);
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- Nome do artista, agora clicável --- */
.izua-artist-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
}
.izua-artist-link:hover {
    color: var(--izua-primary, #BE3636);
    text-decoration-color: currentColor;
}

/* --- Género / data / duração --- */
.izua-track-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.izua-track-meta-genre {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}
.izua-track-meta-genre:hover {
    background: var(--izua-primary, #BE3636);
}
.izua-track-meta-date,
.izua-track-meta-duration {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}
.izua-track-meta-date::before {
    content: '';
}
.izua-track-meta-duration::before {
    content: '•';
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.3);
}

/* --- Faixas relacionadas: título consistente com o resto do site --- */
.ms_fea_album_slider .ms_heading {
    display: flex;
    align-items: center;
    margin: 48px 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--izua-amber, #E8A33D);
}
.ms_fea_album_slider .ms_heading h1 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* --- Comentários: mesma linguagem visual do resto do site --- */
.comments-area {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.comments-area .ms_heading h1.comments-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding-left: 12px;
    border-left: 4px solid var(--izua-blue, #3BC8E7);
    margin-bottom: 20px;
}
.comment-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.comment-list .comment-body {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.comment-list .comment-author .fn {
    color: #fff;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
}
.comment-list .comment-metadata,
.comment-list .comment-metadata a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    text-decoration: none;
}
.comment-list .comment-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 6px 0 0;
}
.blog_comments_forms .cmnt_field {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    box-sizing: border-box;
}
textarea.cmnt_field {
    min-height: 120px;
    resize: vertical;
}
.blog_comments_forms .cmnt_field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.blog_comments_forms #comment-submit {
    padding: 12px 32px;
    border-radius: 999px;
    background: var(--izua-primary, #BE3636);
    color: #fff;
    font-weight: 700;
    border: none;
    cursor: pointer;
}
.blog_comments_forms #comment-submit:hover {
    background: var(--izua-primary-soft, #D9564F);
}

@media (max-width: 640px) {
    .izua-breadcrumb-current {
        max-width: 160px;
    }
}