/* Correção dos três layouts: apps, redes sociais e rodapé */
.radio-admin-footer {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 9990;
    max-width: min(700px, calc(100vw - 760px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 14px;
    color: #fff;
    background: rgba(8, 15, 28, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 500 13px/1.35 Montserrat, Arial, sans-serif;
    text-align: center;
}

.radio-admin-footer-logo {
    max-width: 76px;
    max-height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

.radio-admin-footer-content { min-width: 0; }

.radio-admin-footer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.radio-admin-footer a { color: inherit; text-decoration: none; }
.radio-admin-footer a:hover { text-decoration: underline; }
.radio-admin-footer-company { font-weight: 800; }
.radio-admin-footer-separator { opacity: .58; }
.radio-admin-footer-extra { display: block; margin-top: 2px; opacity: .78; }

/* Retrô Glass: aplicativos à esquerda e redes sociais à direita. */
body.radio-layout-retro .footer-app {
    position: fixed !important;
    left: 48px !important;
    right: auto !important;
    bottom: 18px !important;
    z-index: 9988 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.radio-layout-retro .player-social {
    position: fixed !important;
    right: 48px !important;
    left: auto !important;
    bottom: 18px !important;
    z-index: 9988 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.radio-layout-retro .footer-app img {
    display: block !important;
    width: auto !important;
    max-height: 52px !important;
}

body.radio-layout-retro .player-social-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Aurora Deck: usa a barra original; o rodapé personalizado fica à direita. */
body.radio-layout-aurora .radio-admin-footer {
    left: auto;
    right: 40px;
    bottom: 16px;
    transform: none;
    max-width: min(430px, 38vw);
    padding: 7px 12px;
    font-size: 11px;
}

body.radio-layout-aurora .footer-app,
body.radio-layout-aurora .player-social {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 1100px) {
    .radio-admin-footer {
        max-width: min(560px, calc(100vw - 440px));
        font-size: 11px;
    }

    body.radio-layout-retro .footer-app { left: 18px !important; }
    body.radio-layout-retro .player-social { right: 18px !important; }

    body.radio-layout-aurora .radio-admin-footer {
        right: 18px;
        max-width: 42vw;
    }
}

@media (max-width: 820px) {
    .radio-admin-footer,
    body.radio-layout-aurora .radio-admin-footer {
        left: 50%;
        right: auto;
        bottom: 82px;
        transform: translateX(-50%);
        max-width: calc(100vw - 28px);
        width: auto;
    }

    body.radio-layout-retro .footer-app {
        left: 12px !important;
        bottom: 14px !important;
    }

    body.radio-layout-retro .player-social {
        right: 12px !important;
        bottom: 14px !important;
    }
}

@media (max-width: 560px) {
    .radio-admin-footer,
    body.radio-layout-aurora .radio-admin-footer {
        width: calc(100vw - 24px);
        padding: 7px 9px;
    }

    body.radio-layout-retro .footer-app img {
        max-height: 38px !important;
    }

    body.radio-layout-retro .player-social {
        gap: 7px !important;
    }
}

/* BEGIN AJUSTE RETRO AURORA */

/* ==========================================================
   01. MODELO RETRÔ GLASS
   Web TV acima dos botões Google Play/App Store
   ========================================================== */

.layout-retro .footer-tv {
    position: fixed !important;
    left: 48px !important;
    right: auto !important;
    bottom: 94px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    z-index: 9995 !important;
}

.layout-retro .footer-tv:empty {
    display: none !important;
}

.layout-retro .footer-tv .player-button-tv,
.layout-retro .footer-tv > button,
.layout-retro .footer-tv > a {
    position: relative !important;
    inset: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
}

/*
 * Mantém os aplicativos na posição inferior.
 * O Web TV ficará logo acima do Google Play.
 */
.layout-retro .footer-app {
    position: fixed !important;
    left: 48px !important;
    right: auto !important;
    bottom: 12px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    z-index: 9990 !important;
}


/* ==========================================================
   02. MODELO AURORA DECK
   Redes à esquerda, texto no centro e apps à direita
   ========================================================== */

/* Redes sociais no lado esquerdo */
.layout-aurora .player-social {
    position: fixed !important;
    left: 40px !important;
    right: auto !important;
    bottom: 27px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    width: auto !important;
    margin: 0 !important;

    z-index: 9992 !important;
}

/* Aplicativos no lado direito */
.layout-aurora .footer-app {
    position: fixed !important;
    left: auto !important;
    right: 40px !important;
    bottom: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: auto !important;
    margin: 0 !important;

    z-index: 9992 !important;
}

/* Rodapé personalizado centralizado */
.layout-aurora #radio-admin-footer {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;
    bottom: 26px !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 46vw !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    text-align: center !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 9993 !important;
}

/* Remove o card interno azul/escuro */
.layout-aurora #radio-admin-footer *,
.layout-aurora #radio-admin-footer > div,
.layout-aurora #radio-admin-footer section,
.layout-aurora #radio-admin-footer article {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* No Aurora aparece apenas o texto do rodapé */
.layout-aurora #radio-admin-footer img,
.layout-aurora #radio-admin-footer picture,
.layout-aurora #radio-admin-footer svg,
.layout-aurora #radio-admin-footer .footer-logo,
.layout-aurora #radio-admin-footer .radio-footer-logo {
    display: none !important;
}

/* Organiza os textos em uma linha central */
.layout-aurora #radio-admin-footer .radio-admin-footer-content,
.layout-aurora #radio-admin-footer .footer-content,
.layout-aurora #radio-admin-footer .footer-text,
.layout-aurora #radio-admin-footer > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px 8px !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}

/* Evita que o rodapé cubra redes ou aplicativos */
.layout-aurora #radio-admin-footer a,
.layout-aurora #radio-admin-footer span,
.layout-aurora #radio-admin-footer p,
.layout-aurora #radio-admin-footer div {
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 900px) {

    .layout-retro .footer-tv {
        left: 16px !important;
        bottom: 92px !important;
    }

    .layout-retro .footer-app {
        left: 16px !important;
        bottom: 12px !important;
    }

    .layout-aurora .player-social {
        left: 12px !important;
        bottom: 14px !important;
    }

    .layout-aurora .footer-app {
        right: 12px !important;
        bottom: 10px !important;
    }

    .layout-aurora #radio-admin-footer {
        bottom: 82px !important;

        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;

        font-size: 11px !important;
    }
}

@media (max-width: 600px) {

    .layout-retro .footer-tv {
        left: 12px !important;
        bottom: 84px !important;
    }

    .layout-retro .footer-app {
        left: 12px !important;
        right: 12px !important;
        bottom: 8px !important;

        justify-content: flex-start !important;
        transform: scale(.82) !important;
        transform-origin: left bottom !important;
    }

    .layout-aurora .player-social {
        left: 8px !important;
        bottom: 8px !important;

        transform: scale(.84) !important;
        transform-origin: left bottom !important;
    }

    .layout-aurora .footer-app {
        right: 8px !important;
        bottom: 6px !important;

        transform: scale(.72) !important;
        transform-origin: right bottom !important;
    }

    .layout-aurora #radio-admin-footer {
        bottom: 72px !important;
    }
}

/* END AJUSTE RETRO AURORA */

/* BEGIN AURORA ALINHAMENTO EXATO ORIGINAL */

/* ==========================================================
   AURORA DECK — RODAPÉ IGUAL AO MODELO ORIGINAL
   ========================================================== */

/*
 * Barra original:
 * 40px das laterais, 26px do fundo e 60px de altura.
 */
.layout-aurora footer,
.layout-aurora .footer,
.layout-aurora .site-footer {
    position: fixed !important;

    left: 40px !important;
    right: 40px !important;
    bottom: 26px !important;

    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
    align-items: center !important;

    overflow: visible !important;

    background: rgba(31, 30, 32, .76) !important;
    background-image: none !important;

    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 18px !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    z-index: 9985 !important;
}

.layout-aurora footer::before,
.layout-aurora footer::after,
.layout-aurora .footer::before,
.layout-aurora .footer::after,
.layout-aurora .site-footer::before,
.layout-aurora .site-footer::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   REDES SOCIAIS — DENTRO DA BARRA, À ESQUERDA
   ========================================================== */

.layout-aurora footer .player-social,
.layout-aurora .footer .player-social,
.layout-aurora .site-footer .player-social,
.layout-aurora .player-social {
    position: static !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 8px !important;

    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 2 !important;
}

.layout-aurora .player-social a,
.layout-aurora .player-social button,
.layout-aurora .player-social .player-social-item {
    position: static !important;

    inset: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    transform: none !important;
}


/* ==========================================================
   APLICATIVOS — DENTRO DA BARRA, À DIREITA
   ========================================================== */

.layout-aurora footer .footer-app,
.layout-aurora .footer .footer-app,
.layout-aurora .site-footer .footer-app,
.layout-aurora .footer-app {
    position: static !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 9px !important;

    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 2 !important;
}

.layout-aurora .footer-app a,
.layout-aurora .footer-app .player-apps-item {
    position: static !important;

    inset: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.layout-aurora .footer-app img {
    display: block !important;

    width: auto !important;
    max-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   TEXTO PERSONALIZADO — CENTRO EXATO DA BARRA
   ========================================================== */

.layout-aurora #radio-admin-footer {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 26px !important;

    transform: translateX(-50%) !important;

    width: auto !important;
    max-width: 48vw !important;
    height: 60px !important;
    min-height: 60px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    color: rgba(255, 255, 255, .88) !important;
    text-align: center !important;
    white-space: nowrap !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 9990 !important;
}

.layout-aurora #radio-admin-footer *,
.layout-aurora #radio-admin-footer > *,
.layout-aurora #radio-admin-footer > div,
.layout-aurora #radio-admin-footer section,
.layout-aurora #radio-admin-footer article {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* No Aurora fica somente o texto. */
.layout-aurora #radio-admin-footer img,
.layout-aurora #radio-admin-footer picture,
.layout-aurora #radio-admin-footer svg,
.layout-aurora #radio-admin-footer .footer-logo,
.layout-aurora #radio-admin-footer .radio-footer-logo {
    display: none !important;
}

.layout-aurora #radio-admin-footer > div,
.layout-aurora #radio-admin-footer .radio-admin-footer-content,
.layout-aurora #radio-admin-footer .footer-content,
.layout-aurora #radio-admin-footer .footer-text {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: 60px !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 7px !important;

    text-align: center !important;
    white-space: nowrap !important;
}

