/* Классы шрифтов */
.tf2-build {
    font-family: 'tf2build', sans-serif;
    color: #ff6b35;
}

.tf2-secondary {
    font-family: 'tf2secondary', sans-serif;
    color: #766e65;
}

.regular-text {
    font-family: 'bankGotic', sans-serif;
}

/* Основные цвета в стиле официального сайта TF2 (light theme) */
:root {
    --tf2-orange: #b35215;
    --tf2-orange-dark: #b35215c9;
    --tf2-grey: #666666;
    --tf2-grey-dark: #333333;
    --tf2-light-bg: #f5f5f5;
    --tf2-light-card: #ffffff;
    --tf2-border: #e0e0e0;
    --tf2-text: #333333;
    --tf2-text-light: #666666;
    --tf2-orange-light: #ff6b35;
    --tf2-teal: #766e65;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--tf2-light-bg);
    color: var(--tf2-text);
    font-family: 'bankGotic', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.logo-icon {
    font-size: 24px;
    width: 52px;
    height: 52px;
}

/* Боковое меню */
#sidebar {
    width: 250px;
    min-height: 100vh;
    background: linear-gradient(180deg, #ffffff, #f8f9fa);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    border-right: 3px solid var(--tf2-orange);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}

#sidebar.collapsed {
    width: 70px;
}

#sidebar.collapsed .nav-text {
    display: none !important;
}

#sidebar.collapsed .logo-text {
    display: none !important;
}

#sidebar.collapsed .collapse-btn i {
    transform: rotate(180deg);
}

/* Логотип */
.sidebar-logo {
    padding: 20px 15px 20px 10px;
    border-bottom: 2px solid var(--tf2-orange-dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--tf2-light-card);
}

.logo-text {
    font-size: 24px;
    color: var(--tf2-orange-dark);
    margin-left: 10px;
    transition: opacity 0.3s;
}

#sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;
}

/* Кнопки навигации */
.nav-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 40px;
}

.nav-item {
    margin-bottom: 5px;
}

.nav-link {
    color: var(--tf2-text);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
    border-left: 4px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.nav-link:hover {
    background-color: rgba(198, 35, 40, 0.08);
    color: var(--tf2-orange-dark);
    border-left-color: var(--tf2-orange);
}

.nav-link.active {
    background-color: rgba(27, 107, 176, 0.08);
    color: var(--tf2-grey-dark);
    border-left-color: var(--tf2-grey);
}

.nav-icon {
    font-size: 20px;
    width: 30px;
    text-align: center;
    min-width: 30px;
}

.nav-text {
    margin-left: 10px;
    font-size: 16px;
    transition: opacity 0.3s;
}

#sidebar.collapsed .nav-text {
    opacity: 0;
    width: 0;
}

/* Кнопка сворачивания */
.collapse-btn {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    color: var(--tf2-text-light);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--tf2-light-card);
    border-top: 1px solid var(--tf2-border);
}

.collapse-btn:hover {
    color: var(--tf2-orange);
    background-color: rgba(198, 35, 40, 0.05);
}

.collapse-btn i {
    min-width: 30px;
    text-align: center;
    transition: transform 0.3s;
}

.collapse-btn-text {
    margin-left: 10px;
    transition: opacity 0.3s;
}

#sidebar.collapsed .collapse-btn-text {
    opacity: 0;
    width: 0;
}

/* Основное содержимое */
#content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 250px;
    padding: 20px;
    transition: all 0.3s ease;
    background-color: var(--tf2-light-bg);
    min-height: calc(100vh - 70px);
}

#content.expanded {
    margin-left: 70px;
}

#createMemSection {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: -20px;
}

#createMemSection #holst {
    flex: 1;
    min-height: 400px;
    /* margin-bottom: 10px; */
}

/* Скрываем подвал на странице создания мема */
body:has(#createMemSection:not(.d-none)) .tf2-card.mt-4 {
    display: none !important;
}

/* Настраиваем высоту контента когда активна страница создания мема */
body:has(#createMemSection:not(.d-none)) #content {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

/* Адаптивность */
@media (max-width: 768px) {
    #createMemSection #holst {
        min-height: 300px;
    }

    #content {
        padding: 7px;
    }
}

