/* =========================================================
   SCPR YOUTUBE + FACEBOOK PAGE
========================================================= */

.scpr-youtube-page {

    --youtube-bg: #0f0f0f;
    --youtube-card: #181818;
    --youtube-card-hover: #222222;
    --youtube-secondary: #272727;
    --youtube-border: #303030;

    --youtube-white: #f1f1f1;
    --youtube-muted: #aaaaaa;

    --youtube-red: #ff0000;

    width: 100%;
    min-height: 100vh;

    background: #0f0f0f;
    color: #f1f1f1;

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

    box-sizing: border-box;
}


.scpr-youtube-page *,
.scpr-youtube-page *::before,
.scpr-youtube-page *::after {
    box-sizing: border-box;
}


.scpr-youtube-page button,
.scpr-youtube-page input {
    font-family: inherit;
}


.scpr-youtube-page .yt-container {

    width: min(1450px, 94%);

    margin: 0 auto;
}


/* =========================================================
   CHANNEL HEADER
========================================================= */

.yt-page-header {

    background: #0f0f0f;

    border-bottom:
        1px solid #303030;
}


.yt-channel-row {

    min-height: 230px;

    display: flex;

    align-items: center;

    gap: 28px;

    padding:
        100px 0 25px;
}


/* CHANNEL IMAGE */

.yt-channel-avatar {

    width: 110px;
    height: 110px;

    min-width: 110px;

    border-radius: 50%;

    overflow: hidden;

    border:
        1px solid #3b3b3b;

    background: #272727;
}


.yt-channel-avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* CHANNEL INFO */

.yt-channel-info h1 {

    margin:
        0 0 9px;

    color: #ffffff;

    font-size:
        clamp(27px, 4vw, 42px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1px;
}


.yt-channel-info p {

    margin:
        0 0 22px;

    color: #aaaaaa;

    font-size: 15px;

    line-height: 1.6;
}


/* YOUTUBE BUTTON */

.yt-channel-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 18px;

    background: #ffffff;

    color: #0f0f0f;

    border-radius: 22px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        .2s ease;
}


.yt-channel-button:hover {

    background: #d9d9d9;

    transform:
        translateY(-1px);
}


.yt-red-icon {

    color: #ff0000;

    font-size: 15px;
}


/* =========================================================
   PLAYLIST NAVIGATION
========================================================= */

.yt-playlist-navigation {

    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(15, 15, 15, .96);

    border-bottom:
        1px solid #303030;

    backdrop-filter:
        blur(14px);
}


.playlist-tabs {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding:
        15px 0;

    scrollbar-width: none;
}


.playlist-tabs::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   PLAYLIST TAB
========================================================= */

.playlist-tab {

    flex:
        0 0 auto;

    width: 260px;

    min-height: 70px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        12px 15px;

    background:
        #181818;

    border:
        1px solid #303030;

    border-radius:
        8px;

    color:
        #aaaaaa;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.playlist-tab:hover {

    background:
        #222222;

    border-color:
        #484848;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


.playlist-tab.active {

    background:
        #272727;

    border-color:
        #ff0000;

    color:
        #ffffff;

    box-shadow:
        inset 0 -2px 0 #ff0000;
}


/* NUMBER */

.playlist-tab-number {

    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background:
        #0f0f0f;

    color:
        #888888;

    font-size: 11px;

    font-weight: 800;
}


.playlist-tab.active .playlist-tab-number {

    background:
        #ff0000;

    color:
        #ffffff;
}


/* TEXT */

.playlist-tab-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.playlist-tab-content strong {

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #f1f1f1;

    font-size: 13px;

    font-weight: 600;
}


.playlist-tab-content small {

    color: #777777;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.playlist-tab-arrow {

    color: #666666;

    font-size: 17px;

    transition: .2s ease;
}


.playlist-tab:hover .playlist-tab-arrow {

    color: #ffffff;

    transform:
        translateX(3px);
}


.playlist-tab.active .playlist-tab-arrow {

    color:
        #ff0000;
}


/* =========================================================
   VIDEO CONTENT
========================================================= */

.yt-video-content {

    background:
        #0f0f0f;

    padding:
        0 0 80px;
}


/* SELECTED PLAYLIST */

.selected-playlist {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding:
        55px 0 28px;

    border-bottom:
        1px solid #303030;
}


.selected-playlist-info {

    min-width: 0;
}


.selected-playlist-label {

    display: block;

    margin-bottom: 9px;

    color:
        #ff0000;

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        1.7px;
}


.selected-playlist h2 {

    margin:
        0 0 10px;

    color:
        #ffffff;

    font-size:
        clamp(25px, 3vw, 36px);

    line-height:
        1.2;

    font-weight:
        700;
}


.selected-playlist p {

    max-width:
        800px;

    margin:
        0;

    color:
        #888888;

    font-size:
        14px;

    line-height:
        1.65;
}


/* COUNT */

.selected-playlist-count {

    min-width:
        80px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        5px;
}


.selected-playlist-count strong {

    color:
        #ffffff;

    font-size:
        32px;

    line-height:
        1;
}


.selected-playlist-count span {

    color:
        #777777;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.2px;
}


/* =========================================================
   VIDEO GRID
========================================================= */

.yt-video-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        28px 22px;

    padding-top:
        30px;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.yt-video-card {

    min-width:
        0;

    background:
        #181818;

    border-radius:
        10px;

    overflow:
        hidden;

    transition:
        .25s ease;
}


.yt-video-card:hover {

    background:
        #222222;

    transform:
        translateY(-4px);
}


/* THUMBNAIL */

.yt-thumbnail {

    position:
        relative;

    display:
        block;

    width:
        100%;

    padding:
        0;

    border:
        0;

    background:
        #000000;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    cursor:
        pointer;
}


.yt-thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .35s ease;
}


