html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}


.secondaryInfo {
    border-bottom: 1px solid #dedede;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.secondaryInfo .topRow .button {
    padding: 6px 15px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 2px;
    border: none;
    font-size: 14px;
}

.secondaryInfo .topRow .subscribeButtonContainer,
.secondaryInfo .topRow .editVideoButtonContainer,
.secondaryInfo .topRow .deleteVideoButtonContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 0.5rem;
}

.subscribeButtonContainer .subscribe {
    background-color: #c00;
    color: #fff;
}

.subscribeButtonContainer .unsubscribe {
    background-color: #eee;
    color: rgba(17,17,17,0.6);
}

.editVideoButtonContainer .edit {
    background-color: #2692e6;
    color: #fff;
    margin-right: 5px;
}

.deleteVideoButtonContainer .delete{
    background-color: #c00;
    color: #fff;
}

.secondaryInfo .topRow .uploadInfo .owner a {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}
@media screen and (max-width: 807px){
    #sideNavContainer{
        display: none;
    }
    #mainSectionContainer{
        padding-left: 0 !important;
    }
    #nav-ham{
        display: flex !important;
        padding-left: 1rem;
    }
    #logo-top{
        height: 53px !important;
        margin-left: 8px;
    }
}




/* =======================================================
   FIX FOR VIDEO GRID DETAILS OVERLAP
   ======================================================= */

/* 1. Сбрасываем высоту карточки, чтобы она растягивалась под контент */
.videoGridItem {
    height: auto !important;
    min-height: 200px; /* Минимальная высота на всякий случай */
    overflow: visible !important; /* Чтобы тени или детали не обрезались */
    display: flex !important;
    flex-direction: column !important; /* Строго вертикальный стек */
}

/* 2. Настраиваем блок деталей (низ) */
.videoGridItem .details {
    width: 100% !important;
    padding: 10px 0 0 0 !important; /* Отступ сверху от картинки */
    margin: 0 !important; /* УБИРАЕМ ОТРИЦАТЕЛЬНЫЕ ОТСТУПЫ */
    background: transparent !important;
    position: relative !important;
    display: block !important;
}

/* 3. Настраиваем заголовок */
.videoGridItem .details .title {
    margin: 0 0 6px 0 !important; /* УБИРАЕМ ОТРИЦАТЕЛЬНЫЕ ОТСТУПЫ (-50px) */
    padding: 0 !important; /* Убираем лишний отступ слева, если он не нужен */
    
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #0f0f0f !important;
    
    /* Если у вас есть аватарка слева, верните padding-left */
    /* padding-left: 48px !important; */ 
    
    max-height: 40px !important;
    overflow: hidden !important;
}

/* 4. Имя автора и статистика */
.videoGridItem .details .username,
.videoGridItem .details .stats {
    display: block !important;
    font-size: 12px !important;
    color: #606060 !important;
    margin: 0 !important;
    padding: 0 !important; /* Убираем лишний отступ слева */
    
    /* Если у вас есть аватарка слева, верните padding-left */
    /* padding-left: 48px !important; */
}

/* 5. Исправляем превью, чтобы оно занимало свое место */
.videoGridItem .thumbnail {
    flex: 0 0 auto !important; /* Не сжиматься */
    width: 100% !important;
    aspect-ratio: 16/9 !important; /* Фиксируем пропорции */
    height: auto !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

/* Скрываем абсолютную аватарку, если она ломает верстку (опционально) */
/* Если аватарка нужна, для нее нужны отдельные стили позиционирования */
/*
.videoGridItem .details .profilePicture {
    display: none; 
}
*/



/* ------------------------alernative classes for left nav compress on large viewport :: STARTS------------------------  */
.sideNavContainer-compress{
    width: 83px !important;
}
.sidenav-mainItem-compress{
    margin: 0px 0 !important;
}
.sidenav-item-compress{
    flex-direction: column !important;
    padding: unset !important;
}
.sidenav-img-compress{
    margin-right: unset !important;
}
.sidenav-span-compress{
    font-size: 10.4px !important;
}
.navitem-display-none{
    display: none !important;
}
.sidenav-heading-compress{
    padding: 0 !important;
    font-size: 13px !important;
}
.searchbar-margin{
    margin: 0 10px !important;
}
/* ------------------------alernative classes for left nav compress on large viewport :: ENDS------------------------  */


/* ------------------------alernative classes for left nav expand on small viewport :: STARTS------------------------  */
.sideNavContainer-expand-sm{
    z-index: 10;
    display: flex !important;
    top: 0;
    padding-top: 0 !important;
    box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);

}
/* ------------------------alernative classes for left nav expand on small viewport :: ENDS------------------------  */

