.filter-container {
  font-size: 13px;
  margin: -5px;
  margin-bottom: 15px;
}

.filter-sort {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-sort-group {
  position: relative;
}

.filter-sort-button {
  color: #c0c0c0;
  border: 2px solid #343434;
  background: #242424;
  padding: 6px 8px;
  border-radius: 6px;
  position: relative;
  padding-right: 28px;
}

.filter-sort-button::after {
  content: "";
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #c0c0c0;
  right: 8px;
  top: 50%;
  margin-top: -2px;
}

.filter-sort-button:hover {
  cursor: pointer;
  color: #fff;
  border: 2px solid #585858;
  background: #1c1c1c;
}

.filter-sort-button:hover::after {
  border-top: 6px solid #fff;
}

.filter-sort-button.is-open {
  background: #4527a0;
  border: 2px solid #4527a0;
  color: #fff;
}

.filter-sort-button.is-active {
  border: 2px solid #4527a0;
}

.filter-sort-button.is-open + .filter-sort-options {
  display: block;
}

.filter-sort-button.is-open {
  z-index: 100;
}

.filter-sort-button.is-open::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(0 0 0 / 60%);
}

.filter-sort-options {
  display: none;
  position: absolute;
  border-radius: 6px;
  border: 2px solid #343434;
  background: #242424;
  margin-top: 4px;
  width: max-content;
  padding: 6px;
  z-index: 101;
}

.filter-sort-option {
  border-radius: 4px;
  padding: 6px;
  background: transparent;
  padding-right: 32px;
  position: relative;
}

.filter-sort-option.is-active{
  background: #343434;
}

.filter-sort-option:hover:not(.is-active) {
  cursor: pointer;
  background: #4527a0;
  color: #fff;
}

.filter-sort-option.is-active::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 16px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjMGMwYzAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGVjayI+PHBhdGggZD0iTTIwIDYgOSAxN2wtNS01Ii8+PC9zdmc+)
    no-repeat 50%;
}

.filter-sort-reset {
  display: none;
  color: #b71c1c;
  font-weight: 600;
}

.filter-sort-reset:hover {
  cursor: pointer;
  color: rgb(183, 28, 28, 0.6);
}

.filter-sort-info {
  margin-left: auto;
}

.filter-sort-count {
  display: inline-block;
  font-weight: 600;
  color: #fff;
}

.filter-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: relative;
  margin-top: 8px;
}

.filter-button-group.is-active {
  z-index: 100;
}

.filter-button-group.is-active::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(0 0 0 / 60%);
}

.filter-button {
  color: #c0c0c0;
  border: 2px solid #343434;
  background: #242424;
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  position: relative;
  min-width: 100px;
}

.filter-button::after {
  content: "";
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #c0c0c0;
  right: 8px;
  top: 50%;
  margin-top: -2px;
}

.filter-button:hover {
  cursor: pointer;
  color: #fff;
  border: 2px solid #585858;
  background: #1c1c1c;
}

.filter-button:hover::after {
  border-top: 6px solid #fff;
}

.filter-button.is-open {
  background: #4527a0;
  border: 2px solid #4527a0;
  color: #fff;
}

.filter-button.is-open::after {
  border-top: none;
  border-bottom: 6px solid #fff;
}

.filter-button.is-selected {
  border: 2px solid #4527a0;
}

.filter-popup {
  background: #242424;
  border: 2px solid #343434;
  border-radius: 6px;
  position: absolute;
  width: 100%;
  top: 100%;
  margin-top: 4px;
}

.filter-header {
  display: flex;
  margin: 6px;
  margin-bottom: 0;
  background: #1c1c1c;
  border-radius: 6px;
  align-items: center;
}

.filter-search {
  color: #c0c0c0 !important;
  border-radius: 6px 0px 0px 6px !important;
  padding: 8px !important;
  height: auto !important;
  line-height: normal !important;
  background-color: #1c1c1c !important;
  box-shadow: none !important;
}

.filter-close {
  stroke: #c0c0c0;
  margin: 0px 8px;
}

