/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER
 * Version : 4.3.0 Premium
 * Visual Design : City Live Red + Blue
 *====================================================*/

.cl-sticky-player {
    position: fixed;
    left: 50%;
    bottom: 22px;
    width: min(720px, calc(100% - 28px));
    max-width: 720px;
    padding: 20px 22px 16px;
    background: #fff !important;
    border: 1px solid rgba(215, 25, 32, .16) !important;
    border-radius: 22px !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.14),
        0 4px 14px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
}

/* Premium gradient edge */
.cl-sticky-player::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        rgba(215,25,32,.55),
        rgba(215,25,32,.08) 42%,
        rgba(0,71,171,.10) 64%,
        rgba(0,71,171,.45)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.cl-sticky-player > * {
    position: relative;
    z-index: 1;
}

/* Header */
.cl-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px !important;
}

.cl-player-left {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    flex: 1;
}

/* Logo / speaker */
.cl-player-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#d71920 0%,#7c245d 52%,#0047ab 100%) !important;
    color: #fff;
    font-size: 23px;
    box-shadow: 0 7px 18px rgba(0,0,0,.12);
}

/* Title */
#clPlayerTitle {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #202124 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Status */
#clPlayerStatus {
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #777 !important;
}

#clPlayerStatus.playing { color: #d71920 !important; }
#clPlayerStatus.loading { color: #0047ab !important; }
#clPlayerStatus.completed { color: #198754 !important; }

/* Close */
.cl-player-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #9a9a9a !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
}

.cl-player-close:hover {
    color: #d71920 !important;
    background: #f6f6f6 !important;
    transform: rotate(90deg);
}

/* Progress */
.cl-player-progress {
    width: 100% !important;
    margin: 5px 0 0 !important;
}

.cl-player-progress-input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100% !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50px !important;
    background:
        linear-gradient(
            to right,
            #d71920 0%,
            #0047ab var(--progress, 0%),
            #e8e8e8 var(--progress, 0%),
            #e8e8e8 100%
        ) !important;
    cursor: pointer;
    outline: none;
}

/* Hide native track fill and let the input background handle it */
.cl-player-progress-input::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 50px;
    background: transparent;
}

.cl-player-progress-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -5.5px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d71920;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
}

.cl-player-progress-input::-moz-range-track {
    height: 7px;
    border-radius: 50px;
    background: transparent;
}

.cl-player-progress-input::-moz-range-progress {
    background: transparent;
}

.cl-player-progress-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d71920;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
}

/* Time */
.cl-player-time {
    width: 100% !important;
    margin: 13px 0 14px !important;
    text-align: center;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #555 !important;
}

/* Controls */
.cl-player-controls {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 26px !important;
}

/* Common */
.cl-player-control {
    border: 0 !important;
    outline: none !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

/* Gradient Reverse / Forward */
.cl-player-seek {
    position: relative;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,#d71920 0%,#8b245e 52%,#0047ab 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 7px 18px rgba(0,71,171,.18);
}

/* Do not display text such as 10 sec */
.cl-player-seek .cl-seek-value,
.cl-player-seek .cl-seek-label {
    display: none !important;
}

.cl-player-seek:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 24px rgba(0,71,171,.24);
}

.cl-player-seek:active {
    transform: scale(.94);
}

/* Seek icon */
.cl-seek-icon {
    font-size: 25px !important;
    line-height: 1 !important;
    color: #fff !important;
    font-weight: 600;
}

/* Play */
.cl-player-play {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: linear-gradient(135deg,#d71920,#c81017) !important;
    color: #fff !important;
    font-size: 27px !important;
    box-shadow:
        0 9px 24px rgba(215,25,32,.26),
        0 0 0 5px rgba(0,71,171,.08);
}

.cl-player-play:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg,#d71920,#0047ab) !important;
    box-shadow:
        0 11px 28px rgba(0,71,171,.25),
        0 0 0 5px rgba(215,25,32,.08);
}

.cl-player-play:active {
    transform: scale(.94);
}

/* Sponsor slot */
.cl-player-ad {
    margin-top: 17px;
    padding-top: 10px;
    border-top: 1px solid #ededed;
    text-align: center;
}

.cl-player-ad-label {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
}

.cl-player-ad-content {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.cl-player-ad-content img {
    display: block;
    max-width: 100%;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Hide empty ad slot */
.cl-player-ad.is-empty {
    display: none;
}

/* Accessibility */
.cl-player-control:focus-visible,
.cl-player-close:focus-visible,
.cl-player-progress-input:focus-visible {
    outline: 2px solid rgba(0,71,171,.35) !important;
    outline-offset: 3px;
}

/* Mobile */
@media (max-width: 600px) {

    .cl-sticky-player {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        bottom: 8px;
        padding: 15px 14px 13px !important;
        border-radius: 18px !important;
    }

    .cl-sticky-player::before {
        border-radius: 18px;
    }

    .cl-player-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        font-size: 21px;
    }

    #clPlayerTitle {
        font-size: 15px !important;
    }

    #clPlayerStatus {
        font-size: 11px !important;
    }

    .cl-player-controls {
        gap: 17px !important;
    }

    .cl-player-seek {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }

    .cl-player-play {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        font-size: 24px !important;
    }

    .cl-player-ad {
        margin-top: 13px;
    }
}

