/* The watch page's "Autoplay Up Next" sidebar (#accordion_atuplay, rows built by renderPlaylist in
   repo/js/player/player_live_initialize.js). Everything is scoped to #accordion_atuplay. */
#accordion_atuplay {
    --upn-card: #ffffff;
    --upn-border: #e6e6e6;
    --upn-text: #1d1d1f;
    --upn-muted: #6b6f76;
    --upn-sep: rgba(0, 0, 0, .08);
    --upn-hover: rgba(0, 0, 0, .04);
    --upn-thumb: #e9e9e9;
    --upn-shine: #f5f5f5;
    --upn-menu: #ffffff;
    --upn-accent: #ff5503;
}
.theme_dark #accordion_atuplay {
    --upn-card: #15171c;
    --upn-border: rgba(255, 255, 255, .07);
    --upn-text: #ffffff;
    --upn-muted: #9aa0aa;
    --upn-sep: rgba(255, 255, 255, .08);
    --upn-hover: rgba(255, 255, 255, .05);
    --upn-thumb: #23262d;
    --upn-shine: #30343c;
    --upn-menu: #1f2229;
}
/* the watch page's columns (this file loads on the watch page only): about 70 / 30, the sidebar was a fixed
   330px. Under 992px the sidebar stays the slide-in panel it was (single_video.css). */
@media (min-width: 992px) {
    .dis_SV_C > .dis_SV_CM { width: auto; flex: 1 1 0; min-width: 0; }
    .dis_SV_C > .dis_SV_CR { width: auto; flex: 0 0 29%; min-width: 330px; max-width: 540px; }
    /* a narrow even gutter instead of 38px each side (108px + from 1800px, and the 1200px cap of
       responsive.css on short screens): the player and both columns get the room */
    .dis_SingleVideoInner > .dis_SV_container { padding: 0 20px; max-width: none; }
    .dis_SingleVideoInner .dis_SV_C { margin: 12px 0 3px; gap: 24px; }
    .dis_SingleVideoInner .dis_SV_C > div { margin: 0; }
    /* the player and the Up Next card start level (~10px under the header): the sidebar's sticky top was
       100px, which held it 15px below the player even before scrolling; 90px is just above where both
       columns start, so it stays level, and while scrolling it sits just under the header */
    .dis_SingleVideoInner .dis_SV_C > .dis_SV_CR { top: 90px; }
    /* the card reaches down to the bottom of the screen instead of stopping at a fixed 690px list
       (single_video.css): 90px sticky top + ~70px card header + 16px gap below */
    .dis_SingleVideoInner .dis_SV_C > .dis_SV_CR { max-height: calc(100vh - 106px); }
    #accordion_atuplay .ap_videoList { max-height: calc(100vh - 176px); min-height: 300px; }
}
/* wide screens: a 44px gutter each side; the 48px it adds is taken from the sidebar (about 72 / 28), so the
   player keeps its width: sidebar = 29% - 0.71 x 48px, its cap 540 - 48 (the 330px floor binds under ~1344px) */
@media (min-width: 1360px) {
    .dis_SingleVideoInner > .dis_SV_container { padding: 0 44px; }
    .dis_SV_C > .dis_SV_CR { flex-basis: calc(29% - 34px); max-width: 492px; }
}

#accordion_atuplay .panel.dis_apList {
    background: var(--upn-card);
    border: 1px solid var(--upn-border);
    border-radius: 10px;
    padding: 4px 8px 8px;
    overflow: visible;
}
/* header: title left, the autoplay switch right */
#accordion_atuplay .ap_heading.ap_tgl {
    background: transparent;
    margin: 0;
    padding: 12px 8px 12px;
    border-bottom: 1px solid var(--upn-sep);
    border-radius: 0;
}
#accordion_atuplay .ap_httl {
    padding-left: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--upn-text);
    text-decoration: none;
}
#accordion_atuplay .ap_httl:after { display: none; }
#accordion_atuplay .ap_httl:hover,
#accordion_atuplay .ap_httl:focus { color: var(--upn-text); }
#accordion_atuplay .auto_play_wraapper { width: 40px; height: 22px; flex: none; }
#accordion_atuplay .auto_play_wraapper .tgl_btn { background: #4a4d55; border-radius: 22px; }
#accordion_atuplay .auto_play_wraapper .tgl_btn:after { width: 16px; height: 16px; left: 3px; background: #fff; }
#accordion_atuplay input.switch_tgl:checked + .tgl_btn { background: var(--upn-accent); }
#accordion_atuplay input.switch_tgl:checked + .tgl_btn:after { transform: translateX(18px); background: #fff; }
#accordion_atuplay input.switch_tgl:focus-visible + .tgl_btn { box-shadow: 0 0 0 2px rgba(255, 85, 3, .45); }

