/** Высплывающий поиск */
.most_recent .carouselExampleControls div.details h4,
.most_recent .carouselExampleControls div.release-members {
    color: #FFF;
    text-align: left;
}

.most_recent .carouselExampleControls div.details h4 {
    font-family: Noah-Bold;
    font-size: 1em;
    min-height: calc(2 * 1.2em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: .5em 0 0 .5em;
}

.most_recent .carouselExampleControls a img {
    border-radius: 12px;
}

/** Блок комментариев */

.comments-add-block {
    border-radius: 12px;
    background-color: #fff;
}

.comments-label {
    padding: 10px 0;
    margin: 0;
    display: block;
}

#nc_commentTextArea {
    max-width: 100%;
    display: inline-block;
    max-width: 100%;
    width: 80%;
    border-radius: 0 !important;
    vertical-align: middle;
    background-color: #F0ECE8;
    padding: 0.5em;
    border-radius: 12px !important;
    border: 0;
    height: 2.5rem;
}

button#nc_commentsSubmitButton {
    margin: 0 !important;
    height: 2.5rem;
}

button#nc_commentsCancelButton {
    display: none !important;
}

/** Объект в списке */

div.container.playlist a h4,
div.container.video a h4 {
    font-size: 1em;
    min-height: calc(2 * 1.2em); /* 2 строки с межстрочным интервалом 1 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Ограничивает максимум 2 строками */
    overflow: hidden;
    margin: .5em 0 0 .5em;
}

div.container.video.playlist-video div.release-members {
    color: #FFF;
}

/** фильтр подборок по жанру и выпусков по программам */
div.genre_filter_list {
    display: inline-block;
    background-color: #F0ECE8;
    border-radius: 12px;
    padding: 8px 16px;
}

div.genre_filter_list > span,
div.genre_filter_list > button {
    font-family: Noah-Regular;
    font-size: 18px;
    text-align: center;
    color: #000;
    padding: 8px 6px;
    display: inline-block;
}

div.genre_filter_list > button.hidden {
    display: none;
}

div.genre_filter_list > button.genre_filter_list-caption {
    font-family: Noah-Bold;
}

div.genre_filter_list > button.genre_filter_list-option,
div.genre_filter_list > button.genre_filter_list-more {
    background-color: #FFF;
    border-radius: 6px;
}

div.genre_filter_list > button.genre_filter_list-more {
    width: 2em;
    height: 2em;
    border-radius: 2em;
}

div.genre_filter_list > button.genre_filter_list-more:after {
    content: "...";
}

div.genre_filter_list > button.genre_filter_list-more:hover:after {
    content: "";
}

