/* PageHost - ajustes responsivos do Site Administravel de Audio */

/* Logo com limite real, evitando crescimento excessivo em telas largas */
.header-logo-img{
    width:auto!important;
    height:auto!important;
    max-width:180px!important;
    max-height:100px!important;
    object-fit:contain!important;
}
.header-wrapper{
    padding:24px 28px!important;
}

/* Player centralizado e com dimensao controlada */
.player{
    width:100%!important;
    box-sizing:border-box!important;
}
.player-wrapper{
    width:100%!important;
    max-width:100%!important;
    margin-top:auto!important;
    margin-bottom:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
}
.player-cover{
    width:100%!important;
    max-width:100%!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
}
.player-artwork{
    width:min(360px,30vw)!important;
    max-width:360px!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:.65rem!important;
    box-sizing:border-box!important;
}
.player-artwork img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}
.player-cover-title{
    max-width:min(560px,80vw)!important;
}

/* Evita que a animacao de fundo gere zoom excessivo */
.player-cover-image{
    animation:bga-pagehost 60s linear infinite!important;
}
@keyframes bga-pagehost{
    50%{transform:scale(1.12)}
}

@media(max-width:991px){
    .header{
        background:transparent!important;
        box-shadow:none!important;
    }
    .header-wrapper{
        padding:18px!important;
    }
    .header-logo-img{
        max-width:145px!important;
        max-height:78px!important;
    }
    .player{
        padding:92px 18px 120px!important;
        min-height:100vh!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
    }
    .player-wrapper{
        margin-top:auto!important;
        margin-bottom:auto!important;
    }
    .player-artwork{
        width:min(330px,72vw)!important;
        max-width:330px!important;
    }
    .player-cover-title{
        max-width:90vw!important;
    }
}

@media(max-width:560px){
    .header-wrapper{
        padding:14px 16px!important;
    }
    .header-logo-img{
        max-width:118px!important;
        max-height:62px!important;
    }
    .toggle-options{
        margin-top:0!important;
    }
    .player{
        padding:82px 16px 112px!important;
    }
    .player-artwork{
        width:min(290px,76vw)!important;
        max-width:290px!important;
        padding:.5rem!important;
        border-radius:14px!important;
    }
    .player-controller{
        gap:.8rem!important;
    }
    .player-social{
        max-width:100%!important;
    }
    .footer-wrapper{
        gap:.75rem!important;
    }
}

/* PageHost V4 - tema preto e contraste no responsivo */
.app{
    --accent:#111820!important;
    --bg-app:#05070a!important;
    --bg-transparent:rgba(0,0,0,.55)!important;
    --color-title:#ffffff!important;
    --color-text:rgba(255,255,255,.78)!important;
    background:#05070a!important;
}

/* Mantem a arte da musica como fundo, mas sem clarear a interface */
.player-cover-image{
    filter:blur(var(--cover-blurred)) brightness(.52) saturate(.9)!important;
}

/* Controles sempre legiveis, mesmo quando a capa e predominantemente branca */
.btn,
.player-button,
.player-social-item,
.footer,
.footer a,
.footer small,
.player-cover-title,
.player-cover-title .song-artist,
.player-cover-title .song-name{
    color:#fff!important;
}

.player-button-play{
    background:rgba(5,10,15,.88)!important;
    border:1px solid rgba(255,255,255,.24)!important;
    box-shadow:0 7px 22px rgba(0,0,0,.40)!important;
}
.player-button-play:hover,
.player-button-play.is-active{
    background:#111820!important;
}
.player-button-play::before,
.player-button-play::after{
    background-color:rgba(255,255,255,.45)!important;
}

.player-social-item{
    background:rgba(0,0,0,.42)!important;
    border-color:rgba(255,255,255,.72)!important;
}

@media(max-width:991px){
    html,
    body,
    .app{
        background:#05070a!important;
    }

    /* O ColorThief pode gerar accent branco a partir da capa. No mobile o tema fica preto fixo. */
    .app{
        --accent:#111820!important;
    }

    .player-cover-image{
        filter:blur(12px) brightness(.38) saturate(.85)!important;
    }

    /* Camada escura uniforme para nenhuma capa branca apagar textos e botoes */
    .app::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:2;
        pointer-events:none;
        background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.18) 35%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.94) 100%)!important;
    }

    .header{
        background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.28),transparent)!important;
        box-shadow:none!important;
    }

    .toggle-options .btn{
        background:rgba(0,0,0,.52)!important;
        border:1px solid rgba(255,255,255,.14)!important;
        color:#fff!important;
    }

    .player-cover-title{
        text-shadow:0 2px 8px rgba(0,0,0,.95)!important;
    }
    .player-cover-title .station-description{
        color:rgba(255,255,255,.76)!important;
        opacity:1!important;
    }

    .footer{
        position:absolute!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        z-index:25!important;
        background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.96) 100%)!important;
        color:#fff!important;
    }

    .footer-app{
        border-top-color:rgba(255,255,255,.12)!important;
        border-bottom-color:rgba(255,255,255,.12)!important;
    }

    .footer-copyright,
    .footer-tv,
    .footer-app{
        color:#fff!important;
    }

    .player-social{
        position:absolute!important;
        z-index:30!important;
        left:0!important;
        right:0!important;
        bottom:8px!important;
        color:#fff!important;
    }
}

