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


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

.cl-sticky-player {

    position: fixed;

    left: 50%;
    bottom: 22px;

    width: min(720px, calc(100% - 28px));
    max-width: 720px;

    box-sizing: border-box;

    padding: 20px 22px 16px;

    background: #ffffff !important;

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

    border-radius: 22px !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.14),
        0 5px 16px rgba(0, 0, 0, 0.06);

    /* IMPORTANT */
    z-index: 999999 !important;

    isolation: isolate;

    overflow: hidden;


    /*------------------------------------
      Initial Hidden State
    ------------------------------------*/

    transform:
        translateX(-50%)
        translateY(150px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;


    /*------------------------------------
      Animation
    ------------------------------------*/

    transition:
        transform 0.35s ease,
        opacity 0.30s ease,
        visibility 0.30s ease;

}


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

.cl-sticky-player.show {

    transform:
        translateX(-50%)
        translateY(0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 999999 !important;

}


/*====================================================*
 * PREMIUM GRADIENT BORDER
 *====================================================*/

.cl-sticky-player::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(215, 25, 32, 0.60),
            rgba(215, 25, 32, 0.10) 42%,
            rgba(0, 71, 171, 0.10) 64%,
            rgba(0, 71, 171, 0.48)
        );

    -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;

}


/* Keep actual content above border */

.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;

}


/*====================================================*
 * AUDIO ICON
 *====================================================*/

.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: #ffffff;

    font-size: 23px;

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

}


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

.cl-player-info {

    min-width: 0;

    flex: 1;

}


/*====================================================*
 * TITLE
 *====================================================*/

#clPlayerTitle {

    font-size: 17px !important;

    line-height: 1.35 !important;

    font-weight: 700 !important;

    color: #202124 !important;

    letter-spacing: -0.15px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    word-break: normal;

    overflow-wrap: break-word;

}


/*====================================================*
 * STATUS
 *====================================================*/

#clPlayerStatus {

    margin-top: 4px !important;

    font-size: 12px !important;

    line-height: 1.3;

    font-weight: 600 !important;

    color: #777777 !important;

}


/* Status States */

#clPlayerStatus.playing {

    color: #d71920 !important;

}


#clPlayerStatus.paused {

    color: #777777 !important;

}


#clPlayerStatus.loading {

    color: #0047ab !important;

}


#clPlayerStatus.completed {

    color: #198754 !important;

}


/*====================================================*
 * CLOSE BUTTON
 *====================================================*/

/*====================================================
 * PREMIUM CLOSE BUTTON
 *====================================================*/

.cl-player-close {
    position: relative;

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

    padding: 0 !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 50% !important;

    background: rgba(245, 245, 245, 0.92) !important;

    color: #777 !important;

    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

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

    cursor: pointer;

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

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

    flex-shrink: 0;
}


/* Hover */

.cl-player-close:hover {

    color: #d71920 !important;

    background: #fff !important;

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

    box-shadow:
        0 5px 15px rgba(215, 25, 32, 0.14);

    transform:
        scale(1.06);
}


/* Active / Click */

.cl-player-close:active {

    transform:
        scale(0.94);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08);
}


/* Keyboard Accessibility */

.cl-player-close:focus-visible {

    outline:
        2px solid rgba(0, 71, 171, 0.35) !important;

    outline-offset:
        3px;
}


/*====================================================*
 * PROGRESS CONTAINER
 *====================================================*/

.cl-player-progress {

    width: 100% !important;

    margin: 5px 0 0 !important;

    position: relative;

}


/*====================================================*
 * RANGE PROGRESS
 * Supports:
 * .cl-player-progress-input
 * .cl-player-progress input[type="range"]
 *====================================================*/

.cl-player-progress-input,
.cl-player-progress input[type="range"] {

    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;

}


/*====================================================*
 * CHROME / SAFARI RANGE
 *====================================================*/

.cl-player-progress-input::-webkit-slider-runnable-track,
.cl-player-progress input[type="range"]::-webkit-slider-runnable-track {

    width: 100%;

    height: 7px;

    border: 0;

    border-radius: 50px;

    background: transparent;

}


/* Thumb */

