/* === Глобальные переменные тем оформления (root) === */
:root {
  /* --- ФОНЫ --- */
  --bg: #fff;               /* фон страницы (light) */
  --bg-light: #edf0f7;      /* светлая подложка/секции/карточки */
  --bg-darker: #f4f2f0;     /* полосы/зебра/раздел */
  --bg-dark: #131720;       /* фон страницы (dark) */
  --bg-dark-lighter: #18202a; /* карточки/подложки в тёмной теме */
  /* --- ТЕКСТ --- */
  --tt: #212121;            /* основной текст (light) */
  --tt-fade: #868e9b;       /* вторичный/приглушённый текст (light) */
  --tt-dark: #b8bdca;       /* основной текст (dark) */
  --tt-dark-fade: #576071;  /* вторичный/приглушённый текст (dark) */
  /* --- КНОПКИ --- */
  --bg-btn: #e85d50;        /* фон CTA-кнопок (light) */
  --tt-btn: #fff;           /* текст/иконки на кнопке (light) */
  --bg-btn-hover: #e68900;  /* фон кнопки при hover (light) */
  /* (dark назначается в переопределениях) */
  /* --- ХОВЕР --- */
  --hover-bg: rgba(0, 0, 0, 0.05); /* фон hover (light); dark — в переопределении */
  /* --- ОБВОДКИ/ТЕНИ --- */
  --bdc: #d5d5d5;           /* базовый цвет бордеров/разделителей */
  --bsh: 0 1px 2px 0 rgba(0,0,0,0.2); /* общая внешняя тень */
  /* --- ДЕКОР/ГРАДИЕНТЫ --- */
  --gradient: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); /* декоративный градиент */
  --accent-red: #e85d50;    /* акцент: красный */
  --accent-blue: #06c;      /* акцент: синий */
  --accent-green: #35c535;  /* акцент: зелёный */
  --bg-tab: #868e9b;        /* фон неактивных вкладок/чипов */
  --bsh-comm: 0 4px 10px rgba(0,0,0,.2); /* усиленная тень */
  --bdrs: 10px;             /* радиус скругления по умолчанию */
  /* --- UI: ФОНЫ/БОРДЕРЫ --- */
  --ui-bg: #fff;            /* базовый фон внутренних панелей */
  --ui-bg-darker: #f6f6f8;  /* альтернативная светлая подложка */
  --ui-bg-darkest: #e4e5e7; /* ещё темнее подложка/зебра */
  --ui-bdc: #e3e3e3;        /* бордеры/разделители в UI */
  --ui-bg-attention: #FFF3E0; /* фон предупреждающих плашек */
  --ui-bd-attention: #FF9800; /* бордер предупреждающих плашек */
  /* --- UI: ТЕКСТ/АКЦЕНТ --- */
  --ui-accent: #06c;        /* акцент UI (иконки/ссылки) */
  --ui-tt-fade: #888;       /* вторичный текст UI */
  --ui-fw-bolder: 700;      /* жирный вес заголовков UI */
  --ui-fw-fa: 400;          /* обычный вес текста UI */
  /* --- UI: ТЕНИ/СКРУГЛЕНИЯ --- */
  --ui-bsh: 0 12px 40px rgba(0,0,0,0.3);       /* крупная внешняя тень (оверлеи/меню) */
  --ui-bsh-inset: inset 1px 2px 5px rgba(0,0,0,0.1); /* внутренняя тень (инпуты/впадины) */
  --ui-bdrs: 4px;           /* радиус для контролов/мини-чипов */
  --ui-gradient: linear-gradient(to bottom, #5c4f68, #352d3c); /* декоративный градиент */
  --ui-bg-black: #352d3c;   /* тёмная подложка отдельных UI-блоков */
  --ui-green: #65c03e;      /* системный зелёный (статусы/бейджи) */
  --ui-red: #eb4d4b;        /* системный красный (ошибка/стоп) */
  /* --- ГЛОБАЛЬНЫЕ ОТСТУПЫ/КОНТЕЙНЕР --- */
  --indent-negative: -20px; /* отрицательный отступ */
  --indent: 20px;           /* базовый отступ */
  --max-width: 1240px;      /* ширина контейнера */
}