.layout-aurora #radio-admin-footer,
.layout-aurora #radio-admin-footer a,
.layout-aurora #radio-admin-footer span,
.layout-aurora #radio-admin-footer p,
.layout-aurora #radio-admin-footer div {
    color: rgba(255, 255, 255, .88) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7) !important;
}

.layout-aurora #radio-admin-footer p,
.layout-aurora #radio-admin-footer span,
.layout-aurora #radio-admin-footer a {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 900px) {

    .layout-aurora footer,
    .layout-aurora .footer,
    .layout-aurora .site-footer {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;

        grid-template-columns: 1fr auto 1fr !important;
    }

    .layout-aurora #radio-admin-footer {
        bottom: 16px !important;
        max-width: 40vw !important;
    }
}

@media (max-width: 700px) {

    .layout-aurora footer,
    .layout-aurora .footer,
    .layout-aurora .site-footer {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;

        height: 54px !important;
        min-height: 54px !important;

        padding: 0 10px !important;

        border-radius: 15px !important;
    }

    .layout-aurora .player-social {
        transform: scale(.78) !important;
        transform-origin: left center !important;
    }

    .layout-aurora .footer-app {
        transform: scale(.68) !important;
        transform-origin: right center !important;
    }

    .layout-aurora #radio-admin-footer {
        bottom: 68px !important;

        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        height: auto !important;
        min-height: 0 !important;

        white-space: normal !important;
    }

    .layout-aurora #radio-admin-footer > div,
    .layout-aurora #radio-admin-footer .radio-admin-footer-content {
        height: auto !important;

        flex-wrap: wrap !important;
        white-space: normal !important;
    }
}

