/* =========================================================
   Music FM — Breaking Light Ticker 2026
========================================================= */

.mf-breaking-light{
    position:relative;
    z-index:6;
    padding:0;
    background:#f5f7fa;
    border-bottom:1px solid rgba(10,22,40,.08);
}

.mf-breaking-light-inner{
    min-height:58px;
    display:grid;
    grid-template-columns:164px 1fr 54px;
    align-items:center;
    overflow:hidden;
    border-inline:1px solid rgba(10,22,40,.08);
    background:linear-gradient(180deg,#fbfcfe 0%,#f0f3f7 100%);
    box-shadow:0 10px 26px rgba(15,35,70,.055), inset 0 1px 0 rgba(255,255,255,.9);
}

.mf-breaking-light-title{
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    color:#101827;
    border-inline-start:1px solid rgba(10,22,40,.10);
    border-inline-end:1px solid rgba(10,22,40,.10);
    background:linear-gradient(180deg,#f8fafc 0%,#eceff4 100%);
}

.mf-breaking-light-title strong{
    font-size:21px;
    font-weight:950;
    line-height:1;
}

.mf-breaking-icon{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#111827 !important;
    font-size:18px;
    line-height:1;
}

.mf-breaking-icon i{
    font-size:18px;
    line-height:1;
}

.mf-breaking-light-ticker{
    min-width:0;
    height:58px;
    display:flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}

.mf-breaking-light-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:mfBreakingMove 34s linear infinite;
}

.mf-breaking-light-ticker:hover .mf-breaking-light-track{
    animation-play-state:paused;
}

@keyframes mfBreakingMove{
    from{transform:translateX(0)}
    to{transform:translateX(50%)}
}

.mf-breaking-light-item{
    height:58px;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    color:#111827;
    font-size:16px;
    font-weight:850;
    line-height:1;
}

.mf-breaking-light-item:not(:last-child)::after{
    content:"|";
    color:rgba(0,0,0,.28);
    font-weight:300;
    margin:0 12px;
}

.mf-breaking-light-item b{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#111827;
    font-size:15px;
    font-weight:950;
    font-style:normal;
}

.mf-breaking-light-item span{
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    color:#172033;
}

.mf-breaking-light-arrow{
    width:54px;
    height:58px;
    border:0;
    border-inline-start:1px solid rgba(10,22,40,.10);
    background:linear-gradient(180deg,#f8fafc 0%,#eceff4 100%);
    color:#111827;
    font-size:42px;
    line-height:1;
    cursor:pointer;
}

.breaking:not(.mf-breaking-light){
    display:none;
}

@media(max-width:900px){
    .mf-breaking-light-inner{
        grid-template-columns:132px 1fr 46px;
        min-height:52px;
    }

    .mf-breaking-light-title,
    .mf-breaking-light-ticker,
    .mf-breaking-light-item,
    .mf-breaking-light-arrow{
        height:52px;
    }

    .mf-breaking-light-title strong{
        font-size:18px;
    }

    .mf-breaking-icon{
        font-size:19px;
    }

    .mf-breaking-light-item{
        font-size:14px;
    }

    .mf-breaking-light-item b,
    .mf-breaking-light-item span{
        padding:0 10px;
    }

    .mf-breaking-light-arrow{
        width:46px;
        font-size:34px;
    }
}

@media(max-width:620px){
    .mf-breaking-light-inner{
        grid-template-columns:112px 1fr 40px;
        border-inline:0;
    }

    .mf-breaking-light-title{
        gap:7px;
    }

    .mf-breaking-light-title strong{
        font-size:16px;
    }

    .mf-breaking-icon{
        font-size:17px;
    }

    .mf-breaking-light-track{
        animation-duration:24s;
    }

    .mf-breaking-light-item{
        font-size:13px;
    }

    .mf-breaking-light-item b,
    .mf-breaking-light-item span{
        padding:0 8px;
    }

    .mf-breaking-light-arrow{
        width:40px;
        font-size:30px;
    }
}
.mf-breaking-light-arrow{
    width:48px;
    height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-inline-start:1px solid rgba(10,22,40,.10);
    background:linear-gradient(180deg,#f8fafc 0%,#eceff4 100%);
    color:#111827;
    cursor:pointer;
}

.mf-breaking-light-arrow i{
    font-size:18px;
    line-height:1;
}