/* the list */
#accordion_atuplay .ap_body { padding-top: 6px; }
#accordion_atuplay .ap_videoList { margin: 0; padding: 0; list-style: none; }
#accordion_atuplay .ap_videoList > li { margin: 0; }
#accordion_atuplay .ap_videoList > li.playFromList {
    position: relative;
    padding: 8px 4px 8px 8px;
    margin: 0 0 4px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
#accordion_atuplay .ap_videoList > li.playFromList + li.playFromList:before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -2px;
    height: 1px;
    background: var(--upn-sep);
}
#accordion_atuplay .ap_videoList > li.playFromList:hover { background: var(--upn-hover); }
#accordion_atuplay .ap_videoList > li.playFromList.active {
    border-color: var(--upn-accent);
    background: rgba(255, 85, 3, .07);
}
#accordion_atuplay .ap_videoList > li.playFromList.active:before,
#accordion_atuplay .ap_videoList > li.playFromList.active + li.playFromList:before { display: none; }

#accordion_atuplay .upn_row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
#accordion_atuplay .upn_thumb {
    position: relative;
    flex: 0 0 auto;
    width: 36%;
    max-width: 170px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--upn-thumb);
}
#accordion_atuplay .upn_thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
}
#accordion_atuplay .upn_dur {
    position: absolute;
    right: 6px;
    bottom: 7px;
    z-index: 2;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .2px;
}
#accordion_atuplay .upn_prog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 3px;
    background: rgba(255, 255, 255, .3);
}
#accordion_atuplay .upn_prog > span { display: block; height: 100%; background: var(--upn-accent); }

#accordion_atuplay .upn_info { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
#accordion_atuplay .upn_title {
    margin: 0 0 6px;
    color: var(--upn-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
#accordion_atuplay .upn_meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--upn-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}
#accordion_atuplay .upn_mode { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#accordion_atuplay .upn_meta svg { flex: none; width: 12px; height: 12px; }

/* loading placeholders (new_single_video.php): the same row as above, grey blocks with a shimmer */
#accordion_atuplay .ap_videoList > li.upn_skel {
    position: relative;
    padding: 8px 4px 8px 8px;
    margin: 0 0 4px;
    border: 1.5px solid transparent;
}
#accordion_atuplay .ap_videoList > li.upn_skel + li.upn_skel:before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -2px;
    height: 1px;
    background: var(--upn-sep);
}
#accordion_atuplay .upn_sk {
    background: linear-gradient(to right, var(--upn-thumb) 8%, var(--upn-shine) 18%, var(--upn-thumb) 33%);
    background-color: var(--upn-thumb);
    background-size: 1200px 100px;
    animation: ani_sv 2s infinite ease-out;
}
#accordion_atuplay .upn_sk_line { height: 14px; margin: 2px 0 8px; border-radius: 4px; }
#accordion_atuplay .upn_sk_short { width: 70%; }
#accordion_atuplay .upn_sk_meta { width: 45%; height: 11px; margin-top: 12px; border-radius: 4px; }

/* the ⋮ menu */
#accordion_atuplay .upn_more {
    flex: 0 0 28px;
    width: 28px;
    height: 32px;
    margin: -4px -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--upn-muted);
    font-size: 20px;
    line-height: 32px;
    cursor: pointer;
}
#accordion_atuplay .upn_more:hover,
#accordion_atuplay .upn_more:focus-visible { background: var(--upn-hover); color: var(--upn-text); outline: 0; }
#accordion_atuplay .upn_menu {
    position: absolute;
    right: 8px;
    top: 42px;
    z-index: 30;
    min-width: 140px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--upn-menu);
    border: 1px solid var(--upn-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
#accordion_atuplay .upn_menu.upn_up { top: auto; bottom: 42px; }
#accordion_atuplay .upn_menu.upn_hide { display: none; }
#accordion_atuplay .upn_menu a {
    display: block;
    padding: 8px 14px;
    color: var(--upn-text) !important;
    font-size: 14px;
    text-decoration: none !important;
}
#accordion_atuplay .upn_menu a:hover { background: var(--upn-hover); }

@media (max-width: 480px) {
    #accordion_atuplay .upn_title { font-size: 13.5px; }
}

/* The ad above Up Next: no space for it while no ad is shown (signed out, ads off, no ad served);
   the gap below it only once an ad has come (an ad arrives as an iframe) */
.dis_SV_adsWrap.svadRight { margin-bottom: 0; }
.dis_SV_adsWrap.svadRight .my_custom_ads_class { margin-bottom: 0 !important; }
.dis_SV_adsWrap.svadRight:has(iframe) { margin-bottom: 20px; }