@media (max-width: 380px) {

    .cl-player-controls {
        gap: 11px !important;
    }

    .cl-player-seek {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }

    .cl-player-play {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }
}

/*====================================================
 * CITY LIVE AUDIO PLAYER v4.3
 * STEP 2 — PLAYER UX POLISH
 * STEP 2A — LAYOUT / SPACING / VISUAL BALANCE
 *====================================================*/

/* Keep the player visually compact without changing
 * any audio functionality. */
.cl-sticky-player {
    padding: 18px 20px 15px !important;
}

/* Header: tighter vertical rhythm */
.cl-player-header {
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.cl-player-left {
    gap: 12px !important;
}

/* Speaker icon: slightly more refined */
.cl-player-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    font-size: 22px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.11) !important;
}

/* Headline: premium readable scale */
#clPlayerTitle {
    font-size: 17px !important;
    line-height: 1.30 !important;
    letter-spacing: -0.15px;
}

#clPlayerStatus {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Progress: cleaner and slightly slimmer */
.cl-player-progress {
    margin: 7px 0 0 !important;
}

.cl-player-progress-input {
    height: 6px !important;
}

.cl-player-progress-input::-webkit-slider-runnable-track {
    height: 6px !important;
}

.cl-player-progress-input::-webkit-slider-thumb {
    width: 17px !important;
    height: 17px !important;
    margin-top: -5.5px !important;
}

.cl-player-progress-input::-moz-range-track {
    height: 6px !important;
}

.cl-player-progress-input::-moz-range-thumb {
    width: 17px !important;
    height: 17px !important;
}

/* Time: slightly smaller and cleaner */
.cl-player-time {
    margin: 11px 0 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: .1px;
}

/* Controls: reduce visual bulk */
.cl-player-controls {
    gap: 20px !important;
}

.cl-player-seek {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    box-shadow: 0 6px 16px rgba(0,71,171,.16) !important;
}

.cl-player-play {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    font-size: 25px !important;
    box-shadow:
        0 8px 20px rgba(215,25,32,.22),
        0 0 0 4px rgba(0,71,171,.07) !important;
}

.cl-player-seek:hover {
    transform: translateY(-1px) scale(1.04);
}

.cl-player-play:hover {
    transform: scale(1.04);
}

/* Close button — premium top-right positioning */
.cl-player-header {
    position: relative !important;
}

.cl-player-info {
    padding-right: 52px !important;
}

.cl-player-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

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

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

    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.97) !important;
    color: #777 !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-shadow: 0 4px 13px rgba(0,0,0,.08) !important;
    z-index: 20 !important;
}

.cl-player-close:hover {
    color: #d71920 !important;
    background: #fff !important;
    border-color: rgba(215,25,32,.25) !important;
    box-shadow: 0 6px 17px rgba(215,25,32,.13) !important;
    transform: scale(1.05) !important;
}

.cl-player-close:active {
    transform: scale(.94) !important;
}

/* Mobile: compact but still comfortable to touch */
@media (max-width: 600px) {

    .cl-sticky-player {
        width: calc(100% - 16px) !important;
        bottom: 8px !important;
        padding: 14px 13px 12px !important;
        border-radius: 18px !important;
    }

    .cl-sticky-player::before {
        border-radius: 18px !important;
    }

    .cl-player-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .cl-player-left {
        gap: 10px !important;
    }

    .cl-player-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        font-size: 20px !important;
    }

    #clPlayerTitle {
        font-size: 15px !important;
        line-height: 1.28 !important;
    }

    #clPlayerStatus {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    .cl-player-info {
        padding-right: 43px !important;
    }

    .cl-player-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 24px !important;
    }

    .cl-player-progress {
        margin-top: 6px !important;
    }

    .cl-player-time {
        margin: 10px 0 9px !important;
        font-size: 13px !important;
    }

    .cl-player-controls {
        gap: 14px !important;
    }

    .cl-player-seek {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }

    .cl-player-play {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        font-size: 23px !important;
    }
}

@media (max-width: 380px) {

    .cl-player-controls {
        gap: 10px !important;
    }

    .cl-player-seek {
        width: 47px !important;
        height: 47px !important;
        min-width: 47px !important;
    }

    .cl-player-play {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }
}


/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER v4.3
 * STEP 2A — PREMIUM UX POLISH
 * Compact Vertical Layout
 *====================================================*/

/*------------------------------------*
 * Compact Premium Player
 *------------------------------------*/

.cl-sticky-player {
    padding: 20px 26px 17px !important;
    border-radius: 24px !important;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.14),
        0 6px 20px rgba(0, 0, 0, 0.07) !important;
}


/*------------------------------------*
 * Header
 *------------------------------------*/

.cl-player-header {
    margin-bottom: 10px !important;
}


/*------------------------------------*
 * Speaker Icon
 *------------------------------------*/

.cl-player-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
}


/*------------------------------------*
 * Headline
 *------------------------------------*/

#clPlayerTitle {
    font-size: 20px !important;
    line-height: 1.28 !important;
}


/*------------------------------------*
 * Status
 *------------------------------------*/