@media (max-width: 480px) {
    #content {
        min-height: calc(100vh - 70px);
    }
}

@media (max-width: 480px) {
    body:has(#createMemSection:not(.d-none)) #content {
        min-height: calc(100vh - 70px);
    }
}

/* Поиск */
#search {
    margin-bottom: 12px;
    padding: 0;
}

/* Иконка профиля */
#profileGroup {
    margin-bottom: 6px;
}

/* Заголовки */
.page-title {
    border-bottom: 2px solid var(--tf2-orange);
    padding-bottom: 0px;
    margin-bottom: 10px;
}

/* Карточки контента */
.tf2-card {
    background-color: var(--tf2-light-card);
    border: 1px solid var(--tf2-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tf2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--tf2-grey);
}

/* -------------------------------------------------- */

/* .tf2-card-no-hover {
    background-color: var(--tf2-light-card);
    border: 1px solid var(--tf2-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} */

/* -------------------------------------------------- */

/* Кнопки */
.btn {
    transition: all 0.3s;
}

.btn-outline-secondary {
    color: var(--tf2-text);
    border-color: var(--tf2-border);
}

.btn-outline-secondary:hover {
    background-color: var(--tf2-grey);
    border-color: var(--tf2-grey);
    color: white;
}

.btn-outline-secondary.active {
    background-color: var(--tf2-orange);
    border-color: var(--tf2-orange);
    color: white;
}

.btn-outline-warning {
    color: var(--tf2-orange-light);
    border-color: var(--tf2-orange-light);
}

.btn-outline-warning:hover {
    background-color: var(--tf2-orange-light);
    border-color: var(--tf2-orange-light);
    color: white;
}

.btn-outline-info {
    color: var(--tf2-teal);
    border-color: var(--tf2-teal);
}

.btn-outline-info:hover {
    background-color: var(--tf2-teal);
    border-color: var(--tf2-teal);
    color: white;
}

#sortSelect {
    width: 160px;
    padding: 6px 0px 6px 12px;
}

#btnReverseSort {
    height: 38px;
    margin: 4px;
}

@media (max-width: 480px) {
    #sortSelect {
        width: 147px;
        padding: 6px 0px 6px 3px;
    }

    .page-title {
        margin-bottom: 2px;
    }

    #search {
        margin-bottom: 5px;
    }

    #author-name {
        font-size: 12px;
    }

    #author-data {
        font-size: 8px;
    }
}


#stats-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 40px;
}

.vote-buttons {
    display: flex;
    gap: 7px;
    margin-top: 3px;
    margin-right: 30px;
}

@media (max-width: 768px) {
    #author-avatar.pin-author-avatar {
        width: 40px;
        height: 40px;
    }

    #met.pin-meta {
        margin-bottom: 0;
    }

    #info.pin-info {
        margin-top: 0;
    }

    #vote.vote-buttons {
        margin-top: 3px;
        margin-right: 10px;
    }

    #stats-box {
        gap: 7px;
        margin-right: 15px;
    }

    @media (max-width: 480px) {
        #author-avatar.pin-author-avatar {
            width: 35px;
            height: 35px;
        }

        #stats-box {
            gap: 5px;
            margin-right: 3px;
        }

        /* Кнопки лайков/дизлайков */
        #vote.vote-buttons {
            gap: 0px;
            margin-top: 0px;
            margin-right: 2px;
        }
    }
}



@media (max-width: 930px) {
    #zad.back-to-feed-btn {
        width: 44px;
        padding: 10px 12px;
        margin: 5px;
    }

    @media (max-width: 480px) {
        #zad.back-to-feed-btn {
            width: 30px;
            padding: 4px 6px;
            margin: 5px;
        }
    }
}

/* Стили для ленты пинов */
.pin-card {
    background-color: var(--tf2-light-card);
    border: 2px solid var(--tf2-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    /* Уменьшил отступ снизу */
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    break-inside: avoid;
    /* Предотвращает разрыв карточек между колонками */
    page-break-inside: avoid;
    /* Для старых браузеров */
}

.pin-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--tf2-light-bg);
}