.filter-close:hover {
  cursor: pointer;
  stroke: #fff;
}

.filter-content {
  display: flex;
  flex-wrap: wrap;
  border-radius: 6px;
  background: #1c1c1c;
  margin: 6px;
  padding: 6px;
  max-height: 208px;
  overflow: auto;
  overscroll-behavior: none;
}

.filter-content::-webkit-scrollbar {
  width: 6px;
  background: #161616;
  border-radius: 0px 6px 6px 0px;
}

.filter-content::-webkit-scrollbar-thumb,
.filter-content::-webkit-scrollbar-thumb:hover,
.filter-content::-webkit-scrollbar-thumb:active
{
  background-color: #343434;
  border-radius: 6px;

}
.filter-content::-webkit-scrollbar-track,
.filter-content::-webkit-scrollbar-track:hover,
.filter-content::-webkit-scrollbar-track:active
 {
  background: #161616;
}

.filter-item {
  flex: 0 0 25%;
  color: #c0c0c0;
  padding: 6px;
  padding-left: 24px;
  transition: 0.3s;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 4px;
}

.filter-item:hover {
  color: #fff;
  background: #202020;
}

.filter-item::before {
  content: "";
  position: absolute;
  left: 6px;
  width: 10px;
  height: 10px;
  border: 1px solid #343434;
  border-radius: 4px;
  margin-top: 2px;
}

.filter-item.is-selected {
  background: #343434;
}

.filter-item.is-selected::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 16px;
  transition: 0.3s;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjMGMwYzAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGVjayI+PHBhdGggZD0iTTIwIDYgOSAxN2wtNS01Ii8+PC9zdmc+)
    no-repeat 50%;
}

.filter-item.is-selected::before {
  content: none;
}

.filter-item.is-selected:hover {
  background: #b71c1c;
  color: #fff;
}

.filter-item.is-selected:hover::after {
  transition: 0.3s;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS14Ij48cGF0aCBkPSJNMTggNiA2IDE4Ii8+PHBhdGggZD0ibTYgNiAxMiAxMiIvPjwvc3ZnPg==)
    no-repeat 50%;
}

.filter-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px;
  margin-top: 0px;
}

.filter-accept {
  background: #4527a0;
  padding: 6px 8px;
  border-radius: 6px;
  color: #fff;
}

.filter-accept:hover {
  cursor: pointer;
  background: rgb(69, 39, 160, 0.8);
}

.filter-decline {
  background: #343434;
  padding: 6px 8px;
  border-radius: 6px;
  color: #fff;
}

.filter-decline:hover {
  cursor: pointer;
  background: rgb(52, 52, 52, 0.8);
}

.filter-toggle {
  display: none;
  cursor: pointer;
  color: #c0c0c0;
  position: relative;
  padding-left: 46px;
}

.filter-toggle::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 40px;
  background: #1c1c1c;
  border-radius: 10px;
  left: 0;
  top: -1px;
  transition: 0.3s;
}

.filter-toggle::after {
  content: "";
  position: absolute;
  background: #343434;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 1px;
  border-radius: 50%;
  transition: 0.3s;
}

.filter-toggle:hover::before {
  background: #202020;
}

.filter-toggle.is-active::before {
  background: #4527a0;
}

.filter-toggle.is-active::after {
  background: #fff;
  left: 22px;
}

.filter-toggle svg {
  vertical-align: middle;
}

.filter-clear {
  display: none;
  color: #b71c1c;
  margin-left: auto;
}


.filter-clear:hover {
  cursor: pointer;
  color: rgb(183, 28, 28, 0.6);
}

.filter-clear-count {
  color: #fff;
}

.filter-current-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  gap: 4px;
}

.filter-current-item {
  padding: 4px;
  padding-right: 18px;
  border-radius: 4px;
  background: #242424
    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiA+PHBhdGggZD0iTTE4IDYgNiAxOCIvPjxwYXRoIGQ9Im02IDYgMTIgMTIiLz48L3N2Zz4=)
    no-repeat top 50% right 4px;
  box-sizing: content-box;
}

