/* ==========================================================================
   YouTube-style watch page + player controls (both themes, MediaElement)
   Loaded AFTER mediaelementplayer.min.css, style.css, custom.style.css and
   video-controls.css, so it wins the cascade.  Companion script:
   themes/shared/js/youtube-player.js
   ========================================================================== */

:root {
    --yt-red: #f00;
    --yt-icon: #fff;
    --yt-chip-bg: rgba(128, 128, 128, 0.18);
    --yt-chip-bg-hover: rgba(128, 128, 128, 0.3);
}

/* -------------------------------------------------------------------------
   1. PLAYER SHELL
   ------------------------------------------------------------------------- */
.video-player-page .video-player .mejs__container {
    background: #000;
    overflow: hidden;
    font-family: Roboto, Arial, sans-serif;
}

.mejs__container.yt-ready .mejs__overlay-play {
    display: none !important;
}

@media (min-width: 768px) {
    .video-player-page .video-player .mejs__container {
        border-radius: 12px;
    }
}

.video-player-page .video-player .mejs__container.yp-mobile-css-fullscreen {
    border-radius: 0;
}

.video-player-page .mejs__container.yp-mobile-css-fullscreen .mejs__mediaelement,
.video-player-page .mejs__container.yp-mobile-css-fullscreen .mejs__layers,
.video-player-page .mejs__container.yp-mobile-css-fullscreen .mejs__layer,
.video-player-page .mejs__container.yp-mobile-css-fullscreen .mejs__poster {
    width: 100% !important;
    height: 100% !important;
}

/* The old floating prev/next circles are replaced once the new bar is built */
.video-player.yt-ready .default-video-navigation {
    display: none !important;
}
.video-player.yt-ready .yp-video-navigation {
    display: none !important;
}

/* MediaElement's own "show/hide controls" logic is replaced by .yt-active */
.video-player-page .mejs__container.yt-ready .mejs__controls {
    height: auto;
    min-height: 48px;
    padding: 0 12px 0;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
    box-sizing: border-box;
    opacity: 0;
    visibility: visible !important;
    pointer-events: none;
    transform: none !important;
    transition: opacity 0.25s ease;
    z-index: 5;
}

.video-player-page .mejs__container.yt-ready.yt-active .mejs__controls,
.video-player-page .mejs__container.yt-ready.yt-paused .mejs__controls,
.video-player-page .mejs__container.yt-ready .mejs__controls:focus-within {
    opacity: 1 !important;
    pointer-events: auto;
}

.video-player-page .mejs__container.yt-ready.yt-playing:not(.yt-active) {
    cursor: none;
}

/* -------------------------------------------------------------------------
   2. SCRUBBER (red progress bar on top of the control row)
   ------------------------------------------------------------------------- */
.mejs__container.yt-ready .mejs__time-rail {
    order: -1;
    flex: 0 0 100%;
    width: 100% !important;
    height: 16px;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    touch-action: none;
}

.mejs__container.yt-ready .mejs__time-total,
.mejs__container.yt-ready .mejs__time-slider {
    left: 0;
    top: 7px;
    width: 100% !important;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
    transition: height 0.1s ease, top 0.1s ease;
}

.mejs__container.yt-ready .mejs__time-rail:hover .mejs__time-total,
.mejs__container.yt-ready .mejs__time-rail:focus-within .mejs__time-total,
.mejs__container.yt-ready.yt-scrubbing .mejs__time-total {
    top: 5px;
    height: 6px;
}

.mejs__container.yt-ready .mejs__time-loaded,
.mejs__container.yt-ready .mejs__time-hovered,
.mejs__container.yt-ready .mejs__time-current,
.mejs__container.yt-ready .mejs__time-buffering {
    height: 100%;
    border-radius: 0;
}

.mejs__container.yt-ready .mejs__time-loaded {
    background: rgba(255, 255, 255, 0.4);
}

.mejs__container.yt-ready .mejs__time-hovered {
    background: rgba(255, 255, 255, 0.5);
}

.mejs__container.yt-ready .mejs__time-current {
    background: var(--yt-red);
}

.mejs__container.yt-ready .mejs__time-handle {
    top: 50%;
}

.mejs__container.yt-ready .mejs__time-handle-content {
    top: -4px;
    left: -7px;
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: var(--yt-red);
    transform: scale(0);
    transition: transform 0.1s ease;
}

.mejs__container.yt-ready .mejs__time-rail:hover .mejs__time-handle-content,
.mejs__container.yt-ready.yt-scrubbing .mejs__time-handle-content {
    transform: scale(1);
}