#clPlayerStatus {
    margin-top: 4px !important;
    font-size: 13px !important;
}


/*------------------------------------*
 * Progress
 *------------------------------------*/

.cl-player-progress {
    margin-top: 4px !important;
}


/*------------------------------------*
 * Control Row
 *------------------------------------*/

.cl-player-control-row {
    margin-top: 8px !important;

    min-height: 62px !important;

    gap: 16px !important;
}


/*------------------------------------*
 * Time
 *------------------------------------*/

.cl-player-control-row .cl-player-time {
    font-size: 16px !important;
    font-weight: 750 !important;

    line-height: 1 !important;
}


/*------------------------------------*
 * Controls
 *------------------------------------*/

.cl-player-control-row .cl-player-controls {
    gap: 9px !important;
}


/*------------------------------------*
 * Reverse / Forward
 *------------------------------------*/

.cl-player-control-row .cl-player-seek {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
}


/*------------------------------------*
 * Play / Pause
 *------------------------------------*/

.cl-player-control-row .cl-player-play {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
}


/*------------------------------------*
 * Close Button
 *------------------------------------*/

.cl-player-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    font-size: 29px !important;

    border: 1px solid rgba(0,0,0,.08) !important;

    background: rgba(255,255,255,.96) !important;

    box-shadow:
        0 4px 14px rgba(0,0,0,.09) !important;
}


/*------------------------------------*
 * Close Hover
 *------------------------------------*/

.cl-player-close:hover {
    color: #d71920 !important;

    background: #ffffff !important;

    border-color:
        rgba(215,25,32,.22) !important;

    box-shadow:
        0 7px 20px rgba(215,25,32,.14) !important;

    transform: scale(1.06);
}


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

@media (max-width: 600px) {

    .cl-sticky-player {
        padding: 14px 13px 12px !important;
        border-radius: 20px !important;
    }


    .cl-player-header {
        margin-bottom: 9px !important;
    }


    .cl-player-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }


    #clPlayerTitle {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }


    #clPlayerStatus {
        margin-top: 4px !important;
        font-size: 12px !important;
    }


    .cl-player-progress {
        margin-top: 2px !important;
    }


    .cl-player-control-row {
        margin-top: 7px !important;

        min-height: 58px !important;

        gap: 10px !important;
    }


    .cl-player-control-row .cl-player-time {
        font-size: 15px !important;
    }


    .cl-player-control-row .cl-player-controls {
        gap: 7px !important;
    }


    .cl-player-control-row .cl-player-seek {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }


    .cl-player-control-row .cl-player-play {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
    }


    .cl-player-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;

        font-size: 25px !important;
    }
}


/*====================================================*
 * VERY SMALL MOBILE
 *====================================================*/

@media (max-width: 380px) {

    .cl-sticky-player {
        padding: 12px 11px 10px !important;
    }


    .cl-player-control-row {
        gap: 7px !important;
    }


    .cl-player-control-row .cl-player-time {
        font-size: 14px !important;
    }


    .cl-player-control-row .cl-player-controls {
        gap: 5px !important;
    }


    .cl-player-control-row .cl-player-seek {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }


    .cl-player-control-row .cl-player-play {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }
}

/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER v4.3
 * STEP 2B — MICRO INTERACTION POLISH
 *====================================================*/


/*------------------------------------*
 * Global Control Transition
 *------------------------------------*/

.cl-player-control,
.cl-player-close,
.cl-player-progress-input,
.cl-player-progress input[type="range"] {
    -webkit-tap-highlight-color: transparent;
}


/*------------------------------------*
 * Reverse / Forward
 *------------------------------------*/

.cl-player-seek {
    transition:
        transform 0.22s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease !important;

    will-change: transform;
}


/* Hover */

.cl-player-seek:hover {
    transform:
        translateY(-3px)
        scale(1.035) !important;
}


/* Press */

.cl-player-seek:active {
    transform:
        translateY(0)
        scale(.91) !important;

    transition-duration: .08s !important;
}


/* Keyboard Focus */

.cl-player-seek:focus-visible {
    outline:
        2px solid rgba(0, 71, 171, .42) !important;

    outline-offset: 4px;
}


/*------------------------------------*
 * Reverse / Forward Icon Transition
 *------------------------------------*/

#clBackBtn .cl-seek-icon::before,
#clNextBtn .cl-seek-icon::before {
    transition:
        color .18s ease,
        transform .18s ease;
}


/* Reverse */

#clBackBtn:hover .cl-seek-icon::before {
    transform:
        translateY(-1px)
        translateX(-1px) !important;
}


/* Forward */

#clNextBtn:hover .cl-seek-icon::before {
    transform:
        translateY(-1px)
        translateX(1px) !important;
}


/*------------------------------------*
 * PLAY / PAUSE BUTTON
 *------------------------------------*/

.cl-player-play {
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        background .22s ease !important;

    will-change: transform;
}


/* Hover */

.cl-player-play:hover {
    transform:
        scale(1.045) !important;
}


/* Press */

.cl-player-play:active {
    transform:
        scale(.91) !important;

    transition-duration: .08s !important;
}


/* Keyboard Focus */

.cl-player-play:focus-visible {
    outline:
        2px solid rgba(0, 71, 171, .42) !important;

    outline-offset: 5px;
}