.pin-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.pin-card:hover .pin-image {
    transform: scale(1.05);
}

.pin-duration {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

/* Разделительная линия и нижняя часть карточки */
.pin-divider {
    height: 1px;
    background-color: var(--tf2-border);
    margin: 0;
}

.pin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 7px;
    min-height: 20px;
}

.pin-title-small {
    font-family: 'tf2secondary', sans-serif;
    color: var(--tf2-text);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 28px);
}

.pin-save-btn {
    background: none;
    border: none;
    color: var(--tf2-text-light);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 2px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pin-save-btn:hover {
    color: var(--tf2-orange);
    background-color: rgba(179, 82, 21, 0.1);
}

/* Кнопка скачивания */

.pin-download-btn:hover {
    color: var(--tf2-orange);
}

/* отступ между кнопками */
.pin-actions {
    display: flex;
    gap: 4px;
    /* Маленький отступ между кнопками */
}

.pin-action-btn {
    background: none;
    border: none;
    color: var(--tf2-text-light);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 2px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pin-action-btn:hover {
    color: var(--tf2-orange);
    background-color: rgba(179, 82, 21, 0.1);
}

/* Многострочная сетка (ступеньки) */
.pins-container {
    column-gap: 8px;
    /* Уменьшил расстояние между колонками */
    padding: 0 4px;
}

/* Убираем лишние отступы у контейнера с пинами */
#pinsFeed {
    margin-left: -4px;
    margin-right: -4px;
}

/* Контейнер для медиа */
.pin-media-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--tf2-light-bg);
    flex-shrink: 0;
    cursor: pointer;
}

/* Медиа-элементы (видео, GIF, изображения) */
.pin-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 10px 10px 0 0;
}

/* Для видео и GIF */
.pin-video,
.pin-gif {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* При наведении на видео */
.pin-card:hover .pin-video:not([data-playing="true"]) {
    transform: scale(1.02);
}

/* При наведении на изображение */
.pin-card:hover .pin-media:not(.pin-video):not(.pin-gif) {
    transform: scale(1.02);
}

/* Для GIF при наведении */
.pin-card:hover .pin-gif {
    transform: scale(1.02);
}

/* Индикатор что это GIF */
.pin-gif-label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
}


/* Мобильные: 2 колонки */
@media (max-width: 768px) {

    .pins-container {
        column-count: 2;
        column-gap: 6px;
        /* Еще меньше на мобильных */
    }

    .pin-card {
        margin-bottom: 6px;
        border-radius: 10px;
        border-width: 1px;
    }

    .pin-title-small {
        font-size: 11px;
    }

    .pin-save-btn {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .pin-action-btn {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .pin-title-small {
        font-size: 11px;
        max-width: calc(100% - 55px);
    }

    .pin-actions {
        gap: 1px;
    }

    .pin-duration {
        top: 6px;
        right: 6px;
        font-size: 10px;
        padding: 1px 4px;
    }

}

/* Планшеты: 3 колонки */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .pins-container {
        column-count: 3;
        column-gap: 8px;
    }
}

/* Десктопы с развернутым меню (250px): 5-6 колонок */
@media (min-width: 1200px) {
    #sidebar:not(.collapsed)+#content .pins-container {
        column-count: 5;
        /* 5 колонок при развернутом меню */
        column-gap: 10px;
    }

    /* Десктопы со свернутым меню (70px): 6-7 колонок */
    #sidebar.collapsed+#content .pins-container {
        column-count: 6;
        /* 6 колонок при свернутом меню */
        column-gap: 10px;
    }
}

/* Большие экраны: еще больше колонок */
@media (min-width: 1400px) {
    #sidebar:not(.collapsed)+#content .pins-container {
        column-count: 6;
        /* 6 колонок */
    }

    #sidebar.collapsed+#content .pins-container {
        column-count: 7;
        /* 7 колонок */
    }
}