/* === Переопределения переменных для тёмной темы === */
.dt-is-active {
  /* --- ФОНЫ --- */
  --bg: #18202a;                         /* фон страницы (dark) */
  --bg-darker: #1d2530;                  /* тёмные секции/полосы */
  --bg-dark: #131720;                    /* базовый базовый тёмный */
  --bg-dark-lighter: #18202a;            /* карточки/подложки */
  --hover-bg: rgba(255, 255, 255, 0.05); /* фон hover в светлой теме (тёмная вуаль) */    
  /* --- ТЕКСТ --- */
  --tt: #fff;                    /* основной текст */
  --tt-fade: #b8bdca;            /* вторичный/приглушённый */
  --tt-dark: #b8bdca;            /* текст на тёмных подложках */
  --tt-dark-fade: #576071;       /* более приглушённый */
  /* --- КНОПКИ --- */
  --bg-btn: #1abc9c;             /* фон CTA-кнопок */
  --tt-btn: #fff;                /* текст/иконки на кнопках */
  --bg-btn-hover: #16a085;       /* hover фон кнопок */
  /* --- БОРДЕРЫ/ТЕНИ (общие) --- */
  --bdc: #131720;                     /* базовый цвет бордеров */
  --bsh: 0 1px 2px 0 rgba(0,0,0,0.2); /* внешняя лёгкая тень */
  /* --- АКЦЕНТЫ --- */
  --accent-red: #1abc9c;         /* акцент (замещает красный под dark) */
  --accent-blue: #06c;           /* акцент синий */
  --accent-green: #2ecc71;       /* акцент зелёный */
  /* --- ПРОЧЕЕ ДЕКОРО/ТАБЫ --- */
  --bg-tab: #131720;             /* фон табов/чипов */
  --bsh-comm: 0 4px 10px rgba(0,0,0,.6); /* тень для плашек/комментов */
  /* --- UI: ФОНЫ И БОРДЕРЫ --- */
  --ui-bg: #18202a;              /* фон внутренних панелей */
  --ui-bg-darker: #131720;       /* темнее (второй уровень) */
  --ui-bg-darkest: #090a0e;      /* самый тёмный слой */
  --ui-bdc: #090a0e;             /* бордеры/разделители в UI */
  /* --- UI: ТЕКСТ/АКЦЕНТ --- */
  --ui-accent: #84bffa;          /* акцент в интерфейсе */
  --ui-tt-fade: #b8bdca;         /* вторичный текст UI */
  /* --- UI: ТЕНИ/ГРАДИЕНТЫ/ДОП.ЦВЕТА --- */
  --ui-bsh: 0 12px 40px rgba(0,0,0,0.6);                       /* крупные тени (меню/оверлеи) */
  --ui-bsh-inset: inset 1px 2px 20px rgba(0,0,0,0.4);          /* внутренние тени (инпуты) */
  --ui-gradient: linear-gradient(to bottom, #5c4f68, #352d3c); /* декоративный градиент */
  --ui-bg-black: #352d3c;        /* тёмная подложка отдельных UI-блоков */
  --ui-green: #65c03e;           /* системный зелёный (статусы) */
  --ui-red: #eb4d4b;             /* системный красный (ошибка) */
  --ui-bg-attention: #24211d;    /* фон предупреждающей плашки */
  --ui-bd-attention: #b16f0e;    /* бордер предупреждающей плашки */
}

/* === RESET & BASE STYLES (сброс и базовая типографика) === */
* {
  background: none;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  box-sizing: border-box;
}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, table, iframe, video, frame, embed, object { max-width: 100%; }

/* === BODY — базовое оформление страницы (светлая тема) === */
body {
  font: 15px / 1.4 'nunito', sans-serif;      /* базовый шрифт и межстрочный интервал */
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--tt);                           /* основной цвет текста */
  background-color: var(--bg);                /* цвет фона по умолчанию */
  background-image: url('{THEME}/images/bg.jpg'); /* фон-картинка светлой темы */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Базовые теги: ссылки, заголовки, выделение текста, жирность === */
a,
a:focus {
  color: var(--tt);
  text-decoration: none;
}
h1, h2, h3, h4, h5 {
  font-weight: 700;
  font-size: 24px;
}
::selection {
  background: #ff0000;
  color: #fff;
}
b, strong, .bolder {
  font-weight: 700;
}

/* === Формы и кнопки: стилизация input, select, button === */
button, select, textarea,
input[type="text"],
input[type="password"],
input[type="button"],
input[type="reset"],
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  font-size: 16px;
  font-family: inherit;
  font-weight: inherit;
}