.yt-video-card:hover .yt-thumbnail img {

    transform:
        scale(1.035);
}


/* PLAY */

.yt-play-button {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        64px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%, -50%);

    background:
        #ff0000;

    border-radius:
        9px;

    transition:
        .2s ease;
}


.yt-play-button span {

    color:
        #ffffff;

    font-size:
        19px;

    margin-left:
        3px;
}


.yt-thumbnail:hover .yt-play-button {

    transform:
        translate(-50%, -50%) scale(1.08);
}


/* WATCH */

.yt-watch-label {

    position:
        absolute;

    right:
        9px;

    bottom:
        9px;

    padding:
        5px 8px;

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

    border-radius:
        4px;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .8px;
}


/* CARD BODY */

.yt-card-body {

    display:
        flex;

    gap:
        13px;

    padding:
        15px 14px 17px;

    background:
        #181818;
}


.yt-card-avatar {

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #272727;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;
}


.yt-card-text {

    min-width:
        0;

    flex:
        1;
}


.yt-card-text h3 {

    margin:
        0 0 5px;

    color:
        #f1f1f1;

    font-size:
        15px;

    line-height:
        1.35;

    font-weight:
        600;

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


.yt-card-text p {

    margin:
        0 0 9px;

    color:
        #aaaaaa;

    font-size:
        12px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.yt-card-text span {

    display:
        inline-block;

    padding:
        4px 7px;

    background:
        #272727;

    border-radius:
        4px;

    color:
        #aaaaaa;

    font-size:
        9px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


/* =========================================================
   FACEBOOK SECTION
========================================================= */

.scpr-facebook-section {

    position:
        relative;

    background:
        #111111;

    border-top:
        1px solid #303030;

    padding:
        85px 0 90px;
}


/* TOP HEADER */

.facebook-section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        40px;

    padding-bottom:
        28px;

    border-bottom:
        1px solid #303030;
}


.facebook-heading {

    max-width:
        750px;
}


.facebook-kicker {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #3ea6ff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.facebook-heading h2 {

    margin:
        0 0 10px;

    color:
        #ffffff;

    font-size:
        clamp(30px, 4vw, 44px);

    line-height:
        1.1;

    letter-spacing:
        -1px;
}


.facebook-heading p {

    max-width:
        650px;

    margin:
        0;

    color:
        #888888;

    font-size:
        14px;

    line-height:
        1.7;
}


/* FACEBOOK BUTTON */

.facebook-follow-button {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 18px;

    border:
        1px solid #303030;

    border-radius:
        25px;

    background:
        #181818;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .2s ease;
}


.facebook-follow-button:hover {

    background:
        #222222;

    border-color:
        #3ea6ff;

    transform:
        translateY(-2px);
}


.facebook-follow-button span {

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #1877f2;

    color:
        #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        16px;

    font-weight:
        700;
}


.facebook-follow-button b {

    color:
        #777777;

    font-size:
        16px;
}


/* =========================================================
   FACEBOOK POSTS
========================================================= */

.facebook-posts {

    column-count:
        3;

    column-gap:
        22px;
}


/* POST CARD */

.facebook-post {

    display:
        inline-block;

    width:
        100%;

    margin:
        0 0 22px;

    padding:
        10px;

    background:
        #181818;

    border:
        1px solid #292929;

    border-radius:
        10px;

    overflow:
        hidden;

    vertical-align:
        top;

    break-inside:
        avoid;

    transition:
        border-color .2s ease,
        transform .2s ease;
}


.facebook-post:hover {

    border-color:
        #444444;

    transform:
        translateY(-3px);
}


/* FACEBOOK IFRAME */

.facebook-post iframe {

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    border:
        0;

    border-radius:
        6px;

    background:
        #ffffff;
}


/* =========================================================
   FACEBOOK MORE
========================================================= */

.facebook-more {

    margin-top:
        35px;

    padding:
        25px 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    background:
        #181818;

    border:
        1px solid #303030;

    border-radius:
        10px;
}


.facebook-more div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.facebook-more span {

    color:
        #777777;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.4px;
}


.facebook-more strong {

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        600;
}


.facebook-more a {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 17px;

    border-radius:
        22px;

    background:
        #1877f2;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        .2s ease;
}


.facebook-more a:hover {

    background:
        #1466d4;

    transform:
        translateY(-2px);
}


.facebook-more a span {

    color:
        #ffffff;

    font-size:
        16px;
}


/* =========================================================
   YOUTUBE FOOTER
========================================================= */

.yt-channel-footer {

    background:
        #0f0f0f;

    border-top:
        1px solid #303030;

    padding:
        65px 0;
}


.yt-channel-footer-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


.yt-small-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #888888;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1.7px;
}


.yt-channel-footer h2 {

    margin:
        0 0 10px;

    color:
        #ffffff;

    font-size:
        clamp(25px, 4vw, 36px);
}


.yt-channel-footer p {

    max-width:
        720px;

    margin:
        0;

    color:
        #888888;

    font-size:
        14px;

    line-height:
        1.7;
}


.yt-channel-footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

    padding:
        13px 20px;

    border-radius:
        22px;

    background:
        #ff0000;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;
}