/*------------------------------------*
 * CLOSE BUTTON
 *------------------------------------*/

.cl-player-close {
    transition:
        transform .20s cubic-bezier(.2,.8,.2,1),
        color .20s ease,
        background .20s ease,
        border-color .20s ease,
        box-shadow .20s ease !important;

    will-change: transform;
}


/* Hover */

.cl-player-close:hover {
    transform:
        scale(1.07) !important;
}


/* Press */

.cl-player-close:active {
    transform:
        scale(.90) !important;

    transition-duration: .08s !important;
}


/*------------------------------------*
 * PROGRESS THUMB
 *------------------------------------*/

.cl-player-progress-input::-webkit-slider-thumb,
.cl-player-progress input[type="range"]::-webkit-slider-thumb {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease !important;

    cursor: grab;
}


/* Hover */

.cl-player-progress-input:hover::-webkit-slider-thumb,
.cl-player-progress input[type="range"]:hover::-webkit-slider-thumb {
    transform:
        scale(1.12) !important;

    box-shadow:
        0 4px 14px rgba(215, 25, 32, .30) !important;
}


/* Active / Drag */

.cl-player-progress-input:active::-webkit-slider-thumb,
.cl-player-progress input[type="range"]:active::-webkit-slider-thumb {
    transform:
        scale(1.20) !important;

    cursor: grabbing;
}


/* Firefox */

.cl-player-progress-input::-moz-range-thumb,
.cl-player-progress input[type="range"]::-moz-range-thumb {
    transition:
        transform .16s ease,
        box-shadow .16s ease !important;

    cursor: grab;
}


.cl-player-progress-input:active::-moz-range-thumb,
.cl-player-progress input[type="range"]:active::-moz-range-thumb {
    transform:
        scale(1.18) !important;

    cursor: grabbing;
}


/*------------------------------------*
 * PLAYER OPEN / CLOSE TRANSITION
 *------------------------------------*/

.cl-sticky-player {
    will-change:
        transform,
        opacity;
}


/*------------------------------------*
 * REDUCED MOTION
 * Accessibility
 *------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    .cl-player-control,
    .cl-player-close,
    .cl-player-seek,
    .cl-player-play,
    .cl-player-progress-input,
    .cl-player-progress input[type="range"],
    #clBackBtn .cl-seek-icon::before,
    #clNextBtn .cl-seek-icon::before {
        transition: none !important;
    }

    .cl-player-seek:hover,
    .cl-player-play:hover,
    .cl-player-close:hover {
        transform: none !important;
    }
}


/*------------------------------------*
 * MOBILE — Keep Interactions Subtle
 *------------------------------------*/

@media (max-width: 600px) {

    .cl-player-seek:hover {
        transform:
            translateY(-2px)
            scale(1.025) !important;
    }

    .cl-player-play:hover {
        transform:
            scale(1.025) !important;
    }

    .cl-player-close:hover {
        transform:
            scale(1.045) !important;
    }

}


/*------------------------------------*
 * VERY SMALL MOBILE
 *------------------------------------*/

@media (max-width: 380px) {

    .cl-player-seek:hover,
    .cl-player-play:hover,
    .cl-player-close:hover {
        transform: none !important;
    }

}

/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER v4.3
 * STEP 2C — ENHANCED PREMIUM STATE FEEDBACK
 *====================================================*/


/*------------------------------------*
 * STATUS BASE
 *------------------------------------*/

#clPlayerStatus {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;

    width: fit-content;
    max-width: 100%;

    padding: 3px 9px 3px 7px;

    border-radius: 999px;

    line-height: 1.25 !important;

    transition:
        color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        opacity .25s ease;
}


/*====================================================*
 * READY
 *====================================================*/

#clPlayerStatus.ready {

    color: #777777 !important;

    background: rgba(0, 0, 0, .035);

    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .035);

}


/*====================================================*
 * PLAYING
 *====================================================*/

#clPlayerStatus.playing {

    color: #c81017 !important;

    background:
        linear-gradient(
            135deg,
            rgba(215, 25, 32, .10),
            rgba(215, 25, 32, .045)
        );

    box-shadow:
        inset 0 0 0 1px rgba(215, 25, 32, .10),
        0 3px 12px rgba(215, 25, 32, .06);

    font-weight: 700 !important;

}


/* Playing indicator */

#clPlayerStatus.playing::before {

    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #d71920;

    box-shadow:
        0 0 0 3px rgba(215, 25, 32, .10);

    animation:
        clPlayingDot 1.6s ease-in-out infinite;

}


@keyframes clPlayingDot {

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

    50% {
        transform: scale(.72);
        opacity: .55;
    }

}


/*====================================================*
 * PAUSED
 *====================================================*/

#clPlayerStatus.paused {

    color: #666b72 !important;

    background:
        rgba(108, 117, 125, .08);

    box-shadow:
        inset 0 0 0 1px rgba(108, 117, 125, .08);

    font-weight: 650 !important;

}


#clPlayerStatus.paused::before {

    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #8a8f96;

}


/*====================================================*
 * LOADING
 *====================================================*/