.commentSection .header {
    margin-top: 24px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
}

.commentSection .header .commentForm .profilePicture,
.commentSection .comment .profilePicture,
.commentForm .profilePicture {
    margin-right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.commentSection .header .commentCount {
    margin-bottom: 24px;
}

.commentSection .header .commentForm,
.itemContainer .commentForm {
    display: flex;
}

.commentSection .header .commentForm textarea,
.itemContainer .commentForm textarea {
    flex: 1;
    border: none;
    background-color: transparent;
    font-size: 14px;
    color: #111;
    resize: none;
}

.itemContainer .commentForm textarea {
    height: 30px;
}

.commentSection .header .commentForm .postComment,
.itemContainer .commentForm .postComment,
.itemContainer .commentForm .cancelComment {
    height: 36px;
    background-color: #2692e6;
    color: #fff;
    font-weight: 500;
    border: none;
    padding: 0 15px;
    border-radius: 2px;
}

.itemContainer .commentForm .cancelComment {
    background-color: transparent;
    color: rgba(17,17,17,0.6);
}

.itemContainer .commentForm .cancelComment:hover {
    color:#000;
}

.commentSection .itemContainer {
    margin-bottom: 16px;
}

.commentSection .comment {
    display: flex;
}

.commentSection .commentHeader {
    margin-bottom: 2px;
}

.commentSection .comment .username {
    margin-right: 8px;
    color: #111;
    font-size: 13px;
    font-weight:500;
}

.commentSection .comment .body {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.itemContainer .controls {
    margin-left: 64px
}

.itemContainer .controls button,
.itemContainer .controls .likesCount {
    height: 32px;
    background-color: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: rgba(17,17,17,0.6);
}

.itemContainer .controls button {
    cursor: pointer;
}

.itemContainer .controls .likesCount {
    margin: 0 5px;
}

.itemContainer .controls button img {
    height: 16px;
}

.itemContainer .commentForm .profilePicture {
    width: 30px;
    height: 30px;
}

.commentSection .comment .timestamp {
    color: #888;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.hidden {
    display: none !important;
}

.comments .repliesSection {
    padding-left: 64px;
    margin-top : 16px;
}

.commentSection .itemContainer .viewReplies {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.videoGrid {
    display: flex;
    flex-wrap: wrap;
}

.suggestions .videoGridItem {
    display: flex;
    height: auto;
}

.videoGridItem {
    height: px;
    margin-right: 4px;
    margin-bottom: 24px;
}

.thumbnail video,
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* обрезает по центру */
  object-position: center; /* центрирует */
  display: block;
}

.videoGridItem .thumbnail {
    aspect-ratio: 16 / 9;
    width: 170px;
    height: 96px;
    position: relative;
}

.suggestions .videoGridItem .thumbnail {
    margin-right: 8px;
}

.videoGridItem .thumbnail img {
    width: 100%;
    height: 100%;
}

.videoGridItem .thumbnail .duration {
    bottom: 4px !important;
    right: 0;
    position: absolute;
    margin: 4px;
    color: #fff;
    background-color: rgba(17,17,17,0.8);
    opacity: 0.8;
    padding: 2px 4px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
}

.videoGridItem .details {
    padding-right: 24px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 210px;
    padding-left: 8px;
}

.suggestions .videoGridItem .details {
    padding-right: 0;
    flex: 1;
}

.videoGridItem .details .title {
    margin: 8px 0;
    max-height: 32px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #212529;
}

.videoGridItem .details .username,
.videoGridItem .details .stats {
    color: rgba(17,17,17,0.6);
    font-size: 13px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.videoGridHeader {
    display: flex;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
}

.videoGridHeader div {
    flex: 1;
}

.videoGrid.large {
    flex-direction: column;
    flex: 1;
}

.videoGrid.large .videoGridItem {
    height: auto;
    display: flex;
}

.videoGrid.large .videoGridItem .thumbnail {
    width: 266px;
    height: 138px;
    margin-right: 16px;
}

.videoGrid.large .videoGridItem .details {
    max-width: 600px;
    flex: 1;
}

.videoGrid.large .videoGridItem .details .title {
    font-size: 18px;
    line-height: 24px;
}

.videoGridItem .details .description {
    color: rgba(17,17,17,0.6);
    font-size: 13px;
    font-weight: 500;
}

.largeVideoGridContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.videoGridHeader .right {
    text-align: right;
}

.videoGridHeader a {
    color: rgba(17,17,17,0.6);
}

.videoGridHeader a:after {
    content: ' |'
}

.videoGridHeader a:last-child:after {
    content: ''
}

.signInLink {
    color: #f00;
    /* margin-left: 15px; */
}


#sideNavContainer .navigationItem {
    height: 40px;
    display: flex;
}

#sideNavContainer .navigationItem img {
    height: 18px;
    margin-right: 27px;
}

#sideNavContainer .navigationItem span {
    flex: 1;
    color: #111;
    font-size: 14px;
}

