.card {
    border: none;
    transition: transform 0.3s ease;
}

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

.card-img-top {
    height: 180px;
    object-fit: cover;
}

.card-title {
    font-size: 1rem;
}

.card-text {
    font-size: 0.875rem;
}
.videoPlayer {
    background: #000;
    border-radius: 5px;
    overflow: hidden;
}

textarea {
    resize: none;
}

.recommendedVideo img {
    object-fit: cover;
    width: 120px;
    height: 90px;
    border-radius: 5px;
}

.recommendedVideo h6 {
    font-size: 0.9rem;
    margin: 0;
}

form {
    max-width: 600px;
    margin: 0 auto;
}

textarea {
    resize: none;
}
.card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.video-thumbnail {
    text-decoration: none;
}

.video-thumbnail:hover .card-title {
    text-decoration: underline;
}

.video-thumbnail video {
    transition: transform 0.3s ease;
}

.video-thumbnail video:hover {
    transform: scale(1.05);
}
.videoPlayer video {
    max-height: 480px;
    width: 100%;
    object-fit: contain;
}
form.mb-3 {
    margin-left: 0;
}
.videoPlayer {
    max-height: 480px; /* Ограничиваем высоту контейнера */
    overflow: hidden; /* Скрываем выходящие за границы части */
}

.video-container {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Подгоняем размер с обрезкой */
}
#comment-form {
    margin-left: 0; /* Убираем отступы */
    max-width: 100%;
    display: block; /* Блок для растягивания по ширине */
}

h5 {
    margin-bottom: 15px; /* Регулируем отступы */
    line-height: 1.6;
}

textarea {
    margin-top: 10px; /* Убираем сдвиг textarea */
}
.navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.video-thumbnail video {
    transition: transform 0.3s;
}

.video-thumbnail:hover video {
    transform: scale(1.05);
}

.video-container {
    position: relative;
    width: 100%;
    /*max-height: 400px;*/
    overflow: hidden;
}
.aspect-ratio-16by9 {
    position: relative;
    width: 100%;
    /* Убираем background: black; чтобы не заливать весь контейнер чёрным */
    padding-top: 56.25%; /* (9/16) * 100% */
    overflow: hidden;
}

/* Само видео растягивается по контейнеру */
.aspect-ratio-16by9 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* показываем всё видео целиком */
    background-color: black;
    /* чёрный цвет будет виден только в «пустых» зонах (если видео вертикальное) */
}

/* Изображения внутри контейнера занимают всю его площадь
   и масштабируются с сохранением пропорций (contain) */
.aspect-ratio-16by9 img.preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: black;
}