#clPlayerStatus.loading {

    color: #0047ab !important;

    background:
        rgba(0, 71, 171, .075);

    box-shadow:
        inset 0 0 0 1px rgba(0, 71, 171, .08);

    font-weight: 650 !important;

}


#clPlayerStatus.loading::before {

    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #0047ab;

    animation:
        clLoadingDot 1s ease-in-out infinite;

}


@keyframes clLoadingDot {

    0%,
    100% {
        opacity: .35;
        transform: scale(.75);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

}


/*====================================================*
 * COMPLETED
 *====================================================*/

#clPlayerStatus.completed {

    color: #198754 !important;

    background:
        rgba(25, 135, 84, .08);

    box-shadow:
        inset 0 0 0 1px rgba(25, 135, 84, .09);

    font-weight: 650 !important;

}


#clPlayerStatus.completed::before {

    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #198754;

}


/*====================================================*
 * PLAYER ACTIVE STATE
 *====================================================*/

/* Playing */

.cl-sticky-player:has(#clPlayerStatus.playing) {

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .14),
        0 6px 20px rgba(0, 0, 0, .07),
        0 0 0 1px rgba(215, 25, 32, .035);

}


/* Paused */

.cl-sticky-player:has(#clPlayerStatus.paused) {

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .13),
        0 6px 20px rgba(0, 0, 0, .065);

}


/* Completed */

.cl-sticky-player:has(#clPlayerStatus.completed) {

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .13),
        0 6px 20px rgba(0, 0, 0, .065),
        0 0 0 1px rgba(25, 135, 84, .035);

}


/*====================================================*
 * PLAYING — SPEAKER ICON
 *====================================================*/

.cl-sticky-player:has(#clPlayerStatus.playing)
.cl-player-icon {

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .13),
        0 0 0 4px rgba(215, 25, 32, .075);

}


/*====================================================*
 * PLAYING — MAIN CONTROL
 *====================================================*/

.cl-sticky-player:has(#clPlayerStatus.playing)
.cl-player-play {

    box-shadow:
        0 9px 24px rgba(215, 25, 32, .30),
        0 0 0 5px rgba(215, 25, 32, .075);

}


/*====================================================*
 * PAUSED — MAIN CONTROL
 *====================================================*/

.cl-sticky-player:has(#clPlayerStatus.paused)
.cl-player-play {

    box-shadow:
        0 8px 22px rgba(0, 71, 171, .17),
        0 0 0 5px rgba(0, 71, 171, .055);

}


/*====================================================*
 * COMPLETED — MAIN CONTROL
 *====================================================*/

.cl-sticky-player:has(#clPlayerStatus.completed)
.cl-player-play {

    box-shadow:
        0 8px 22px rgba(25, 135, 84, .13),
        0 0 0 5px rgba(25, 135, 84, .045);

}


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

@media (max-width: 600px) {

    #clPlayerStatus {

        padding: 3px 8px 3px 6px;

        font-size: 11px !important;

    }

    #clPlayerStatus.playing::before,
    #clPlayerStatus.paused::before,
    #clPlayerStatus.loading::before,
    #clPlayerStatus.completed::before {

        width: 6px;
        height: 6px;

        flex-basis: 6px;

    }

}


/*====================================================*
 * REDUCED MOTION
 *====================================================*/

@media (prefers-reduced-motion: reduce) {

    #clPlayerStatus.playing::before,
    #clPlayerStatus.loading::before {

        animation: none !important;

    }

}


/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER v4.3
 * STEP 3A — PREMIUM ADVERTISEMENT MODULE
 *====================================================*/


/*------------------------------------*
 * Advertisement Wrapper
 *------------------------------------*/

.cl-player-ad {

    width: 100% !important;

    margin-top: 16px !important;

    padding-top: 10px !important;

    text-align: center;

}


/*------------------------------------*
 * Advertisement Divider
 *------------------------------------*/

.cl-player-ad-divider {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 9px;

}


.cl-player-ad-divider::before,
.cl-player-ad-divider::after {

    content: "";

    flex: 1 1 auto;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #dddddd
        );

}


.cl-player-ad-divider::after {

    background:
        linear-gradient(
            90deg,
            #dddddd,
            transparent
        );

}


/*------------------------------------*
 * Advertisement Label
 *------------------------------------*/

.cl-player-ad-label {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    padding: 4px 13px !important;

    margin: 0 !important;

    border:
        1px solid rgba(215, 25, 32, .14) !important;

    border-radius: 999px !important;

    background: #ffffff !important;

    color: #d71920 !important;

    font-size: 10px !important;

    line-height: 1 !important;

    letter-spacing: .3px !important;

    text-transform: none !important;

    font-weight: 700 !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.05);

}


/*------------------------------------*
 * Advertisement Container
 *------------------------------------*/

.cl-player-ad-content {

    width: 100% !important;

    min-height: 74px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

    padding: 0 !important;

    border:
        1px solid #e3e3e3 !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            #fafafa,
            #ffffff
        ) !important;

    box-sizing: border-box;

}


/*------------------------------------*
 * Demo Advertisement
 *------------------------------------*/

.cl-player-ad-demo {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 10px 18px;

    box-sizing: border-box;

}


/*------------------------------------*
 * Demo Brand
 *------------------------------------*/

