.add-comment {

 display: flex;
 flex-direction: column;
 gap: 1rem;
 margin-bottom: 2rem;
 padding: 1rem;
 transition: background .3s ease, border-color .3s ease;
}
[data-theme=dark] .add-comment {
 border-color: #ffffff1a;
}
 .commet-req-reg {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 gap: 1rem;
}
.add-comment .comment-req-reg-annotaion {
 align-items: center;
 display: flex;
 gap: .5rem;
}
.comment-req-p {
 align-items: center;
 display: flex;
 justify-content: center;
}
.add-comment .comment-req-reg-annotaion .comment-req-avatar {
 border-radius: 50%;
 height: 40px;
 object-fit: cover;
 width: 40px;
}
.add-comment .comment-req-reg-annotaion .user-name {
 font-weight: 600;
 margin-left: .75rem;
}
.comment-seporator {
 color: var(--font-light-grey);
 font-size: 12px;
 line-height: 16px;
 margin-bottom: 16px;
}
.text-area, input {
 background: #ffffffa6;
 border: 1px solid #0000001f;
 border-radius: .625rem;
 color: #222;
 font: 400 14px/1.4 Inter, sans-serif;
 padding: .75rem 1rem;
 transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.text-area::placeholder, input::placeholder {
 color: #9a9a9a;
 transition: opacity .25s ease;
}
.text-area:focus, input:focus {
 background: #fff;
 border-color: #4e33ff;
 box-shadow: 0 0 0 3px #4e33ff40;
 outline: none;
}
.toggle-button--vesi {
 align-items: center;
 display: inline-flex;
 gap: .5rem;
 margin: .75rem 0;
 -webkit-user-select: none;
 user-select: none;
}
.toggle-button--vesi input[type=checkbox] {
 opacity: 0;
 position: absolute;
}
.toggle-button--vesi input[type=checkbox]+label {
 background: #ccd5e1;
 border-radius: 14px;
 cursor: pointer;
 display: inline-block;
 height: 28px;
 position: relative;
 transition: background .3s;
 width: 52px;
}
.toggle-button--vesi input[type=checkbox]+label:after {
 background: #fff;
 border-radius: 50%;
 box-shadow: 0 1px 3px #0000001a;
 content: "";
 height: 24px;
 left: 2px;
 position: absolute;
 top: 2px;
 transition: transform .3s;
 width: 24px;
}
.toggle-button--vesi input[type=checkbox]+label[data-off-text]:before,
.toggle-button--vesi input[type=checkbox]+label[data-on-text]:before {
 color: #6b7280;
 content: attr(data-off-text);
 font-size: .75rem;
 left: 60px;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 white-space: nowrap;
}
.toggle-button--vesi input[type=checkbox]:checked+label {
 background: #3b82f6;
}
.toggle-button--vesi input[type=checkbox]:checked+label:after {
 transform: translateX(24px);
}
.toggle-button--vesi input[type=checkbox]:checked+label[data-on-text]:before {
 color: #3b82f6;
 content: attr(data-on-text);
 opacity: .8;
}
#ratingForm {
 --star-size: 28px;
 --gap: .6rem;
 animation: fadeIn .28s ease;
 background: var(--block-bg);
 border: 1px solid #00000014;
 border-radius: .9rem;
 box-shadow: 0 6px 18px #18274b0f, 0 2px 6px #0000000a;
 display: grid;
 gap: .75rem;
 margin-top: 1rem;
 padding: 1rem;
 transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
[data-theme=dark] #ratingForm {
 background: linear-gradient(180deg, var(--dark-bg-surface), var(--dark-bg-surface-elevated));
 border-color: #ffffff1a;
 box-shadow: 0 6px 18px #00000080, 0 2px 6px #0000004d;
}
#ratingForm.ratingForm-hidden {
 display: none;
}
#ratingForm.ratingForm-visible {
 margin-bottom: 1.25rem;
}
#ratingForm .ratingForm-instruction {
 color: #6b7280;
 font: 14px/1.45 var(--font, "Inter", system-ui, -apple-system, Segoe UI, sans-serif);
 margin: .1rem 0 .25rem;
 transition: color .3s ease;
}
[data-theme=dark] #ratingForm .ratingForm-instruction {
 color: var(--dark-text-secondary);
}
#ratingForm .ratingRow,
#ratingForm .ritingRow {
 align-items: center;
 border-radius: .6rem;
 column-gap: var(--gap);
 display: grid;
 grid-template-columns: minmax(120px, 1fr) max-content;
 padding: .35rem .4rem;
 row-gap: .35rem;
}
#ratingForm .ratingRow:nth-child(odd),
#ratingForm .ritingRow:nth-child(odd) {
 background: #4e33ff08;
 transition: background .3s ease;
}
[data-theme=dark] #ratingForm .ratingRow:nth-child(odd),
[data-theme=dark] #ratingForm .ritingRow:nth-child(odd) {
 background: #4e33ff14;
}
.starrr {
 align-items: center;
 display: flex;
 gap: .25rem;
}
.starrr .rating-title {
 font-size: .85rem;
 font-weight: 500;
 margin-right: .5rem;
}
.starrr .empty-star-rating,
.starrr>a {
 background-size: contain;
 cursor: pointer;
 height: 25px;
 transition: transform .15s;
 width: 25px;
}
.starrr .empty-star-rating:focus,
.starrr .empty-star-rating:hover,
.starrr>a:focus,
.starrr>a:hover {
 transform: scale(1.15);
}
#ratingForm .ratingRow .starrr .empty-star-rating,
#ratingForm .ritingRow .starrr .empty-star-rating {
 background: url(https://modportal.moy.su/js/star-empty-rating.svg) 50%/contain no-repeat;
}
#ratingForm .currentRating {
 color: #d4d9e1;
 font: 600 14px/1.35 var(--font, "Inter", sans-serif);
 margin-top: .25rem;
}
#ratingForm .currentRating span {
 background: #4e33ff14;
 border-radius: .5rem;
 color: #4e33ff;
 display: inline-block;
 font-weight: 700;
 margin-left: .35rem;
 padding: .18rem .55rem;
}
.trix-editor-wrapper {
 margin-bottom: 10px;
 position: relative;
}