.cl-player-progress-input::-webkit-slider-thumb,
.cl-player-progress input[type="range"]::-webkit-slider-thumb {

    appearance: none;

    -webkit-appearance: none;

    width: 18px;

    height: 18px;

    margin-top: -5.5px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    background: #d71920;

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

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


/* Thumb Hover */

.cl-player-progress-input:hover::-webkit-slider-thumb,
.cl-player-progress input[type="range"]:hover::-webkit-slider-thumb {

    transform: scale(1.12);

    box-shadow:
        0 4px 13px rgba(215, 25, 32, 0.30);

}


/*====================================================*
 * FIREFOX RANGE
 *====================================================*/

.cl-player-progress-input::-moz-range-track,
.cl-player-progress input[type="range"]::-moz-range-track {

    width: 100%;

    height: 7px;

    border: 0;

    border-radius: 50px;

    background: transparent;

}


.cl-player-progress-input::-moz-range-progress,
.cl-player-progress input[type="range"]::-moz-range-progress {

    background: transparent;

}


.cl-player-progress-input::-moz-range-thumb,
.cl-player-progress input[type="range"]::-moz-range-thumb {

    width: 18px;

    height: 18px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    background: #d71920;

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

}


/*====================================================*
 * LEGACY PROGRESS BAR SUPPORT
 *====================================================*/

.cl-player-progress-bar {

    height: 100%;

    width: 0;

    border-radius: 50px;

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

}


/*====================================================*
 * TIME
 *====================================================*/

.cl-player-time {

    width: 100% !important;

    margin: 13px 0 14px !important;

    text-align: center;

    font-size: 15px !important;

    line-height: 1.3;

    font-weight: 700 !important;

    color: #555555 !important;

}


/*====================================================*
 * CONTROL AREA
 *====================================================*/

.cl-player-controls {

    display: flex !important;

    align-items: center;

    justify-content: center !important;

    gap: 26px !important;

}


/*====================================================*
 * COMMON CONTROL
 *====================================================*/

.cl-player-control {

    border: 0 !important;

    outline: none !important;

    cursor: pointer;

    display: flex !important;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;

}


/*====================================================*
 * PREMIUM SEEK CONTROLS
 * Reverse / Forward
 *====================================================*/

.cl-player-seek {

    position: relative;

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

    padding: 0 !important;

    border: 1px solid rgba(80, 80, 80, 0.10) !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    color: #202124 !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(215, 25, 32, 0.04);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;

}


/*------------------------------------
  Premium Gradient Edge
------------------------------------*/

.cl-player-seek::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: 50%;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(215, 25, 32, 0.65),
            rgba(124, 36, 93, 0.30),
            rgba(0, 71, 171, 0.65)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

}


/*------------------------------------
  Hide Existing Seek Text
------------------------------------*/

.cl-player-seek .cl-seek-value,
.cl-player-seek .cl-seek-label {

    display: none !important;

}


/*------------------------------------
  Hide Existing Icon
------------------------------------*/

.cl-player-seek .cl-seek-icon {

    font-size: 0 !important;

    width: 100%;

    height: 100%;

    display: flex !important;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 2;

}


/*====================================================*
 * REVERSE ICON
 *====================================================*/

#clBackBtn .cl-seek-icon::before {

    content: "↶";

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 31px;

    font-weight: 400;

    line-height: 1;

    color: #d71920;

    display: block;

    transform:
        translateY(-1px);

}


/*====================================================*
 * FORWARD ICON
 *====================================================*/

#clNextBtn .cl-seek-icon::before {

    content: "↷";

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 31px;

    font-weight: 400;

    line-height: 1;

    color: #0047ab;

    display: block;

    transform:
        translateY(-1px);

}


/*====================================================*
 * HOVER
 *====================================================*/

.cl-player-seek:hover {

    transform:
        translateY(-3px);

    background: #ffffff !important;

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

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.12),
        0 0 0 4px rgba(0, 71, 171, 0.045);

}


/* Reverse hover */

#clBackBtn:hover .cl-seek-icon::before {

    color: #c81017;

}


/* Forward hover */

#clNextBtn:hover .cl-seek-icon::before {

    color: #003d91;

}


/*====================================================*
 * ACTIVE
 *====================================================*/

.cl-player-seek:active {

    transform:
        scale(0.93);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.10);

}


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

@media (max-width: 600px) {

    .cl-player-seek {

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

    }

    #clBackBtn .cl-seek-icon::before,
    #clNextBtn .cl-seek-icon::before {

        font-size: 28px;

    }

}
/*====================================================*
 * PLAY BUTTON
 *====================================================*/

