/* ==========================================================
   RÁDIO 101
   radio101.com.br
========================================================== */


/* ==========================================================
   BASE
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(
            circle at top,
            #161627 0%,
            #0b0b14 45%,
            #050509 100%
        );

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ==========================================================
   COMPONENTES
========================================================== */

.glass {
    background:
        rgba(255, 255, 255, 0.035);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        24px;
}


.album-glow {
    box-shadow:
        0 0 45px rgba(234, 179, 8, 0.12);
}


.btn-whatsapp {
    background:
        #25D366;

    box-shadow:
        0 5px 18px rgba(37, 211, 102, 0.28);
}


.program-card {
    background:
        rgba(0, 0, 0, .25);

    border:
        1px solid rgba(255, 255, 255, .06);
}


.widget-box {
    overflow:
        hidden;

    border-radius:
        16px;

    background:
        #000;
}


/* ==========================================================
   PLAYER
========================================================== */

#album-art {
    transition:
        opacity .35s ease;
}


.loading-art {
    opacity:
        .45;
}


.status-message {
    min-height:
        20px;
}


.live-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #ef4444;

    box-shadow:
        0 0 8px rgba(239, 68, 68, 0.8);

    animation:
        pulseLive 1.5s infinite;
}


@keyframes pulseLive {

    0%,
    100% {
        opacity:
            1;
    }

    50% {
        opacity:
            .35;
    }

}


/* ==========================================================
   NOTÍCIAS
========================================================== */

.news-container {
    width:
        100%;

    overflow:
        hidden;

    border-radius:
        16px;

    background:
        #000;
}


.taaqui-news-widget {
    width:
        100%;
}


/* ==========================================================
   PATROCINADORES
========================================================== */

.sponsor-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        130px;

    padding:
        16px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        16px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.sponsor-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(234, 179, 8, .45);

    background:
        rgba(255, 255, 255, .06);
}


.sponsor-card img {

    width:
        100%;

    /* max-height:
        110px; */

    object-fit:
        contain;

    border-radius:
        10px;
}


/* ==========================================================
   MENU
========================================================== */

section,
header {
    scroll-margin-top:
        90px;
}


.nav-link {

    display:
        inline-flex;

    align-items:
        center;

    height:
        40px;

    padding:
        0 14px;

    border-radius:
        10px;

    color:
        #9ca3af;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;

    transition:
        color .2s ease,
        background .2s ease;
}


.nav-link:hover {

    color:
        #fff;

    background:
        rgba(255,255,255,.05);
}


.nav-live {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    height:
        40px;

    padding:
        0 15px;

    margin:
        0 3px;

    border-radius:
        10px;

    background:
        #eab308;

    color:
        #000;

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;

    transition:
        background .2s ease,
        transform .2s ease;
}


.nav-live:hover {

    background:
        #facc15;

    transform:
        translateY(-1px);
}


.live-menu-dot {

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #ef4444;

    animation:
        menuLivePulse 1.5s infinite;
}


@keyframes menuLivePulse {

    0%,
    100% {
        opacity:
            1;
    }

    50% {
        opacity:
            .35;
    }

}


/* ==========================================================
   MENU MOBILE
========================================================== */

.mobile-nav-link {

    display:
        flex;

    align-items:
        center;

    min-height:
        46px;

    padding:
        0 15px;

    border-radius:
        10px;

    color:
        #d1d5db;

    font-size:
        13px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;

    transition:
        background .2s ease,
        color .2s ease;
}


.mobile-nav-link:hover {

    background:
        rgba(255,255,255,.05);

    color:
        #fff;
}


.mobile-nav-live {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        48px;

    padding:
        0 15px;

    border-radius:
        10px;

    background:
        #eab308;

    color:
        #000;

    font-size:
        13px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width: 640px) {

    .album-container {

        width:
            220px;

        height:
            220px;
    }

}

/* ==========================================================
   MUSIC RADAR
========================================================== */

.taaqui-music-radar .tmr-copy>small {
    color: #12213b !important;
}

.taaqui-music-radar .tmr-tags span:first-child {
    background: #ede9fe !important;
    color: #6d28d9 !important;
}

.taaqui-music-radar .tmr-tags span:last-child {
    background: #ffedd5 !important;
    color: #c2410c !important;
}

.taaqui-music-radar .tmr-brand a {
    display: inline-block !important;
    padding: 3px 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    opacity: 1 !important;
}

.taaqui-music-radar .tmr-head h3 {
    display: none;
}