.yt-channel-footer a:hover {

    background:
        #cc0000;
}


/* =========================================================
   VIDEO MODAL
========================================================= */

.yt-video-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px 25px 30px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        .25s ease;
}


.yt-video-modal.active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.yt-modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(0, 0, 0, .94);
}


.yt-modal-box {

    position:
        relative;

    z-index:
        2;

    width:
        min(1100px, 100%);

    background:
        #000000;

    border-radius:
        8px;

    overflow:
        visible;

    transform:
        scale(.96);

    transition:
        .25s ease;
}


.yt-video-modal.active .yt-modal-box {

    transform:
        scale(1);
}


.yt-modal-video {

    width:
        100%;

    aspect-ratio:
        16 / 9;

    background:
        #000000;

    overflow:
        hidden;

    border-radius:
        8px;
}


.yt-modal-video iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


.yt-modal-close {

    position:
        absolute;

    right:
        0;

    top:
        -48px;

    width:
        42px;

    height:
        42px;

    border:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        34px;

    cursor:
        pointer;
}


body.video-modal-open {
    overflow:
        hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .yt-video-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .facebook-posts {

        column-count:
            2;
    }

}


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

@media (max-width: 700px) {

    .scpr-youtube-page .yt-container {

        width:
            92%;
    }


    /* CHANNEL */

    .yt-channel-row {

        min-height:
            auto;

        align-items:
            flex-start;

        gap:
            17px;

        padding:
            30px 0;
    }


    .yt-channel-avatar {

        width:
            62px;

        height:
            62px;

        min-width:
            62px;
    }


    .yt-channel-info h1 {

        font-size:
            24px;
    }


    .yt-channel-info p {

        margin-bottom:
            15px;

        font-size:
            12px;
    }


    /* PLAYLIST */

    .playlist-tabs {

        gap:
            8px;

        padding:
            11px 0;
    }


    .playlist-tab {

        width:
            220px;

        min-height:
            62px;
    }


    /* SELECTED PLAYLIST */

    .selected-playlist {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

        padding:
            38px 0 22px;
    }


    .selected-playlist h2 {

        font-size:
            27px;
    }


    .selected-playlist-count {

        align-items:
            flex-start;

        flex-direction:
            row;

        gap:
            7px;
    }


    /* VIDEOS */

    .yt-video-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;

        padding-top:
            22px;
    }


    /* FACEBOOK */

    .scpr-facebook-section {

        padding:
            60px 0 65px;
    }


    .facebook-section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            22px;

        margin-bottom:
            30px;
    }


    .facebook-heading h2 {

        font-size:
            32px;
    }


    .facebook-follow-button {

        width:
            100%;

        justify-content:
            center;
    }


    .facebook-posts {

        column-count:
            1;
    }


    .facebook-post {

        margin-bottom:
            18px;
    }


    .facebook-more {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            22px;
    }


    .facebook-more a {

        width:
            100%;

        justify-content:
            center;
    }


    /* FOOTER */

    .yt-channel-footer {

        padding:
            45px 0;
    }


    .yt-channel-footer-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            25px;
    }

}


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

@media (max-width: 480px) {

    .scpr-youtube-page .yt-container {

        width:
            94%;
    }


    .yt-channel-avatar {

        width:
            52px;

        height:
            52px;

        min-width:
            52px;
    }


    .yt-channel-info h1 {

        font-size:
            20px;
    }


    .playlist-tab {

        width:
            200px;
    }


    .selected-playlist h2 {

        font-size:
            24px;
    }


    .facebook-heading h2 {

        font-size:
            29px;
    }


    .yt-play-button {

        width:
            55px;

        height:
            39px;
    }

}