@media(max-width:560px){
    /* Reserva espaco inferior para rodape/social sem empurrar o player */
    .player{
        padding-bottom:190px!important;
    }
    .footer-wrapper{
        background:transparent!important;
    }
    .footer-app{
        padding-top:12px!important;
        padding-bottom:12px!important;
    }
    .footer-copyright{
        padding-top:10px!important;
        padding-bottom:62px!important;
    }
    .player-social{
        padding:8px 14px!important;
    }
}

/* PageHost V5 - centralizacao mobile e pop de instalacao escuro */
@media(max-width:991px){
    .mobile-menu{
        background:#05070a!important;
        color:#fff!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:flex-end!important;
        padding:calc(2rem + 72px) 0 0!important;
        box-sizing:border-box!important;
    }

    .mobile-menu .footer{
        position:static!important;
        width:100%!important;
        margin-top:auto!important;
        padding:0!important;
        display:block!important;
        background:transparent!important;
    }

    .mobile-menu .footer-wrapper{
        width:100%!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        gap:0!important;
    }

    .mobile-menu .footer-tv,
    .mobile-menu .footer-app,
    .mobile-menu .footer-copyright{
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        box-sizing:border-box!important;
    }

    .mobile-menu .footer-tv{
        padding:18px 16px!important;
    }

    .mobile-menu .footer-app{
        padding:24px 16px!important;
        gap:10px!important;
    }

    .mobile-menu .footer-copyright{
        padding:18px 16px 72px!important;
    }

    .mobile-menu .player-social{
        position:absolute!important;
        left:0!important;
        right:0!important;
        bottom:8px!important;
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:8px 12px!important;
        box-sizing:border-box!important;
    }
}

/* SweetAlert de instalacao no mesmo tema preto do site */
.swal2-popup.ph-install-popup,
.swal2-popup{
    background:#0b1118!important;
    color:#eef4fb!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:18px!important;
    box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
}
.swal2-title,
.swal2-html-container,
#swal2-html-container{
    color:#eef4fb!important;
}
.swal2-icon.swal2-info{
    border-color:#22b8cf!important;
    color:#22b8cf!important;
}
.swal2-styled.swal2-confirm,
.ph-install-confirm{
    min-width:110px!important;
    border:0!important;
    border-radius:11px!important;
    background:linear-gradient(135deg,#1687c7,#22b8cf)!important;
    color:#fff!important;
    box-shadow:none!important;
}
.ph-install-text,
.ph-install-ios{
    max-width:360px;
    margin:0 auto;
    text-align:center;
    color:#c7d5e5;
    font-size:16px;
    line-height:1.5;
}
.ph-install-ios{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
}
.ph-install-ios img{
    display:block!important;
    width:28px!important;
    height:auto!important;
    margin:2px auto!important;
    filter:brightness(0) invert(1);
}

/* PageHost V6 - mobile real, viewport dinamico e contraste */
html.ph-mobile-device,
html.ph-mobile-device body{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#05070a!important;
}

html.ph-mobile-device .app{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:100vh!important;
    height:100svh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100svh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
}

html.ph-mobile-device .header-wrapper{
    padding:14px 16px!important;
}

html.ph-mobile-device .header-logo-img{
    max-width:92px!important;
    max-height:58px!important;
}

html.ph-mobile-device .toggle-options{
    margin:0!important;
    gap:8px!important;
}

html.ph-mobile-device .toggle-options .btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:rgba(4,8,12,.72)!important;
    border:1px solid rgba(255,255,255,.16)!important;
}

html.ph-mobile-device .player{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:86px 18px 82px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
}