.cl-player-play {

    width: 70px !important;

    height: 70px !important;

    min-width: 70px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #d71920,
            #c81017
        ) !important;

    color: #ffffff !important;

    font-size: 27px !important;

    line-height: 1;

    box-shadow:
        0 9px 24px rgba(215, 25, 32, 0.26),
        0 0 0 5px rgba(0, 71, 171, 0.08);

}


/* Play Hover */

.cl-player-play:hover {

    transform: scale(1.05);

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

    box-shadow:
        0 11px 28px rgba(0, 71, 171, 0.25),
        0 0 0 5px rgba(215, 25, 32, 0.08);

}


/* Play Active */

.cl-player-play:active {

    transform: scale(0.94);

}


/*====================================================*
 * SPONSOR / ADVERTISEMENT
 *====================================================*/

.cl-player-ad {

    margin-top: 17px;

    padding-top: 10px;

    border-top: 1px solid #ededed;

    text-align: center;

}


/* Sponsored label */

.cl-player-ad-label {

    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: #999999;

    font-weight: 700;

}


/* Ad content */

.cl-player-ad-content {

    min-height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 8px;

}


/* Ad image */

.cl-player-ad-content img {

    display: block;

    max-width: 100%;

    max-height: 44px;

    width: auto;

    height: auto;

    object-fit: contain;

}


/* Hide empty advertisement */

.cl-player-ad.is-empty {

    display: none !important;

}


/*====================================================*
 * ACCESSIBILITY
 *====================================================*/

.cl-player-control:focus-visible,
.cl-player-close:focus-visible,
.cl-player-progress-input:focus-visible,
.cl-player-progress input[type="range"]:focus-visible {

    outline: 2px solid rgba(0, 71, 171, 0.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-header {

        gap: 10px;

        margin-bottom: 12px !important;

    }


    .cl-player-left {

        gap: 10px;

    }


    .cl-player-icon {

        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        font-size: 21px;

    }


    #clPlayerTitle {

        font-size: 15px !important;

        line-height: 1.3 !important;

    }


    #clPlayerStatus {

        font-size: 11px !important;

    }


    .cl-player-close {

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

        font-size: 23px !important;

    }


    .cl-player-time {

        margin: 11px 0 13px !important;

        font-size: 14px !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;

    }

}


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

@media (max-width: 380px) {

    .cl-sticky-player {

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

        padding-left: 12px !important;

        padding-right: 12px !important;

    }


    .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;

    }

}


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

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

    .cl-sticky-player {

        transition: none;

    }

    .cl-player-control,
    .cl-player-close {

        transition: none;

    }

}

/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER
 * V4.3 FINAL PREMIUM DESIGN
 * Target Mockup Override
 *====================================================*/


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

.cl-sticky-player {

    width: min(940px, calc(100% - 40px)) !important;
    max-width: 940px !important;

    bottom: 28px !important;

    padding: 30px 34px 24px !important;

    background: #ffffff !important;

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

    border-radius: 30px !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.16),
        0 8px 25px rgba(0, 0, 0, 0.08);

    z-index: 999999 !important;

    isolation: isolate;

}


/*------------------------------------*
 * Premium Border
 *------------------------------------*/

.cl-sticky-player::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 2px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #d71920 0%,
            #e64a68 25%,
            #8b3f91 55%,
            #0047ab 100%
        );

    -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;

}


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

.cl-player-header {

    margin-bottom: 24px !important;

}


.cl-player-left {

    gap: 18px !important;

}


/*------------------------------------*
 * Audio Icon
 *------------------------------------*/

.cl-player-icon {

    width: 74px !important;

    height: 74px !important;

    min-width: 74px !important;

    font-size: 30px !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.14);

}


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

#clPlayerTitle {

    font-size: 25px !important;

    line-height: 1.28 !important;

    font-weight: 750 !important;

    letter-spacing: -0.3px;

}


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

#clPlayerStatus {

    margin-top: 8px !important;

    font-size: 15px !important;

    font-weight: 600 !important;

}


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

.cl-player-close {

    width: 42px !important;

    height: 42px !important;

    min-width: 42px !important;

    font-size: 32px !important;

}


/*====================================================*
 * PROGRESS
 *====================================================*/