.filter-current-item:hover {
  cursor: pointer;
  color: #fff;
  background-color: #b71c1c;
}

@media screen and (max-width: 590px) {
  .filter-item {
    flex: 0 0 50%;
  }
}

.filter-icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* БАЗА (с зазорами и отступом) */
.mylists-switch,
.mylists-tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 5px; /* <-- ДОБАВЛЕНО: Внутренний отступ для обводки */
  list-style: none;
  margin-top: 15px; /* Отступ сверху от плеера */
  gap: 4px; /* <-- ИЗМЕНЕНО: Зазор между кнопками стал меньше */
  border: 1px solid #4a4a4a; /* <-- ДОБАВЛЕНО: Обводка вокруг всего блока */
  border-radius: 6px; /* <-- ДОБАВЛЕНО: Скругление для общей обводки */
  background-color: #2c2c2c; /* <-- ДОБАВЛЕНО: Фон для контейнера */
}

.mylists-switch li,
.mylists-tabs li {
  flex: 1 1 auto;
  padding: 8px 18px;
  text-align: center;
  font-size: 14px;
  color: #d0d0d0;
  cursor: pointer;
  background: #3b3b3b;
  border: 1px solid #4a4a4a;
  border-radius: 4px; /* Уменьшили скругление для кнопок внутри */
  transition: background .15s, color .15s, border-color .15s;
}

.mylists-switch li:hover,
.mylists-tabs li:hover {
  background: #4a4a4a;
  border-color: #606060;
}

.mylists-switch li.active,
.mylists-tabs li.active {
  background: #2f77b4;
  border-color: #2f77b4;
  color: #fff;
}

.mylists-switch li a,
.mylists-tabs li a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.mylists-switch {
  margin-top: 10px !important; /* Добавили !important */
}
/* 📱 МОБИЛЬНАЯ правка: */
@media (max-width: 640px) {
  .mylists-switch,
  .mylists-tabs {
    gap: 4px;
    padding: 4px;
  }

  .mylists-switch li,
  .mylists-tabs li {
    padding: 8px 14px;
  }
}
/* ===== MYLISTS – отдельный блок ===== */
.mylists-block{
  --bg:#1f2227;
  --bg-soft:#262a31;
  --bg-hover:#2d323b;
  --txt:#e8edf3;
  --txt-soft:#b9c2cf;
  --accent:#4aa3ff;
  --border:rgba(255,255,255,.08);
  --shadow:0 4px 16px rgba(0,0,0,.25);
  color:var(--txt);
  font-size:14px;
}

/* Заголовок */
.mylists-block .page-title{
  margin:14px 0 10px;
  font-size:22px;
  font-weight:700;
  color:var(--txt);
}

/* Описание */
.mylists-block .list-main-head{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:8px;
  padding:14px;
  line-height:1.5;
  font-size:14px;
  color:var(--txt-soft);
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

/* Таб-кнопки (контейнер) */
.mylists-block .mylists-tabs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  margin-bottom:14px;
}

/* Кнопки */
.mylists-block .mylists-tabs > *,
.mylists-block .mylists-tabs a,
.mylists-block .mylists-tabs button{
  display:grid;
  place-items:center;
  min-height:64px;
  padding:10px 6px;
  text-align:center;
  background:var(--bg-soft);
  color:var(--txt);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow);
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,transform .15s;
}

.mylists-block .mylists-tabs > *:hover{
  background:var(--bg-hover);
  transform:translateY(-1px);
}

/* Активная */
.mylists-block .mylists-tabs .active,
.mylists-block .mylists-tabs .current,
.mylists-block .mylists-tabs .selected{
  background:linear-gradient(180deg,rgba(74,163,255,.15),var(--bg-hover));
  border-color:rgba(74,163,255,.5);
}

/* Цифра внутри */
.mylists-block .mylists-tabs > * span:last-child{
  display:block;
  margin-top:2px;
  font-size:20px;
  font-weight:700;
  color:var(--accent);
}