#sideNavContainer .navigationItem a {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 28px;
}

#sideNavContainer .navigationItem a:hover {
    background-color: rgba(0,0,0, 0.04);
}

#sideNavContainer .heading {
    color: rgba(17,17,17,0.6);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px 0;
    border-top: 0px solid #ededed;
    display: block;
}

.profileContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.coverPhotoContainer {
    height: 200px;
    flex: 1;
    position: relative;
}

.coverPhotoContainer .coverPhoto {
    width: 100%;
    object-fit: cover;
    max-height: 100%;
    vertical-align: middle;
}

.coverPhotoContainer .channelName {
    position: absolute;
    top: calc(50% - 40px);
    font-size: 50px;
    color: #fff;
    text-align: center;
    width: 100%;
    letter-spacing: 5px;
}

.profileHeader {
    padding: 15px 100px 0 0;
    display: flex;
    height: 100px;
}

.userInfoContainer {
    flex: 1;
    display: flex;
}

.profileHeader .userInfoContainer .profileImage {
    height: 80px;
    width: 80px;
}

.profileHeader .userInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profileHeader .userInfo .title {
    font-size: 24px;
    font-weight: 400;
    color: #111;
}

.profileHeader .userInfo .subscriberCount {
    font-size: 14px;
    color: rgba(17,17,17,0.6);
}

.profileHeader .buttonContainer {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.profileHeader .buttonContainer .buttonItem {
    align-items: center;
    display: flex;
}

.profileHeader .buttonContainer .buttonItem button {
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.profileContainer .channelContent {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
}

.nav-item a {
    color: rgba(17,17,17,0.6);
}

.channelContent .section .values {
    color: rgba(17,17,17,0.6);
    display: flex;
    flex-direction: column;
}

.formSection:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dedede
}

.settingsContainer form {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.editVideoContainer {
    display: flex;
    flex-direction: column;
}

.editVideoContainer .topSection {
    display: flex;
}

.topSection .videoPlayer {
    max-height: 300px;
    flex: 1;
}

.editVideoContainer .topSection .thumbnailItemsContainer {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    width: 210px;
}

.editVideoContainer .topSection .thumbnailItemsContainer .thumbnailItem {
    margin-bottom: 10px;
    padding: 2px;
}

.editVideoContainer .topSection .thumbnailItemsContainer .thumbnailItem.selected {
border: 3px solid #828282;
}

.editVideoContainer .topSection .thumbnailItemsContainer .thumbnailItem img {
    width: 100%;
    cursor: pointer;
}

.active-page{
    background-color: #cac9c9 !important;
}
.active-page-font{
    color: black;
    font-weight: bolder;
}

.close{
    padding: 3% !important;
    float: right !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #000 !important;
    text-shadow: 0 1px 0 #fff !important;
    opacity: .5 !important;
}

.modal-body{
    text-align: center !important;
}

#categoryList table input[type="checkbox"]{
    margin-right: 0.5rem !important;
}
#admin{
    margin: 0 3px 0 10px !important;
}
#checkAllRoles{
    margin: 0 3px 0 12px !important;
}
#profileDropdown{
    display: none;
    z-index: 20000;
    width: 11rem;
    right: 1rem;
    position: absolute;
}
#profileDropdown a{
    color: #111;
    font-size: 14px;
}
#dashboardIcon{
    padding: 8px;
    font-size: 19px;
    color: #7e7b7b;
}