div.genre_filter_list > button.genre_filter_list-more:hover  {
    background: #FFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

div.genre_filter_list:has(button.genre_filter_list-more:hover) > button.hidden  {
    display: inline-block;
}

div.genre_filter_list > button.genre_filter_list-option.btn-close {
    color: #FFF;
    padding-right: 2em;
    width: auto;
    height: auto;
    opacity: 1;
    background: #3F5181 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    background-position: 90%;
}

/* Подборки страница ролика BEGIN */
button.share {
    background: #FFF url('/static/images/share.svg') center/1em auto no-repeat;
}

button.share,
button.favorites {
    display: block;
    font-family: Noah-Regular;
    padding: 5px 20px;
    background-color: #FFF;
    color: #fff;
    border-width: 0px;
    border-style: solid;
    border-radius: 20px;
    position: relative;
    margin: 20px auto;
    cursor: pointer;
}


div.slider.teasers.owl-carousel.main-bootstrap div.details,
div.container.playlist div.details,
div.container.playlist.video > div.row.video > div.col-sm-4 > a > div > div.details,
div.container > div > div.col-sm-4 > div.playlist-header > div.details,
div.container.account div.details {
    text-align: left;
    margin: auto;
    #display: table-cell;
    vertical-align: middle;
    height: auto !important;
    margin: .5em;
    min-height: calc(2 * 1.3em);
    text-align: left;
}

div.slider.teasers.owl-carousel.main-bootstrap div.details img,
div.container.playlist div.details img,
div.container.playlist.video > div.row.video > div.col-sm-4 > a > div > div.details img,
div.container > div > div.col-sm-4 > div.playlist-header > div.details img {
    display: inline-block;
    height: 22px;
    width: 22px !important;
}

div.playlist-header > div.details > small.active,
div.container.account div.details > small.active {
    border-top: 3px solid rgb(220, 151, 54);
}

div.details > small.active > img {
    filter: invert(72%) sepia(60%) saturate(1996%) hue-rotate(342deg) brightness(91%) contrast(87%);
}

small.playlist-genre {
    background-color: #3F5181;
    color: #fff;
    display: inline-block;
    border-radius: 12px;
    padding: .2em;
    font-family: Noah-Regular;
    font-size: 18px;
    text-align: center;
}

div.container.playlist div.details > small.playlist-video-count,
div.container.playlist div.details > small.playlist-article-count,
div.container.playlist.video > div.row.video > div.col-sm-4 > a > div > div.details > small.playlist-video-count,
div.container.playlist.video > div.row.video > div.col-sm-4 > a > div > div.details > small.playlist-article-count,
div.container > div > div.col-sm-4 > div.playlist-header > div > small.playlist-video-count,
div.container > div > div.col-sm-4 > div.playlist-header > div > small.playlist-article-count {
    font-family: Noah-Regular;
    font-size: 18px;
    text-align: center;
    color: #000;
}

div.container > div > div.col-sm-12 > div.playlist-header > div > small.playlist-video-count,
div.container > div > div.col-sm-12 > div.playlist-header > div > small.playlist-article-count {
    font-family: Noah-Regular;
    font-size: 18px;
    text-align: center;
    color: #FFF;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video {
    margin-top: 2em;
    padding: 0;
    background-color: #000;
    box-shadow: 0px -5px 0px 0px rgb(235 235 235), 0px -10px 0px 0px rgb(219 219 219), 0px -15px 0px 0px rgb(207 207 207);
    border-radius: 12px;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video div.col-sm-12.selected {
    background-color: #3F5181;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a {
    display: block;
    text-decoration: none;
    color: #fff;
    text-align: left;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-7 > div.views {
    text-align: left;
    margin: auto;
    display: table-cell;
    vertical-align: middle;
    height: auto !important;
    padding: 0;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-5,
div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-7 {
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    padding: 0.5em;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-5 img {
    width: 100%;
    border-radius: 12px;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-7 img {
    width: 22px !important;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div > div > div.col-sm-7 > div.details > h4:nth-child(1) {

    overflow: hidden;
}

div.container > div > div > div.container.video > div.row.video > div.col-sm-4 > a > div.views > small,
div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-7 > div.views > small {
    font-family: Noah-Regular;
    font-size: 18px;
    text-align: center;
    color: #fff;
}

div.container > div > div.col-sm-4 > div.container.video.playlist-video > div.row.video > div > a > div.container > div.row > div.col-sm-7 > div.views img {
    display: inline-block;
    width: auto;
    height: 22px;
    filter: invert(72%) sepia(60%) saturate(1996%) hue-rotate(342deg) brightness(91%) contrast(87%);
}

/** Related */

.related > .container.video,
.related > .container.video > div.row.video > .col-sm-12 {
    padding: 0;
    margin-top: 1em;
}

.related > .container.video > div.row.video > .col-sm-12 > a > div.details > h4,
.container.video.author > div.row.video > .col-sm-4 > a > div.details > h4
{
    font-family: Noah-Bold;
    text-align: left;
    color: #000;
    font-size: 1em;
    min-height: calc(2 * 1.2em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: .5em 0 0 .5em;
    overflow: hidden;
}

.related > .container.video > div.row.video > .col-sm-12 > a > div.details,
.container.video.author > div.row.video > .col-sm-4 > a > div.details
{
    padding: 15px 0px 0px 0px;
}

/* Подборки страница ролика END */

/** Лица */

.container.account .description {
    text-align: left;
}

/* Элементы формы и кнопки */
button.button {
    font-size: 16px !important;
    padding: 14px 20px !important;
    font-family: Noah-Regular !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
}

button.button.submit {
	background-color: #dc9736 !important;
    color: #fff;
}

button.button:not(.submit) {
	background-color: #F0ECE8 !important;
	color: #000;
}

button.black[type="submit"] {
	background-color: #000 !important;
	color: #FFF;
}

/* Контейнер для блока */
.custom-privacy-block {
    margin: 20px 0;
}

/* Флекс-контейнер для выравнивания */
.custom-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}

/* Прячем стандартный страшный чекбокс */
.real-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Создаем красивый квадратный чекбокс */
.fake-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: #F0ECE8;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Текст согласия */
.checkbox-text a {
    color: #000;
}

/* Стили при наведении на блок */
.custom-checkbox-label:hover .fake-checkbox {
    border-color: #999;
}

/* Стили, когда чекбокс отмечен (активен) */
.real-checkbox:checked + .fake-checkbox {
    border-color: #F0ECE8; /* Цвет рамки при клике (синий) */
    background: #F0ECE8;   /* Цвет фона при клике */
}

/* Рисуем галочку внутри активного чекбокса */
.real-checkbox:checked + .fake-checkbox i {
    display: block;
    width: 10px;
    height: 15px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 5px;
}

/* Эффект фокуса для доступности с клавиатуры */
.real-checkbox:focus + .fake-checkbox {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.password-container {
    position: relative;
    width: 100%;
}

.password-input {
    width: 100%;
    padding: 12px 50px 12px 15px; /* Зазор справа для иконки */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    outline: none;
}

/* Базовые стили для текста ошибки */
.error {
  color: #cc4014;
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 6px; /* Отступ между иконкой и текстом */
}

/* Добавляем иконку перед текстом, если блок не пустой */
.error:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image: url("/static/svg/errorInfo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Подсветка инпута при наличии ошибки */
label:has(.error:not(:empty)) .popup-content-input {
  border: 2px #cc4014 solid !important;
  background-color: #fff1ed;
}

.toggle-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    /* Полностью сбрасываем фон и рамки */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Убираем синюю мобильную подсветку при тапе (iOS/Android) */
    -webkit-tap-highlight-color: transparent;
}

/* На всякий случай проверяем, чтобы у самого SVG не было фона */
.eye-icon {
    width: 26px;
    height: 26px;
    display: block;
    background: transparent !important;
}


/* Все элементы пути внутри SVG плавно меняют цвет */
.eye-icon path {
    transition: fill 0.2s ease-in-out;
}

/* --- СОСТОЯНИЕ 1: ПАРОЛЬ СКРЫТ (По умолчанию) --- */
/* Оставляем оригинальный цвет для всех путей */
.eye-icon path {
    fill: #CAC2BA !important;
}

/* --- СОСТОЯНИЕ 2: ПАРОЛЬ ОТКРЫТ (Добавлен класс .is-visible) --- */
/* Перекрашиваем всю иконку целиком в золотисто-оранжевый */
.toggle-button.is-visible .eye-icon path {
    fill: #dc9736 !important;
}

a, a:hover, small {
	font-size:1em;
	color: #000;
}

p, span {
	font-size:1.5em;
}

.strong {
	font-family: Noah-Bold;
}

.strong.italic {
	font-family: Noah-BoldItalic;
}