/* Адаптив */
@media (max-width:900px){
  .mylists-block .mylists-tabs{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:500px){
  .mylists-block .mylists-tabs{ grid-template-columns:repeat(2,1fr); }
}
/* ===== TOP FILMS — изолированный стиль ===== */
.top-films-block{
  --bg:#1f2227; --bg-soft:#262a31; --bg-hover:#2d323b;
  --txt:#e8edf3; --txt-soft:#b9c2cf; --accent:#4aa3ff;
  --border:rgba(255,255,255,.08); --shadow:0 4px 16px rgba(0,0,0,.25);
  color:var(--txt);
  font-size:14px;
}

/* Заголовок H1 */
.top-films-block .title-top{ margin:14px 0 10px; }
.top-films-block .title-top h1{
  margin:0;
  font-size:22px;            /* компактный, как просили */
  font-weight:700;
  line-height:1.25;
  color:var(--txt);
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* Описание */
.top-films-block .descrip-top{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:8px;         /* почти квадратные углы */
  padding:14px;
  line-height:1.55;
  color:var(--txt-soft);
  box-shadow:var(--shadow);
  margin-bottom:14px;
}

/* Ссылка "Вернуться" */
.top-films-block .descrip-top .top-link{
  display:inline-block;
  margin-top:10px;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(74,163,255,.15), var(--bg-hover));
  color:#eaf4ff;
  border:1px solid rgba(74,163,255,.45);
  border-radius:8px;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.top-films-block .descrip-top .top-link:hover{
  background:var(--bg-hover);
  border-color:rgba(74,163,255,.65);
  transform:translateY(-1px);
}

/* Отступ перед списком карточек */
.top-films-block .descrip-top + *{ margin-top:12px; }

/* Адаптив */
@media (max-width:600px){
  .top-films-block{ font-size:13px; }
  .top-films-block .title-top h1{ font-size:20px; }
  .top-films-block .descrip-top{ padding:12px; border-radius:8px; }
}

/* --- Горизонтальная прокрутка только для блока "Рекомендуем посмотреть" --- */
@media (max-width: 768px) {
    .rels .rels-c {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding: 0 8px 12px;          /* компактные внутренние отступы */
        gap: 4px !important;          /* уменьшенный зазор между карточками */
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* скрываем скроллбар в Chrome/Safari/Opera */
    .rels .rels-c::-webkit-scrollbar { display: none; }

    .rels .rels-c .rel-item {
        flex: 0 0 130px;              /* фиксированная ширина карточки */
        margin: 0 !important;         /* убираем лишний внешний отступ */
        box-sizing: border-box;
    }

    .rels .rels-c .rel-item .r-title {
        font-size: 12px !important;
        line-height: 1.3;
        white-space: normal;
    }
}

/* --- ТРИ колонки только для блока без .rels (например top-films) --- */
@media (max-width: 768px) {
    /* применяем только к .fx-row.rels-c, которые НЕ находятся внутри .rels */
    .fx-row.rels-c:not(.rels .rels-c) {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;                     /* небольшой зазор между карточками */
    }

    .fx-row.rels-c:not(.rels .rels-c) .rel-item {
        flex: 1 1 calc(33.333% - 4px); /* ровно три карточки в ряд */
        box-sizing: border-box;
    }
}
/* Карточка */ .fs-item{ display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-bottom:1px solid #333; text-decoration:none; transition:background .2s; } .fs-item:hover{ background:#3a3a3a; } .fs-item:last-child{ border-bottom:none; } /* Постер — уже и ниже */ .fs-item__poster{ flex:0 0 55px; /* было 74px */ height:82px; /* сохраним ~2:3 */ border-radius:4px; overflow:hidden; } .fs-item__poster img{ width:100%; height:100%; object-fit:cover; display:block; } /* Правая колонка */ .fs-item__content{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } /* Заголовок + рейтинги */ .fs-item__head{ display:flex; justify-content:space-between; align-items:center; gap:6px; } .fs-item__title{ flex:1; min-width:0; font-size:14px; /* было 16px */ font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Рейтинги */ .fs-item__ratings{ display:flex; gap:4px; flex-shrink:0; } .fs-badge{ padding:2px 6px; /* меньше внутренний отступ */ font-size:11px; font-weight:700; border-radius:3px; white-space:nowrap; } .fs-badge--kp{ background:#ff7a00; color:#fff; } .fs-badge--imdb{ background:#f5c518; color:#111; } /* Описание (две строки) */ .fs-item__plot{ font-size:12.5px; /* было 14px */ color:#bdbdbd; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Сброс стандартных стилей автокомплита */ .ui-autocomplete, .ui-menu { margin:0; padding:0; list-style:none; } .ui-menu .ui-menu-item, .ui-autocomplete li { margin:0; padding:0; } .ui-menu .ui-menu-item-wrapper { padding:0 !important; border:0; } .fs-item h1,.fs-item h2,.fs-item h3,.fs-item p{ margin:0; }
/* ===== Финальный дизайн: Решение 1 (эффект затухания) ===== */

.person-section {
  margin: 30px 0;
  padding: 0 14px;
  position: relative; /* ДОБАВЛЕНО: Необходимо для позиционирования градиента */
}

/* ДОБАВЛЕНО: Псевдо-элемент для создания градиентной тени справа */
.person-section::after {
  content: '';
  position: absolute;
  top: 40px;    /* Отступ сверху, чтобы не перекрывать заголовок */
  right: 0;
  bottom: 20px; /* Отступ снизу, чтобы не мешать скроллбару */
  width: 60px;  /* Ширина зоны затухания */
  /* Градиент от цвета фона к прозрачному. Замените #2a2a2a на точный цвет фона */
  background: linear-gradient(to left, #2a2a2a 8%, transparent 100%);
  pointer-events: none; /* Чтобы градиент не мешал кликам и свайпам */
}

.person-section h2 {
  /* Главное из Варианта 3 */
  text-transform: none; /* Убрали ВЕРХНИЙ РЕГИСТР */

  /* Эстетика из Варианта 1 */
  font-size: 14px;        /* Компромиссный размер для хорошей читаемости */
  font-weight: 500;       /* Легкий, нежирный шрифт */
  color: #a9a9a9;
  opacity: 0.8;           /* Смягчаем вид через прозрачность */
  letter-spacing: 0.3px;  /* Небольшое расстояние между буквами */
  margin-bottom: 20px;    /* Чуть больше отступ снизу для воздуха */
}

/* Контейнер с прокруткой */
.person-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 15px; /* Отступ для скроллбара */
}

/* Стилизация скроллбара */
.person-scroll::-webkit-scrollbar { height: 6px; }
.person-scroll::-webkit-scrollbar-track { background: transparent; }
.person-scroll::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 6px; }

/* Список всех персон */
.person-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}

/* Карточка персоны */
.person-item {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #222;
  border: 3px solid #444;
}

.person-item__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Фото */
.person-item__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.person-item:hover .person-item__photo {
  transform: scale(1.1);
}

/* Выезжающая панель с информацией */
.person-item__info-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
  color: #fff;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.7) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
}

.person-item:hover .person-item__info-panel {
  opacity: 1;
}

/* Имя и детали */
.person-item__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.person-item__details {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}
/* Основной контейнер */
.profile {
	padding: 20px;
	color: #ccc; /* Основной цвет текста */
	font-size: 14px;
	line-height: 1.7;
}

/* Имя актера (большой заголовок) */
.profile__name {
	font-size: 2em;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #444;
}

/* Главный блок (инфо + постер) */
.profile__main {
	display: flex;
	gap: 30px; /* Расстояние между информацией и постером */
}

/* Левая колонка с информацией */
.profile__info {
	flex-grow: 1; /* Занимает все доступное место */
}

/* Стилизация строк с информацией */
.profile__info div {
	margin-bottom: 8px; /* Отступ между строками */
}
.profile__info b {
	color: #888; /* Цвет меток ("Карьера:", "Рост:") */
	margin-right: 8px;
}

/* Правая колонка с постером */
.profile__poster {
	flex-shrink: 0;
	width: 200px; /* Ширина постера */
}
.profile__poster img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid #444;
}