.cl-player-progress {

    margin-top: 10px !important;

}


.cl-player-progress-input,
.cl-player-progress input[type="range"] {

    height: 8px !important;

    border-radius: 50px !important;

}


/* Chrome */

.cl-player-progress-input::-webkit-slider-runnable-track,
.cl-player-progress input[type="range"]::-webkit-slider-runnable-track {

    height: 8px;

    border-radius: 50px;

}


/* Thumb */

.cl-player-progress-input::-webkit-slider-thumb,
.cl-player-progress input[type="range"]::-webkit-slider-thumb {

    width: 22px;

    height: 22px;

    margin-top: -7px;

    border: 4px solid #ffffff;

    background: #d71920;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.24);

}


/* Firefox */

.cl-player-progress-input::-moz-range-track,
.cl-player-progress input[type="range"]::-moz-range-track {

    height: 8px;

}


.cl-player-progress-input::-moz-range-thumb,
.cl-player-progress input[type="range"]::-moz-range-thumb {

    width: 22px;

    height: 22px;

    border: 4px solid #ffffff;

    background: #d71920;

}


/*====================================================*
 * TIME
 *====================================================*/

.cl-player-time {

    margin: 22px 0 24px !important;

    font-size: 22px !important;

    font-weight: 750 !important;

    color: #555555 !important;

}


/*====================================================*
 * CONTROLS
 *====================================================*/

.cl-player-controls {

    gap: 44px !important;

    min-height: 90px;

}

/*====================================================*
 * CITY LIVE AUDIO PLAYER v4.3
 * PREMIUM REVERSE / FORWARD CONTROLS
 * Vector Media Icons
 *====================================================*/


/*------------------------------------*
 * SEEK BUTTON
 *------------------------------------*/

.cl-player-seek {

    position: relative;

    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #d71920 0%,
            #8b245e 52%,
            #0047ab 100%
        ) !important;

    color: #ffffff !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(0, 71, 171, 0.20);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;

}


/*------------------------------------*
 * Remove old pseudo border
 *------------------------------------*/

.cl-player-seek::before {

    display: none !important;

}


/*------------------------------------*
 * Hide 10 sec text
 *------------------------------------*/

.cl-player-seek .cl-seek-value,
.cl-player-seek .cl-seek-label {

    display: none !important;

}


/*------------------------------------*
 * Icon Container
 *------------------------------------*/

.cl-seek-icon {

    position: relative;

    width: 32px !important;
    height: 32px !important;

    display: block !important;

    font-size: 0 !important;

    line-height: 0;

}


/*====================================================*
 * REVERSE
 *====================================================*/

#clBackBtn .cl-seek-icon::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 32px;
    height: 32px;

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ffffff' d='M29 8L3 32l26 24V41l-14-9 14-9V8z'/%3E%3Cpath fill='%23ffffff' d='M56 8L30 32l26 24V41l-14-9 14-9V8z'/%3E%3C/svg%3E");

}


/*====================================================*
 * FORWARD
 *====================================================*/

#clNextBtn .cl-seek-icon::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 32px;
    height: 32px;

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ffffff' d='M35 8l26 24-26 24V41l14-9-14-9V8z'/%3E%3Cpath fill='%23ffffff' d='M8 8l26 24L8 56V41l14-9-14-9V8z'/%3E%3C/svg%3E");

}


/*====================================================*
 * PREMIUM SEEK HOVER
 * Keep Gradient — No White Hover
 *====================================================*/

.cl-player-seek {

    background:
        linear-gradient(
            135deg,
            #d71920 0%,
            #8b245e 52%,
            #0047ab 100%
        ) !important;

    color: #ffffff !important;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;

}


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

.cl-player-seek:hover {

    background:
        linear-gradient(
            135deg,
            #e01b24 0%,
            #96306a 52%,
            #0758c7 100%
        ) !important;

    color: #ffffff !important;

    transform:
        translateY(-3px)
        scale(1.04);

    filter: brightness(1.04);

    box-shadow:
        0 14px 32px rgba(0, 71, 171, 0.28),
        0 5px 15px rgba(215, 25, 32, 0.16);

}


/*------------------------------------*
 * Icon always remains White
 *------------------------------------*/

.cl-player-seek .cl-seek-icon,
.cl-player-seek .cl-seek-icon::before {

    color: #ffffff !important;

    opacity: 1 !important;

}