.cl-player-ad-demo-brand {

    font-size: 14px;

    line-height: 1;

    font-weight: 800;

    color: #ffffff;

    padding: 9px 12px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #d71920,
            #0047ab
        );

    white-space: nowrap;

}


/*------------------------------------*
 * Demo Title
 *------------------------------------*/

.cl-player-ad-demo-title {

    font-size: 15px;

    line-height: 1.25;

    font-weight: 750;

    color: #202124;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/*------------------------------------*
 * Demo Subtitle
 *------------------------------------*/

.cl-player-ad-demo-subtitle {

    font-size: 11px;

    line-height: 1.2;

    color: #777777;

    white-space: nowrap;

}


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

@media (max-width: 600px) {

    .cl-player-ad {

        margin-top: 13px !important;

        padding-top: 8px !important;

    }


    .cl-player-ad-divider {

        gap: 8px;

        margin-bottom: 7px;

    }


    .cl-player-ad-label {

        padding: 4px 11px !important;

        font-size: 9px !important;

    }


    .cl-player-ad-content {

        min-height: 58px !important;

        border-radius: 11px !important;

    }


    .cl-player-ad-demo {

        min-height: 58px;

        gap: 8px;

        padding: 7px 10px;

    }


    .cl-player-ad-demo-brand {

        font-size: 10px;

        padding: 7px 8px;

        border-radius: 7px;

    }


    .cl-player-ad-demo-title {

        font-size: 11px;

    }


    .cl-player-ad-demo-subtitle {

        display: none;

    }

}


/*====================================================*
 * VERY SMALL MOBILE
 *====================================================*/

@media (max-width: 380px) {

    .cl-player-ad-demo {

        gap: 7px;

        padding-left: 8px;

        padding-right: 8px;

    }


    .cl-player-ad-demo-brand {

        font-size: 9px;

        padding: 6px 7px;

    }


    .cl-player-ad-demo-title {

        font-size: 10px;

    }

}


/*====================================================*
 * CITY LIVE DEMO ADVERTISEMENT
 * STEP 3A — BRAND PROMOTION
 *====================================================*/

.cl-player-ad-demo {
    width: 100%;
    min-height: 74px;

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

    gap: 18px;

    padding: 10px 22px;

    box-sizing: border-box;

    background:
        linear-gradient(
            100deg,
            #d71920 0%,
            #a91d4d 38%,
            #0047ab 100%
        );

    border-radius: 13px;

    color: #ffffff;

    overflow: hidden;
}


/*------------------------------------*
 * City Live Brand
 *------------------------------------*/

.cl-player-ad-demo-brand {

    flex: 0 0 auto;

    padding: 8px 13px;

    border-radius: 8px;

    background: #ffffff;

    color: #d71920;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: -.4px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.16);
}


/*------------------------------------*
 * Advertisement Copy
 *------------------------------------*/

.cl-player-ad-demo-copy {

    flex: 1 1 auto;

    min-width: 0;

    text-align: left;
}


.cl-player-ad-demo-title {

    font-size: 17px;

    line-height: 1.15;

    font-weight: 800;

    color: #ffffff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.cl-player-ad-demo-subtitle {

    margin-top: 4px;

    font-size: 11px;

    line-height: 1.2;

    color: rgba(255,255,255,.82);

    white-space: nowrap;
}


/*------------------------------------*
 * CTA
 *------------------------------------*/

.cl-player-ad-demo-cta {

    flex: 0 0 auto;

    padding: 8px 13px;

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

    border-radius: 999px;

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

    color: #ffffff;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: .2px;

    white-space: nowrap;

    backdrop-filter: blur(5px);
}


/*------------------------------------*
 * Mobile
 *------------------------------------*/

@media (max-width: 600px) {

    .cl-player-ad-demo {

        min-height: 58px;

        padding: 8px 10px;

        gap: 9px;

        border-radius: 10px;
    }


    .cl-player-ad-demo-brand {

        padding: 6px 8px;

        font-size: 10px;

        border-radius: 6px;
    }


    .cl-player-ad-demo-title {

        font-size: 12px;
    }


    .cl-player-ad-demo-subtitle {

        font-size: 9px;

        margin-top: 2px;
    }


    .cl-player-ad-demo-cta {

        padding: 6px 8px;

        font-size: 8px;
    }
}


/*------------------------------------*
 * Very Small Mobile
 *------------------------------------*/

@media (max-width: 380px) {

    .cl-player-ad-demo {

        gap: 7px;

        padding: 7px 8px;
    }


    .cl-player-ad-demo-subtitle {

        display: none;
    }


    .cl-player-ad-demo-cta {

        display: none;
    }

}

/*====================================================*
 * STEP 3B — CLICKABLE ADVERTISEMENT
 *====================================================*/

.cl-player-ad-demo {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;

}


/*------------------------------------*
 * Hover
 *------------------------------------*/

.cl-player-ad-demo:hover {

    text-decoration: none !important;

    transform: translateY(-1px);

    filter: brightness(1.025);

}


/*------------------------------------*
 * Active / Press
 *------------------------------------*/

.cl-player-ad-demo:active {

    transform: scale(.992);

    transition-duration: .08s;

}


/*------------------------------------*
 * Keyboard Focus
 *------------------------------------*/

.cl-player-ad-demo:focus-visible {

    outline:
        2px solid rgba(0, 71, 171, .45);

    outline-offset: 3px;

}


/*------------------------------------*
 * CTA
 *------------------------------------*/

.cl-player-ad-demo-cta {

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

}


.cl-player-ad-demo:hover
.cl-player-ad-demo-cta {

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

    border-color:
        rgba(255,255,255,.75);

    transform:
        translateX(-2px);

}


/*------------------------------------*
 * Mobile
 *------------------------------------*/

@media (max-width: 600px) {

    .cl-player-ad-demo:hover {

        transform: none;

        filter: brightness(1.015);

    }

}


/*------------------------------------*
 * Reduced Motion
 *------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    .cl-player-ad-demo,
    .cl-player-ad-demo-cta {

        transition: none !important;

    }

}

/*====================================================*
 * CITY LIVE AUDIO PLAYER v4.3
 * STEP 3C — SPONSOR IMAGE CREATIVE
 *====================================================*/


/*------------------------------------*
 * Creative Wrapper
 *------------------------------------*/

.cl-player-ad-creative {

    display: block;

    width: 100%;

    overflow: hidden;

    border-radius: 13px;

    background: #ffffff;

    text-decoration: none;

    cursor: pointer;

    line-height: 0;

    box-sizing: border-box;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}


/*------------------------------------*
 * Sponsor Image
 *------------------------------------*/

.cl-player-ad-creative img {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    max-height: 120px;

    object-fit: cover;

    object-position: center;

    border-radius: inherit;

    transition:
        transform .35s ease,
        filter .25s ease;
}


/*------------------------------------*
 * Hover
 *------------------------------------*/

.cl-player-ad-creative:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);

}