.trix-actions-bar {
 align-items: center;
 display: flex;
 gap: 8px;
 margin-top: 8px;
 padding: 0 4px;
 z-index: 10;
}


.trix-editor-wrapper~.add-comment .submit-comment-btn {
 display: none!important;
}

/* Базовые стили для переключения */
#tabpleer,
#tabpleer2,
#tabcomm {
 display: none !important;
 transition: opacity 0.3s ease;
}

/* Активная панель */
#tabpleer.active-panel,
#tabpleer2.active-panel,
#tabcomm.active-panel {
 display: block !important;
}


/* ===== Стили для кнопок рейтинга в едином стиле сайта ===== */
.likes {
 display: flex;
 gap: 10px;
 justify-content: center;
 margin: 20px 0;
}

/* Базовый стиль кнопки */
.likes > a {
 flex: 1;
 max-width: 140px;
 text-decoration: none;
 border-radius: 0.75rem; /* Как у других кнопок */
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.1);
 transition: all 0.2s ease;
}

.likes > a:hover {
 background: rgba(255, 255, 255, 0.1);
 transform: translateY(-2px);
}

/* Контейнер содержимого */
.likes > a > span {
 display: flex !important;
 flex-direction: row-reverse;
 align-items: center !important;
 justify-content: center !important;
 padding: 12px 10px !important; width: max-content;
}

/* SVG иконки */
.likes svg {
 height: 24px !important;
 opacity: 0.9;
}

/* Счетчики (цифры) */
.likes span[id^="plus_"],
.likes span[id^="minus_"] {
 font-size: 18px !important;
 font-weight: 700 !important;
 line-height: 1 !important;
 margin-bottom: 4px !important;
 background: none !important;
 padding: 0 !important;
}