html.ph-mobile-device .player-wrapper{
    width:100%!important;
    max-width:420px!important;
    height:auto!important;
    margin:0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

html.ph-mobile-device .player-cover{
    width:100%!important;
    gap:14px!important;
}

html.ph-mobile-device .player-cover-title{
    width:100%!important;
    max-width:92vw!important;
    margin:0 auto!important;
}

html.ph-mobile-device .player-artwork{
    width:min(64vw,270px)!important;
    max-width:270px!important;
    min-width:190px!important;
    margin:0 auto!important;
}

html.ph-mobile-device .player-controller{
    justify-content:center!important;
    margin:0 auto!important;
}

html.ph-mobile-device .player-button-play{
    background:#0b1118!important;
    color:#fff!important;
    border-color:rgba(34,184,207,.65)!important;
}

html.ph-mobile-device .player-button-play.is-active,
html.ph-mobile-device .player-button-play:hover{
    background:#123042!important;
}

/* Apps do menu mobile sempre visiveis sobre o tema escuro */
html.ph-mobile-device .mobile-menu .footer-app .player-apps-item{
    opacity:1!important;
    filter:none!important;
}
html.ph-mobile-device .mobile-menu .footer-app .player-apps-item img{
    opacity:1!important;
    filter:grayscale(1) brightness(0) invert(1)!important;
}

/* SweetAlert mobile: compacto, alinhado e com contraste consistente */
html.ph-mobile-device .swal2-container{
    padding:16px!important;
}
html.ph-mobile-device .swal2-popup.ph-install-popup,
html.ph-mobile-device .swal2-popup{
    width:min(92vw,390px)!important;
    max-width:390px!important;
    padding:24px 20px 20px!important;
    background:#09111a!important;
    border:1px solid rgba(34,184,207,.28)!important;
    color:#f4f8fb!important;
}
html.ph-mobile-device .swal2-title{
    color:#fff!important;
    font-size:26px!important;
    line-height:1.2!important;
}
html.ph-mobile-device .swal2-html-container,
html.ph-mobile-device #swal2-html-container{
    color:#d6e1eb!important;
    margin:14px 0 0!important;
}
html.ph-mobile-device .swal2-actions{
    margin-top:18px!important;
}
html.ph-mobile-device .swal2-styled.swal2-confirm,
html.ph-mobile-device .ph-install-confirm{
    min-width:110px!important;
    min-height:44px!important;
    margin:0!important;
    background:linear-gradient(135deg,#1687c7,#22b8cf)!important;
    color:#fff!important;
}

.ph-install-ios{
    color:#d6e1eb!important;
}
.ph-install-ios strong{
    color:#fff!important;
}
.ph-ios-share-icon{
    width:54px!important;
    height:54px!important;
    margin:2px auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
    background:rgba(34,184,207,.10)!important;
    border:1px solid rgba(34,184,207,.45)!important;
    color:#38c7de!important;
}
.ph-ios-share-icon svg{
    width:27px!important;
    height:27px!important;
    display:block!important;
    stroke:currentColor!important;
    fill:none!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

@media(max-width:420px){
    html.ph-mobile-device .player{
        padding-left:14px!important;
        padding-right:14px!important;
    }
    html.ph-mobile-device .player-artwork{
        width:min(68vw,250px)!important;
        max-width:250px!important;
    }
    html.ph-mobile-device .player-cover-title .song-artist{
        font-size:14px!important;
    }
    html.ph-mobile-device .player-cover-title .song-name{
        font-size:20px!important;
    }
}

/* PageHost V7 - força layout mobile real inclusive quando o navegador reporta viewport amplo */
html.ph-mobile-device .header{
    position:absolute!important;
    width:100%!important;
    background:linear-gradient(180deg,rgba(2,5,8,.94),rgba(2,5,8,.50),transparent)!important;
    box-shadow:none!important;
}
html.ph-mobile-device .footer-app{
    padding:18px 14px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    justify-content:center!important;
}
html.ph-mobile-device .footer-copyright{
    padding:18px 14px!important;
    text-align:center!important;
}
html.ph-mobile-device .footer-tv{
    padding:0 14px 16px!important;
    text-align:center!important;
}
html.ph-mobile-device .mobile-menu{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    padding-top:76px!important;
    background:#030507!important;
    z-index:40!important;
    overflow-y:auto!important;
    transition:transform var(--duration)!important;
}
html.ph-mobile-device .mobile-menu:not(.is-active){
    pointer-events:none!important;
    transform:translateY(-100%)!important;
}
html.ph-mobile-device .player-social{
    justify-content:center!important;
    padding:16px 14px 22px!important;
}
html.ph-mobile-device .player-button-volume{
    opacity:.35!important;
    pointer-events:none!important;
}
html.ph-mobile-device .player-cover-image{
    inset:-32px!important;
    width:calc(100% + 64px)!important;
    height:calc(100% + 64px)!important;
    filter:blur(18px) brightness(.34) saturate(.82)!important;
}
html.ph-mobile-device .bg{
    background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.18) 42%,rgba(0,0,0,.78) 100%)!important;
}