/* Можно добавить анимацию смены превью, если требуется */
.aspect-ratio-16by9 img.animated {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.aspect-ratio-16by9:hover img.animated {
    opacity: 1;
}
.aspect-ratio-16by9:hover img.static {
    opacity: 0;
}
.aspect-ratio-16by9-no-padding {
    position: relative;
    width: 100%;
    /* padding-top: убрали */
    /* пусть высота идет «по содержимому» */
    height: auto;
}

.aspect-ratio-16by9-no-padding video {
    /* отменяем absolute/100%-й растягиважки */
    position: static !important;

    /* видео по ширине 100%, а высота — auto */
    width: 100% !important;
    height: auto !important;

    /* чтобы панель управления была видна */
    object-fit: contain;

    /* не больше чем видимая часть экрана */
    max-height: 100vh;
}


/*.video-controls {*/
/*    position: absolute;*/
/*    bottom: 10px;*/
/*    left: 10px;*/
/*    right: 10px;*/
/*    background: rgba(0, 0, 0, 0.7);*/
/*    color: #fff;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    padding: 5px;*/
/*}*/

/*.video-controls button,*/
/*.video-controls input {*/
/*    background: none;*/
/*    border: none;*/
/*    color: white;*/
/*    font-size: 1rem;*/
/*    margin: 0 5px;*/
/*}*/

/*.video-controls input[type="range"] {*/
/*    flex-grow: 1;*/
/*    margin: 0 10px;*/
/*}*/

footer ul {
    padding: 0;
}
footer ul li {
    margin-bottom: 5px;
}
footer ul li a:hover {
    text-decoration: underline;
}

/* Пример несложных доработок стиля под «светлую/серую» тему */
nav.navbar {
    background-color: #999; /* rgb(153, 153, 153) */
}
/* Делает иконку «гамбургер» (toggler) более заметной на сером фоне */
.navbar-toggler {
    border: none;
}
.navbar-toggler-icon {
    filter: invert(1);
}

/* Пример стилизации кнопок категорий под «чипы» */
.category-chips-container {
    background-color: #f0f0f0; /* Светло-серый блок под кнопками */
}
.category-chip {
    border-radius: 999px; /* «Пилюля» */
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    transition: background-color 0.2s;
}
.category-chip:hover {
    background-color: #e6e6e6;
    text-decoration: none;
    color: #333;
}
@media (max-width: 992px) {
    .navbar-collapse {
        text-align: center; /* Центрирует элементы внутри коллапса на экранах < 992px */
    }
    .navbar-nav {
        margin: 0 auto; /* При необходимости - ещё больше выравнивания */
    }
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem; /* Добавим небольшой отступ между пунктами меню */
    }
    /* При желании можно задать ширину/центровку формы поиска */
    .navbar-collapse form.d-flex {
        flex-direction: column;
        align-items: center;
    }
    .navbar-collapse form.d-flex input[type="text"] {
        width: 80%; /* Растягиваем поле на мобильном */
        margin-bottom: 0.5rem;
    }
    .navbar-collapse form.d-flex button {
        width: auto; /* Кнопка по содержимому */
    }
}

/* Убираем подчёркивание у кнопок-категорий */
.category-chip {
    text-decoration: none !important;
}
.category-chip:hover,
.category-chip:focus {
    text-decoration: none !important;
}

.video-actions .btn {
    border: none;
    background-color: #f9f9f9;
    color: #555;
    transition: background-color 0.2s;
}
.video-actions .btn:hover {
    background-color: #eaeaea;
}
.video-actions .btn i {
    font-size: 1.1rem; /* Чуть больше размер иконки */
    vertical-align: middle;
}

.breadcrumb {
    background-color: #f8f9fa; /* Светло-серый фон */
    border-radius: 0.25rem;    /* Немного скруглённые углы */
    padding: 0.75rem 1rem;    /* Отступы сверху/снизу и слева/справа */
    margin-bottom: 1rem;      /* Отступ снизу */
}

/* Меняем разделитель на '>' и делаем его серым */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d; /* Серый цвет */
}