.mejs__container.yt-ready .mejs__time-float {
    background: rgba(28, 28, 28, 0.9);
    border: 0;
    border-radius: 4px;
    height: auto;
    margin-top: -6px;
}

.mejs__container.yt-ready .mejs__time-float-current {
    margin: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.mejs__container.yt-ready .mejs__time-float-corner {
    display: none;
}

/* Thin progress line shown when the controls are hidden (like YouTube) */
.yt-mini-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.yt-mini-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--yt-red);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.mejs__container.yt-playing:not(.yt-active) .yt-mini-progress {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   3. BUTTONS (all icons are inline SVG data-URIs, white)
   ------------------------------------------------------------------------- */
.mejs__container.yt-ready .mejs__controls > .mejs__button,
.mejs__container.yt-ready .mejs__controls > .yt-nav-button {
    width: 48px;
    height: 48px;
    margin: 0;
    position: relative;
}

.mejs__container.yt-ready .mejs__controls .mejs__button > button {
    width: 36px;
    height: 36px;
    margin: 6px;
    left: 0;
    top: 0;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mejs__container.yt-ready .mejs__controls .mejs__button > button:hover,
.mejs__container.yt-ready .mejs__controls .mejs__button > button:focus-visible {
    background-color: rgba(112, 112, 112, 0.75);
    outline: 0;
}

.mejs__container.yt-ready .mejs__controls .mejs__button > button:active {
    background-color: rgba(140, 140, 140, 0.85);
}

/* order of the left cluster:  play  prev  next  volume  0:00 / 5:15 */
.mejs__container.yt-ready .mejs__playpause-button { order: 1; }
.mejs__container.yt-ready .yt-prev                { order: 2; }
.mejs__container.yt-ready .yt-next                { order: 3; }
.mejs__container.yt-ready .mejs__volume-button    { order: 4; }
.mejs__container.yt-ready .mejs__horizontal-volume-slider { order: 4; }
.mejs__container.yt-ready .mejs__currenttime-container    { order: 5; }
.mejs__container.yt-ready .mejs__duration-container       { order: 6; margin-right: auto; }

/* right cluster */
.mejs__container.yt-ready .mejs__speed-button,
.mejs__container.yt-ready .mejs__speed          { order: 20; }
.mejs__container.yt-ready .yp-fullscreen-like-control { order: 19; }
.mejs__container.yt-ready .mejs__qualities-button     { order: 21; }
.mejs__container.yt-ready .mejs__tracks-button,
.mejs__container.yt-ready .mejs__captions-button      { order: 22; }
.mejs__container.yt-ready .mejs__fullscreen-button    { order: 23; }

/* Use the center buttons, keyboard shortcuts, or double-tap for 10-second skips. */
.mejs__container.yt-ready .mejs__skip-back-button,
.mejs__container.yt-ready .mejs__jump-forward-button,
.mejs__container.yt-ready .mejs__markers-button {
    display: none !important;
}

/* prev button is hidden when there is nothing to go back to */
.mejs__container.yt-ready .yt-nav-hidden {
    display: none !important;
}

/* play / pause / replay */
.mejs__container.yt-ready .mejs__playpause-button.mejs__play > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
}
.mejs__container.yt-ready .mejs__playpause-button.mejs__pause > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>");
}
.mejs__container.yt-ready .mejs__playpause-button.mejs__replay > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/></svg>");
}

/* prev / next */
.yt-nav-button > button {
    background-image: none;
}
.yt-nav-button.yt-prev > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 6h2v12H6zm3.5 6l8.5 6V6z'/></svg>") !important;
}
.yt-nav-button.yt-next > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z'/></svg>") !important;
}
.yt-nav-button > button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* volume */
.mejs__container.yt-ready .mejs__volume-button.mejs__mute > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/></svg>");
}
.mejs__container.yt-ready .mejs__volume-button.mejs__unmute > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/></svg>");
}

.mejs__container.yt-ready .mejs__horizontal-volume-slider {
    width: 0;
    height: 48px;
    overflow: hidden;
    transition: width 0.2s ease, margin 0.2s ease;
    margin: 0;
}

.mejs__container.yt-ready .mejs__volume-button:hover + .mejs__horizontal-volume-slider,
.mejs__container.yt-ready .mejs__horizontal-volume-slider:hover,
.mejs__container.yt-ready .mejs__horizontal-volume-slider:focus-within,
.mejs__container.yt-ready .mejs__volume-button:focus-within + .mejs__horizontal-volume-slider {
    width: 64px;
    margin: 0 8px 0 2px;
}

.mejs__container.yt-ready .mejs__horizontal-volume-total {
    top: 22px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0;
}

.mejs__container.yt-ready .mejs__horizontal-volume-current {
    top: 22px;
    height: 3px;
    background: #fff;
    border-radius: 0;
}

