/* ==========================================================
   CFFCS Video Playlists Mega Menu
   Isolated styling based on the original demo.
   Load this AFTER Header.css.
   ========================================================== */

#VideoPlaylists.playlist-mega-panel {
    --yt-blue: #174f8c;
    --yt-blue-dark: #0d3159;
    --yt-blue-light: #2b73b8;
    --yt-border: #cbd6e2;
    --yt-text: #172536;
    --yt-muted: #647487;

    position: fixed !important;
    top: 112px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: min(1100px, calc(100vw - 32px)) !important;
    max-width: 1100px !important;
    height: calc(100vh - 128px) !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;

    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--yt-border) !important;
    border-top: 4px solid var(--yt-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 42px rgba(8, 31, 56, .22) !important;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif !important;
    z-index: 99999 !important;
}

body.cff-header-scrolled #VideoPlaylists.playlist-mega-panel {
    top: 58px !important;
    height: calc(100vh - 74px) !important;
}

#VideoPlaylists .video-playlist-heading {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 18px;
    background: linear-gradient(180deg, #ffffff, #f2f6fa);
    border-bottom: 1px solid var(--yt-border);
    box-sizing: border-box;
}

#VideoPlaylists .video-playlist-eyebrow {
    display: block;
    color: var(--yt-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#VideoPlaylists .video-playlist-heading strong {
    display: block;
    margin-top: 1px;
    color: var(--yt-blue-dark);
    font-size: 18px;
    line-height: 1.25;
}

#VideoPlaylists .video-playlist-count {
    flex: 0 0 auto;
    padding: 4px 9px;
    color: #ffffff;
    background: var(--yt-blue);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

#VideoPlaylists .video-playlist-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 1px !important;
    background: #dbe3eb !important;
}

#VideoPlaylists .video-playlist-item {
    min-width: 0;
    min-height: 102px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 15px !important;
    margin: 0 !important;
    color: var(--yt-text) !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    box-sizing: border-box;
}

#VideoPlaylists .video-playlist-item:hover {
    color: var(--yt-text) !important;
    background: #f2f7fb !important;
    transform: none !important;
}

#VideoPlaylists .video-playlist-item.is-active {
    background: #e7f0f9 !important;
    box-shadow: inset 0 -4px 0 var(--yt-blue) !important;
}

#VideoPlaylists .video-playlist-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, var(--yt-blue-light), var(--yt-blue-dark)) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    box-sizing: border-box;
}

#VideoPlaylists .video-playlist-icon svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
    fill: currentColor !important;
    color: #ffffff !important;
}

#VideoPlaylists .video-playlist-text {
    min-width: 0;
    display: block;
}

#VideoPlaylists .video-playlist-text strong {
    display: block;
    overflow: hidden;
    color: var(--yt-blue-dark) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
}

#VideoPlaylists .video-playlist-text small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    color: var(--yt-muted) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media screen and (max-width: 1100px) {
    #VideoPlaylists .video-playlist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 820px) {
    #VideoPlaylists.playlist-mega-panel {
        top: 80px !important;
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 90px) !important;
    }

    #VideoPlaylists .video-playlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 520px) {
    #VideoPlaylists .video-playlist-grid {
        grid-template-columns: 1fr !important;
    }

    #VideoPlaylists .video-playlist-item {
        min-height: 88px;
    }
}