/* Очень большие экраны */
@media (min-width: 1800px) {
    #sidebar:not(.collapsed)+#content .pins-container {
        column-count: 7;
        /* 7 колонок */
    }

    #sidebar.collapsed+#content .pins-container {
        column-count: 8;
        /* 8 колонок */
    }
}

/* Мобильные адаптации для меню */
@media (max-width: 930px) {

    .sidebar-logo {
        padding: 15px 10px 15px 3px;
    }

    /* В мобильной версии меню всегда остается сбоку, но свернуто */
    #sidebar {
        width: 60px !important;
        z-index: 1000;
    }

    #sidebar:not(.collapsed) {
        width: 250px !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.15);
    }

    #content {
        margin-left: 70px !important;
        width: calc(100% - 70px);
    }

    #sidebar:not(.collapsed)+#content {
        margin-left: 250px !important;
    }

    /* Улучшаем отображение на маленьких экранах */
    .collapse-btn-text {
        font-size: 14px;
    }

    .nav-text {
        font-size: 14px;
    }

    /* Увеличиваем область клика для пунктов меню на мобильных */
    .nav-link {
        padding: 10px;
    }

    /* Делаем меню более компактным на очень маленьких экранах */
    @media (max-width: 480px) {
        #sidebar {
            width: 50px !important;
        }

        #sidebar:not(.collapsed) {
            width: 170px !important;
        }

        .sidebar-logo {
            padding: 15px 10px 15px 3px;
        }

        #content {
            margin-left: 60px !important;
            padding: 10px;
            /* -------------------------------------------------- */
        }

        #sidebar:not(.collapsed)+#content {
            margin-left: 200px !important;
        }

        .nav-icon {
            font-size: 18px;
        }

        .logo-icon {
            font-size: 14px;
            width: 42px;
            height: 42px;
        }

        .pin-title-small {
            font-size: 9px;
        }

        #memoklepator {
            font-size: 25px;
        }

        .nav-link {
            padding: 7px;
        }

    }
}

/* Стили для checkboxes */
.form-check-input:checked {
    background-color: var(--tf2-orange);
    border-color: var(--tf2-orange);
}

.form-check-input:focus {
    border-color: var(--tf2-grey);
    box-shadow: 0 0 0 0.25rem rgba(27, 107, 176, 0.25);
}

.form-check-label {
    color: var(--tf2-text);
}

/* Секция просмотра пина */
#pinInfoSection {
    padding: 0;
}

.pin-view-container {
    background-color: var(--tf2-light-card);
    border-radius: 12px;
    border: 1px solid var(--tf2-border);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Основная часть с пином */
.pin-main-content {
    padding: 25px;
}

.pin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--tf2-border);
}

.pin-title-large {
    font-family: 'tf2secondary', sans-serif;
    font-size: 28px;
    color: var(--tf2-grey-dark);
    margin: 0;
    max-width: 70%;
}

.pin-actions-large {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Медиа в полном размере */
.pin-media-full {
    width: 75%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 12px;
    background-color: var(--tf2-light-bg);
    margin-bottom: 20px;
    margin-left: 12%;
}

/* Информация о пине */
.pin-info {
    margin-top: 25px;
}

.pin-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pin-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pin-author-avatar {
    /* width: 52px;
    height: 52px; */
    border-radius: 50%;
    border: 2px solid var(--tf2-orange);
}

#author-avatar {
    width: 52px;
    height: 52px;
}

.pin-author-info h4 {
    font-family: 'tf2secondary', sans-serif;
    margin: 0;
    color: var(--tf2-grey-dark);
    font-size: 16px;
}

.pin-author-info p {
    font-family: 'bankGotic', sans-serif;
    margin: 0;
    color: var(--tf2-text-light);
    font-size: 12px;
}

.pin-stats {
    display: flex;
    gap: 15px;
}

.pin-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pin-stat-value {
    font-family: 'tf2build', sans-serif;
    font-size: 24px;
    color: var(--tf2-orange);
}

.pin-stat-label {
    font-family: 'bankGotic', sans-serif;
    font-size: 12px;
    color: var(--tf2-text-light);
    text-transform: uppercase;
}