/* Секции ниже (Лучшие фильмы и т.д.) */
.profile__sections {
	margin-top: 30px;
}

.profile-section {
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid #444;
}

.profile-section__title {
	font-size: 1.4em;
	font-weight: 700;
	color: #fff;
	margin: 0 0 15px 0;
}

.profile-section__content {
	/* Стили для контента секций, например, для списков фильмов */
}

.profile-section__content a {
	color: #5ea6e0;
	text-decoration: none;
}
.profile-section__content a:hover {
	text-decoration: underline;
}
/* Стили для контейнера одного актера */
.actor-entry {
    background-color: #2a2a2e;
    padding: 12px; /* Уменьшили отступы еще сильнее */
    border-bottom: 1px solid #444;
    color: #b0b0b0;
}

/* Основной Flex-контейнер */
.actor-card {
    display: flex;
    justify-content: space-between;
    gap: 12px; /* Уменьшили пространство между колонками */
    align-items: flex-start;
}

/* Левый блок с информацией */
.actor-info {
    flex: 1;
}

/* Заголовок с именем актера */
.actor-info .title {
    margin: 0 0 8px 0; /* Уменьшили нижний отступ */
}

.actor-info .title a {
    color: #f0f0f0;
    font-size: 15px; /* Уменьшили шрифт имени */
    font-weight: 600;
    text-decoration: none;
}

