/* Footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 15px 0;
}

/* Player da rádio fixo */
#radio-player {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #2e2e2e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    font-size: 0.95rem;
}

/* Agrupamento da esquerda: logo, botão e nome da música */
#radio-player .left-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

#radio-player .logo {
    height: 40px;
}

#radio-player button {
    font-size: 1.3rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

#radio-player .song-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Controle de volume à direita */
#radio-player .volume-control input[type="range"] {
    width: 150px;
}

#site-footer {
    background-color: #3a3a3a;
    padding: 60px 0;
    color: #ccc;
}

/* Media Queries para Footer Mobile */
/* Correção para o radio-player não estrapolar */
@media (max-width: 768px) {

    /* Garantir que o player não cause overflow */
    #radio-player {
        box-sizing: border-box;
        /* Considera padding na largura total */
        width: 100vw;
        /* Largura exata da viewport */
        left: 0;
        right: 0;
        overflow: hidden;
        /* Esconde qualquer conteúdo que ultrapasse */
    }

    /* Ajustar grupos internos para evitar overflow */
    #radio-player .left-group {
        max-width: 60%;
        overflow: hidden;
    }

    #radio-player .volume-control {
        max-width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-width: 30%;
        gap: 6px;
    }

    /* Ajustes finos nos elementos */
    #radio-player .song-title {
        max-width: calc(100vw - 200px);
        /* Calcula espaço disponível */
    }

    #radio-player .volume-control input[type="range"] {
        max-width: 80px;

    }

    #radio-player .volume-control button {
        flex-shrink: 0;
    }

    #radio-player .mute-icon {
        width: 24px;
        height: 24px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: none;
        background-color: transparent;
    }

    .btn-light.mute-icon {
        background-color: #f8f9fa !important;
    }

    /* Prevenir quebra de layout em telas muito pequenas */
    @media (max-width: 400px) {
        #radio-player {
            padding: 0 8px;
        }

        #radio-player .left-group {
            gap: 6px;
        }

        #radio-player .logo {
            display: none;
            /* Opcional: esconder logo em telas muito pequenas */
        }

        #radio-player .song-title {
            max-width: calc(100vw - 150px);
            font-size: 0.8rem;
        }

        #radio-player button {
            font-size: 1rem;
        }
    }
}

/* Ajuste especial para landscape */
@media (max-width: 768px) and (orientation: landscape) {
    #radio-player .song-title {
        max-width: calc(100vw - 250px);
    }

    #radio-player .volume-control input[type="range"] {
        width: 80px;
    }
}

/* Garantir que o body não tenha overflow horizontal */
body {
    overflow-x: hidden;
    position: relative;
}