/* Кнопки лайков/дизлайков */
.vote-buttons {
    display: flex;
    gap: 7px;
    margin-top: 3px;
}

.vote-btn {
    background: none;
    border: 2px solid var(--tf2-border);
    border-radius: 25px;
    padding: 8px 12px;
    font-family: 'bankGotic', sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s;
    cursor: pointer;
}

.vote-btn:hover {
    transform: translateY(-2px);
}

.vote-btn.like {
    color: #4CAF50;
    border-color: #4CAF50;
}

.vote-btn.like:hover {
    background-color: rgba(76, 175, 80, 0.1);
}

.vote-btn.like.active {
    background-color: #4CAF50;
    color: white;
}

.vote-btn.dislike {
    color: #F44336;
    border-color: #F44336;
}

.vote-btn.dislike:hover {
    background-color: rgba(244, 67, 54, 0.1);
}

.vote-btn.dislike.active {
    background-color: #F44336;
    color: white;
}

.vote-btn i {
    font-size: 18px;
}

/* Секция комментариев */
.comments-section {
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--tf2-border);
}

.comments-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--tf2-border);
}

.comments-title {
    font-family: 'tf2secondary', sans-serif;
    font-size: 22px;
    color: var(--tf2-grey-dark);
    margin: 0;
}

/* Форма добавления комментария */
.comment-form {
    margin-bottom: 30px;
}

.comment-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.comment-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--tf2-orange);
    flex-shrink: 0;
}

.comment-input-container {
    flex: 1;
    position: relative;
}

.comment-textarea {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    border: 2px solid var(--tf2-border);
    border-radius: 12px;
    resize: vertical;
    font-family: 'bankGotic', sans-serif;
    font-size: 14px;
    transition: border-color 0.3s;
}

.comment-textarea:focus {
    outline: none;
    border-color: var(--tf2-orange);
}

.comment-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.comment-submit-btn {
    background-color: var(--tf2-orange);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 30px;
    font-family: 'tf2secondary', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.comment-submit-btn:hover {
    background-color: var(--tf2-orange-dark);
    transform: translateY(-2px);
}

.comment-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Список комментариев */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-item {
    background-color: var(--tf2-light-card);
    border-radius: 12px;
    border: 1px solid var(--tf2-border);
    padding: 20px;
    transition: all 0.3s;
}

.comment-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tf2-border);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-author-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.comment-author-info h4 {
    font-family: 'tf2secondary', sans-serif;
    margin: 0;
    color: var(--tf2-grey-dark);
    font-size: 14px;
}

.comment-author-info p {
    font-family: 'bankGotic', sans-serif;
    margin: 0;
    color: var(--tf2-text-light);
    font-size: 11px;
}

.comment-time {
    font-family: 'bankGotic', sans-serif;
    font-size: 12px;
    color: var(--tf2-text-light);
}

.comment-content {
    margin-bottom: 15px;
}

.comment-text {
    font-family: 'bankGotic', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf2-text);
    margin: 0;
}

.comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-vote-buttons {
    display: flex;
    gap: 8px;
}

.comment-vote-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.3s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-vote-btn.like {
    color: var(--tf2-text-light);
}

