/* ==========================================================
   DALLAS MEDIA GROUP
   PUBLIC LIVE INDICATORS V1
   Visible only when actual Dallas live state = live
   ========================================================== */


:root {
    --dm-live-red: #ef151e;
    --dm-live-dark: #050505;
    --dm-live-green: #00974f;
}


/* ==========================================================
   EVERYTHING STARTS HIDDEN
   ========================================================== */

#dallasPublicLiveTopbar,
#dallasPublicHeaderLive,
#dallasPublicHeroLive,
#dallasPublicHeroStatus {
    display: none;
}


/* ==========================================================
   TOP-MOST LIVE BAR
   ========================================================== */

body.dallas-public-is-live
#dallasPublicLiveTopbar {
    position: relative;
    z-index: 9999;

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

    width: 100%;
    min-height: 72px;

    padding: 10px 60px;

    box-sizing: border-box;

    color: #fff;

    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(220,0,0,.27),
            transparent 24%
        ),
        linear-gradient(
            90deg,
            #050505 0%,
            #120000 48%,
            #050505 100%
        );

    border-bottom:
        1px solid rgba(255,0,0,.28);

    box-shadow:
        0 8px 30px rgba(0,0,0,.16);

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


.dm-public-live-topbar-inner {
    width: min(980px, 100%);

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

    gap: 24px;
}


.dm-public-live-pulse {
    position: relative;

    width: 18px;
    height: 18px;

    flex:
        0 0 18px;

    border-radius:
        50%;

    background:
        var(--dm-live-red);

    box-shadow:
        0 0 0 11px rgba(239,21,30,.12),
        0 0 26px rgba(239,21,30,.85);
}


.dm-public-live-pulse::after {
    content: "";

    position: absolute;
    inset: -13px;

    border:
        2px solid rgba(239,21,30,.30);

    border-radius:
        50%;

    animation:
        dmLivePulse 1.7s ease-out infinite;
}


@keyframes dmLivePulse {

    0% {
        opacity: 1;
        transform:
            scale(.65);
    }

    100% {
        opacity: 0;
        transform:
            scale(1.45);
    }
}


.dm-public-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding:
        0 15px;

    border-radius:
        5px;

    background:
        linear-gradient(
            180deg,
            #ff2028,
            #d90811
        );

    box-shadow:
        0 0 18px rgba(239,21,30,.42);

    color:
        #fff;

    font-size:
        15px;

    font-weight:
        900;

    letter-spacing:
        .2px;

    white-space:
        nowrap;
}


.dm-public-live-message {
    color:
        #fff;

    font-size:
        16px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.dm-public-live-now-copy {
    color:
        var(--dm-live-red);

    font-size:
        16px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.dm-public-live-topbar-link {
    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    color:
        inherit;

    text-decoration:
        none;
}


.dm-public-live-topbar-close {
    position:
        absolute;

    right:
        28px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    color:
        #fff;

    background:
        transparent;

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;
}


/* ==========================================================
   HEADER LIVE BADGE
   ========================================================== */

body.dallas-public-is-live
#dallasPublicHeaderLive {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-left:
        auto;

    padding:
        8px 10px;

    text-decoration:
        none;

    color:
        inherit;
}


.dm-header-live-radar {
    position:
        relative;

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid rgba(239,21,30,.33);

    border-radius:
        50%;
}


.dm-header-live-radar::before {
    content: "";

    position:
        absolute;

    inset:
        8px;

    border:
        2px solid rgba(239,21,30,.70);

    border-radius:
        50%;
}


.dm-header-live-radar::after {
    content: "";

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    background:
        var(--dm-live-red);

    box-shadow:
        0 0 15px rgba(239,21,30,.75);
}


.dm-header-live-copy {
    display:
        grid;

    gap:
        3px;
}


.dm-header-live-copy strong {
    width:
        max-content;

    padding:
        8px 12px;

    border-radius:
        4px;

    color:
        #fff;

    background:
        var(--dm-live-red);

    font-size:
        17px;

    font-weight:
        900;
}


.dm-header-live-copy span {
    color:
        #080808;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .7px;
}


.dm-header-live-copy span b {
    color:
        var(--dm-live-red);
}


/* ==========================================================
   HERO LIVE BUTTON / STATUS
   ========================================================== */

body.dallas-public-is-live
#dallasPublicHeroStatus {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    flex-wrap:
        wrap;

    margin-top:
        18px;
}