.custom-breadcrumbs {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.custom-breadcrumbs .breadcrumb-item {
    list-style: none;
}

/* Убираем стандартное оформление ссылок внутри кнопок */
.custom-breadcrumbs .breadcrumb-item a,
.custom-breadcrumbs .breadcrumb-item span {
    text-decoration: none;
    border: none;
    box-shadow: none;
}

/* При наведении можно добавить лёгкий hover-эффект */
.custom-breadcrumbs .breadcrumb-item a:hover {
    background-color: #e2e6ea;
}

.modal-backdrop.show {
    background-color: #fff !important;
    opacity: 0.4 !important; /* Чем меньше, тем прозрачнее */
}

.btn-primary {
    background-color: #f0f0f0 !important; /* Светло-серый фон */
    border-color: #ccc !important;       /* Серый бордер */
    color: #333 !important;             /* Тёмно-серый (читаемый) текст */
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #e0e0e0 !important; /* Чуть темнее при наведении */
    border-color: #bbb !important;
    color: #333 !important;
}

.pagination .page-link {
    color: #333 !important;         /* Тёмно-серый текст */
    background-color: #f8f8f8 !important; /* Светло-серый фон */
    border: 1px solid #ddd !important;    /* Светлая граница */
    margin: 0 3px;                   /* Небольшой отступ между кнопками */
}

.pagination .page-link:hover {
    background-color: #eaeaea !important; /* При наведении */
    color: #333 !important;
}

.pagination .page-item.active .page-link {
    background-color: #ccc !important; /* Активная страница чуть темнее */
    color: #000 !important;
    border-color: #bbb !important;
}
.card-title {
    color: #333 !important;  /* Тёмно-серый цвет (лучше читается на светлом фоне) */
    font-weight: 600;       /* Немного жирнее для акцента */
    font-size: 1rem;        /* Оптимальный размер шрифта */
    margin-bottom: 5px;     /* Отступ вниз */
    transition: color 0.3s ease-in-out; /* Плавное изменение цвета */
}

.video-thumbnail:hover .card-title {
    color: #555 !important; /* Чуть светлее при наведении, но не синий */
    text-decoration: none; /* Убираем подчёркивание при наведении */
}

.recommended-title a {
    color: #333 !important;  /* Тёмно-серый цвет */
    font-weight: 600;        /* Чуть жирнее */
    text-decoration: none !important; /* Убираем подчёркивание */
    transition: color 0.3s ease-in-out; /* Плавное изменение цвета */
}

.recommended-title a:hover {
    color: #555 !important; /* При наведении чуть светлее */
    text-decoration: none !important;
}
.title-black {
    color: #000 !important;
}
.videoPlayer {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoPlayer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Стили для блока действий с видео */
.video-actions {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* Гарантируем равное распределение пространства между элементами внутри video-actions */
.video-actions > .flex-fill {
    flex: 1 1 auto;
    margin-bottom: 1rem; /* Можно настроить отступ для мобильных устройств */
}
/* Увеличиваем отступ снизу у контейнера h-captcha, чтобы он не накладывался на блок комментариев */
#comment-form .h-captcha {
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    #comment-form .h-captcha {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
}
@media (max-width: 768px) {
    .recommended-column {
        margin-top: 20px;
    }
}
.webp-hover-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.webp-hover-wrapper img.preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

/* По умолчанию анимированное превью скрыто */
.webp-hover-wrapper img.animated {
    opacity: 0;
}

/* При наведении: анимированное становится видимым, статичное скрывается */
.webp-hover-wrapper:hover img.animated {
    opacity: 1;
}
.webp-hover-wrapper:hover img.static {
    opacity: 0;
}
.preview-image.static {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}
.preview-image.animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.webp-hover-wrapper:hover .preview-image.animated {
    opacity: 1;
}
.webp-hover-wrapper:hover .preview-image.static {
    opacity: 0;
}

.video-player-container {
    width: 100%;
    /* Современное свойство для сохранения соотношения сторон */
    aspect-ratio: 16 / 9;
    /* Если нужен fallback для старых браузеров, можно задать position relative и высоту */
    /* position: relative; */
    /* overflow: hidden; */
}

.video-player-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* или contain, в зависимости от ваших предпочтений */
    display: block;
}

/* Скрыть кнопку в control bar */
.fluid_controls_container .fluid_button.fluid_button_download {
    display: none !important;
}
/* Скрыть пункт «Download» в context menu */
.fluid_menu .fluid_menu_item_download {
    display: none !important;
}
/* 1) Превращаем контейнер кнопок в flex */
.fluid_controls_container {
    display: flex !important;
    align-items: center !important;
}

/* 2) Задаём общий отступ между кнопками и элементами */
.fluid_controls_container > * {
    margin-right: 12px;
}

/* 3) Отодвигаем кнопку Fullscreen максимально вправо */
.fluid_control_fullscreen {
    margin-left: auto !important;
}

/* 4) Если нужно чуть сдвинуть время поближе к иконкам */
.fluid_controls_container .fluid_current_time,
.fluid_controls_container .fluid_duration {
    margin-right: 8px !important;
}