/* #editCategoryCard .card-body{
    display: none;
} */
#editCategoryCard .card-header .card-title,
#editCategoryCard .card-header .card-tools,
#assignRolesCard .card-header .card-title,
#assignRolesCard .card-header .card-tools,
#notificationCard .card-header .card-title,
#notificationCard .card-header .card-tools{
    display: inline-block !important;
}
#editCategoryCard .card-header .card-tools,
#assignRolesCard .card-header .card-tools,
#notificationCard .card-header .card-tools{
    position: absolute;
    right: 1rem;
}
#categoryBody .card-body table input{
    margin-right: 0.5rem;
}
#categoryBody .card-body .categoryFeature2{
    position: absolute;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0) !important;
    color: #7e7b7b;
}
#categoryBody .card-body .categoryFeature2:hover{
    color: hsl(2, 100%, 58%);
}
#categoryBody .card-body .categoryFeature1{
    position: absolute;
    right: 4rem;
    background: rgba(255, 255, 255, 0) !important;
    color: #7e7b7b;
}
#categoryBody .card-body .categoryFeature1:hover{
    color: hsl(35, 100%, 62%);
}
/* #newCategory{
    display: inline-block !important;
    width: 92% !important;
} */
#categoryBody #checkAll{
    margin-left: 0.7rem !important;
    margin-right: 0.5rem !important;
}
/* #categoryBody .categoryTool{
    position: absolute;
}*/
#categoryBody .categoryTool1{
    position: absolute !important;
    right: 9rem !important;
}
#categoryBody .categoryTool2{
    position: absolute !important;
    right: 2.5rem !important;
}
#categoryList label{
    margin-right: 1rem !important;
}

.edit-tools{
    display: none;
    font-size: 1rem !important;
    background:white !important;
    border-radius:50% !important;
    margin-right: 5px !important;
}

/* TRASH::STARTS */
.disableCheck{
    outline: none !important;
}


/* ..............Video grid notification::STARTS........... */
#notificationTable .videoGridItem,
#requestStatusTable .videoGridItem {    
    /* 663 */
    height: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. class="thumbnail": */
#notificationTable .videoGrid.large .videoGridItem .thumbnail,
#requestStatusTable .videoGrid.large .videoGridItem .thumbnail {
    /* 754 */
    width: 95px !important;
    height: 61px !important;
    margin-right: 9px !important;
}
#notificationTable .videoGridItem .thumbnail,
#requestStatusTable .videoGridItem .thumbnail {
    /* 669 */
    width: 6rem !important;
    height: 4rem !important;
    /* position: relative; */
}
/* 3. class="details": */
#notificationTable .videoGrid.large .videoGridItem .details,
#requestStatusTable .videoGrid.large .videoGridItem .details {
    /* 760 */
    max-width: 157px !important;
    flex: 1 !important;
}
#notificationTable .videoGridItem .details,
#requestStatusTable .videoGridItem .details {
    /* 700 */
    width: unset !important;
}

/* 4. class="title": */
#notificationTable .videoGrid.large .videoGridItem .details .title,
#requestStatusTable .videoGrid.large .videoGridItem .details .title {
    /* 765 */
    font-size: 14px !important;
    line-height: 24px !important;
}
#notificationTable .videoGridItem .details .title,
#requestStatusTable .videoGridItem .details .title {
    /* 714 */
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 15px !important;
}

/* 5. class="username": */
#notificationTable .videoGridItem .details .username, .videoGridItem .details .stats,
#requestStatusTable .videoGridItem .details .username, .videoGridItem .details .stats {
    /* 725 */
    font-size: 12px !important;
}

/* 9. class="description": */
#notificationTable .videoGridItem .details .description,
#requestStatusTable .videoGridItem .details .description {
    /* 770 */
    font-size: 12px !important;
}

/* ..............Video grid notification::ENDS........... */



#privilegesCard .card-title,
#requestStatusCard .card-title{
    display: inline-block !important;
}
#privilegesCard .card-tools,
#requestStatusCard .card-tools{
    position: absolute !important;;
    display: inline-block !important;;
    right: 24px !important;;
}
#privilegesCard,#requestStatusCard{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.checkAllRoles{
    position: absolute !important;
    left: 29px !important;
}
.checkAllRoles input{
    margin-right: 8px !important;
}
    
