/**
 * Player de podcast compartilhado — estilos do rodapé fixo (.iframe2),
 * #iframe em tela cheia com player ativo e fix do GoAdopt em mobile.
 *
 * Extraído de page-podcast-podcasts.php (shell W2W). Usado tanto no shell
 * quanto em páginas normais via mm_podcast_player_slot (js/podcast-player.js).
 */

/* Anti-aninhamento: se este documento está enquadrado (dentro de um shell,
 * seja o W2W ou o shell sob demanda), o player não roda aqui — quem toca é
 * o topo. Evita duplicar o player dentro do iframe de conteúdo. */
html.mm-framed .iframe2 {
    display: none;
}

/* Shell sob demanda (páginas normais que entraram em modo shell ao navegar
 * para outra URL com o player tocando): esconde tudo, exceto o player e o
 * #iframe de conteúdo, sem remover do DOM. */
body.mm-shell-mode > *:not(.iframe2):not(#iframe) {
    display: none;
}

body.mm-shell-mode {
    overflow: hidden;
}


    body {
        overflow: auto;
    }

    .exit {
        cursor: pointer
    }

    .bar {
        position: relative;
        top: -18px;
        left: -5px;
        width: calc(100% + 8px) !important;
    }

    .controls svg path, .controls svg text, .exit svg path {
        transition: all 300ms ease-in-out;
    }

    .controls svg:hover path, .controls svg:hover text, .exit svg:hover path {
        fill: var(--category-color-hover);
    }

    .play .pause {
        display: none;
    }

    .volume {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .play.playing .iPlay {
        width: 47px;
        height: 47px;
    }

    .play.playing .pause {
        display: block;
        width: 47px;
        height: 47px;
        position: relative;
        top: -2px;
    }

    .play.playing .iPlay {
        display: none;
    }

    .iframe2 .durationBar:after {
        position: absolute;
        content: '';
        left: 0;
        height: 10px;
        top: 0;
        width: 100%;
    }

    .iframe2 .durationBar:hover:after {
        position: absolute;
        content: '';
        left: 0;
        height: 14px;
        top: 0;
        width: 100%;
    }

    .iframe2 .durationBar .bar {
        background-color: var(--category-color-hover);
        height: 6px;
        position: relative;
        cursor: pointer;
        z-index: 100;
        transition: all ease-in-out 300ms;
    }

    .iframe2 .durationBar:hover .bar {
        height: 8px;
    }


    .iframe2 .durationBar {
        height: 7px;
        display: block;
        width: 100%;
        position: relative;
        z-index: 1000;
    }

    .controls {
        display: flex;
        align-items: center;

    }

    .controls > * {
        cursor: pointer;
    }

    .controls > * + * {
        margin-left: 20px;
    }

    .description h4 {
        font-size: 12px;
        font-weight: 500;
        color: white;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .description h3 {
        font-size: 24px;
        color: white;
        font-weight: 300;
    }

    .description {
        max-width: 38%;
        flex-basis: 38%;
    }

    .player {
        display: flex;
        margin-right: 20px;
    }

    .volume {
        width: 170px;
        height: 60px;
    }

    .volume svg {
        display: block;
        margin: 0 auto;
    }

    .volume.RMute .NoMute {
        display: none;
    }

    .volume .Mute {
        display: none;
    }

    .volume.RMute .Mute {
        display: block;
    }

    .box1210 {
        max-width: 1210px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        position: relative;
        top: -5px;
    }

    .bar {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 1;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        opacity: 1;
        width: 8px;
        height: 6px;
        position: relative;
        left: 0px;
        border-radius: 3px;
        background: var(--category-color-hover);
        cursor: pointer;
        transition: all ease-in-out 300ms;
    }

    .durationBar:hover .bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        opacity: 1;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--category-color-hover);
        cursor: pointer;
        transition: all ease-in-out 300ms;
    }

    .bar::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        opacity: 1;
    }

    .bar:hover::-webkit-slider-thumb {
        opacity: 1;
    }

    .volume [type=range]::-webkit-slider-runnable-track {
        border-radius: 15px;
        -webkit-appearance: none;
    }

    .volume [type=range]:hover {
        appearance: none;
        -webkit-appearance: none;
    }

    .volume [type=range] {
        appearance: none;
        -webkit-appearance: none;
        width: 0px;
        opacity: 0;
        height: 4px;
        border-radius: 100px;
        transition: all ease-in-out 300ms;
    }

    .volume [type=range] {
        background-color: #676767;
    }

    .volume [type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        opacity: 1;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--category-color-hover);
        cursor: pointer;
        transition: all ease-in-out 300ms;
    }

    .volume [type=range]:hover::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
    }

    input[type=range]:focus {
        outline: none;
    }

    .volume:hover [type=range] {
        opacity: 1;
        width: 126px;
    }

    .duration .atual {
        color: var(--category-color-hover);
        font-weight: 500;
        margin-right: 10px;
        font-size: 14px;
    }

    .duration .duration {
        color: white;
        margin-left: 10px;
        font-weight: 300;
        font-size: 14px;
    }

    .duration.Geral {
        display: flex;
        font-size: 14px;
        font-weight: 100;
    }

    .durationBar .bolinha {
        opacity: 0;
        transition: all ease-in-out 300ms;
    }

    .iframe2:hover .bolinha {
        opacity: 1;
    }

    .iframe2 {
        position: relative;
    }

    .iframe2:before {
        content: '';
        display: block;
        position: absolute;
        top: -40px;
        height: 40px;
        width: 100%;
    }

    #iframe {
        height: 100vh;
        width: 100vw;
    }

    .iframe2 {
        width: 100vw;
        height: calc(100vh - 80px);
        position: fixed;
        bottom: -101px;
        transition: all ease-in-out 300ms;
        height: 100px;
        font-size: 26px;
        background-color: black;
        color: white;
    }

    .actRd #iframe {
        width: 100vw;
        height: calc(100vh - 80px)
    }

    .actRd .iframe2 {
        bottom: 0px;
    }

    @-webkit-keyframes slide-right {
        10% {
            left: 0
        }
        50% {
            left: -100%
        }
        100% {
            left: 0%
        }
    }

    @media (max-width: 768px) {

        .destaquesSlider .flex .titulo a, .destaquesSlider .flex .titulo {
            font-size: 42px;
            line-height: 44px;
        }

        .avanc, .retro, .duration .duration, .volume {
            display: none;
        }

        .exit {
            margin-right: 20px;
        }

        body.actRd #adopt-controller-button#adopt-controller-button {
            bottom: 116px !important;
        }

        .barDs {
            display: none;
        }

        .description .overflow {
            white-space: nowrap;
            overflow: hidden;
            height: 30px;
            width: 100%;
            padding-bottom: 8px;
            position: relative;
        }

        .description .overflow h3.playing {
            position:absolute;
            -webkit-animation: podcastname 20s infinite linear;
            animation: podcastname 20s infinite linear;
        }


        .description {
            margin-right: 24px;
            max-width: 38%;
            flex-basis: 38%;
        }


        @-webkit-keyframes podcastname {
            0% {
                -webkit-transform: translate(100%);
                transform: translate(100%)
            }
            100% {
                -webkit-transform: translate(-100%);
                transform: translate(-100%)
            }
        }

        @keyframes podcastname {
            0% {
                -webkit-transform: translate(100%);
                transform: translate(100%)
            }
            100% {
                -webkit-transform: translate(-100%);
                transform: translate(-100%)
            }
        }

    }