.mejs__container.yt-ready .mejs__horizontal-volume-handle {
    top: 17px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}

/* time:  0:39 / 5:15 */
.mejs__container.yt-ready .mejs__time {
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #ddd;
    overflow: visible;
}

.mejs__container.yt-ready .mejs__currenttime-container {
    margin-left: 6px;
    color: #fff;
}

.mejs__container.yt-ready .mejs__duration-container::before {
    content: "\00a0/\00a0";
}

/* speed + quality become subtle text chips */
.mejs__container.yt-ready .mejs__speed-button > button,
.mejs__container.yt-ready .mejs__qualities-button > button {
    width: auto !important;
    min-width: 36px;
    height: 28px !important;
    margin: 10px 4px !important;
    padding: 0 8px !important;
    border-radius: 14px;
    background-image: none !important;
    color: #fff;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 28px !important;
    text-align: center;
    white-space: nowrap;
    position: static !important;
}

/* fullscreen */
.mejs__container.yt-ready .mejs__fullscreen-button > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/></svg>");
}
.mejs__container.yt-ready .mejs__fullscreen-button.mejs__unfullscreen > button,
.mejs__container.yp-mobile-css-fullscreen .mejs__fullscreen-button > button,
.mejs__container.yt-ready:fullscreen .mejs__fullscreen-button > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/></svg>");
}

/* big initial play button -> YouTube's rounded rectangle */
.mejs__container.yt-ready .mejs__overlay-button {
    width: 68px;
    height: 48px;
    margin-top: -24px;
    margin-left: -34px;
    border-radius: 14px;
    background-color: rgba(33, 33, 33, 0.8);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 6.5v11l9-5.5z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px 36px;
    transition: background-color 0.15s ease;
}

.mejs__container.yt-ready .mejs__overlay:hover .mejs__overlay-button {
    background-color: var(--yt-red);
}

/* quick flash icon when toggling play/pause (YouTube does the same) */
.yt-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6) center / 36px 36px no-repeat;
    opacity: 0;
    pointer-events: none;
}

.yt-flash.yt-flash-play {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
}
.yt-flash.yt-flash-pause {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>");
}
.yt-flash.yt-flash-run {
    animation: yt-flash 0.55s ease-out;
}

@keyframes yt-flash {
    0%   { opacity: 0.9; transform: scale(0.8); }
    100% { opacity: 0;   transform: scale(1.5); }
}

/* -------------------------------------------------------------------------
   4. CENTRE CONTROLS: [previous] [-10s] [play/pause] [+10s] [next]
   ------------------------------------------------------------------------- */
.yt-center {
    position: absolute;
    inset: 0 0 48px 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 2.5vw, 28px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mejs__container.yt-active .yt-center,
.mejs__container.yt-paused .yt-center {
    opacity: 1;
}

.mejs__container.yt-active .yt-center button,
.mejs__container.yt-paused .yt-center button {
    pointer-events: auto;
}

.mejs__container.yt-active::after,
.mejs__container.yt-paused::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.yt-center button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(42px, 5vw, 60px);
    height: clamp(42px, 5vw, 60px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(96, 96, 96, 0.72);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.yt-center button:hover,
.yt-center button:focus-visible {
    background-color: rgba(128, 128, 128, 0.9);
    outline: 0;
}

.yt-center button:active {
    background-color: rgba(156, 156, 156, 0.95);
}

.yt-center button.yt-c-play {
    width: clamp(58px, 6vw, 76px);
    height: clamp(58px, 6vw, 76px);
    background-size: 48px 48px;
}

.yt-center button:disabled {
    opacity: 0.35;
    cursor: default;
}

.yt-center .yt-c-prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 6h2v12H6zm3.5 6l8.5 6V6z'/></svg>");
}
.yt-center .yt-c-next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z'/></svg>");
}
.yt-center .yt-c-rewind,
.yt-center .yt-c-forward { 
    align-items: center;
    justify-content: center;
    background-size: 30px 30px;
}
.yt-center .yt-c-rewind {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'><path d='M13 5 5 11l8 6v-4.1A9 9 0 1 1 7 22H4a12 12 0 1 0 9-11.7z'/></svg>");
}
.yt-center .yt-c-forward {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'><path d='m19 5 8 6-8 6v-4.1A9 9 0 1 0 25 22h3a12 12 0 1 1-9-11.7z'/></svg>");
}
.yt-center .yt-c-rewind::after,
.yt-center .yt-c-forward::after {
    content: "10";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 600 9px/1 Arial, sans-serif;
    text-align: center;
    transform: none !important;
}
.yt-center .yt-c-play[data-state='play'] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
}
.yt-center .yt-c-play[data-state='pause'] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>");
}
.yt-center .yt-c-play[data-state='replay'] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/></svg>");
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
    .yt-center {
        gap: clamp(2px, 2vw, 12px);
    }

    .yt-center button {
        width: clamp(38px, 12vw, 52px);
        height: clamp(38px, 12vw, 52px);
        background-size: 28px 28px;
    }

    .yt-center button.yt-c-play {
        width: clamp(52px, 16vw, 68px);
        height: clamp(52px, 16vw, 68px);
        background-size: 42px 42px;
    }

    /* the bar keeps only what YouTube mobile shows: time, quality, fullscreen */
    .mejs__container.yt-ready .mejs__controls {
        padding: 0 4px;
        min-height: 44px;
    }
    .mejs__container.yt-ready .mejs__playpause-button,
    .mejs__container.yt-ready .yt-prev,
    .mejs__container.yt-ready .yt-next,
    .mejs__container.yt-ready .mejs__volume-button,
    .mejs__container.yt-ready .mejs__horizontal-volume-slider,
    .mejs__container.yt-ready .mejs__speed-button,
    .mejs__container.yt-ready .mejs__speed {
        display: none !important;
    }
    .mejs__container.yt-ready .mejs__currenttime-container {
        margin-left: 8px;
    }
    .mejs__container.yt-ready .mejs__time-rail {
        height: 20px;
    }
    .mejs__container.yt-ready .mejs__time-total,
    .mejs__container.yt-ready .mejs__time-slider {
        top: 9px;
    }
    /* handle is always visible on touch, like the YouTube app */
    .mejs__container.yt-ready .mejs__time-handle-content {
        transform: scale(1);
        top: -5px;
        width: 14px;
        height: 14px;
    }
}