/*------------------------------------*
 * Active / Click
 *------------------------------------*/

.cl-player-seek:active {

    transform: scale(0.92);

    filter: brightness(0.96);

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.14);

}


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

.cl-player-seek:focus-visible {

    outline:
        3px solid rgba(0, 71, 171, 0.30) !important;

    outline-offset: 4px;

}


/*====================================================*
 * ACTIVE
 *====================================================*/

.cl-player-seek:active {

    transform:
        scale(0.92);

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.14);

}


/*====================================================*
 * KEYBOARD FOCUS
 *====================================================*/

.cl-player-seek:focus-visible {

    outline:
        3px solid rgba(0, 71, 171, 0.25) !important;

    outline-offset: 4px;

}


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

@media (max-width: 600px) {

    .cl-player-seek {

        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;

    }


    .cl-seek-icon {

        width: 27px !important;
        height: 27px !important;

    }


    #clBackBtn .cl-seek-icon::before,
    #clNextBtn .cl-seek-icon::before {

        width: 27px;
        height: 27px;

    }

}

/*====================================================*
 * PLAY BUTTON
 *====================================================*/

.cl-player-play {

    width: 84px !important;

    height: 84px !important;

    min-width: 84px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #d71920,
            #e00009
        ) !important;

    font-size: 34px !important;

    box-shadow:

        0 12px 30px rgba(215, 25, 32, 0.30),

        0 0 0 8px
        rgba(215, 25, 32, 0.08);

}


/* Play hover */

.cl-player-play:hover {

    transform: scale(1.05);

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

}


/*====================================================*
 * ADVERTISEMENT
 *====================================================*/

.cl-player-ad {

    margin-top: 28px !important;

    padding-top: 12px !important;

    border-top:
        1px solid #e2e2e2;

}


/* Advertisement title */

.cl-player-ad-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 18px;

    margin-bottom: 10px;

    background: #ffffff;

    border:
        1px solid #e3e3e3;

    border-radius: 20px;

    color: #d71920;

    font-size: 14px;

    letter-spacing: 0;

    text-transform: none;

    font-weight: 700;

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

}


/* Advertisement container */

.cl-player-ad-content {

    width: 100%;

    min-height: 90px;

    border:
        1px solid #dddddd;

    border-radius: 18px;

    background: #fafafa;

    overflow: hidden;

}


/* Advertisement image */

.cl-player-ad-content img {

    width: 100%;

    max-width: 100%;

    max-height: 120px;

    height: auto;

    object-fit: contain;

}


/* Hide empty ad */

.cl-player-ad.is-empty {

    display: none !important;

}


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

@media (max-width: 600px) {

    .cl-sticky-player {

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

        max-width: none !important;

        bottom: 8px !important;

        padding: 17px 15px 15px !important;

        border-radius: 20px !important;

    }


    .cl-sticky-player::before {

        border-radius: 20px;

    }


    .cl-player-icon {

        width: 52px !important;

        height: 52px !important;

        min-width: 52px !important;

        font-size: 22px !important;

    }


    #clPlayerTitle {

        font-size: 16px !important;

        line-height: 1.3 !important;

    }


    #clPlayerStatus {

        font-size: 12px !important;

    }


    .cl-player-time {

        margin: 15px 0 18px !important;

        font-size: 16px !important;

    }


    .cl-player-controls {

        gap: 20px !important;

        min-height: 70px;

    }


    .cl-player-seek {

        width: 56px !important;

        height: 56px !important;

        min-width: 56px !important;

    }


    #clBackBtn .cl-seek-icon::before,
    #clNextBtn .cl-seek-icon::before {

        font-size: 23px;

    }


    .cl-player-play {

        width: 68px !important;

        height: 68px !important;

        min-width: 68px !important;

        font-size: 26px !important;

    }


    .cl-player-ad {

        margin-top: 18px !important;

    }


    .cl-player-ad-content {

        min-height: 55px;

    }

}


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

@media (max-width: 380px) {

    .cl-player-controls {

        gap: 14px !important;

    }


    .cl-player-seek {

        width: 52px !important;

        height: 52px !important;

        min-width: 52px !important;

    }


    .cl-player-play {

        width: 62px !important;

        height: 62px !important;

        min-width: 62px !important;

    }

}