/* END AURORA ALINHAMENTO EXATO ORIGINAL */

/* BEGIN CLASSIC RODAPE SEM CARD */

/* ==========================================================
   TEMA CLÁSSICO — REMOVE APENAS O CARD/FUNDO DO RODAPÉ
   ========================================================== */

.layout-classic #radio-admin-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.layout-classic #radio-admin-footer::before,
.layout-classic #radio-admin-footer::after {
    display: none !important;
    content: none !important;
}

/*
 * Remove também o fundo do contêiner interno, caso seja ele
 * que esteja formando o card azul.
 */
.layout-classic #radio-admin-footer > div,
.layout-classic #radio-admin-footer .radio-admin-footer-content,
.layout-classic #radio-admin-footer .footer-content,
.layout-classic #radio-admin-footer .footer-text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/*
 * Mantém logo, textos, links e alinhamento existentes.
 */
.layout-classic #radio-admin-footer img,
.layout-classic #radio-admin-footer a,
.layout-classic #radio-admin-footer span,
.layout-classic #radio-admin-footer p {
    opacity: 1 !important;
}

/* END CLASSIC RODAPE SEM CARD */

/* BEGIN RETRO RODAPE SEM CARD */

/* ==========================================================
   RETRÔ GLASS — REMOVE APENAS O CARD DO RODAPÉ
   ========================================================== */