/* └─ уточнение размеров кнопок */
input[type="button"], input[type="submit"] {
  font-size: 14px;
  font-weight: 400;
}

/* └─ базовые кнопки, сообщения и загрузки */
button, .btn, [type="button"], [type="reset"], [type="submit"],
.pmessages__links a, .qq-upload-button, .plupload_button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0 20px;
  height: 40px;
  white-space: nowrap;
  gap: 10px;
  border-radius: var(--ui-bdrs);
  font-size: 15px;
  font-weight: 400;
  box-shadow: var(--bsh);
  background-color: var(--bg-btn);
  color: var(--tt-btn);
}

/* └─ эффект нажатия */
button:active,
input[type="button"]:active,
input[type="submit"]:active {
  box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);
}

/* └─ кнопки без фона */
.color-btn,
[class*=fr],
[class*=plyr],
[class*=owl-],
[id*=mceu],
[class*=tox-],
.ui-dialog-titlebar-close {
  padding: 0;
  margin: 0;
  line-height: 1.4;
  border: 0;
  box-shadow: none;
  background: none;
  border-radius: 0;
}

/* └─ кнопка без фона, только текст */
.btn-without-bg {
  background: none;
  color: var(--tt);
  padding: 0;
  height: 40px;
  min-width: 40px;
  box-shadow: none;
}

/* └─ вторичные кнопки и всплывающие окна */
.btn-secondary,
.dle-popup-complaint .ui-dialog-buttonset button:first-child:not(:hover),
.dle-popup-sendpm .ui-dialog-buttonset button:first-child:not(:hover),
.dle-popup-userprofile .ui-dialog-buttonset button:not(:first-child,:hover),
.dle-popup-confirm .ui-dialog-buttonset button:first-child:not(:hover),
.dle-popup-promt .ui-dialog-buttonset button:first-child:not(:hover) {
  background-color: var(--ui-bg-darker);
  color: var(--ui-tt-fade);
}

/* === Поля формы: input, select, textarea === */
[type="text"], [type="password"] {
  height: 40px;
  line-height: 39px;
  padding: 0 15px;
}

select {
  height: 40px;
  padding: 0 15px;
  display: block;
  font-size: 15px;
}

/* └─ оформление выпадающего списка */
select:not([multiple]) {
  background-image: url(../dleimages/chevron-down.svg);
  padding-right: 30px;
  background-repeat: no-repeat;
  background-position: right 15px top 50%;
  background-size: 12px auto;
}
select option {
  padding: 6px 10px;
}

/* └─ многовариантные списки */
select[multiple] {
  padding: 9px 5px;
  border-radius: var(--ui-bdrs);
}
select[multiple] option {
  padding: 3px 10px;
}
textarea {
  padding: 15px;
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/* └─ универсальное оформление полей */
[type="text"], [type="password"], select, textarea {
  width: 100%;
  background-color: var(--ui-bg);
  color: var(--tt);
  border: 1px solid var(--ui-bdc);
  box-shadow: var(--ui-bsh-inset);
  border-radius: var(--ui-bdrs);
}

/* └─ фокус */
[type="text"]:focus,
[type="password"]:focus,
textarea:focus {
  border-color: var(--ui-accent);
}

/* └─ плейсхолдеры */
input::placeholder,
textarea::placeholder {
  color: var(--ui-tt-fade);
  opacity: 1;
  font-size: 14px;
}
input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}