/*====================================================*
 * CITY LIVE AUDIO PLAYER v4.3
 * STEP 1
 * TIME LEFT + CONTROLS RIGHT
 *====================================================*/


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

.cl-player-control-row {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;

}


/*------------------------------------*
 * Time — Left
 *------------------------------------*/

.cl-player-control-row .cl-player-time {

    width: auto !important;

    margin: 0 !important;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    white-space: nowrap;

    font-size: 17px !important;

    line-height: 1;

    font-weight: 700 !important;

    color: #555 !important;

}


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

.cl-time-separator {

    display: inline-block;

    margin: 0 7px;

    color: #aaa;

    font-weight: 600;

}


/*------------------------------------*
 * Controls — Right
 *------------------------------------*/

.cl-player-control-row .cl-player-controls {

    width: auto !important;

    margin: 0 !important;

    flex: 0 0 auto;

    display: flex !important;

    align-items: center;

    justify-content: flex-end !important;

    gap: 10px !important;

    min-height: 0 !important;

}


/*------------------------------------*
 * Seek Buttons
 *------------------------------------*/

.cl-player-control-row .cl-player-seek {

    width: 52px !important;

    height: 52px !important;

    min-width: 52px !important;

}


/*------------------------------------*
 * Play Button
 *------------------------------------*/

.cl-player-control-row .cl-player-play {

    width: 62px !important;

    height: 62px !important;

    min-width: 62px !important;

}


/*------------------------------------*
 * Remove Old Time Spacing
 *------------------------------------*/

.cl-player-control-row + .cl-player-ad {

    margin-top: 18px !important;

}


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

@media (max-width: 600px) {

    .cl-player-control-row {

        margin-top: 15px;

        gap: 12px;

    }


    .cl-player-control-row .cl-player-time {

        font-size: 15px !important;

        font-weight: 700 !important;

    }


    .cl-time-separator {

        margin-left: 5px;

        margin-right: 5px;

    }


    .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;

    }

}


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

@media (max-width: 380px) {

    .cl-player-control-row {

        gap: 8px;

    }


    .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 2
 * PREMIUM PLAY / PAUSE ICON
 *====================================================*/


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

.cl-player-play {

    position: relative;

    display: flex !important;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


/*------------------------------------*
 * Icon Containers
 *------------------------------------*/

.cl-play-icon,
.cl-pause-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    transition:
        opacity .18s ease,
        transform .18s ease;

}


/*------------------------------------*
 * SVG
 *------------------------------------*/

.cl-play-icon svg,
.cl-pause-icon svg {

    display: block;

    width: 30px;

    height: 30px;

    fill: #ffffff;

}


/*------------------------------------*
 * Default State
 *
 * Ready / Paused
 * Shows PLAY
 *------------------------------------*/

.cl-play-icon {

    opacity: 1;

    transform: scale(1);

}


.cl-pause-icon {

    position: absolute;

    opacity: 0;

    transform: scale(.75);

    pointer-events: none;

}


/*------------------------------------*
 * Playing State
 *
 * Shows PAUSE
 *------------------------------------*/

.cl-player-play.is-playing .cl-play-icon {

    opacity: 0;

    transform: scale(.75);

}


.cl-player-play.is-playing .cl-pause-icon {

    opacity: 1;

    transform: scale(1);

}


/*------------------------------------*
 * Loading State
 *------------------------------------*/

.cl-player-play.is-loading {

    cursor: wait;

}


.cl-player-play.is-loading .cl-play-icon,
.cl-player-play.is-loading .cl-pause-icon {

    opacity: 0;

}


/*------------------------------------*
 * Pause Icon
 *------------------------------------*/

.cl-pause-icon svg {

    width: 28px;

    height: 28px;

}


/*------------------------------------*
 * Play Icon
 *------------------------------------*/

.cl-play-icon svg {

    width: 31px;

    height: 31px;

}


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

.cl-player-play:hover
.cl-play-icon svg,

.cl-player-play:hover
.cl-pause-icon svg {

    fill: #ffffff;

}


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

.cl-player-play:active {

    transform: scale(.95);

}


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

@media (max-width: 600px) {

    .cl-play-icon svg {

        width: 27px;

        height: 27px;

    }


    .cl-pause-icon svg {

        width: 25px;

        height: 25px;

    }

}


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

@media (max-width: 380px) {

    .cl-play-icon svg {

        width: 25px;

        height: 25px;

    }


    .cl-pause-icon svg {

        width: 23px;

        height: 23px;

    }

}

/*====================================================*
 * CITY LIVE NEWS AUDIO PLAYER v4.3
 * STEP 3
 * SMART SCROLLING HEADLINE
 *====================================================*/


/*------------------------------------*
 * Title Viewport
 *------------------------------------*/

.cl-player-title-wrap {

    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

}


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

.cl-player-title-wrap .cl-player-title {

    display: block;

    width: max-content;

    max-width: none;

    white-space: nowrap;

    overflow: visible;

    text-overflow: clip;

    flex: none;

    transform: translateX(0);

}


/*------------------------------------*
 * Scrolling State
 *------------------------------------*/

.cl-player-title-wrap.is-scrolling
.cl-player-title {

    animation-name: cityLiveHeadlineScroll;

    animation-duration: var(--headline-duration, 12s);

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-delay: 1.5s;

}


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

@keyframes cityLiveHeadlineScroll {

    0% {
        transform: translateX(0);
    }

    12% {
        transform: translateX(0);
    }

    88% {
        transform:
            translateX(
                calc(-1 * var(--headline-overflow, 0px))
            );
    }

    100% {
        transform:
            translateX(
                calc(-1 * var(--headline-overflow, 0px))
            );
    }

}



/*====================================================*
 * STEP 3.1
 * HEADLINE WIDTH / OVERFLOW FIX
 *====================================================*/

/* Title information area must be shrinkable */
.cl-player-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}