.layout-retro #radio-admin-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.layout-retro #radio-admin-footer::before,
.layout-retro #radio-admin-footer::after {
    display: none !important;
    content: none !important;
}

/*
 * Remove o fundo do conteúdo interno sem alterar
 * posição, alinhamento, logo ou textos.
 */
.layout-retro #radio-admin-footer > div,
.layout-retro #radio-admin-footer section,
.layout-retro #radio-admin-footer article,
.layout-retro #radio-admin-footer .radio-admin-footer-content,
.layout-retro #radio-admin-footer .footer-content,
.layout-retro #radio-admin-footer .footer-text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/*
 * Mantém os elementos do rodapé visíveis.
 */
.layout-retro #radio-admin-footer img,
.layout-retro #radio-admin-footer picture,
.layout-retro #radio-admin-footer svg,
.layout-retro #radio-admin-footer a,
.layout-retro #radio-admin-footer span,
.layout-retro #radio-admin-footer p {
    opacity: 1 !important;
}

/* END RETRO RODAPE SEM CARD */

/* BEGIN LOGO ACIMA CLASSIC RETRO */

/* ==========================================================
   CLÁSSICO E RETRÔ GLASS
   Logo centralizada acima do copyright
   ========================================================== */

.layout-classic #radio-admin-footer,
.layout-retro #radio-admin-footer {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    text-align: center !important;
}

/*
 * Caso o rodapé possua um contêiner interno envolvendo
 * a logo e os textos, ele também fica em coluna.
 */
.layout-classic #radio-admin-footer > div,
.layout-retro #radio-admin-footer > div,
.layout-classic #radio-admin-footer .radio-admin-footer-content,
.layout-retro #radio-admin-footer .radio-admin-footer-content,
.layout-classic #radio-admin-footer .footer-content,
.layout-retro #radio-admin-footer .footer-content {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 2px !important;

    text-align: center !important;
}

/*
 * Logo sempre na primeira posição.
 */
.layout-classic #radio-admin-footer img,
.layout-retro #radio-admin-footer img,
.layout-classic #radio-admin-footer picture,
.layout-retro #radio-admin-footer picture,
.layout-classic #radio-admin-footer .footer-logo,
.layout-retro #radio-admin-footer .footer-logo,
.layout-classic #radio-admin-footer .radio-footer-logo,
.layout-retro #radio-admin-footer .radio-footer-logo {
    order: -1 !important;

    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 90px !important;
    max-height: 30px !important;

    margin: 0 auto 3px !important;
    padding: 0 !important;

    object-fit: contain !important;
}

/*
 * Textos centralizados abaixo da logo.
 */
.layout-classic #radio-admin-footer p,
.layout-classic #radio-admin-footer span,
.layout-classic #radio-admin-footer a,
.layout-retro #radio-admin-footer p,
.layout-retro #radio-admin-footer span,
.layout-retro #radio-admin-footer a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    text-align: center !important;
    line-height: 1.25 !important;
}