/* === SNIPPETS — вспомогательные классы для структуры и позиционирования === */
/* Базовые позиции для изображений, оберток и абсолютов */
.img-wide, .img-responsive, .img-fixed-size, .has-expanded-link, .p-relative {
  position: relative;
}

/* Адаптивные изображения */
.img-responsive {
  padding-top: 60%;
}
.img-responsive > img,
.img-fixed-size img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.img-responsive > img {
  position: absolute;
  left: 0;
  top: 0;
}
.img-wide img,
.img-wide > a {
  width: 100%;
  display: block;
}

/* Очистка потока, ограничение текста */
.clr {
  clear: both;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.ws-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Центровка по ширине экрана */
.vw100 {
  margin: 0 calc((100% - 100vw)/2);
  padding: 0 calc((100vw - 100%)/2);
}

/* Маска затемнения внизу изображений */
.img-mask::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66%;
  background: linear-gradient(to top, #000 0%, transparent 100%);
  opacity: 1;
}

/* Активная зона ссылки на всю карточку */
.has-expanded-link__trg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

/* === Flex/Grid/Выравнивания === */
.d-flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.fd-column {
  flex-direction: column;
  flex-wrap: nowrap;
}
.jc-space-between { justify-content: space-between; }
.jc-flex-start    { justify-content: flex-start; }
.jc-center        { justify-content: center; }
.jc-flex-end      { justify-content: flex-end; }
.ai-flex-start    { align-items: flex-start; }
.ai-center        { align-items: center; }
.ai-flex-end      { align-items: flex-end; }
.order-first      { order: -1; }
.order-last       { order: 10; }
.flex-grow-1,
.ui-dialog-title,
.ac-form__bottom .comments_subscribe {
  flex: 1 1 0;
  max-width: 100%;
  min-width: 50px;
}
.flex-grow-1-column {
  flex: 1 0 min-content;
}
.pi-center {
  display: inline-grid;
  place-items: center;
}
.ta-center {
  text-align: center;
}
.gap-10 {
  gap: 10px;
}
.d-block {
  display: block;
}
.d-grid-items {
  display: grid;
  gap: 30px 25px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.d-grid-items > *:not(.grid-item) {
  grid-column: 1 / -1;
}

/* === Скрытие служебных элементов === */
.hidden,
.d-none,
.full-text .quote + br,
#category option:empty,
.ui-helper-hidden-accessible:empty,
#related_news:empty,
#result-registration:empty,
.info br,
#fullsearch + form .mass_comments_action,
.bb-sep,
.bb-pane > .clr {
  display: none;
}
.login__social:has(.login__social-caption:last-child),
.serv__social:has(.serv__subtitle:last-child) {
  display: none;
}

/* === Плавные переходы на hover и взаимодействие === */
.animated-element,
button,
.btn,
a {
  transition: color 0.3s,
              background-color 0.3s,
              opacity 0.3s,
              box-shadow 0.3s,
              transform 0.3s,
              border-color 0.3s;
}

/* === Подключение шрифта Nunito во всех нужных вариантах === */
@font-face {
  font-family: 'nunito';
  src: url('../webfonts/nunito-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nunito';
  src: url('../webfonts/nunito-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nunito';
  src: url('../webfonts/nunito-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nunito';
  src: url('../webfonts/nunito-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* === Ховеры для устройств с курсором (десктопы) === */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--tt);
    text-decoration: none;
  }
  button:hover, .btn:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover,
  input[type="submit"]:hover,
  .pmessages__links a:hover,
  .qq-upload-button:hover,
  .us__btn a:hover,
  .plupload_button:hover,
  #searchsuggestions span.seperator a:hover {
    background-color: var(--bg-btn-hover);
    color: var(--tt-btn);
    border-color: var(--bg-btn-hover);
  }
  .btn-without-bg:hover {
    background: none;
    color: var(--tt);
    border-color: transparent;
    box-shadow: none;
  }
  .ui-dialog-titlebar-close:hover,
  .login__close:hover {
    background-color: var(--ui-red);
    color: var(--tt-btn);
  }
  .xfieldimagegallery a:hover,
  .comments-image-gallery a:hover {
    opacity: 0.8;
  }
  .fs-result:hover {
    background-color: var(--ui-bg-darker);
  }
  .header__menu > li:hover > a,
  .header__favlink:hover,
  .header__login-menu a:hover,
  .scard__header > a:last-child:hover,
  .popular-item:hover .popular-item__title,
  .sb__nav a:hover,
  .lcomm__link:hover {
    color: var(--accent-red);
    opacity: 1;
  }
  .scard__fav a:hover,
  .scard__btn-trailer:hover {
    background-color: var(--bg-btn-hover);
  }
  .header__btn-search:hover,
  .theme-toggle:hover,
  .trl__close:hover,
  .page__complaint a:hover {
    color: #fff;
    background-color: var(--accent-red);
  }
  .scard__btn-trailer:hover::after {
    content: attr(data-text);
    white-space: nowrap;
  }
  .scard__btn-trailer:hover {
    width: auto;
    padding: 0 10px;
  }
  .footer a:hover,
  a.scard__title:hover,
  .scard__list li a:hover,
  .speedbar a:hover {
    text-decoration: underline;
  }
  .header__login-img:hover,
  .scard__rating-likes a:hover,
  .comm__rating a:hover {
    opacity: 0.8;
  }
  .carou:hover .img-mask::before {
    height: 100%;
  }
  .pagination a:hover {
    background-color: var(--accent-red);
    color: #fff;
  }
}



/* === Цвет второстепенного текста  === */
.dt-is-active .descr,
.dt-is-active .full-text {
  color: var(--tt-fade);
}

/* === Иконка селекта в тёмной теме === */
.dt-is-active select:not([multiple]) {
  background-image: url(../dleimages/chevron-down-light.svg);
}

/* === Отключение тени у чекбоксов в тёмной теме === */
.dt-is-active .has-checkbox input,
.dt-is-active .checkbox input {
  box-shadow: none;
}

/* === Второстепенный текст и ссылки без наведения — светлый оттенок === */
.dt-is-active .scard__text,
.dt-is-active .page__complaint a:not(:hover),
.dt-is-active .bb-btn:not(:hover) {
  color: var(--tt-fade);
}

/* === Цвет мета-информации (статистика) === */
.dt-is-active .scard__footer-item,
.dt-is-active .comm__date {
  color: var(--tt-dark-fade);
}

/* === Границы карточек в тёмной теме === */
.dt-is-active .scard {
  border-bottom-width: 5px;
}

.dt-is-active .header__login-menu-border,
.dt-is-active .page__subtitle {
  border-top-width: 5px;
}

/* === Цвет лайков и дизлайков в карточках === */
.dt-is-active .scard__rating-likes a {
  background-color: var(--ui-green);
}
.dt-is-active .scard__rating-likes a + a {
  background-color: var(--ui-red);
}

/* === Футер карточек в тёмной теме — безопасное поведение flex === */
.dt-is-active .scard__footer-item {
  flex-grow: 0;               /* Не тянется на всю ширину */
}

.dt-is-active .scard__footer-item:first-child {
  flex-grow: 0;               /* Первый элемент тоже не тянется */
}

/* === Поддержка современного layout пагинации === */
@supports (display: contents) {
  .dt-is-active .pagination__btns {
    display: contents;
  }

  .dt-is-active .pagination__pages {
    justify-content: center;
  }

  .dt-is-active .pagination__btns > *:first-child {
    order: -1;
  }

  .dt-is-active .pagination__btns > * {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: var(--accent-red);
    color: #fff;
    box-shadow: var(--bsh);
  }
}

/* === Заголовки блоков (например, "Выбрать жанр") === */
.sb__title {
  padding-left: 20px;
  border-left: 3px solid var(--accent-red);
}

.sb__title::after {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* === Отступ сверху у блоков "Популярные" и "Комментарии" === */
.mobile-menu__extras {
  margin-top: 40px;
}