.comment-vote-btn.like:hover {
    color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

.comment-vote-btn.like.active {
    color: #4CAF50;
}

.comment-vote-btn.dislike {
    color: var(--tf2-text-light);
}

.comment-vote-btn.dislike:hover {
    color: #F44336;
    background-color: rgba(244, 67, 54, 0.1);
}

.comment-vote-btn.dislike.active {
    color: #F44336;
}

.comment-reply-btn {
    background: none;
    border: none;
    color: var(--tf2-text-light);
    font-family: 'bankGotic', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.3s;
}

.comment-reply-btn:hover {
    color: var(--tf2-orange);
}

/* Кнопка возврата */
.back-to-feed-btn {
    background-color: var(--tf2-orange);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 25px;
    font-family: 'tf2secondary', sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    /* margin-bottom: 20px; */
}

.back-to-feed-btn:hover {
    background-color: var(--tf2-orange-dark);
    transform: translateY(-2px);
}

.row>* {
    padding-right: 0;
    padding-left: 0;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {

    .pin-stats {
        gap: 7px;
    }

    .pin-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }

    .pin-stat-value {
        font-family: 'tf2build', sans-serif;
        font-size: 16px;
        color: var(--tf2-orange);
    }

    .pin-stat-label {
        font-family: 'bankGotic', sans-serif;
        font-size: 7px;
        color: var(--tf2-text-light);
        text-transform: uppercase;
    }

    .pin-main-content,
    .comments-section {
        padding: 15px;
    }

    .pin-title-large {
        font-size: 20px;
    }

    .pin-meta {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 15px;
    }

    .comment-form-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .comment-submit-btn {
        width: 100%;
    }

    .pin-media-full {
        width: 100%;
        max-height: 400px;
        margin-left: unset;
    }

    @media (max-width: 480px) {
        .pin-stats {
            gap: 3px;
        }

        .pin-meta {
            gap: 0px;
        }

        .pin-stat-label {
            font-size: 5px;
        }

        .pin-title-large {
            font-size: 16px;
        }

        .pin-header {
            margin-bottom: 12px;
            padding-bottom: 5px;
        }

        .pin-media-full {
            margin-bottom: 10px;
        }

        .comments-title {
            font-size: 16px;
        }

        .comments-header {
            margin-bottom: 15px;
            padding-bottom: 5px;
        }

        .comment-avatar {
            width: 30px;
            height: 30px;
        }

        .comment-header {
            margin-bottom: 6px;
            padding-bottom: 3px;
        }

        .comment-item {
            padding: 10px;
        }

        .comments-section {
            padding: 10px;
        }

        .vote-btn {
            border: none;
            border-radius: 15px;
            padding: 3px 6px;
        }

        .comment-textarea {
            min-height: 70px;
            padding: 7px;
            border-radius: 8px;
        }
    }
}

.flex-shrink-0 {
    display: flex;
    flex-direction: row;
}

.flex-shrink-0 button {
    margin-right: 10px;
}

/* Стили для кнопок табов авторизации*/
.btn-outline-info.tf2-secondary.active {
    background-color: var(--tf2-orange-light);
    color: white;
    border-color: var(--tf2-orange-light);
}

/* Стили для кнопок табов авторизации*/
.btn-outline-info.tf2-secondary {
    margin: 3px;
    max-width: 140px;
    min-width: 100px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .btn-outline-info.tf2-secondary {
        max-width: 95px;
        min-width: 60px;
        height: 28px;
        font-size: 10px;
    }

    @media (max-width: 480px) {
        .btn-outline-info.tf2-secondary {
            max-width: 75px;
            min-width: 50px;
            height: 22px;
            font-size: 8px;
        }
    }
}

/* Адаптивность для страницы авторизации*/
@media (max-width: 768px) {
    #authSection .col-md-6 {
        width: 90% !important;
    }
}

@media (max-width: 580px) {
    #profileSection .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        animation: blockAnimation 10s linear infinite;
    }
}



@keyframes blockAnimation {
    0% {
        transform: translateX(100%);
    }

    25% {
        transform: translateX(-50%);
    }

    50% {
        transform: translateX(-200%);
    }

    75% {
        transform: translateX(-350%);
    }

    100% {
        transform: translateX(-500%);
    }
}

.footer {
    width: 100%;
    background-color: var(--tf2-orange-dark);
    border-style: double;
    border-color: var(--tf2-teal);
    display: flex;
    justify-content: space-around;
}

.footer p {
    margin-top: 20px;
    color: var(--tf2-light-bg);
}

#homeSection {
    flex: 1;
}

#profileSection {
    flex: 1;
}

#moderationSection {
    flex: 1;
}

#authSection {
    flex: 1;
}

#grrrr {
    width: 25px;
    margin: 15px;
}

#canvas {
    border: 5px solid #666666;
}








/* для слайдера в регистрации*/
#funnyAuthorisationButtonsDiv {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  gap: 0px;
  animation: scroll linear infinite; /* Убрали время отсюда */
}

/* При наведении замедляем или останавливаем */
.slider-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}