/*
 * Mantém copyright, empresa e contato na mesma linha
 * quando houver espaço disponível.
 */
.layout-classic #radio-admin-footer .footer-text,
.layout-retro #radio-admin-footer .footer-text,
.layout-classic #radio-admin-footer .radio-admin-footer-text,
.layout-retro #radio-admin-footer .radio-admin-footer-text {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 4px 7px !important;

    text-align: center !important;
}


/* Responsivo */
@media (max-width: 700px) {

    .layout-classic #radio-admin-footer img,
    .layout-retro #radio-admin-footer img,
    .layout-classic #radio-admin-footer .footer-logo,
    .layout-retro #radio-admin-footer .footer-logo,
    .layout-classic #radio-admin-footer .radio-footer-logo,
    .layout-retro #radio-admin-footer .radio-footer-logo {
        max-width: 75px !important;
        max-height: 25px !important;
    }

    .layout-classic #radio-admin-footer,
    .layout-retro #radio-admin-footer {
        gap: 2px !important;
    }
}

/* END LOGO ACIMA CLASSIC RETRO */

/* BEGIN RODAPE MOBILE CLASSIC RETRO */

/* ==========================================================
   CLÁSSICO E RETRÔ GLASS — CORREÇÃO RESPONSIVA DO RODAPÉ
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Reserva uma pequena área inferior para o rodapé.
     */
    body.layout-classic,
    body.layout-retro {
        box-sizing: border-box !important;
        padding-bottom: 48px !important;
    }

    /*
     * Rodapé compacto no final da tela, abaixo dos controles.
     */
    .layout-classic #radio-admin-footer,
    .layout-retro #radio-admin-footer {
        position: fixed !important;

        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 2px !important;

        transform: translateX(-50%) !important;

        width: calc(100% - 16px) !important;
        max-width: 430px !important;

        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 1px 6px !important;

        overflow: hidden !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        text-align: center !important;

        pointer-events: none !important;
        z-index: 99999 !important;
    }

    /*
     * Organiza o conteúdo interno em coluna.
     */
    .layout-classic #radio-admin-footer > div,
    .layout-retro #radio-admin-footer > div,
    .layout-classic #radio-admin-footer .radio-admin-footer-content,
    .layout-retro #radio-admin-footer .radio-admin-footer-content,
    .layout-classic #radio-admin-footer .footer-content,
    .layout-retro #radio-admin-footer .footer-content {
        width: 100% !important;
        height: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        text-align: center !important;
    }

    /*
     * Logo pequena acima dos textos.
     */
    .layout-classic #radio-admin-footer img,
    .layout-retro #radio-admin-footer img,
    .layout-classic #radio-admin-footer picture,
    .layout-retro #radio-admin-footer picture,
    .layout-classic #radio-admin-footer .footer-logo,
    .layout-retro #radio-admin-footer .footer-logo,
    .layout-classic #radio-admin-footer .radio-footer-logo,
    .layout-retro #radio-admin-footer .radio-footer-logo {
        order: -1 !important;

        display: block !important;

        width: auto !important;
        height: auto !important;
        max-width: 58px !important;
        max-height: 15px !important;

        margin: 0 auto 1px !important;
        padding: 0 !important;

        object-fit: contain !important;
        flex: 0 0 auto !important;
    }

    /*
     * Copyright, empresa e contato na mesma linha.
     */
    .layout-classic #radio-admin-footer .footer-text,
    .layout-retro #radio-admin-footer .footer-text,
    .layout-classic #radio-admin-footer .radio-admin-footer-text,
    .layout-retro #radio-admin-footer .radio-admin-footer-text {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        gap: 3px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /*
     * Textos menores para não alcançar os controles.
     */
    .layout-classic #radio-admin-footer,
    .layout-classic #radio-admin-footer p,
    .layout-classic #radio-admin-footer span,
    .layout-classic #radio-admin-footer a,
    .layout-classic #radio-admin-footer div,
    .layout-retro #radio-admin-footer,
    .layout-retro #radio-admin-footer p,
    .layout-retro #radio-admin-footer span,
    .layout-retro #radio-admin-footer a,
    .layout-retro #radio-admin-footer div {
        font-size: 8.5px !important;
        font-weight: 500 !important;
        line-height: 1.05 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        text-align: center !important;
    }

    /*
     * Links continuam clicáveis.
     */
    .layout-classic #radio-admin-footer a,
    .layout-retro #radio-admin-footer a {
        pointer-events: auto !important;
    }

    /*
     * Evita que o texto complementar crie uma linha muito alta.
     */
    .layout-classic #radio-admin-footer p,
    .layout-retro #radio-admin-footer p {
        max-width: 100% !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* Celulares muito estreitos */