.dm-hero-live-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        54px;

    padding:
        0 27px;

    border:
        2px solid rgba(255,255,255,.85);

    outline:
        2px solid rgba(239,21,30,.42);

    outline-offset:
        5px;

    border-radius:
        28px;

    color:
        #fff;

    background:
        linear-gradient(
            180deg,
            #ff252e 0%,
            #dc0b14 100%
        );

    box-shadow:
        0 0 22px rgba(239,21,30,.55);

    font-size:
        16px;

    font-weight:
        900;

    text-decoration:
        none;
}


.dm-hero-live-button-dot {
    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:
        0 0 13px rgba(255,255,255,.85);
}


.dm-hero-on-air {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        700;
}


.dm-hero-on-air strong {
    color:
        var(--dm-live-red);

    font-weight:
        900;
}


.dm-hero-on-air-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--dm-live-red);
}


/* ==========================================================
   LARGE HERO LIVE OVERLAY
   ========================================================== */

body.dallas-public-is-live
#dallasPublicHeroLive {
    position:
        absolute;

    z-index:
        12;

    right:
        10%;

    top:
        43%;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    padding:
        12px 18px;

    border-radius:
        10px;

    color:
        #fff;

    background:
        rgba(5,5,5,.72);

    backdrop-filter:
        blur(5px);

    text-decoration:
        none;

    box-shadow:
        0 8px 28px rgba(0,0,0,.28);
}


.dm-hero-radar {
    position:
        relative;

    width:
        65px;

    height:
        65px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 65px;

    border:
        3px solid rgba(255,255,255,.88);

    border-radius:
        50%;

    box-shadow:
        0 0 0 11px rgba(239,21,30,.16),
        0 0 0 21px rgba(239,21,30,.08),
        0 0 27px rgba(239,21,30,.50);
}


.dm-hero-radar::after {
    content:
        "";

    width:
        21px;

    height:
        21px;

    border-radius:
        50%;

    background:
        #ff2630;

    box-shadow:
        0 0 17px rgba(255,38,48,.85);
}


.dm-hero-live-overlay-copy {
    display:
        grid;

    gap:
        5px;
}


.dm-hero-live-overlay-copy strong {
    padding:
        6px 12px;

    border-radius:
        5px;

    background:
        linear-gradient(
            180deg,
            #f7242c,
            #d20811
        );

    color:
        #fff;

    font-size:
        clamp(
            25px,
            2.4vw,
            42px
        );

    font-weight:
        900;

    line-height:
        1;
}


.dm-hero-live-overlay-copy span {
    color:
        #fff;

    font-size:
        clamp(
            14px,
            1.3vw,
            21px
        );

    font-weight:
        800;

    letter-spacing:
        .3px;
}


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

@media (max-width: 900px) {

    body.dallas-public-is-live
    #dallasPublicLiveTopbar {
        min-height:
            58px;

        padding:
            8px 44px 8px 12px;
    }


    .dm-public-live-topbar-inner,
    .dm-public-live-topbar-link {
        gap:
            10px;
    }


    .dm-public-live-message {
        display:
            none;
    }


    .dm-public-live-now-copy {
        font-size:
            12px;
    }


    .dm-public-live-pill {
        min-height:
            30px;

        padding:
            0 10px;

        font-size:
            12px;
    }


    .dm-public-live-pulse {
        width:
            12px;

        height:
            12px;

        flex-basis:
            12px;
    }


    .dm-public-live-topbar-close {
        right:
            8px;

        font-size:
            24px;
    }


    body.dallas-public-is-live
    #dallasPublicHeroLive {
        right:
            18px;

        top:
            auto;

        bottom:
            34px;

        padding:
            9px 12px;
    }


    .dm-hero-radar {
        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;
    }


    .dm-hero-live-overlay-copy strong {
        font-size:
            21px;
    }


    .dm-hero-live-overlay-copy span {
        font-size:
            11px;
    }

}


@media (max-width: 620px) {

    #dallasPublicHeaderLive {
        display:
            none !important;
    }


    body.dallas-public-is-live
    #dallasPublicHeroLive {
        display:
            none;
    }

}