/* Botão real de compartilhamento para iOS */
.ph-ios-share-button{
    appearance:none!important;
    -webkit-appearance:none!important;
    border:1px solid rgba(34,184,207,.45)!important;
    background:#0d1c27!important;
    color:#fff!important;
    border-radius:14px!important;
    min-width:176px!important;
    min-height:54px!important;
    margin:16px auto!important;
    padding:9px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    font-size:15px!important;
    font-weight:800!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    pointer-events:auto!important;
}
.ph-ios-share-button:hover,
.ph-ios-share-button:focus{
    border-color:#22b8cf!important;
    background:#123042!important;
    outline:none!important;
}
.ph-ios-share-button .ph-ios-share-icon{
    width:34px!important;
    height:34px!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
}
.ph-ios-share-button .ph-ios-share-icon svg{
    width:24px!important;
    height:24px!important;
}

@media(max-width:991px){
    html, body{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
    }
    .app{
        width:100vw!important;
        max-width:100vw!important;
        min-width:0!important;
        height:100vh!important;
        height:100dvh!important;
        overflow:hidden!important;
    }
}

/* PageHost V8 - menu mobile centralizado e apps sempre visiveis */
html.ph-mobile-device .mobile-menu{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    padding:82px 18px 24px!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
}

html.ph-mobile-device .mobile-menu .footer{
    position:static!important;
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    padding:0!important;
    background:transparent!important;
}

html.ph-mobile-device .mobile-menu .footer-wrapper{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:0!important;
}

html.ph-mobile-device .mobile-menu .footer-tv,
html.ph-mobile-device .mobile-menu .footer-app,
html.ph-mobile-device .mobile-menu .footer-copyright{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    margin:0!important;
    box-sizing:border-box!important;
}

html.ph-mobile-device .mobile-menu .footer-tv{
    padding:16px 12px 22px!important;
}

html.ph-mobile-device .mobile-menu .footer-app{
    min-height:82px!important;
    padding:20px 12px!important;
    gap:14px!important;
    flex-wrap:wrap!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
}

html.ph-mobile-device .mobile-menu .footer-app .player-apps-item{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:64px!important;
    min-height:40px!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    pointer-events:auto!important;
}

html.ph-mobile-device .mobile-menu .footer-app .player-apps-item img{
    display:block!important;
    width:auto!important;
    max-width:112px!important;
    height:34px!important;
    max-height:34px!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    object-fit:contain!important;
}

html.ph-mobile-device .mobile-menu .footer-copyright{
    padding:18px 12px 14px!important;
    color:#fff!important;
}

html.ph-mobile-device .mobile-menu .footer-copyright small,
html.ph-mobile-device .mobile-menu .footer-copyright strong{
    color:#fff!important;
}

html.ph-mobile-device .mobile-menu .player-social{
    position:static!important;
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    padding:14px 10px 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    box-sizing:border-box!important;
}

html.ph-mobile-device .mobile-menu .player-social-item{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    padding:0!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.55)!important;
}

@media(max-height:700px){
    html.ph-mobile-device .mobile-menu{
        justify-content:flex-start!important;
        padding-top:86px!important;
    }
}


/* PageHost V9 - menu compacto de instalacao Android / iPhone / Windows */
.ph-install-menu{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:9px!important;width:100%!important;padding:18px 14px!important}
.ph-install-menu-btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;min-width:132px;height:48px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#0c1118;color:#fff;cursor:pointer;text-align:left;box-shadow:none}
.ph-install-menu-btn:hover{border-color:rgba(34,184,207,.55);background:#101a24}
.ph-install-menu-btn svg{width:21px;height:21px;min-width:21px;color:#67e8f9}
.ph-install-menu-btn span{display:flex;flex-direction:column;font:800 12px/1.05 "Montserrat",sans-serif;white-space:nowrap}
.ph-install-menu-btn small{font-size:9px;line-height:1.1;font-weight:600;color:#8fa3b8;margin-bottom:2px}
html.ph-mobile-device .mobile-menu .footer-app.ph-install-menu{min-height:0!important;padding:18px 12px!important;gap:8px!important;border-top:1px solid rgba(255,255,255,.10)!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
html.ph-mobile-device .ph-install-menu-btn{min-width:116px;height:44px;padding:0 10px;gap:7px;border-radius:11px}
html.ph-mobile-device .ph-install-menu-btn svg{width:19px;height:19px;min-width:19px}
html.ph-mobile-device .ph-install-menu-btn span{font-size:11px}
html.ph-mobile-device .ph-install-menu-btn small{font-size:8px}
@media(max-width:430px){
 html.ph-mobile-device .ph-install-menu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:400px!important;margin:0 auto!important}
 html.ph-mobile-device .ph-install-menu-btn{min-width:0!important;width:100%!important;padding:0 6px!important;justify-content:center!important;text-align:center!important}
 html.ph-mobile-device .ph-install-menu-btn span{align-items:flex-start}
}