.assignRolesCards{
    box-shadow:
    0px 1.5px 2.2px rgba(0, 0, 0, 0.039),
    0px 3.7px 5.3px rgba(0, 0, 0, 0.057),
    0px 7px 10px rgba(0, 0, 0, 0.07),
    0px 12.5px 17.9px rgba(0, 0, 0, 0.083),
    0px 23.4px 33.4px rgba(0, 0, 0, 0.101),
    0px 56px 80px rgba(0, 0, 0, 0.14)
    ;
    width: 100% !important;

}
.normalUserInfo{
    margin-right: 1px !important;
    margin-left: 1px !important;
}




/* =======================================================
   YOUTUBE SHORTS STYLES (FINAL FIXED VERSION)
   ======================================================= */

/* -------------------------------------------------------
   1. БЛОК SHORTS НА ГЛАВНОЙ (ГОРИЗОНТАЛЬНЫЙ)
   ------------------------------------------------------- */

.shortsSection {
max-width: 100vw;

    display: block;
    width: 100%;
    clear: both;
    background: #fff;

    margin-bottom: 20px;
}

.shortsTitle {
    font-size: 20px;
    font-weight: 700;
    margin-left: 24px;
    margin-bottom: 20px;
    color: #0f0f0f;
    display: flex;
    align-items: center;
}

.shortsTitle::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background-image: url('../images/icons/explore.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    /* Красный фильтр для иконки */
    filter: invert(16%) sepia(70%) saturate(6447%) hue-rotate(357deg) brightness(97%) contrast(116%);
}

.shortsGridHorizontal {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    gap: 15px !important;
    padding-bottom: 20px !important;
    padding-left: 0px !important;
    float: none !important;
    height: auto !important;
    min-height: 380px; 
}

/* Карточка видео в списке */
.shortsGridHorizontal .videoGridItem {
    float: none !important;
    display: block !important;
    flex: 0 0 210px !important; /* Фиксированная ширина */
    width: 210px !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer;
    transition: transform 0.2s;
}

.shortsGridHorizontal .videoGridItem:hover {
    transform: scale(1.02);
}

/* Превью (Картинка) */
.shortsGridHorizontal .videoGridItem .thumbnail {
    width: 100% !important;
    height: 374px !important; /* Пропорция 9:16 */
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000;
}

.shortsGridHorizontal .videoGridItem .thumbnail img,
.shortsGridHorizontal .videoGridItem .thumbnail video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

/* Скрываем длительность на превью шортсов */
.shortsGridHorizontal .videoGridItem .thumbnail .duration {
    display: none !important;
}

/* Детали (Заголовок) */
.shortsGridHorizontal .videoGridItem .details {
    padding: 10px 0 0 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.shortsGridHorizontal .videoGridItem .details .title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #0f0f0f !important;
    margin: 0 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    max-height: 44px !important;
}

/* Скрываем лишние элементы в списке Shorts */
.shortsGridHorizontal .videoGridItem .username,
.shortsGridHorizontal .videoGridItem .description,
.shortsGridHorizontal .videoGridItem .stats,
.shortsGridHorizontal .videoGridItem .viewCount,
.shortsGridHorizontal .videoGridItem .timeStamp {
    display: none !important;
}

/* Скроллбар */
.shortsGridHorizontal::-webkit-scrollbar {
    height: 8px;
}
.shortsGridHorizontal::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.shortsGridHorizontal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.shortsGridHorizontal::-webkit-scrollbar-thumb:hover {
    background: #999;
}


/* =======================================================
   YOUTUBE SHORTS - FIXED LAYOUT
   ======================================================= */

/* Сброс страницы */
body.shorts-page-body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
    overflow: hidden !important; /* Убираем скролл у самой страницы */
    height: 100vh;
    width: 100vw;
}

/* Общая обертка: Центрирует видео и кнопки */
.shortsPageWrapper {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

/* 1. Контейнер с видео (Скроллится) */
.shortsScrollContainer {
    width: 450px; /* Фиксированная ширина плеера (как телефон) */
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    
    /* Скрываем скроллбар */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    
    /* Относительное позиционирование для внутренних элементов */
    position: relative; 
}
.shortsScrollContainer::-webkit-scrollbar { display: none; }

/* 2. Контейнер навигации (НЕПОДВИЖНЫЙ) */
.navigation-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 20px; /* Отступ от видео */
    z-index: 100;
    /* Центрирование по вертикали */
    justify-content: center;
    height: 100%; 
}