.actor-info .title a:hover {
    color: #fff;
}

/* Стили для строк с данными */
.actor-info .text p {
    margin: 2px 0; /* Минимальные отступы между строками */
    font-size: 12px; /* Сделали основной шрифт очень маленьким */
    line-height: 1.4; /* Сжали высоту строки */
}

.actor-info .text p b {
    color: #dcdcdc;
    font-weight: 600;
}

/* Правый блок с постером */
.actor-poster {
    width: 100px; /* Уменьшили постер */
    flex-shrink: 0;
}

.actor-poster img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

/* Ссылка "Узнать подробнее" */
.btn-more {
    display: inline-block;
    margin-top: 8px; /* Уменьшили отступ */
    color: #9e9e9e;
    text-decoration: underline;
    font-size: 12px; /* Уменьшили шрифт ссылки */
}

.btn-more:hover {
    color: #fff;
    text-decoration: none;
}

/* Скрываем мета-информацию */
.actor-entry .meta {
    display: none;
}
/* --- Стили для горизонтальной прокрутки рекомендуемых новостей на мобильных --- */

/* Медиа-запрос: эти стили применятся только на экранах, 
  ширина которых 768 пикселей или меньше (стандарт для планшетов и мобильных).
*/
@media (max-width: 768px) {

    /* Контейнер, в котором лежат все карточки */
    .rels-c {
        display: flex;          /* Выстраиваем элементы в ряд */
        flex-wrap: nowrap;      /* Запрещаем им переноситься на новую строку */
        overflow-x: auto;       /* Добавляем горизонтальную прокрутку, если элементы не влезают */
        
        /* Эти три строчки ниже скрывают сам ползунок прокрутки, 
           но оставляют возможность скроллить пальцем. Это делает вид более аккуратным. */
        -ms-overflow-style: none;   /* IE и Edge */
        scrollbar-width: none;      /* Firefox */
    }
    
    .rels-c::-webkit-scrollbar {
        display: none; /* Chrome, Safari и Opera */
    }

    /* Стили для каждой отдельной карточки */
    .rel-item {
        /* flex: 0 0 120px; 
          Это shorthand для flexbox, который означает:
          - flex-grow: 0 (не растягиваться)
          - flex-shrink: 0 (не сжиматься)
          - flex-basis: 120px (базовая ширина 120px)
          Вы можете изменить 120px на любое другое значение.
        */
        flex: 0 0 120px; 
        margin-right: 15px; /* Добавляем отступ между карточками */
    }
    
    /* Убираем отступ у последнего элемента, чтобы он не создавал лишнее пустое пространство в конце */
    .rel-item:last-child {
        margin-right: 0;
    }
}