@media (max-width: 420px) {

    body.layout-classic,
    body.layout-retro {
        padding-bottom: 43px !important;
    }

    .layout-classic #radio-admin-footer,
    .layout-retro #radio-admin-footer {
        width: calc(100% - 10px) !important;

        height: 39px !important;
        min-height: 39px !important;
        max-height: 39px !important;

        bottom: 1px !important;
        padding: 0 4px !important;
    }

    .layout-classic #radio-admin-footer img,
    .layout-retro #radio-admin-footer img,
    .layout-classic #radio-admin-footer .footer-logo,
    .layout-retro #radio-admin-footer .footer-logo,
    .layout-classic #radio-admin-footer .radio-footer-logo,
    .layout-retro #radio-admin-footer .radio-footer-logo {
        max-width: 48px !important;
        max-height: 12px !important;
    }

    .layout-classic #radio-admin-footer,
    .layout-classic #radio-admin-footer p,
    .layout-classic #radio-admin-footer span,
    .layout-classic #radio-admin-footer a,
    .layout-classic #radio-admin-footer div,
    .layout-retro #radio-admin-footer,
    .layout-retro #radio-admin-footer p,
    .layout-retro #radio-admin-footer span,
    .layout-retro #radio-admin-footer a,
    .layout-retro #radio-admin-footer div {
        font-size: 7.5px !important;
    }
}

/* END RODAPE MOBILE CLASSIC RETRO */

/* BEGIN MOBILE TRANSPORT CSS FIX */
@media (max-width: 991px),
       (hover: none) and (pointer: coarse) {

    body.radio-layout-retro .player-controller,
    body.radio-layout-retro .player-section-audio {
        position: relative !important;
        z-index: 80 !important;
        pointer-events: auto !important;
        isolation: isolate;
    }

    body.radio-layout-retro .player-controller
    .player-button-play,

    body.radio-layout-retro .player-controller
    .player-button-forward-step,

    body.radio-layout-retro .player-controller
    .player-button-backward-step {
        position: relative !important;
        z-index: 90 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        cursor: pointer !important;
    }

    body.radio-layout-retro .player-controller
    .player-button-play svg,

    body.radio-layout-retro .player-controller
    .player-button-forward-step svg,

    body.radio-layout-retro .player-controller
    .player-button-backward-step svg {
        pointer-events: none !important;
    }

    /*
     * O knob foi criado para desktop. No celular ele não pode
     * capturar toques destinados aos controles de transporte.
     */
    body.radio-layout-retro .player-controller
    [role="slider"][aria-label="Volume"],

    body.radio-layout-retro .player-controller
    [tabindex="0"][aria-label="Volume"]:not(button):not(input) {
        pointer-events: none !important;
        touch-action: none !important;
    }

    body.radio-layout-retro .visualizer,
    body.radio-layout-retro .visualizer canvas,
    body.radio-layout-retro #visualizerCanvas,
    body.radio-layout-retro .player-cover-image {
        pointer-events: none !important;
    }

    /*
     * Somente os ícones sociais recebem toque. O espaço
     * transparente do contêiner não bloqueia o player.
     */
    body.radio-layout-retro .player-social {
        pointer-events: none !important;
    }

    body.radio-layout-retro .player-social a,
    body.radio-layout-retro .player-social button,
    body.radio-layout-retro .player-social-item {
        pointer-events: auto !important;
    }
}
/* END MOBILE TRANSPORT CSS FIX */