.cl-player-ad-creative:hover img {

    filter:
        brightness(1.025);

}


/*------------------------------------*
 * Active / Tap
 *------------------------------------*/

.cl-player-ad-creative:active {

    transform:
        scale(.992);

}


/*------------------------------------*
 * Keyboard Focus
 *------------------------------------*/

.cl-player-ad-creative:focus-visible {

    outline:
        2px solid rgba(0,71,171,.45);

    outline-offset: 3px;

}


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

@media (max-width: 600px) {

    .cl-player-ad-creative {

        border-radius: 10px;

    }


    .cl-player-ad-creative img {

        width: 100%;

        max-height: 58px;

        object-fit: cover;

    }


    .cl-player-ad-creative:hover {

        transform: none;

        box-shadow:
            0 5px 14px rgba(0,0,0,.08);

    }

}


/*====================================================*
 * VERY SMALL MOBILE
 *====================================================*/

@media (max-width: 380px) {

    .cl-player-ad-creative img {

        max-height: 52px;

    }

}


/*====================================================*
 * REDUCED MOTION
 *====================================================*/

@media (prefers-reduced-motion: reduce) {

    .cl-player-ad-creative,
    .cl-player-ad-creative img {

        transition: none !important;

    }

}


/*====================================================*
 * CITY LIVE AUDIO PLAYER
 * ADVERTISEMENT — COMPACT MODE
 * Remove divider line above advertisement
 *====================================================*/

.cl-player-ad {
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Advertisement label */
.cl-player-ad-label {
    margin-bottom: 6px !important;
}

/* Keep mobile compact */
@media (max-width: 600px) {

    .cl-player-ad {
        margin-top: 8px !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .cl-player-ad-label {
        margin-bottom: 5px !important;
    }
}

/*====================================================*
 * CITY LIVE AUDIO PLAYER v4.3
 * FINAL VISUAL PATCH
 *
 * 1. Remove horizontal divider above Advertisement
 * 2. Replace << / >> with 10-second circular arrows
 *
 * NOTE:
 *   Audio/JS functionality is NOT changed.
 *====================================================*/


/*------------------------------------*
 * Advertisement — remove divider line
 * Keep "विज्ञापन" label visible.
 *------------------------------------*/

.cl-player-ad {
    padding-top: 0 !important;
}

.cl-player-ad-divider {
    gap: 0 !important;
    margin-bottom: 8px !important;
}

.cl-player-ad-divider::before,
.cl-player-ad-divider::after {
    display: none !important;
}


/*------------------------------------*
 * 10-Second Rewind / Forward Icons
 *------------------------------------*/

.cl-player-seek .cl-seek-icon {
    position: relative !important;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
    background: transparent !important;
}


/* Remove any old text/icon generated by the previous control */
.cl-player-seek .cl-seek-icon::after {
    display: none !important;
    content: none !important;
}


/* Common SVG canvas */
#clBackBtn .cl-seek-icon::before,
#clNextBtn .cl-seek-icon::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;

    width: 38px !important;
    height: 38px !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    color: #ffffff !important;
    transform: none !important;
}


/*------------------------------------*
 * REWIND 10
 *------------------------------------*/

#clBackBtn .cl-seek-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 23a23 23 0 1 1-2.5 22.5'/%3E%3Cpath d='M18 23V11'/%3E%3Cpath d='M18 23h12'/%3E%3C/g%3E%3Ctext x='34' y='40' text-anchor='middle' font-family='Arial,sans-serif' font-size='17' font-weight='700' fill='%23ffffff'%3E10%3C/text%3E%3C/svg%3E") !important;
}