/* Scrolling headline viewport */
.cl-player-title-wrap {
    position: relative;

    display: block;

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

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;
}


/* Actual headline */
.cl-player-title-wrap .cl-player-title {
    display: block !important;

    width: max-content !important;
    max-width: none !important;

    min-width: max-content !important;

    white-space: nowrap !important;

    overflow: visible !important;

    text-overflow: clip !important;

    flex: none !important;

    transform: translateX(0);
}


/* Active scrolling */
.cl-player-title-wrap.is-scrolling
.cl-player-title {

    animation:
        cityLiveHeadlineScroll
        var(--headline-duration, 12s)
        linear
        infinite alternate;

    animation-delay: 1.5s;

}


/* Pause on hover */
.cl-player-title-wrap.is-scrolling:hover
.cl-player-title {

    animation-play-state: paused;

}



/*------------------------------------*
 * Pause on Hover
 *------------------------------------*/

.cl-player-title-wrap.is-scrolling:hover
.cl-player-title {

    animation-play-state: paused;

}


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

@media (max-width: 600px) {

    .cl-player-title-wrap {

        max-width: 100%;

    }


    .cl-player-title-wrap .cl-player-title {

        font-size: 15px !important;

        line-height: 1.35 !important;

    }


    .cl-player-title-wrap.is-scrolling
    .cl-player-title {

        animation-duration:
            var(--headline-duration, 10s);

    }

}


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

@media (max-width: 380px) {

    .cl-player-title-wrap .cl-player-title {

        font-size: 14px !important;

    }


    .cl-player-title-wrap.is-scrolling
    .cl-player-title {

        animation-duration:
            var(--headline-duration, 9s);

    }

}


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

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

    .cl-player-title-wrap.is-scrolling
    .cl-player-title {

        animation: none !important;

        transform: translateX(0) !important;

    }

}


/*====================================================
 * CITY LIVE NEWS AUDIO PLAYER v4.3
 * FINAL PREMIUM CLOSE BUTTON
 * STEP 3.2 — TOP-RIGHT POSITION
 *====================================================*/

.cl-player-header {
    position: relative !important;
}

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

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

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !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, 0.08) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.97) !important;
    color: #777777 !important;

    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer;
    z-index: 20 !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.10);

    transition:
        color 0.20s ease,
        background 0.20s ease,
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.20s ease;
}

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

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

    box-shadow:
        0 7px 20px rgba(215, 25, 32, 0.15);

    transform: scale(1.06);
}

.cl-player-close:active {
    transform: scale(0.93);

    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.10);
}

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

    outline-offset: 3px;
}

@media (max-width: 600px) {

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

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

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

        font-size: 24px !important;
    }
}

@media (max-width: 380px) {

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

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

        font-size: 23px !important;
    }
}