/* Круглые кнопки навигации */
.navCircleBtn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* Цвет фона чуть светлее черного */
    background-color: rgba(50, 50, 50, 1); 
    border: none;
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}
.navCircleBtn:hover {
    background-color: rgba(80, 80, 80, 1);
}

/* --- Стили Видео --- */
.shortVideo {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shortVideo video {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: contain; /* Вписываем видео, черный фон */
    display: block;
}

/* Оверлей */
.shortVideoOverlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%);
    pointer-events: none;
}

/* Кнопки действий (Лайк, Коммент) - ВНУТРИ ВИДЕО, СПРАВА */
.shortVideoControls {
    position: absolute;
    right: 10px;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    pointer-events: auto;
}

.controlBtn {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

.controlBtn .icon {
    width: 48px;
    height: 48px;
    background-color: rgba(50, 50, 50, 0.7); /* Темно-серый полупрозрачный */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin-bottom: 4px;
}

.controlBtn .text {
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Инфо панель (Слева снизу) */
.shortVideoDetails {
    position: absolute;
    bottom: 20px;
    left: 16px;
    right: 70px;
    pointer-events: auto;
    text-align: left;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.channelInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.shortChannelImg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
}

.shortChannelName {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.shortSubscribeBtn .subscribe {
    background-color: #fff !important;
    color: #000 !important;
    border: none;
    padding: 6px 14px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.shortSubscribeBtn .unsubscribe {
    background-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

.shortVideoTitle {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Кнопка "Домой" */
.homeButton {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(50,50,50,0.7);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

/* Адаптив: на мобильном скрываем боковые стрелки (там есть свайп) */
@media (max-width: 768px) {
    .navigation-container {
        display: none;
    }
    .shortsScrollContainer {
        width: 100%;
    }
}


    #mainContentContainer {
        padding: 0px 20.5px;
        display: flex;
        flex: 1;
        padding-block: 4px;
        flex-direction: column !important;
    }


/* =======================================================
   СТИЛИ ДЛЯ АВАТАРКИ И ТЕКСТА (VideoGridItem)
   ======================================================= */

/* Делаем блок .details гибким контейнером (строка) */
.videoGridItem .details {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding-top: 12px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Левая часть: Аватарка */
.videoGridItem .details .left {
    width: 43px !important;
    min-width: 43px !important;
    margin-right: 10px !important;
    display: block !important;
}

/* Сама картинка */
.videoGridItem .details .profilePicture {
    width: 43px !important;
    height: 43px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* Правая часть: Весь текст */
.videoGridItem .details .right {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Заголовок */
.videoGridItem .details .title {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #0f0f0f !important;
    max-height: 40px !important;
    overflow: hidden !important;
    display: block !important;
}

/* Никнейм и статистика */
.videoGridItem .details .username, 
.videoGridItem .details .stats {
    font-size: 12px !important;
    color: #606060 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* --- СКРЫВАЕМ АВАТАРКУ В SHORTS --- */
/* В блоке шортс на главной аватарка не нужна, там свой стиль */
.shortsGridHorizontal .videoGridItem .details .left {
    display: none !important;
}




.videoGrid > a { display: block !important; }

@media screen and (min-width: 1024px) {
    /* Контейнер: в ряд, без скролла */
    .shortsGridHorizontal {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important; /* Прячем полосу прокрутки */
        width: 100% !important;
        gap: 10px !important; /* Зазор между шортсами */
        padding-right: 0px !important; /* Отступ справа как слева */
    }

    /* Элементы: Растягиваем равномерно (flex: 1) */
    .shortsGridHorizontal > a {
        flex: 1 !important; /* Занимать все доступное место поровну */
        width: auto !important; /* Сбрасываем фикс. ширину */
        max-width: none !important;
        min-width: 0 !important; /* Важно для flexbox, чтобы не вылезало */
    }

    /* Карточка внутри */
    .shortsGridHorizontal .videoGridItem {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Картинка: Адаптируется по высоте 9:16 от ширины */
    .shortsGridHorizontal .videoGridItem .thumbnail {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 11 / 16 !important;
        object-fit: cover !important;
    }
}



@media screen and (max-width: 768px) {
.videoGridItem .thumbnail img {
    border-radius: 0px !important;
}
}


.top-video-grid{
margin-top: 0px;
}