/*------------------------------------*
 * FORWARD 10
 *------------------------------------*/

#clNextBtn .cl-seek-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 23a23 23 0 1 0 2.5 22.5'/%3E%3Cpath d='M46 23V11'/%3E%3Cpath d='M46 23H34'/%3E%3C/g%3E%3Ctext x='30' y='40' text-anchor='middle' font-family='Arial,sans-serif' font-size='17' font-weight='700' fill='%23ffffff'%3E10%3C/text%3E%3C/svg%3E") !important;
}


/*------------------------------------*
 * Keep icon animation clean
 *------------------------------------*/

#clBackBtn .cl-seek-icon::before,
#clNextBtn .cl-seek-icon::before {
    transition:
        transform .18s ease,
        opacity .18s ease !important;
}


/* Hover */
#clBackBtn:hover .cl-seek-icon::before {
    transform: translateX(-1px) !important;
}

#clNextBtn:hover .cl-seek-icon::before {
    transform: translateX(1px) !important;
}


/*------------------------------------*
 * Mobile
 *------------------------------------*/

@media (max-width: 600px) {

    .cl-player-ad {
        padding-top: 0 !important;
    }

    .cl-player-ad-divider {
        margin-bottom: 7px !important;
    }

    .cl-player-seek .cl-seek-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    #clBackBtn .cl-seek-icon::before,
    #clNextBtn .cl-seek-icon::before {
        width: 34px !important;
        height: 34px !important;
    }
}


/*------------------------------------*
 * Very Small Mobile
 *------------------------------------*/

@media (max-width: 380px) {

    .cl-player-seek .cl-seek-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    #clBackBtn .cl-seek-icon::before,
    #clNextBtn .cl-seek-icon::before {
        width: 32px !important;
        height: 32px !important;
    }
}


/*====================================================*
 * CITY LIVE AUDIO PLAYER v4.3
 * FINAL TITLE MARQUEE PATCH
 *
 * Long headlines now scroll horizontally.
 * Short headlines remain visually stable.
 *====================================================*/

.cl-player-info {
    min-width: 0 !important;
    overflow: hidden !important;
}

#clPlayerTitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;

    position: relative !important;
}

/*
 * Scroll the headline gently.
 * The animation pauses briefly at both ends so the
 * complete beginning and ending of the headline can
 * be read comfortably.
 */
#clPlayerTitle {
    animation: clTitleMarquee 18s ease-in-out infinite alternate !important;
    will-change: transform;
}

/*
 * Because the title itself is the clipping element,
 * use a translate percentage. This gives a clean
 * marquee effect for long headlines.
 */
@keyframes clTitleMarquee {
    0%,
    18% {
        transform: translateX(0);
    }

    82%,
    100% {
        transform: translateX(-28%);
    }
}


/* Desktop: slightly slower premium movement */
@media (min-width: 601px) {

    #clPlayerTitle {
        animation-duration: 20s !important;
    }
}


/* Mobile: faster because the available title area is smaller */
@media (max-width: 600px) {

    #clPlayerTitle {
        animation-duration: 16s !important;
    }
}


/* Very small screens */
@media (max-width: 380px) {

    #clPlayerTitle {
        animation-duration: 14s !important;
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    #clPlayerTitle {
        animation: none !important;
        transform: none !important;
    }
}


/* =========================================================
 * CITY LIVE AUDIO PLAYER
 * STEP 6D — HARD AD ISOLATION
 * Advertisement must NEVER affect page layout
 * ========================================================= */

.cl-sticky-player .cl-player-ad {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: hidden !important;
}

.cl-sticky-player .citylive-step6d-ad-creative {
    display: block !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 90px !important;
    max-height: 90px !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;
}

.cl-sticky-player .citylive-step6d-ad-creative iframe {
    display: block !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 90px !important;
    max-height: 90px !important;

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

    border: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

.cl-sticky-player .citylive-audio-ad-loading {
    display: flex !important;

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 90px !important;
    max-height: 90px !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;
}

/* Prevent any advertisement child from escaping player */
.cl-sticky-player .cl-player-ad *,
.cl-sticky-player .cl-player-ad *::before,
.cl-sticky-player .cl-player-ad *::after {
    box-sizing: border-box;
}

/* =========================================================
 * CITY LIVE AUDIO PLAYER — STEP 10 V2.4
 * RESPONSIVE 728x90 AD SCALING
 * ========================================================= */
/* =========================================================
 * CITY LIVE AUDIO PLAYER — STEP 10 V2.5
 * RESPONSIVE 728x90 AD — NATIVE DESKTOP / SCALE MOBILE
 * ========================================================= */

.cl-sticky-player .cl-player-ad {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.cl-sticky-player .citylive-step6d-ad-creative {
    display: block !important;
    position: relative !important;
    width: min(728px, 100%) !important;
    max-width: 728px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.cl-sticky-player .citylive-step6d-ad-creative .citylive-audio-ad-iframe {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 727px) {
    .cl-sticky-player .citylive-step6d-ad-creative {
        width: 100% !important;
        max-width: 100% !important;
    }
}