/* Текст "Нравится/Не нравится" */
.likes .sr-only {
 font-size: 12px;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.5);
 text-transform: none;
 letter-spacing: normal;
 position: static !important;
 width: auto !important;
 height: auto !important;
 clip: auto !important;
 white-space: normal !important;
 border: 0 !important;
}

/* Цвет для Like Plus (зеленый) */
.likes .like-plus,
.likes .like-plus svg {
 color: #4CCB70 !important;
}

.likes .like-plus span[id^="plus_"] {
 color: #4CCB70 !important;
}

/* Цвет для Like Minus (красный) */
.likes .like-minus,
.likes .like-minus svg {
 color: #F9563D !important;
}

.likes .like-minus span[id^="minus_"] {
 color: #F9563D !important;
}

/* Убираем скрытие с .sr-only */
.likes .sr-only {
 position: static !important;
 width: auto !important;
 height: auto !important;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
 .likes {
 gap: 8px;
 }
 
 .likes > a {
 width: -webkit-fill-available !important;
 }
 
 
 .likes span[id^="plus_"],
 .likes span[id^="minus_"] {
 font-size: 16px !important;
 }
 

}
.rating_progress_bar {
 text-align: center; background-color: #F9563D; font-size: .6875rem; text-transform: uppercase;
 line-height: 1rem; padding: .25rem; border-radius: .75rem; position: relative; z-index: 0;
}
.rating_progress_bar > span {
 background-color: #4CCB70; position: absolute; left: 0; top: 0; border-radius: .75rem;
 height: 100%; text-indent: 9999px; white-space: nowrap; overflow: hidden; z-index: -1;
 box-shadow: 0 0 .5rem 0 rgba(74,201,110,.3);
}
iframe.kinobox_iframe { width: 100%; max-height: 600px; height: 400px; }
.tabs__page.tabs__page--active { display: block !important; }
.rating-container {
 --progress-color: #2196F3; /* Основной синий цвет */
}

.rating_progress_bar {
 height: 20px;
 background: #f1f3f9; /* Очень светлый фон */
 border-radius: 10px;
 overflow: hidden;
 box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
 border: 1px solid #e6e9ef;
}

#progress-bar_$ID$ {
 height: 100%;
 width: 0%;
 background: var(--progress-color);
 border-radius: 10px;
 transition: width 1s cubic-bezier(0.26, 0.83, 0.44, 1);
 position: relative;
 overflow: hidden;
}

/* Легкий эффект "свечения" для заполненной части */
#progress-bar_$ID$::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: linear-gradient(
 90deg,
 rgba(255,255,255,0.4) 0%,
 rgba(255,255,255,0) 100%
 );
 transform: translateX(-100%);
 animation: shine 2s infinite;
}
@keyframes shine { 100% { transform: translateX(100%); } }

#rating-text_$ID$ {
 font-size: 11px;
 font-weight: 600;
 color: #2c3e50;
 margin-bottom: 6px;
z-index: 99999; position: relative;
}
/* Основной контейнер полосы */
.rating_progress_bar {
 position: relative;
}

/* Дорожка прогресс-бара */
.progress-bar-track {
 width: 100%;
 height: 15px; /* Высота полосы */
 background-color: #e0e0e0; /* Цвет фона */
 border-radius: 6px; /* Закругленные края */
 overflow: hidden; /* Чтобы внутренняя полоса не вылезала за края */
 margin-top: -2px; /* Отступ от текста */
}

/* Заполняемая часть */
#progress-bar_$ID$ {
 display: block;
 height: 100%;
 background: linear-gradient(90deg, #2196F3, #4CAF50); /* Красивый градиент */
 border-radius: 6px;
 transition: width 0.8s ease-in-out; /* Плавная анимация */
top: -20px;
 }

/* Стиль для текста */
#rating-text_$ID$ {
 display: block;
 font-size: 11px;
 color: #333;
 margin-bottom: 4px;
}