/* -------------------------------------------------------------------------
   5. WATCH PAGE LAYOUT  (title / meta / action pills / description)
   ------------------------------------------------------------------------- */
.video-player-page h1[itemprop="title"] {
    margin: 12px 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-player-page .video_views_section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.video-player-page .video_views_section .left_count_view {
    font-size: 13px;
    opacity: 0.75;
}

.video-player-page .video_views_section .right_count_view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .video-player-page .video_views_section .right_count_view {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .video-player-page .video_views_section .right_count_view::-webkit-scrollbar {
        display: none;
    }
    .video-player-page .video_views_section .right_count_view > * {
        flex: 0 0 auto;
    }
}

/* pill buttons: like, dislike, share, save, more, embed, edit ... */
.video-player-page .right_count_view .like-btn,
.video-player-page .right_count_view #share-video,
.video-player-page .right_count_view > div[id],
.video-player-page .right_count_view > a,
.video-player-page .right_count_view > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 18px;
    background: var(--yt-chip-bg);
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.video-player-page .right_count_view .like-btn:hover,
.video-player-page .right_count_view #share-video:hover,
.video-player-page .right_count_view > div[id]:hover,
.video-player-page .right_count_view > a:hover,
.video-player-page .right_count_view > button:hover {
    background: var(--yt-chip-bg-hover);
}

/* like + dislike joined into one pill */
.video-player-page .right_count_view #likes-bar {
    border-radius: 18px 0 0 18px;
    padding-right: 12px;
    margin-right: -8px;
    position: relative;
}
.video-player-page .right_count_view #likes-bar::after {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(128, 128, 128, 0.5);
}
.video-player-page .right_count_view #dislikes-bar {
    border-radius: 0 18px 18px 0;
    padding-left: 12px;
}

/* channel row */
.video-player-page .publisher-element {
    display: flex;
    align-items: center;
    gap: 12px;
    float: none !important;
    margin: 12px 0;
    padding: 0;
    border: 0;
}

.video-player-page .publisher-element .publisher-avatar {
    float: none !important;
    margin: 0;
}

.video-player-page .publisher-element .publisher-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.video-player-page .publisher-element .publisher-name a {
    font-size: 16px;
    font-weight: 500;
}

.video-player-page .publisher-element .subscriber_count_publisher {
    font-size: 12px;
    opacity: 0.7;
}

.video-player-page .publisher-element .publisher-subscribe-button {
    margin-left: 12px;
}

.video-player-page .publisher-element .publisher-subscribe-button .btn,
.video-player-page .publisher-element .publisher-subscribe-button button {
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
}

/* description card */
.video-player-page .without_moview_div {
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--yt-chip-bg);
    font-size: 14px;
    line-height: 20px;
}

.video-player-page .without_moview_div .watch-video-show-more {
    margin-top: 4px;
    font-weight: 500;
    cursor: pointer;
}