* {
  background: transparent;
  margin: 0px;
  padding: 0px;
  outline: none;
  border: 0px;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

input,
select {
  vertical-align: middle;
}

article,
aside,
figure,
figure img,
hgro,
footer,
header,
nav,
section,
main {
  display: block;
}

.clr {
  clear: both;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.anim {
  opacity: 0;
}

#iframe_serial {
  display: block;
  width: 100%;
  height: 500px;
  max-width: 100%;
  max-height: 100%;
}

.wrapper_for_fullstory {
  display: flex;
  flex-wrap: wrap;
  /* добавлено для разрешения переноса */
  margin-bottom: 30px;
  justify-content: space-between;
  /* это может помочь с выравниванием */
}

#block1,
#block2 {
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
  line-height: 1.7;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#block1 {
  flex: 1;
  max-width: 250px;
  /* Ограничиваем максимальную ширину */
}

#block2 {
  flex: 2;
  flex-basis: 60%;
  /* даем второму блоку больше места */
  padding: 20px;
}

#block3 {
  text-align: right;
  line-height: 1.7;
  padding: 20px;
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
  list-style: none;
  margin-top: 20px;
}

body {
  font:
    300 14px Play,
    Tahoma,
    sans-serif;
  padding: 0px;
  margin: 0px;
  color: rgb(255, 255, 255);
  background: url("../images/bg.png") rgb(30, 30, 33);
  min-height: 100%;
  width: 100%;
}

a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

a:hover {
  color: rgb(252, 74, 59);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 300;
  font-size: 24px;
}

@media (max-width: 768px) {
  .wrapper_for_fullstory {
    flex-direction: column;
  }

  #block1,
  #block2 {
    width: 100%;
    padding: 10px;
  }

  #iframe_serial {
    height: auto;
  }
}

/* ====== ФИНАЛЬНЫЕ ФИКСЫ НОВОСТЕЙ И КОММЕНТАРИЕВ ====== */

.news-index__list .release-card__button {
  font-size: 0;
}

.news-index__list .release-card__button::after {
  content: "ЧИТАТЬ";
  font-size: 12px;
}

.news-index__list .news-card__link {
  text-transform: uppercase;
}

.news-article__visual {
  align-self: start;
}

.news-article__image {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: #08090d;
}

.news-article .news-full__actions,
.news-article .news-full__comments {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

.news-full__actions {
  align-items: center;
  justify-content: flex-start;
  margin-top: 30px;
  padding: 14px 0;
}

.news-full__actions .ffav,
.news-full__actions .fcompl {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
}

.news-full__actions .ffav:hover,
.news-full__actions .fcompl:hover {
  border-color: rgba(255, 75, 75, 0.42);
  background: rgba(255, 75, 75, 0.1);
}

.news-full__comments {
  margin-top: 26px;
  padding: 0;
}

.news-full__section-title {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.news-full__comments-body {
  padding-top: 16px;
}

.news-full__comments-body .add-comms {
  max-width: 100%;
  padding: 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 75, 75, 0.07), rgba(8, 8, 8, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.news-full__comments-body .ac-inputs {
  gap: 12px;
  margin-bottom: 12px;
}

.news-full__comments-body .ac-inputs input,
.news-full__comments-body .form-secur input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.news-full__comments-body .ac-inputs input:focus,
.news-full__comments-body .form-secur input:focus {
  border-color: rgba(255, 75, 75, 0.68);
  box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.12);
}

.news-full__comments-body .ac-textarea {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.42);
}

.news-full__comments-body .bb-editor,
.news-full__comments-body .wysibb,
.news-full__comments-body .wysibb-body,
.news-full__comments-body textarea {
  width: 100% !important;
  max-width: 100% !important;
}

.news-full__comments-body .bb-editor .bb-pane,
.news-full__comments-body .wysibb-toolbar {
  background: #161923 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.news-full__comments-body .bb-editor textarea,
.news-full__comments-body textarea {
  min-height: 180px;
  padding: 14px;
  background: #05060a;
  color: #fff;
  border: 0;
}

.news-full__comments-body .ac-submit {
  margin-top: 12px;
}

.news-full__comments-body .ac-submit button {
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: #c91018;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.news-full__comments-body .comm-item {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.news-full__comments-body .comm-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: 50%;
}

.news-full__comments-body .comm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .news-article__visual {
    max-width: 280px;
  }
}

/* Финальная правка ленты новостей: новости остаются в общем layout с сайдбаром,
   но внутри выглядят как аккуратная лента статей, включая старый HTML из кеша DLE. */
.news-index {
  background: transparent;
}

.news-index .news-index__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.news-index .news-index__title {
  font-size: 32px;
  font-weight: 700;
}

.news-index__sort,
.news-index__sort form,
.news-index__sort ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.news-index__sort a,
.news-index__sort span,
.news-index__sort li {
  display: inline-flex;
  align-items: center;
}

.news-index__sort a {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
}

.news-index__sort a:hover {
  background: rgba(255, 75, 75, 0.22);
  color: #fff;
}

.news-index__list .release-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 75, 75, 0.08), rgba(10, 10, 10, 0.96) 46%),
    #080808;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.news-index__list .release-card::before {
  display: none;
}

.news-index__list .release-card__poster {
  width: 150px;
  height: 106px;
  flex: none;
  border-radius: 8px;
  box-shadow: none;
}

.news-index__list .release-card__poster img {
  object-fit: cover;
}

.news-index__list .release-card__poster-overlay {
  display: none;
}

.news-index__list .release-card__content {
  display: block;
  min-width: 0;
}

.news-index__list .release-card__header {
  margin-bottom: 7px;
}

.news-index__list .release-card__title {
  margin: 0 0 7px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}

.news-index__list .release-card__badges {
  gap: 6px;
}

.news-index__list .release-card__badge {
  padding: 4px 8px;
  letter-spacing: 0;
  text-transform: none;
}

.news-index__list .release-card__meta {
  display: none;
}

.news-index__list .release-card__description {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}

.news-index__list .release-card__footer {
  justify-content: flex-start;
  margin-top: 12px;
}

.news-index__list .release-card__rating {
  display: none;
}

.news-index__list .release-card__button {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: none;
}

.news-index__list .news-card--article {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(8, 8, 8, 0.92);
}

@media (max-width: 760px) {
  .news-index .news-index__header {
    display: block;
  }

  .news-index__sort {
    margin-top: 12px;
  }

  .news-index__list .release-card {
    grid-template-columns: 1fr;
  }

  .news-index__list .release-card__poster {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ====== НОВОСТИ: ОТДЕЛЬНЫЙ СТАТЕЙНЫЙ ФОРМАТ ====== */

.news-section-wrap {
  max-width: 980px;
  margin: 42px auto 0;
}

.news-section-main {
  width: 100%;
}

.news-index {
  padding: 0;
}

.news-index__header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.news-index__eyebrow {
  margin-bottom: 8px;
  color: #ff6d75;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-index__title {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
}

.news-index__sort {
  margin-bottom: 18px;
}

.news-index__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-card--article {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0;
  min-height: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.news-card--article::before {
  display: none;
}

.news-card__thumb {
  display: block;
  width: 164px;
  height: 112px;
  overflow: hidden;
  border-radius: 8px;
  background: #15171d;
}

.news-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.18s ease;
}

.news-card__thumb:hover img {
  transform: scale(1.04);
}

.news-card--article .news-card__body {
  display: block;
}

.news-card--article .news-card__meta {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.58);
}

.news-card--article .news-card__tag {
  color: #ff6d75;
}

.news-card--article .news-card__title {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.22;
  font-weight: 700;
}

.news-card--article .news-card__lead {
  margin: 0 0 9px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
}

.news-card--article .news-card__excerpt {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.65;
}

.news-card--article .news-card__link {
  display: inline-block;
  margin-top: 12px;
}

.news-article {
  max-width: 900px;
  margin: 0 auto 34px;
}

.news-article .news-full__header {
  padding-bottom: 20px;
}

.news-article .news-full__title {
  max-width: 820px;
  margin: 8px 0 12px;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 700;
}

.news-article .news-full__lead {
  max-width: 760px;
}

.news-article__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 26px;
}

.news-article__visual {
  position: sticky;
  top: 18px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.news-article__image {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 7px;
}

.news-article .news-full__content {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.78;
}

.news-article .news-full__content p:first-child {
  font-size: 20px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.93);
}

.news-article .news-full__actions,
.news-article .news-full__comments {
  max-width: 620px;
  margin-left: 290px;
}

@media (max-width: 900px) {
  .news-section-wrap {
    margin-top: 28px;
  }

  .news-article__layout {
    grid-template-columns: 1fr;
  }

  .news-article__visual {
    position: static;
    max-width: 360px;
  }

  .news-article .news-full__actions,
  .news-article .news-full__comments {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .news-card--article {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .news-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .news-card--article .news-card__title,
  .news-index__title {
    font-size: 24px;
  }

  .news-article .news-full__title {
    font-size: 30px;
  }
}

/* ====== НОВОСТИ ====== */

.news-card {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-card:first-child {
  padding-top: 0;
}

.news-card:last-child {
  border-bottom: 0;
}

.news-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 10px;
  background: #11131a;
  isolation: isolate;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.news-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.48)),
    radial-gradient(circle at 20% 20%, rgba(255, 109, 117, 0.22), transparent 46%);
  pointer-events: none;
}

.news-card__media-bg {
  position: absolute;
  inset: -18px;
  z-index: 0;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  object-fit: cover;
  filter: blur(18px) saturate(1.1);
  opacity: 0.58;
  transform: scale(1.08);
}

.news-card__media-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 74%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.58));
  transition: transform 0.2s ease;
}

.news-card__media:hover .news-card__media-img {
  transform: scale(1.03);
}

.news-card__media-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.news-card__meta,
.news-full__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
}

.news-card__tag,
.news-full__kicker {
  color: #ff6d75;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.22;
}

.news-card__title a {
  color: #fff;
  text-decoration: none;
}

.news-card__title a:hover {
  color: #ff7d84;
}

.news-card__lead {
  color: #f1f1f1;
  font-size: 15px;
  line-height: 1.45;
}

.news-card__excerpt {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.65;
}

.news-card__link {
  align-self: flex-start;
  margin-top: 3px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #ff6d75;
}

.news-card__link:hover {
  color: #ff8d94;
}

.news-full {
  max-width: 900px;
  margin: 0 auto 32px;
}

.news-full__header {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-full__title {
  margin: 8px 0 12px;
  color: #fff;
  font-size: 38px;
  line-height: 1.15;
}

.news-full__lead {
  margin: 16px 0 0;
  color: #f1f1f1;
  font-size: 18px;
  line-height: 1.55;
}

.news-full__figure {
  position: relative;
  margin: 26px 0 28px;
  min-height: 430px;
  overflow: hidden;
  border-radius: 12px;
  background: #0d0f15;
  isolation: isolate;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}

.news-full__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 38%, rgba(0, 0, 0, 0.24)),
    radial-gradient(circle at 14% 18%, rgba(255, 109, 117, 0.24), transparent 36%);
  pointer-events: none;
}

.news-full__image-bg {
  position: absolute;
  inset: -24px;
  z-index: 0;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(22px) saturate(1.08);
  opacity: 0.62;
  transform: scale(1.08);
}

.news-full__image {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(72%, 520px);
  height: 430px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.62));
}

.news-full__caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 3;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

.news-full__content {
  color: rgba(255, 255, 255, 0.84);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.75;
}

.news-full__content p {
  margin: 0 0 18px;
}

.news-full__content a {
  color: #ff858c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-full__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-full__comments {
  margin-top: 28px;
}

.news-full__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.news-full__comments-body {
  padding: 16px 0 0;
}

@media (max-width: 760px) {
  .news-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .news-card__media {
    aspect-ratio: 16 / 10;
  }

  .news-card__title {
    font-size: 21px;
  }

  .news-full__title {
    font-size: 28px;
  }

  .news-full__figure {
    min-height: 330px;
  }

  .news-full__image {
    max-width: 86%;
    height: 330px;
  }

  .news-full__lead,
  .news-full__content {
    font-size: 16px;
  }
}

button,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="button"],
input[type="submit"] {
  appearance: none;
  font-size: 15px;
}

.button,
.btn,
.pagi-load a,
.up-secondcd li a,
.usp-edit a,
.qq-upload-button,
button:not(.color-btn):not([class*="fr"]):not(.search-btn):not([class*="owl-"]),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.meta-fav a,
.usp-btn a {
  display: inline-block;
  text-align: center;
  padding: 0px 20px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  font-weight: 500;
  background: linear-gradient(90deg, rgb(148, 8, 8), rgb(148, 8, 8));
  color: rgb(255, 255, 255);
  font-size: 15px;
}

.button:hover,
.btn:hover,
.up-second li a:hover,
.usp-edit a:hover,
.qq-upload-button:hover,
.pagi-load a:hover,
.usp-btn a:hover,
button:not(.color-btn):not([class*="fr"]):not(.search-btn):not(
    [class*="owl-"]
  ):hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.meta-fav a:hover {
  background: linear-gradient(90deg, rgb(212, 7, 8), rgb(212, 7, 8));
  color: rgb(255, 255, 255);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px 0px inset;
}

::-webkit-scrollbar-button {
  background-image: url("");
  background-repeat: no-repeat;
  width: 100%;
  height: 0px;
}

::-webkit-scrollbar-track {
  background-color: rgb(39, 38, 39);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(95deg, rgb(148, 8, 8), rgb(212, 7, 8));
}

::-webkit-resizer {
  background-image: url("");
  background-repeat: no-repeat;
  width: 4px;
  height: 0px;
}

::-webkit-scrollbar {
  width: 4px;
}

input[type="text"],
input[type="password"] {
  height: 40px;
  line-height: 40px;
  border: 0px;
  padding: 0px 15px;
}

select {
  height: 40px;
  border: 0px;
  padding: 0px 15px;
}

textarea {
  padding: 15px;
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  background-color: rgba(29, 28, 28, 0.2);
  color: rgb(255, 255, 255);
  box-shadow: rgb(0 0 0 / 30%) 0px 0px 0px 1px inset;
}

select {
  width: auto;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  box-shadow:
    rgb(257, 74, 59) 0px 0px 0px 1px inset,
    rgba(0, 0, 0, 0.1) 1px 2px 5px inset;
}

input::placeholder,
textarea::placeholder {
  color: rgb(255, 255, 255);
  opacity: 1;
  font-size: 14px;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}

.img-box,
.img-wide,
.img-resp,
.img-resp-vert,
.img-fit {
  overflow: hidden;
  position: relative;
}

.img-resp {
  padding-top: 70%;
}

.img-resp-vert {
  padding-top: 140%;
}

.img-box img,
.img-resp img,
.img-resp-vert img {
  width: 100%;
  min-height: 100%;
  display: block;
}

.img-resp img,
.img-resp-vert img {
  position: absolute;
  left: 0px;
  top: 0px;
}

.img-wide img {
  width: 100%;
  display: block;
}

.img-fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-row,
#dle-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.fx-col {
  display: flex;
  flex-direction: column;
}

.fx-center {
  justify-content: center;
}

.fx-middle {
  align-items: center;
}

.fx-start {
  justify-content: flex-start;
}

.fx-first {
  order: -1;
}

.fx-last {
  order: 10;
}

.fx-1 {
  flex-basis: 0px;
  -webkit-box-flex: 1;
  flex-grow: 1;
  max-width: 100%;
  min-width: 50px;
}

.fx-between {
  justify-content: space-between;
}

b,
strong,
.fw700 {
  font-weight: 600;
}

.icon-left [class*="fa-"],
.icon-left .icon {
  margin-right: 10px;
}

.icon-right [class*="fa-"],
.icon-right .icon {
  margin-left: 10px;
}

.hidden,
#dofullsearch {
  display: none;
}

.anim,
.btn,
button,
.popular-item-img::before,
.short-item a,
.sidebar a,
.header-btn,
.short-img,
.footer a,
.side-nav a {
  transition: all 0.3s ease 0s;
}

.mtitle,
.sub-title h1,
.form-wrap h1 {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 24px !important;
}

#dle-content > * {
  width: 100%;
}

.vkmfilm {
  display: block;
  width: 100%;
  max-width: 100%;
}

.film_main {
  display: block;
  width: 812px;
  height: 480px;
  max-width: 100%;
}

.welcome-text {
  line-height: 1.7;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 20px;
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
  list-style: none;
  text-align: center;
  font-size: 20px;
  border: solid black 5px;
  border-radius: 25px;
}

.wrap-center {
  max-width: 1200px;
  margin: 0px auto;
  position: relative;
  z-index: 20;
}

.wrap-main {
  background-color: rgb(5, 5, 5);
  box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 20px;
}

.header {
  padding: 3px 12px;
  background-color: rgb(5, 5, 5);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.cols {
  padding: 30px;
}

.main {
  min-height: 100vh;
}

.sidebar {
  width: 300px;
  margin-right: 30px;
}

.footer {
  background: url(none) 40px 12px / 40px no-repeat rgb(42, 42, 42);
  padding: 20px 40px 20px 90px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
  font-size: 14px;
}

.footer a {
  color: rgb(325, 13, 13);
  text-decoration: underline;
}

/* gotop: кнопка внизу сайта, для того чтобы перейти к самому верху сайта. 
Старая форма:
position: right;
    width: 85px;
    height: 100px;
    line-height: 95px;
    right: 5px;
    bottom: 10px;
    top: 10px;
    z-index: 990;
    display: none;
    background-color: rgb(148, 8, 8);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1.1875rem 2.125rem -0.9375rem;
    cursor: pointer;
    font-size: 24px;
    text-align: center;
   
#gotop 
{ 
    right: 30px;
    bottom: 30px;
    width: 350px;
    height: 35px;
    color: #0B0B0B;
    background-color: #ffca28;
    z-index: 100;
    cursor: pointer;
    display: flex;
}
*/

.buttonUp {
  position: fixed;
  top: 0px;
  width: 55px;
  height: 200%;
  margin-bottom: 200px;
  color: #0b0b0b;
  background-color: rgb(40, 40, 40);
  cursor: pointer;
  opacity: 0.4;
  display: none;
}

.buttonUp:hover {
  position: fixed;
  top: 0px;
  width: 58px;
  height: 200%;
  margin-bottom: 200px;
  color: #0b0b0b;
  background-color: rgb(40, 40, 40);
  cursor: pointer;
  opacity: 0.8;
  display: none;
}

/* часть про лого и маскота в верхнем левом углу */

.card {
  display: inline-block;
  position: relative;
  background: url("https://frondastudio.ru/fronda_logo_sayt12.png") no-repeat;
  background-size: 550px 95px;
  width: 560px;
  height: 135px;
  margin-top: 7px;
}

.card:hover {
  background: url("https://frondastudio.ru/fronda_logo_sayt11.png") no-repeat;
  background-size: 550px 95px;
}

.alisa {
  background-size: 550px 200px;
  padding-top: 00px;
  padding-right: 60px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.alisa:hover {
  background: url(https://abrakadabra.fun/uploads/posts/2022-02/1644420485_1-abrakadabra-fun-p-opisanie-khinati-iz-voleibola-1.jpg);
  background-size: 620px 250px;
}

a.tmptest:hover {
  background: url(https://i.pinimg.com/736x/14/2f/32/142f321bab37f1ecd8908fa3ed42c2d2.jpg);
}

.header-btn {
  padding: 0px 40px;
  margin-bottom: -14px;
  /* border: 1px; */
  border-radius: 5px;
}

.search-wrap {
  position: relative;
  margin: 20px 20px 0px 30px;
}

.search-box input,
.search-box input:focus {
  padding: 0px 50px 0px 16px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset;
  border: 1px solid LightSlateGray;
  border-radius: 5px;
  margin-bottom: 7px;
}

.search-box input:not(:focus)::placeholder {
  color: rgb(204, 204, 204);
  opacity: 1;
  font-size: 12px;
}

.search-box button {
  position: absolute;
  border-left: 1px solid LightSlateGray;
  border-radius: 5px;
  right: 0px;
  top: 0px;
  z-index: 10;
  width: 60px;
  cursor: pointer;
  background: none;
  line-height: 24.5px;
  color: rgb(255, 255, 255);
  text-align: center;
  margin-bottom: 7px;
}

/* Тут высота для карусели что сверху сайта находится всегда, "главная карусель" предложки */
.carou-content {
  height: 203px;
}

.carou-sect {
  padding: 20px 50px;
  background: rgb(5, 5, 5);
  border-bottom: 1px solid rgb(0, 7, 8);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
}

.carou-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.popular-item-img {
  display: block;
  height: 200px;
}

.popular-item-title {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  top: 0px;
  padding-top: 65px;
  font-size: 17px;
  color: rgb(255, 255, 255);
  font-weight: 50;
  text-align: center;
}

.popular-item:hover .popular-item-title {
  opacity: 0.9;
  background: linear-gradient(180deg, black 65%, rgb(110, 8, 8));
  top: 0px;
  text-align: center;
}

.side-box {
  padding: 15px;
  margin-bottom: 20px;
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
}

.side-bt {
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  font-size: 24;
  padding: 10px 15px;
  background-color: rgb(148, 8, 8);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.mb-remove {
  margin-bottom: -20px;
}

.nav-col {
  width: 50%;
}

.nav-col + .nav-col {
  width: 46%;
}

.nav-title {
  font-weight: 500;
  margin-bottom: 9px;
}

.nav-menu + .nav-title {
  margin-top: 12px;
}

.nav-menu a {
  font-size: 13px;
  color: rgb(255, 255, 255);
  display: block;
  margin-bottom: 7px;
  padding: 5px 5px 5px 10px;
  background-color: rgb(30, 30, 30);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.side-popular-item-img {
  width: 100%;
  /* Ширина изображения растягивается по контейнеру */
  height: auto;
  /* Высота подстраивается для сохранения пропорций */
  margin-right: 20px;
  object-fit: cover;
  /* Обрезка изображения, чтобы оно заполнило контейнер */
}

.side-popular-item {
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
  padding: 10px;
}

.side-popular-item:nth-child(2n + 1) {
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.side-popular-item-title {
  font-weight: 500;
}

.side-popular-item-info {
  margin-top: 10px;
  font-size: 13px;
  color: rgb(204, 204, 204);
}

.side-popular-item-date {
  color: rgb(204, 204, 204);
  margin-top: 10px;
  font-size: 11px;
  font-weight: 300;
}

.side-recommend-item {
  display: block;
  margin-bottom: 20px;
  width: 46.6%;
}

.side-recommend-item-img {
  border-radius: 0px;
}

.side-recommend-item:hover {
  opacity: 0.8;
}

.lcomm {
  margin-bottom: 20px;
}

.ltitle {
  display: block;
  line-height: 1;
  font-weight: 300;
  font-size: 13px;
  margin-top: 10px;
  padding-left: 2px;
}

.ltext {
  line-height: 1.3;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
  padding: 10px;
}

.lmeta {
  font-size: 13px;
  margin: 10px 0px;
  color: rgb(252, 74, 59);
  font-weight: 300;
}

.ldate,
.lav,
.lname {
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
}

.lav {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.lcomm .comm-letter {
  line-height: 20px;
  font-size: 12px;
}

.lname {
  font-weight: 400;
}

.sect {
  margin-bottom: 20px;
}

.sect-header {
  margin-bottom: 15px;
}

.sect:last-child {
  margin-bottom: 0px;
  background-color: rgb(15, 15, 15);
}

.sect-title {
  font-size: 16px;
  font-weight: 600;
  color: rgb(252, 74, 59);
}

.sect-title [class*="fa"] {
  color: rgb(252, 74, 73);
  margin-top: 30px;
  margin-left: 10px;
}

.side-bt [class*="fa-"],
.speedbar [class*="fa-"],
.carou-title [class*="fa-"] {
  color: rgb(252, 74, 73);
}

.sorter,
.sect-link {
  position: relative;
  cursor: pointer;
  height: 30px;
  line-height: 27px;
  margin-left: 15px;
  padding: 0px 10px;
  background-color: rgb(148, 8, 8);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1.1875rem 2.125rem -0.9375rem;
  font-size: 13px;
  display: block;
}

.sorter::before {
  content: attr(data-label);
  display: inline-block;
  vertical-align: top;
}

.sorter > span {
  display: inline-block;
  vertical-align: top;
  margin-left: 2px;
}

.sorter form {
  display: none;
  background-color: rgb(12, 12, 13);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 10px;
  line-height: 26px;
  position: absolute;
  right: -1px;
  top: 100%;
  width: 160px;
  z-index: 999;
}

.sorter a:hover {
  text-decoration: underline;
}

.sort li.asc a::after,
.sort li.desc a::after {
  content: ;
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  margin-left: 10px;
  font-weight: 300;
}

.sort li.desc a::after {
  content: "";
}

.sorter:hover,
.sect-link:hover {
  background: linear-gradient(90deg, rgb(217, 7, 8), rgb(217, 7, 8));
  color: rgb(255, 255, 255);
}

.short-item {
  margin-bottom: 20px;
  padding: 20px;
  background-color: rgb(30, 30, 30);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
}

.short-img {
  width: 170px;
  height: 250px;
  margin-right: 20px;
  display: block;
}

.short-header {
  margin-bottom: 0px;
}

.short-title {
  display: block;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
}

.short-title a {
  text-decoration: none;
}

.short-text {
  font-size: 14px;
  line-height: 1.7;
}

.short-list li {
  position: relative;
  line-height: 1.5em;
}

.short-list li span {
  position: relative;
  line-height: 1.5em;
  top: 0px;
  left: 0px;
}

.short-list a {
  color: rgb(252, 74, 59);
  border-bottom: 1px dotted rgb(42, 42, 43);
}

.short-meta {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
}

.short-meta-item {
  margin-right: 20px;
}

.short-rating {
  line-height: 28px;
  background-color: rgb(0, 255, 0);
  padding: 0px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  margin-right: 20px;
}

.short-rating .fa-thumbs-up {
  color: rgb(0, 255, 69);
  margin-right: 10px;
}

.short-rating .fa-thumbs-down {
  color: rgb(238, 52, 66);
  margin: 0px 10px;
}

.short-label {
  background: linear-gradient(90deg, rgb(245, 130, 32), rgb(238, 61, 60));
  color: rgb(255, 255, 255);
  padding: 3px 6px;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 10;
  font-size: 12px;
  font-weight: 500;
}

.short-btn {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  padding: 0px 10px;
}

.short-rate-in {
  line-height: 30px;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
  padding: 0px 6px;
  margin-left: 10px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 6px;
}

.short-rate-in::before {
  content: attr(data-text);
  display: inline;
  margin-right: 3px;
  text-transform: uppercase;
}

.short-rate-kp {
  background-color: rgb(0, 255, 0);
  color: rgb(255, 255, 255);
}

.short-rate-imdb {
  background-color: rgb(0, 255, 0);
  color: rgb(0, 0, 0);
}

.mrating {
  margin-right: 20px;
}

.mrating a {
  transition: none 0s ease 0s;
}

.short-img:hover {
  opacity: 0.8;
}

.site-desc {
  line-height: 1.7;
  font-size: 14px;
  padding: 20px;
  background-color: rgb(148, 8, 8);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
}

.site-desc::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 5px;
}

.site-desc h1,
.site-desc h2 {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 10px;
}

.site-desc li {
  list-style-type: disc;
  margin-left: 40px;
}

.site-desc p {
  margin-bottom: 10px;
}

.site-desc > :last-child {
  margin-bottom: 0px;
}

.site-desc a {
  color: rgb(0, 255, 0);
  text-decoration: underline;
}

.site-desc img {
  float: left;
  max-width: 200px;
  margin: 0px 10px 10px 0px;
}

.bottom-nav {
  margin-bottom: -10px;
  text-align: center;
}

.navigation a,
.navigation span,
.pnext a,
.pprev a,
.pprev > span,
.pnext > span {
  display: inline-block;
  padding: 0px 10px;
  margin: 0px 5px 10px;
  line-height: 36px;
  min-width: 36px;
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1.1875rem 2.125rem -0.9375rem;
}

.navigation span:not(.nav_ext),
.pagi-nav a:hover {
  background-color: rgb(15, 15, 15);
  color: rgb(255, 255, 255);
  border: 0px;
}

.speedbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin: 0 0 18px;
  padding: 11px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 48, 56, .22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 42%, rgba(255,48,56,.08)),
    rgba(8, 8, 10, .88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.36);
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  backdrop-filter: blur(14px);
}

.speedbar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #ff3038, #8c0508);
  box-shadow: 0 0 18px rgba(255,48,56,.52);
}

.speedbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .22;
}

.speedbar .fal {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 2px;
  flex: 0 0 25px;
  border: 1px solid rgba(255, 48, 56, .24);
  border-radius: 9px;
  background: rgba(255, 48, 56, .10);
  color: #ff3038;
  font-size: 12px;
}

.speedbar a,
.speedbar span:not(.fal) {
  position: relative;
  z-index: 1;
}

.speedbar a {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: color .18s ease;
}

.speedbar a:hover {
  color: #ff3038;
}

.fleft {
  width: 200px;
  margin-right: 20px;
}

.fimg {
  border-radius: 0px;
}

.ftext {
  margin: 20px 0px;
}

.fcols .short-list li {
  font-size: 13px;
}

.fcols .short-meta-item:last-child {
  margin-right: 0px;
}

h1 a {
  margin-left: 10px;
  font-size: 15px;
}

.fcols {
  padding: 20px;
  background-color: rgb(42, 42, 43);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
}

.frels .popular-item-img::before {
  background: linear-gradient(transparent 0%, rgb(148, 8, 8) 100%);
  opacity: 1;
}

.fsubtitle {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}

.fplayer {
  position: relative;
  background-color: rgb (25, 25, 25);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
  height: 80px;
  justify-content: center;
  text-align: center;
}

.fctrl {
  text-align: center;
  margin-top: 30px;
  font-size: 17px;
}

.fplayer .tabs-sel span {
  display: inline-block;
  padding: 0px 20px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  background-color: rgb(25, 25, 25);
  border-right: 1px solid rgb(26, 26, 26);
  font-weight: 5000;
  margin-left: -1px;
}

.fplayer .tabs-sel span.current {
  background: linear-gradient(90deg, rgb(0, 255, 0), rgb(25, 25, 25));
  color: rgb(255, 255, 255);
}
.fplayer .tabs-sel span:hover {
  text-decoration: none;
}

.js .tabs-b {
  background-color: rgb(0, 255, 0);
  display: none;
}

.js .tabs-b.visible {
  display: block;
}

.fcompl a:hover,
.ffav a:hover,
.ffav span:hover {
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.fcompl,
.ffav {
  margin-left: 20px;
}

.fshare {
  padding: 10px;
  text-align: center;
  white-space: nowrap;
}

.fshare .fab,
.fshare .fas {
  width: 50px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
  background-color: rgb(0, 255, 0);
  color: rgb(255, 255, 255);
  font-size: 14px;
  margin: 0px 2px;
  cursor: pointer;
}

.fshare .fa:hover {
  opacity: 0.8;
}

.fab.fa-vk {
  background-color: rgb(80, 117, 165);
}

.fab.fa-facebook-f {
  background-color: rgb(75, 107, 175);
}

.fab.fa-twitter {
  background-color: rgb(45, 170, 225);
}

.fab.fa-odnoklassniki,
.fa.fa-rss {
  background-color: rgb(252, 109, 0);
}

.fas.fa-paper-plane {
  background-color: rgb(86, 130, 163);
}

.fshare .fa-facebook-f::before {
  content: "" !important;
}

.video-box embed,
.video-box object,
.video-box video,
.video-box iframe,
.video-box frame {
  display: block;
  width: 812;
  height: 480;
}

.mejs-container {
  max-width: 100% !important;
}

.test-text {
  text-align: center;
  font-size: 22px;
  border: solid black 5px;
  border-radius: 25px;
}

.full-text {
  line-height: 1.7;
  margin-bottom: 15px;
  padding: 20px;
  background-color: rgb(15, 15, 15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
  list-style: none;
}

.full-text img:not(.emoji) {
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.full-text > img[style*="left"],
.full-text > .highslide img[style*="left"] {
  margin: 0px 10px 10px 0px;
}

.full-text > img[style*="right"],
.full-text > .highslide img[style*="right"] {
  margin: 0px 0px 10px 10px;
}

.full-text a {
  font-size: 200px;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

.full-text a:hover {
  color: rgb(252, 74, 59);
  text-decoration: none;
}

.full-text h2,
.full-text h3,
.full-text h4,
.full-text h5 {
  margin: 10px 0px;
  font-size: 24px;
  font-weight: 700;
}

.full-text p {
  margin-bottom: 10px;
}

.full-text > ul,
.full-text > ol {
  margin: 0px;
}

.full-text > ul li {
  list-style: disc;
  margin-left: 40px;
}

.full-text > ol li {
  list-style: decimal;
  margin-left: 40px;
}

.f-menu {
  height: 40px;
  line-height: 39px;
  background-color: rgb(30, 30, 30);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.f-menu li {
  float: left;
  text-align: center;
  width: 200px;
  font-weight: 500;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.f-menu li a {
  display: block;
  padding: 0px 20px;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}

.f-menu a.active,
.f-menu a:hover {
  color: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgb(148, 8, 8), rgb(212, 7, 8));
}

.f-menu a[data-label] {
  position: relative;
}

.f-menu a[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  right: -15px;
  background-color: rgb(0, 255, 0);
  color: rgb(0, 255);
  height: 20px;
  line-height: 20px;
  padding: 0px 10px;
  font-weight: 500;
  border-radius: 10px;
}

.add-comms {
    display: flex;
    flex-direction: column;
    /* Элементы будут располагаться друг под другом */
    margin-bottom: 26px;
    padding: 20px;
    background-color: rgb(5, 5, 5);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
    overflow: hidden;
    border-radius: 12px !important;
    border-color: #232535 !important;
  /* Предотвращает выход содержимого за пределы блока */
}

.ac-inputs input {
  width: 48.5%;
  margin-bottom: 15px;
}

.ac-textarea textarea {
  height: 100px;
  margin-bottom: 15px;
}

.add-comms input,
.add-comms textarea,
.ac-submit button {
}

.ac-protect,
.ac-textarea .bb-editor + br {
  display: none;
}

.comments_subscribe input {
  margin-right: 10px;
}

.comments_subscribe {
  display: block;
}

.mass_comments_action {
  display: none;
}

.last-comm-link {
  display: inline-block;
  padding-bottom: 20px;
  color: rgb(0, 102, 204);
  font-size: 18px;
}

.comm-avatar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comm-letter {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

.comm-item {
  font-size: 13px;
  padding-left: 55px;
  position: relative;
  min-height: 40px;
  margin-bottom: 20px;
}

.comm-two {
  margin: 5px 0px 10px;
}

.comm-one > span {
  margin-right: 15px;
  opacity: 0.6;
}

.comm-one > span.comm-author,
.comm-one > span.comm-author a {
  font-weight: 500;
  opacity: 1;
}

.comm-three-left > a,
.comm-three-right li a {
  opacity: 0.6;
}

.comm-three-right li {
  display: inline-block;
  margin-left: 15px;
}

.comm-rate3 {
  white-space: nowrap;
  margin-right: 15px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: -3px;
}

.comm-rate3 a {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  opacity: 0.8;
}

.comm-rate3 a:first-child {
  top: -5px;
}

.comm-rate3 > span {
  margin: 0px 5px;
}

.comm-rate3 > span > span.ratingtypeplus {
  color: rgb(6, 182, 1);
}

.comm-rate3 > span > span.ratingplus {
  color: rgb(149, 198, 19);
}

.comm-rate3 > span > span.ratingminus {
  color: rgb(255, 14, 14);
}

.comm-three a:hover {
  border-bottom-color: transparent;
}

.comm-three-left > a {
  opacity: 1;
  color: rgb(252, 74, 73);
  border-bottom: 1px dotted rgb(252, 74, 73);
}

.overlay-box {
  position: fixed;
  z-index: 998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: transparent;
  cursor: pointer;
}

.login-box {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(51, 51, 51);
  padding: 30px 60px 40px;
  border-top: 5px solid rgb(252, 74, 73);
  width: 400px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px;
}

.login-close {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: -30px;
  right: -30px;
  color: rgb(255, 255, 255);
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
}

.login-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0px auto 15px;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  background-color: rgb(9, 12, 16);
  color: rgb(143, 167, 198);
}

.login-input {
  margin-bottom: 15px;
}

.login-btn button {
  width: 100%;
  margin: 15px 0px;
}

.login-btm a {
  border-bottom: 1px dotted rgb(252, 74, 73);
  color: rgb(252, 74, 73);
  font-size: 13px;
}

.login-check {
  position: relative;
  font-size: 14px;
}

.login-check input {
  opacity: 0;
  position: absolute;
  cursor: pointer;
}

.login-check span {
  display: block;
  padding-left: 36px;
  height: 30px;
  line-height: 30px;
  color: rgb(147, 147, 147);
}

.login-check span::before,
.login-check span::after {
  content: "";
  position: absolute;
  top: 50%;
  transition: all 0.3s ease 0s;
}

.login-check span::before {
  left: 0px;
  height: 10px;
  margin-top: -5px;
  width: 26px;
  border-radius: 5px;
  background: rgb(9, 12, 16);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px inset;
}

.login-check span::after {
  left: 1px;
  height: 12px;
  width: 12px;
  margin-top: -6px;
  background: rgb(46, 204, 113);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0) 0px 1px 4px;
}

.login-check input:checked + span::before {
  background-color: rgb(255, 255, 255);
}

.login-check input:checked + span::after {
  left: 13px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
}

.login-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  margin-top: -1px;
}

.login-menu li {
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  width: 50%;
}

.login-menu a {
  display: block;
  padding: 10px 5px;
  font-size: 13px;
}

.login-menu li .fa {
  display: none;
  height: 28px;
  font-size: 22px;
  color: rgb(44, 105, 183);
}

.login-admin {
  text-align: center;
  margin: -10px 0px 25px;
}

.login-soc-title {
  display: flex;
  align-items: center;
  margin: 30px 0px 15px;
}

.login-soc-title::before,
.login-soc-title::after {
  content: "";
  height: 1px;
  background-color: rgb(9, 12, 16);
  flex: 1 1 0%;
}

.login-soc-title::before {
  margin-right: 15px;
}

.login-soc-title::after {
  margin-left: 15px;
}

.login-soc-btns {
  text-align: center;
}

.login-soc-btns a {
  display: inline-block;
  margin: 0px 3px;
  vertical-align: top;
}

.login-soc-btns img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* TinyMCE comment editor */
.ac-textarea .tox .tox-tbtn {
    padding: 0 !important;
}

.tox-tbtn {
    padding: 0 !important;
}

.tox-tbtn__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tox-toolbar__group {
  gap: 4px;
}

.ac-textarea .tox-tinymce {
    border-radius: 12px !important;
    border-color: #232535 !important;
}

.ac-submit {
    margin-top: 12px
}

.ac-inputs input {
    border-radius: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;   /* скругление (по желанию) */
    padding: 8px 10px;    /* чтобы текст не прилипал */
    outline: none;        /* убирает стандартную обводку */
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 8px;                   /* отступ от верхнего края */
    right: 8px;                 /* отступ от правого края */
    padding: 0 !important;
}

.ui-dialog-titlebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-dialog-titlebar-close .ui-icon {
  margin: 0;
  position: static;
}

.ui-dialog-titlebar-close .ui-button-icon-space {
  display: none;
}

.ui-widget-content textarea {
    border-radius: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;   /* скругление (по желанию) */
    padding: 8px 10px;    /* чтобы текст не прилипал */
    outline: none;        /* убирает стандартную обводку */
    margin-top: 6px;
}

.ui-widget-content input {
    border-radius: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;   /* скругление (по желанию) */
    padding: 8px 10px;    /* чтобы текст не прилипал */
    outline: none;        /* убирает стандартную обводку */
    margin-top: 6px;
}

/*--------------------------------------------------------OWL--------------------------------------------------------*/

.owl-carousel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s linear 0s;
  width: 100%;
  position: relative;
  z-index: 10;
}

.owl-carousel .owl-stage {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled,
.owl-carousel.owl-refresh .owl-item {
  display: none;
}

.owl-carousel.owl-loaded,
.owl-carousel.owl-loading,
.no-js .owl-carousel {
  display: block;
  opacity: 1;
}

.owl-carousel.owl-loading,
.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-drag .owl-item {
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: grab;
}

.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
  z-index: 0;
}

.owl-carousel .owl-animated-out {
  z-index: 1;
}

.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fal-fa-long-arrow-left {
}

.fal-fa-long-arrow-up {
}

.owl-height {
  transition: height 500ms ease-in-out 0s;
}

.owl-nav {
  position: absolute;
  right: 0px;
  top: 5px;
  z-index: 3;
  width: 4px;
}

.owl-prev,
.owl-next {
  display: inline;
  cursor: pointer;
  opacity: 0.65;
  color: rgb(110, 8, 8);

  position: relative;
  background-color: rgb(30, 30, 30);
  opacity: 0.9;
  font-size: 35px;
}

.owl-prev {
  position: relative;
  top: 15px;
  background-color: black;
}

.owl-next {
  background-color: black;
  top: 15px;
}

.owl-prev:hover,
.owl-next:hover {
  color: grey;
}

/*------------------------------------------------------------ Карусель сов -------------------------*/

.btn-menu {
  display: none;
}

.side-panel {
  width: 280px;
  height: 100%;
  overflow: hidden auto;
  background-color: #990012;
  padding: 20px;
  z-index: 9999;
  position: fixed;
  left: -320px;
  top: 0px;
  transition: left 0.4s ease 0s;
}

.side-panel.active {
  left: 0px;
}

.close-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 9998;
  display: none;
}

.btn-close {
  cursor: pointer;
  display: block;
  left: 280px;
  top: -40px;
  position: fixed;
  z-index: 9999;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  background-color: rgb(5, 5, 5);
  color: rgb(148, 8, 8);
  transition: top 0.4s ease 0s;
}

.btn-close.active {
  top: 0px;
  background-color: rgb(148, 8, 8);
  color: rgb(5, 5, 5);
}

body.opened-menu {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.side-panel .side-nav a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-panel .side-box {
  margin-bottom: 20px;
}

/*-------------- MEDIA QUERIES -----------------*/

@media screen and (max-width: 1220px) {
  .wrap {
    padding: 0px;
    overflow: hidden;
  }

  .header,
  .footer,
  .cols,
  .carou-sect {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0px;
    background-image: none;
  }

  .wrap-center {
    max-width: 1000px;
    border-radius: 0px;
  }

  .sidebar {
    display: none;
  }

  .btn-menu {
    display: block;
    font-size: 28px;
    margin-left: 20px;
    cursor: pointer;
    color: rgb(148, 8, 8);
  }

  .cols {
    padding-top: 20px;
  }

  .video-box embed,
  .video-box object,
  .video-box video,
  .video-box iframe,
  .video-box frame {
    height: 400px;
  }

  .welcome-text {
    line-height: 1.7;
    margin-bottom: 15px;
    padding: 20px;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
    list-style: none;
    text-align: center;
    font-size: 22px;
    border: solid black 5px;
    border-radius: 25px;
  }
}

@media screen and (max-width: 950px) {
  .wrap-center {
    max-width: 768px;
  }

  .btn-menu {
    display: block;
    font-size: 28px;
    margin-left: 20px;
    cursor: pointer;
    color: rgb(148, 8, 8);
  }

  .short-meta-item:not(.mrating-count) {
    display: none;
  }

  .footer {
    display: block;
    text-align: center;
  }

  .footer-copyright {
    margin: 0px 0px 20px;
  }

  .welcome-text {
    line-height: 1.7;
    margin-bottom: 15px;
    padding: 20px;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
    list-style: none;
    text-align: center;
    font-size: 22px;
    border: solid black 5px;
    border-radius: 25px;
  }
}

@media screen and (max-width: 768px) {
  .welcome-text {
    line-height: 1.7;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 20px;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1.1875rem 2.125rem -0.9375rem rgb(0 0 0 / 20%);
    list-style: none;
    text-align: center;
    font-size: 14px;
    border: solid black 5px;
    border-radius: 25px;
  }

  .btn-menu {
    display: block;
    font-size: 28px;
    margin-left: 20px;
    cursor: pointer;
    color: rgb(148, 8, 8);
  }

  .wrap-center {
    max-width: 640px;
  }

  .not-logged .login-avatar {
    display: none;
  }

  .login-close {
    top: -5px;
  }

  .login-title {
    font-size: 18px;
  }

  .login-box {
    max-width: calc(100% - 60px);
    padding: 15px;
  }

  .search-wrap {
    order: 10;
    min-width: 100%;
    margin: 20px 0px 0px;
  }

  .header-btn {
    padding: 0px 10px;
  }

  .logo {
    flex-basis: 0px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 50%;
    min-width: 50px;
    position: relative;
    margin-right: 20px;
  }

  .owl-nav {
    display: none;
  }

  .fcols {
    display: block;
    padding: 15px;
    background-color: transparent;
  }

  .fleft {
    margin: 0px auto 10px;
  }

  .fcols::after {
    content: "";
    display: table;
    clear: both;
  }

  .short-rates {
    width: 100%;
    margin: 10px 0px 0px -10px;
    justify-content: flex-start;
  }

  .fcols .short-list li {
    padding-left: 100px;
  }

  .mrating-count {
    text-align: right;
    margin-right: 60px;
    margin-left: -20px;
  }
  .ffav,
  .fcompl {
    display: none;
  }

  .fplayer .tabs-sel > span {
    width: 50%;
    text-align: center;
  }

  .fctrl {
    padding: 0px;
  }

  .fplayer {
    margin-left: 0px;
    margin-right: 0px;
  }

  .f-menu {
    display: none;
  }

  .dcont button {
    font-size: 12px;
    padding: 0px 15px !important;
  }

  .comments-tree-list .comments-tree-list {
    padding-left: 0px !important;
  }

  .comments-tree-list .comments-tree-list::before {
    display: none;
  }

  .mass_comments_action {
    display: none;
  }
}

@media screen and (max-width: 590px) {
  .btn-menu {
    display: block;
    font-size: 28px;
    margin-left: 20px;
    cursor: pointer;
    color: rgb(148, 8, 8);
  }

  .wrap-center {
    max-width: 480px;
  }

  .short-item {
    margin-bottom: 10px;
    padding: 0px;
    background-color: transparent;
    border: 0px;
    width: 47% !important;
  }

  .short-item .short-img {
    width: 100%;
    margin: 0px 0px 10px;
    padding-top: 140%;
    height: auto;
  }

  .short-item .short-meta,
  .short-item .short-list,
  .short-item .short-rates,
  .sect-title .fal {
    display: none;
  }

  .short-item .short-title {
    white-space: normal;
    font-size: 15px;
  }

  .short-item .short-img img {
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .navigation {
    justify-content: center;
  }

  .sect-title,
  .logo {
    font-size: 18px;
  }

  .ac-inputs input {
    width: 100%;
  }

  .video-box embed,
  .video-box object,
  .video-box video,
  .video-box iframe,
  .video-box frame {
    height: 300px;
  }

  .f-menu {
    display: none;
  }

  .ui-dialog {
    width: 100% !important;
  }

  .upop-left,
  .upop-right {
    margin: 0px;
    padding: 0px 20px;
    float: none !important;
    width: 100% !important;
  }

  .upop-left {
    margin-bottom: 10px;
    text-align: center;
  }

  .ui-dialog-buttonset button {
    display: block;
    margin: 0px 0px 5px;
    width: 100%;
  }

  #dofullsearch,
  #searchsuggestions span.seperator {
    display: none !important;
  }

  .attach .download-link {
    margin: 0px -15px 0px 0px;
    float: none;
    display: block;
    padding: 0px 10px;
  }

  .attach-info {
    float: none;
  }
}

@media screen and (max-width: 470px) {
  .btn-menu {
    display: block;
    font-size: 28px;
    margin-left: 20px;
    cursor: pointer;
    color: rgb(148, 8, 8);
  }

  .wrap-center22 {
    max-width: 360px;
  }

  .f-menu {
    display: none;
  }

  .fleft {
    width: 100%;
  }

  .fimg {
    height: 140px;
  }

  .fimg img {
    height: 100%;
    object-fit: cover;
  }

  .fimg::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 70%;
    background: linear-gradient(transparent 0%, rgb(9, 12, 16) 100%);
    opacity: 1;
  }

  .video-box embed,
  .video-box object,
  .video-box video,
  .video-box iframe,
  .video-box frame {
    height: 250px;
  }
}

.specs_list {
  padding: 0em;
  display: block;
  float: left;
}

/*********************  .specs_list li 
{
  
    background-image: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 29px 3px;
    background-repeat: repeat-x;
}
*************************/

.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(30, 30, 33);
  width: 199.5px;
  z-index: 17;
  border: solid black;
  border-radius: 5px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: rgb(30, 30, 33);
  display: block;
  padding: 0px 20px;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.three {
  padding: 50px 20px;
  text-align: center;
  background-color: rgb (15, 15, 15);
}

.three h1 {
  font-family: "Merriweather", serif;
  position: relative;
  color: #fcf2e5;
  background-color: rgb(30, 30, 30);
  font-size: 2.5em;
  font-weight: normal;
  padding: 10px 40px;
  display: inline-block;
  margin: 0;
  line-height: 1;
  border-radius: 5px;
  border: black 1px;
}

.three h1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: -15px;
  background-color: rgb(30, 30, 30);
}

.three h1:after {
  content: "";
  position: absolute;
  height: 0;
  width: 80%;
  border-top: 10px solid rgb(30, 30, 30);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
}

.threetext {
  text-align: justify;
  font-size: 18px;
}

.threelist {
  margin: 0;
  list-style: none;
  background: rgb(15, 15, 15);
  padding: 10px;
}

.teamtable {
  float: left;
  width: 30%;
  padding: 10px;
  height: 250px;
}

/*--------------------------------------------------------------------------------------------------------*/

/* Three columns side by side */
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 100%) {
  .column {
    width: 100%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.cards {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.containers {
  padding: 0 16px;
}

/* Clear floats */
.containers::after,
.row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
}

.myimage {
  position: relative;
  left: 290px;
  max-width: 260px;
  height: 240px;
}

#text {
  display: none;
}

button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  border: none;
  padding: 8px;
  font-size: 20px;
  box-sizing: border-box;
  border-radius: 5px;
}

/*-----------------------------------------------------------------------------------*/
.kadupis-decung {
  margin-top: 50px;
}

.cumconevu {
  display: inline-flex;
  justify-content: center;
  width: auto;
  text-align: center;
  flex-wrap: wrap;
}

.cumconevu .volupavum {
  background-color: rgb(25, 25, 25);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  margin: 4px;
  margin-bottom: 50px;
  width: 200px;
  padding: 18px;
  line-height: 20px;
  color: white;
  position: relative;
}

.cumconevu .volupavum h3 {
  color: white;
  font-size: 25px;
  margin-top: 50px;
  height: 40px;
  line-height: 1em;
}

.cumconevu .volupavum p.role {
  color: white;
  margin: 10px 0;
  font-size: 13px;
  text-transform: uppercase;
}

.cumconevu .volupavum .vumkob-salovum {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 100px;
  background: transparent;
}

.cumconevu .volupavum .vumkob-salovum img {
  width: 100px;
  height: 100px;
  padding: 5px;
}

/*-------------------------------------------------------------------------------------------------*/

.audiobtn {
  width: 100%;
  border: black;
  border-radius: 5px;
  background: black;
  margin-top: 15px;
}

/*-------------------------------------------------------------------------------------------------*/

/*Модальное окно*/

/*-------------------------------------------------------------------------------------------------*/

.kino {
  text-align: center;
}

.container {
  max-width: 960px;
  margin: 50px auto;
  padding: 0 15px;
  background-color: rgb(15, 15, 15);
}

.post {
  padding: 30px 0 15px;
  position: relative;
}

.post-image {
  margin-bottom: 20px;
}

.post-image img {
  width: 100%;
}

.post h1 {
  color: #222;
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 1.5em;
}

p {
  line-height: 1.5;
  margin-bottom: 1em;
  text-align: justify;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }

  .container {
    padding: 0 45px;
  }

  .post-header {
    margin-top: 20px;
  }

  .post-image {
    position: relative;
    width: 40%;
  }

  .post-image:before {
    content: "";
    position: absolute;
    border: 6px solid rgb(110, 10, 3);
    top: -20px;
    bottom: 40%;
    left: 35%;
    right: -20px;
  }

  .post h1 {
    width: 70%;
    padding: 10px 20px;
    margin: 0;
    color: white;
    top: 50px;
    right: 0;
    background: rgb(110, 10, 3);
    position: absolute;
    z-index: 2;
  }
}

/* Исправление отображения блока "Смотрите также" */
.side-recommend-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-recommend-item {
  display: flex;
  align-items: center;
  width: 100%;
}

.side-recommend-item-img {
  width: 100px;
  height: 140px;
  object-fit: cover;
  margin-right: 10px;
}

/* --- Похожие: вертикальные постеры --- */
.carou-content {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 0;
  height: auto;
  scroll-snap-type: x mandatory;
}

.related-item {
  flex: 0 0 auto;
  width: 120px;
  scroll-snap-align: start;
  text-align: center;
}

.related-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.related-item .title {
  margin-top: 6px;
  font-size: 13px;
  color: #fff;
  line-height: 1.2;
}

/* ====== СОВРЕМЕННАЯ ЛЕВАЯ ПАНЕЛЬ (СТИЛЬ STREAMING 2025) ====== */

.sidebar-modern {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Карточки в сайдбаре (жанры, топ, комментарии) */
.sidebar-card {
  position: relative;
  padding: 16px 14px 18px;
  border-radius: 18px;
  background: radial-gradient(
    circle at top,
    rgba(255, 0, 0, 0.25) 0,
    rgba(12, 12, 12, 0.96) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Лёгкий «свет» внутри карточки */
.sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(255, 255, 255, 0.08),
    transparent 55%
  );
  opacity: 0.9;
  pointer-events: none;
}

/* Содержимое поверх блика */
.sidebar-card > * {
  position: relative;
  z-index: 1;
}

/* Заголовки блоков */
.sidebar-card__header {
  margin-bottom: 12px;
}

.sidebar-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 3px;
}

.sidebar-card__title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

/* Тело карточки */
.sidebar-card__body {
  font-size: 13px;
}

/* ---- НАВИГАЦИЯ: ЖАНРЫ + КАТЕГОРИИ ---- */

.sidebar-nav {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sidebar-nav-group {
  flex: 1;
}

.sidebar-nav-group__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
}

.sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Кнопки-«пилюли» жанров и категорий */
.sidebar-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

/* Акцентная полоска слева */
.sidebar-pill::before {
  content: "";
  width: 3px;
  height: 60%;
  border-radius: 999px;
  margin-right: 6px;
  background: linear-gradient(180deg, #ff4b4b, #ff0d29);
}

/* Ховер-эффект (как кнопки на стриминговых сервисах) */
.sidebar-pill:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: #ff4b4b;
  background: radial-gradient(
    circle at top left,
    rgba(255, 75, 75, 0.28),
    rgba(0, 0, 0, 0.95)
  );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.95);
}

/* ---- БЛОК ТОП-5 И КОММЕНТАРИИ ---- */

.sidebar-popular-list .side-popular-item,
.sidebar-comments-list .comm-item {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px;
  margin-bottom: 10px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

/* Популярные релизы: эффект при наведении */
.sidebar-popular-list .side-popular-item:hover {
  transform: translateY(-2px);
  border-color: #ff4b4b;
  background: radial-gradient(
    circle at top,
    rgba(255, 75, 75, 0.22),
    rgba(0, 0, 0, 0.98)
  );
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}

/* Комментарии — чуть мягче */
.sidebar-comments-list .comm-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
}

/* Адаптация под узкие экраны */
@media (max-width: 1100px) {
  .sidebar-card {
    padding: 14px 12px 16px;
  }

  .sidebar-nav {
    flex-direction: column;
  }
}

/* ====== КАРТОЧКИ РЕЛИЗОВ НА ГЛАВНОЙ (СТИЛЬ STREAMING 2025) ====== */

.release-card {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  border-radius: 20px;
  background: radial-gradient(
    circle at top left,
    rgba(255, 0, 0, 0.18),
    rgba(7, 7, 7, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Небольшой свет внутри карточки */
.release-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 10% 0%,
    rgba(255, 255, 255, 0.06),
    transparent 60%
  );
  opacity: 0.9;
  pointer-events: none;
}

.release-card__poster,
.release-card__content {
  position: relative;
  z-index: 1;
}

.release-card__poster {
  flex: 0 0 180px;
  width: 180px;
  height: 260px;
  /* фиксированная высота постера */
  border-radius: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.9);
}

.release-card__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.25s ease;
}

/* Оверлей на постере */
.release-card__poster-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.release-card__poster-btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4b4b, #ff0d29);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Ховер-поведение постера */
.release-card__poster:hover img {
  transform: scale(1.05);
}

.release-card__poster:hover .release-card__poster-overlay {
  opacity: 1;
}

/* ПРАВАЯ ЧАСТЬ: ТЕКСТ */
.release-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Заголовок + бейджи */
.release-card__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.release-card__title {
  font-size: 20px;
  margin: 0;
}

.release-card__title a {
  color: #ffffff;
  text-decoration: none;
}

.release-card__title a:hover {
  text-decoration: underline;
}

/* Бейджи (год, категория, просмотры) */
.release-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}

.release-card__badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.release-card__badge--category {
  background: linear-gradient(
    90deg,
    rgba(255, 75, 75, 0.8),
    rgba(255, 13, 41, 0.9)
  );
  color: #ffffff;
}

/* Мета-инфо (оригинальное название, год и т.д.) */
.release-card__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 6px;
}

/* Краткое описание */
.release-card__description {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 10px;

  /* ограничиваем высоту описания, чтобы карточки были примерно одной высоты */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Низ карточки: рейтинг + кнопка */
.release-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.release-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* Кнопка "Смотреть" */
.release-card__button {
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4b4b, #ff0d29);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.release-card__button:hover {
  transform: translateY(-1px);
  opacity: 0.95;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 1);
  color: #ffffff;
}

/* Адаптация под узкие экраны */
@media (max-width: 900px) {
  .release-card {
    flex-direction: column;
    padding: 14px;
  }

  .release-card__poster {
    flex: 0 0 auto;
    width: 180px;
    max-width: 60%;
    margin: 0 auto 10px;
  }

  .release-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .release-card__button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* -------------------------------
   ФИКСИРОВАННЫЕ РАЗМЕРЫ КАРТОЧЕК
   ------------------------------- */

/* Фиксируем размер постера */
.release-card__poster {
  flex: 0 0 180px;
  width: 180px;
  height: 260px;
  /* фиксированная высота */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.9);
}

.release-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* равномерная обрезка */
  display: block;
  transition: transform 0.25s ease;
}

/* Фиксируем высоту описания */
.release-card__description {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 10px;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Минимальная высота всей карточки */
.release-card {
  min-height: 240px;
  /* одинаковая высота карточек */
  align-items: flex-start;
  /* выравнивание по верхнему краю */
}

/* Исправление отступов для мини-карточек последних релизов */
.xnews-item,
.lastnews-item,
.recent-serial-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.xnews-item img,
.lastnews-item img,
.recent-serial-item img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  /* ОТСТУП ОТ ПОСТЕРА */
}

/* --- МИНИ-КАРТОЧКИ: ПОСТЕР + ТЕКСТ --- */

/* Постер со скруглением */
.related-item img,
.lastnews-item img,
.xnews-item img,
.recent-item img,
.cat-list-item img,
.short-item img {
  border-radius: 16px !important;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Контейнер карточки */
.related-item,
.lastnews-item,
.xnews-item,
.recent-item,
.cat-list-item,
.short-item {
  border-radius: 20px !important;
  padding: 10px 12px;
  /* ⬅ даём отступы, чтобы текст НЕ был впритык */
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* ===============================
   ВЕРХНЯЯ ПАНЕЛЬ / TOPBAR 2025
   =============================== */

.topbar-2025 {
  /* Шапка теперь не закрепляется при прокрутке страницы.
       Используем position: relative вместо sticky, чтобы меню прокручивалось вместе с контентом. */
  position: relative;
  top: auto;
  z-index: 50;
  /* Подстраиваем шапку под общий стиль сайта: тёмный фон с мягким тёмно‑красным градиентом
       (приглушённый оттенок красного вместо яркого). */
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.25),
    rgba(7, 7, 7, 0.98)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* Мягкая тень, аналогичная карточкам на сайте */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar-2025__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ЛОГО + КАТАЛОГ СЛЕВА */
.topbar-2025__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* ОСНОВНОЕ МЕНЮ В ЦЕНТРЕ */
.topbar-2025__center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* ПОИСК + ЮЗЕР СПРАВА */
.topbar-2025__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Убираем лишний margin у старых обёрток, чтобы ничего не "уехало" */
.topbar-2025 .header,
.topbar-2025 .top-menu,
.topbar-2025 nav {
  margin: 0;
}

/* ССЫЛКИ МЕНЮ — стиль стриминга */
.topbar-2025 nav ul,
.topbar-2025 .top-menu ul {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar-2025 nav a,
.topbar-2025 .top-menu a {
  position: relative;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 6px 4px;
  transition: color 0.2s ease;
}

.topbar-2025 nav a::after,
.topbar-2025 .top-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 999px;
  /* Тёмно‑красный градиент для нижней полоски активных пунктов меню */
  background: linear-gradient(90deg, #c51434, #950e2f);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.topbar-2025 nav a:hover,
.topbar-2025 .top-menu a:hover {
  color: #ffffff;
}

.topbar-2025 nav a:hover::after,
.topbar-2025 .top-menu a:hover::after {
  transform: scaleX(1);
}

/* КНОПКА "КАТАЛОГ" */
.catalog-btn-2025 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4b4b, #ff0d29);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.95);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.catalog-btn-2025:hover {
  transform: translateY(-1px);
  opacity: 0.96;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 1);
}

/* ПОИСК В ШАПКЕ */
.topbar-2025 input[type="text"],
.topbar-2025 input[type="search"] {
  min-width: 200px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.topbar-2025 input[type="text"]:focus,
.topbar-2025 input[type="search"]:focus {
  border-color: #ff4b4b;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 75, 75, 0.8);
}

/* АВТОРИЗАЦИЯ / ПРОФИЛЬ СПРАВА (иконки/текст) */
/* Контейнеры для авторизации и кабинета: выравниваем и задаём единый размер по высоте.
 * Убираем лишний font-size здесь, так как он определяется самим .header-btn. */
.topbar-2025 .user-panel,
.topbar-2025 .auth-links {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  /* font-size перенесён внутрь .header-btn; оставляем здесь авто */
  font-size: inherit;
}

/* Адаптация под узкие экраны */
@media (max-width: 900px) {
  .topbar-2025__inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 12px;
  }

  .topbar-2025__center {
    order: 3;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .topbar-2025 nav ul,
  .topbar-2025 .top-menu ul {
    gap: 10px;
  }

  .topbar-2025__right {
    margin-left: auto;
  }
}

/* =======================
   ТОП-5 ПОПУЛЯРНЫХ РЕЛИЗОВ
   Красивые карточки 2025
   ======================= */

/* Внешняя карточка */
.side-popular-item {
  display: flex;
  flex-direction: column;
  /* постер сверху, текст снизу */
  border-radius: 20px;
  padding: 10px 12px;
  /* чтобы текст не был впритык */
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
  margin-bottom: 14px;
  overflow: hidden;
}

/* Блок с картинкой */
.side-popular-item-img {
  width: 100%;
  margin-bottom: 8px;
  /* отступ между постером и названием */
}

/* Сам постер */
.side-popular-item-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* скругление углов постера */
  object-fit: cover;
}

/* Заголовок */
.side-popular-item-title {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.3;
}

/* Строка "1 сезон 13 серия" */
.side-popular-item-info {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 3px;
}

/* Дата */
.side-popular-item-date {
  font-size: 12px;
  opacity: 0.8;
}

/* === Переопределение шапки под стили Netflix (2025) === */
/* Обновляем фон, типографику и акценты, чтобы приблизить дизайн к интерфейсу Netflix */
.topbar-2025 {
  background: #141414;
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.topbar-2025 nav a,
.topbar-2025 .top-menu a {
  font-size: 14px;
  text-transform: none;
  color: #e5e5e5;
  font-weight: 400;
  padding: 0 15px;
}

.topbar-2025 nav a:hover,
.topbar-2025 .top-menu a:hover {
  color: #ffffff;
}

.topbar-2025 nav a::after,
.topbar-2025 .top-menu a::after {
  background: #e50914;
  bottom: -6px;
  height: 3px;
}

/* Кнопка каталога теперь выглядит как кнопка Netflix */
.catalog-btn-2025 {
  background: #2d2d2d;
  border: 1px solid #333;
  color: #e5e5e5;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.catalog-btn-2025:hover {
  background: #333;
}

/* Анимированный логотип: меняем фон на изображение без наведения и при наведении */
.topbar-2025 .logo {
  display: block;
  width: 220px;
  height: 60px;
  background: url("../images/фронда%20лого%20без%20наведения.png") no-repeat
    center/contain;
}

/*
 * Навигация для шапки 2025
 * Пункты располагаются горизонтально слева направо в единую строку,
 * как на современных стриминговых сервисах. Мы сохраняем порядок
 * «Главная», «Новинки», «Каталог», «Новости», «О нас», «Сделать заказ».
 * Каждая ссылка имеет плавное подчеркивание при наведении.
 */
.topbar-2025 .top-menu-list {
  display: flex;
  align-items: center;
  /* уменьшаем расстояние между пунктами, чтобы меню не «растягивалось» и оставалось компактным */
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar-2025 .top-menu-list li {
  position: relative;
}

.topbar-2025 .top-menu-list li > a {
  display: block;
  /* Компактные элементы меню: кружевная «пилюля» с тёмным фоном и тонкой светлой
       рамкой. Вдохновлены элементами навигации и блоком «Топ‑5»: фон почти чёрный с
       лёгкой прозрачностью, тонкая рамка и мягкая тень. */
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #e5e5e5;
  text-transform: none;
  letter-spacing: 0.03em;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

.topbar-2025 .top-menu-list li > a:hover {
  /* При наведении элемент меню слегка приподнимается и окрашивается более
       насыщенным красным оттенком, как в блоке «Топ‑5»: фон тёмно‑красный,
       градиент мягко переходит к чёрному. Рамка становится ярко‑красной. */
  color: #ffffff;
  transform: translateY(-1px) scale(1.02);
  border-color: #ff4b4b;
  background: radial-gradient(
    circle at top,
    rgba(255, 75, 75, 0.22),
    rgba(0, 0, 0, 0.98)
  );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.95);
}

.topbar-2025 .top-menu-list li > a::after {
  /* Убираем стандартное подчёркивание: подсветка теперь осуществляется через фон и рамку */
  display: none;
}

.topbar-2025 .top-menu-list li > a:hover::after {
  transform: scaleX(1);
}

/* Выпадающие списки для пунктов меню */
.topbar-2025 .top-menu-list .dropdown-content {
  display: none;
  position: absolute;
  /* Раскрываем выпадающее меню вплотную к пункту и выравниваем по центру.
       Отступы убраны, чтобы курсор не терял фокус, благодаря чему меню не
       закрывается, когда пользователь переводит мышь на список. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  /* Фон выпадающего меню: аналогично элементам меню и карточкам «Топ‑5»,
       почти чёрный с лёгкой прозрачностью и тонкой светлой рамкой. */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.85);
  z-index: 200;
}

.topbar-2025 .top-menu-list .dropdown-content a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  /* Базовый фон и тонкая рамка для пунктов выпадающего списка:
       полупрозрачный тёмный фон с лёгкой рамкой, как у навигационных элементов. */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin: 2px 0;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.topbar-2025 .top-menu-list .dropdown-content a:hover {
  /* При наведении элемент выпадающего списка приподнимается и подсвечивается
       ярким красным градиентом, как элементы меню и карточки популярных релизов. */
  transform: translateY(-1px) scale(1.02);
  border-color: #ff4b4b;
  background: radial-gradient(
    circle at top,
    rgba(255, 75, 75, 0.22),
    rgba(0, 0, 0, 0.98)
  );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.95);
}

/* Оставляем выпадающий список открытым, пока курсор находится на пункте меню
   или на самом выпадающем меню. Используем > для точного выбора дочернего
   элемента и добавляем селектор :hover для dropdown-content. */
.topbar-2025 .top-menu-list .dropdown:hover > .dropdown-content,
.topbar-2025 .top-menu-list .dropdown-content:hover {
  display: block;
}

/* Сбрасываем наследованный float у .dropdown, чтобы пункты корректно выстраивались по flex */
.topbar-2025 .top-menu-list .dropdown {
  float: none;
  overflow: visible;
  position: relative;
}

/* Выровнять правую часть шапки: поиск и ссылки по центру */
.topbar-2025 .topbar-2025__right {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Отодвигаем блок поиска и кнопки кабинета вправо, чтобы навигация занимала свободное место */
  margin-left: auto;
}

/* Контейнеры для ссылок авторизации: выравниваем содержимое по центру,
   чтобы кнопка входа/кабинета находилась на одной линии с поисковой строкой. */
.topbar-2025 .auth-links,
.topbar-2025 .user-panel {
  display: flex;
  align-items: center;
}

/* Настройка поисковой строки: темный фон, плавная обводка, высота равная высоте навигации */
.topbar-2025 input[type="text"],
.topbar-2025 input[type="search"] {
  height: 34px;
  line-height: 34px;
  /* фиксированная ширина, чтобы поисковая строка занимала ровно отведённое место */
  width: 180px;
  min-width: 160px;
  padding: 6px 12px;
  border-radius: 999px;
  /* Тёмный фон с лёгким прозрачным красным оттенком, в духе карточек сайта */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #e5e5e5;
  font-size: 14px;
  outline: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.topbar-2025 input[type="text"]::placeholder,
.topbar-2025 input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.topbar-2025 input[type="text"]:focus,
.topbar-2025 input[type="search"]:focus {
  border-color: #ff4b4b;
  box-shadow: 0 0 0 1px rgba(255, 75, 75, 0.8);
  /* При фокусе используем тёмно‑красный фон, гармонирующий с остальными
       элементами меню и сайдбара. */
  background: radial-gradient(
    circle at top,
    rgba(255, 75, 75, 0.22),
    rgba(0, 0, 0, 0.98)
  );
}

/* Убираем отступы у формы поиска внутри шапки */
.topbar-2025 .topbar-2025__right form {
  margin: 0;
}

/*
 * Кнопка входа/личного кабинета в шапке
 * Подгоняем высоту под элементы навигации и выравниваем содержимое по центру.
 */
.topbar-2025 .header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-transform: none;
  /* Компактная «пилюля» с тёмным фоном и тонкой светлой рамкой, как у пунктов меню */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
  /* Убираем отрицательные внешние отступы, унаследованные от старого стиля,
       чтобы кнопка находилась на одной линии с поиском */
  margin: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.topbar-2025 .header-btn:hover {
  /* При наведении кнопка слегка поднимается и подсвечивается ярко‑красным
       градиентом, аналогично пунктам меню. */
  transform: translateY(-1px) scale(1.02);
  border-color: #ff4b4b;
  background: radial-gradient(
    circle at top,
    rgba(255, 75, 75, 0.22),
    rgba(0, 0, 0, 0.98)
  );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.95);
  color: #ffffff;
}

/*
 * Компактная кнопка «Каталог» для шапки 2025.
* Используем нейтральный фон и тонкую рамку, а на hover — подсветку цветом бренда (#c51434).
 */
.topbar-2025 .catalog-btn-2025 {
  display: inline-flex;
  align-items: center;
  /* иконка убрана, поэтому gap не нужен */
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #e5e5e5;
  text-transform: none;
  /* убрали избыточное межбуквенное расстояние */
  letter-spacing: 0.02em;
  background: #1f1f1f;
  border: 1px solid #333;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.topbar-2025 .catalog-btn-2025:hover {
  background: #2a2a2a;
  border-color: #c51434;
  color: #ffffff;
}

.topbar-2025 .logo:hover {
  background: url("../images/фронда%20лого%20с%20наведением.png") no-repeat
    center/contain;
}

/* === Customization: unify header with site palette and non-transparent nav (2025) === */
.topbar-2025 {
  /* Цвет фона для шапки: используем тот же градиент, что и навигационные
       карточки сайта. Красный блик в верхнем углу плавно переходит в
       тёмный фон. Прозрачности снижены, чтобы не просвечивался
       основной контент. */
  background: radial-gradient(
    circle at top,
    rgba(255, 0, 0, 0.25) 0,
    rgba(12, 12, 12, 0.96) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ====== СТРИМИНГОВАЯ КАРУСЕЛЬ (2025) ======
   Делаем главную карусель похожей на витрины современных стриминговых сервисов:
   увеличиваем высоту карточек, добавляем скругление, тени и плавные
   анимации на ховер. Навигационные стрелки переработаны – они теперь
   располагаются по краям и полупрозрачны. */

/* Секция карусели: чуть больше отступы и градиентный фон, соответствующий
   общей палитре сайта. */
.carou-sect {
  padding: 40px 60px;
  background: radial-gradient(
    circle at top,
    rgba(255, 0, 0, 0.18),
    rgba(12, 12, 12, 1) 60%,
    rgba(0, 0, 0, 1)
  );
  border: none;
  box-shadow: none;
}

/* Контент карусели: увеличиваем высоту, чтобы плакаты были заметнее. */
.carou-content {
  /* Высота секции немного уменьшена, чтобы постеры помещались в строке. */
  height: 240px;
}

/* Раздвигаем элементы карусели равномерно. */
.owl-carousel .owl-item {
  padding: 0 10px;
}

/* Карточка популярного предмета: скруглённые углы, тень и плавное
   увеличение при наведении. */
.owl-carousel .popular-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.3s ease;
}

.owl-carousel .popular-item:hover {
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.9);
}

/* Затемнение карточки карусели при наведении.
   Добавляет полупрозрачный слой поверх постера, но ниже текстового оверлея,
   чтобы повысить читаемость. Отключаем pointer-events, чтобы не влиять на навигацию. */
.owl-carousel .popular-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s ease;
}

.owl-carousel .popular-item:hover::after {
  background: rgba(0, 0, 0, 0.6);
}

/* Изображение внутри карточки – заполняет её целиком, сохраняя пропорции. */
.owl-carousel .popular-item-img {
  display: block;
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 12px;
}

.owl-carousel .popular-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.owl-carousel .popular-item:hover .popular-item-img img {
  transform: scale(1.05);
}

/* Заголовок на карточке скрывается по умолчанию и проявляется при наведении.
   Градиентная подложка обеспечивает читаемость текста. */
.owl-carousel .popular-item-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  font-size: 16px;
  color: #ffffff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.owl-carousel .popular-item:hover .popular-item-title {
  opacity: 1;
}

/* Переопределяем стандартные стрелки карусели: располагаем их по краям,
   увеличиваем размер и делаем полупрозрачными. */
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 70px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  color: #ffffff;
  font-size: 30px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  background: rgba(255, 75, 75, 0.45);
  transform: scale(1.05);
}

/* ====== Полностью переработанная лента популярного контента (Stream 2025) ======
   Данный набор стилей устраняет проблемы предыдущих версий: убрана красная
   полоса внизу, карточки получили единый размер и плавные анимации,
   заголовок появляется внизу на затемнённой подложке, а навигация
   исполнена в виде элегантных круглых стрелок. Стиль выдержан в темно‑красной
   палитре, сочетающейся с другими элементами сайта. */

/* Секция карусели: комфортные отступы и мягкий тёмно‑красный градиент
   подобный тому, что используется в блоках «Жанры и категории» и «Топ‑5». */
.carou-sect {
  padding: 24px 40px;
  background: radial-gradient(
    circle at 30% 0,
    rgba(120, 20, 40, 0.15) 0%,
    rgba(15, 15, 15, 0.95) 60%,
    rgba(0, 0, 0, 1) 100%
  );
  border: none;
  box-shadow: none;
  overflow: hidden;
  /* скрываем любые лишние полосы */
}

/* ===================================================================
   Переопределения для карусели популярных релизов. Эти правила
   обеспечивают растяжение карусели на всю ширину, единый размер
   карточек, корректное отображение постеров и скрытие красной полосы.
   =================================================================== */

/* Скрываем любые прогресс‑бары или полосы, которые создаёт owlCarousel.
   Иногда плагин вставляет следующий соседний div после карусели,
   который содержит красную полоску. Скрываем все такие элементы. */
#progressBar,
.progressBar,
.progressbar,
#owl-popular + div,
.carou-content + div {
  display: none !important;
}

/* Убираем горизонтальные отступы, чтобы карусель начиналась и
   заканчивалась ровно по краям своего контейнера. */
.carou-sect {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

/* Фиксируем размер карточек. Высота контейнера карусели меньше,
   чтобы блок смотрелся компактно, а ширина карточек одинаковая. */
.carou-content {
  min-height: 230px;
}

.carou-content .owl-item {
  padding: 0;
}

.carou-content .popular-item {
  width: 100%;
  height: 100%;
}

/* Изображения заполняют карточку целиком, обрезая лишнее. */
.carou-content .popular-item-img,
.carou-content .popular-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Лёгкое затемнение слева и справа для создания эффекта затухания
   карусели. Это помогает визуально обозначить скролл. */
.carou-sect::before,
.carou-sect::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.carou-sect::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.carou-sect::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* Плавная анимация появления при наведении. */
.carou-content .popular-item {
  transition: box-shadow 0.2s ease;
}

.carou-content .popular-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75);
  z-index: 5;
}

/* Оверлей занимает нижние 60% карточки и плавно проявляется при
   наведении. В нём располагаются название и метаданные. */
.carou-content .popular-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* гарантируем, что текстовый оверлей находится поверх затемняющего слоя */
  z-index: 2;
}

.carou-content .popular-item:hover .popular-overlay {
  opacity: 1;
}

/* Центрируем текст в оверлее и увеличиваем размер заголовка. */
.carou-content .overlay-content {
  text-align: center;
  color: #ffffff;
}

.carou-content .overlay-content .popular-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.carou-content .overlay-content .popular-meta {
  font-size: 12px;
  line-height: 1.4;
}

/* Контейнер карусели: фиксируем высоту, чтобы постеры были заметны,
   и даём небольшой запас по высоте под тень и анимацию. */
.carou-content {
  height: 260px;
  position: relative;
}

/* Прячем индикаторы прогресса или точки, если плагин их выводит. */
.carou-content .owl-dots,
.carou-content #progressBar,
.carou-content .progressBar,
.carou-content .progressbar {
  display: none !important;
}

/* Иногда owlCarousel создаёт отдельный элемент после карусели для
   полосы прогресса. Скрываем следующий соседний div после #owl-popular,
   чтобы убрать красную полоску под лентой. */
#owl-popular + div {
  display: none !important;
}

/* Пробрасываем высоту через внутренние контейнеры карусели. */
.carou-content .owl-stage-outer,
.carou-content .owl-stage {
  height: 100%;
}

/* Выравниваем элементы карусели по высоте и даём им отступы. */
.carou-content .owl-item {
  height: 100%;
  padding: 0;
}

/* Карточка популярного релиза: задаём фиксированную ширину и полную
   высоту, скругляем углы и добавляем тень. */
.carou-content .popular-item {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.28s ease;
}

.carou-content .popular-item:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8);
  z-index: 5;
}

/* Ссылка‑обёртка занимает всю карточку. */
.carou-content .popular-item a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Ссылка-обёртка занимает всю карточку. */
.carou-content .popular-item-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Изображение: полностью заполняет карточку, сохраняя пропорции. */
.carou-content .popular-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}

.carou-content .popular-item:hover .popular-item-img img {
  transform: scale(1.05);
}

/* Заголовок: скрыт по умолчанию, появляется на затемнённой подложке
   снизу при наведении. */
.carou-content .popular-item-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(40%);
  transition:
    transform 0.24s ease,
    opacity 0.24s ease;
  pointer-events: none;
}

.carou-content .popular-item:hover .popular-item-title {
  opacity: 1;
  transform: translateY(0);
}

/* Навигационные стрелки: делаем их круглыми, полупрозрачными,
   увеличиваем размер и окрашиваем при наведении. */
.carou-content .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.carou-content .owl-nav .owl-prev,
.carou-content .owl-nav .owl-next {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 4px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #f0f0f0;
  font-size: 26px;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.carou-content .owl-nav .owl-prev:hover,
.carou-content .owl-nav .owl-next:hover {
  background: rgba(197, 20, 52, 0.8);
  transform: scale(1.15);
}

/* Снимаем красный градиент с изображений релизов и заменяем его тёмным
   полупрозрачным градиентом, чтобы убрать эффект красной полосы. */
.frels .popular-item-img::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  opacity: 1;
}

/* Пункты меню – плотный фон с лёгким красным оттенком и тонкой рамкой */
.topbar-2025 .top-menu-list li > a {
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.12),
    rgba(10, 10, 10, 1)
  );
  border: 1px solid rgba(197, 20, 52, 0.1);
}

/* Подсветка пунктов меню при наведении */
.topbar-2025 .top-menu-list li > a:hover {
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.28),
    rgba(0, 0, 0, 1)
  );
  border-color: #c51434;
}

/* Выпадающее меню – не прозрачный фон с красным оттенком */
.topbar-2025 .top-menu-list .dropdown-content {
  top: 100%;
  margin-top: 0;
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.18),
    rgba(15, 15, 15, 0.98)
  );
  border: 1px solid rgba(197, 20, 52, 0.08);
}

/* Пункты в выпадающем меню */
.topbar-2025 .top-menu-list .dropdown-content a {
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.12),
    rgba(10, 10, 10, 0.98)
  );
  border: 1px solid rgba(197, 20, 52, 0.08);
}

/* Подсветка пунктов в выпадающем меню */
.topbar-2025 .top-menu-list .dropdown-content a:hover {
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.32),
    rgba(0, 0, 0, 1)
  );
  border-color: #c51434;
}

/* Поисковая строка – непрозрачный фон и красные акценты */
.topbar-2025 input[type="text"],
.topbar-2025 input[type="search"] {
  background: rgba(15, 15, 15, 0.9);
  /* Мягкая рамка тёмно‑красного цвета вместо яркого красного */
  border: 1px solid rgba(197, 20, 52, 0.1);
  color: #f0f0f0;
}

/* Фокус на поиске */
.topbar-2025 input[type="text"]:focus,
.topbar-2025 input[type="search"]:focus {
  border-color: #c51434;
  box-shadow: 0 0 0 1px rgba(197, 20, 52, 0.8);
  background: rgba(20, 20, 20, 0.9);
}

/* Кнопка входа/кабинета – плотный фон и красные акценты */
.topbar-2025 .header-btn {
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.15),
    rgba(10, 10, 10, 0.98)
  );
  border: 1px solid rgba(197, 20, 52, 0.1);
}

.topbar-2025 .header-btn:hover {
  background: radial-gradient(
    circle at top left,
    rgba(197, 20, 52, 0.4),
    rgba(0, 0, 0, 0.95)
  );
  border-color: #c51434;
}

/* ====================
   Современный футер 2025
   ==================== */

/* Общий контейнер для нового футера. Используется радиальный градиент,
   напоминающий фон карточек на сайте. Тёмная основа с мягким розово‑красным
   свечением подчёркивает фирменную палитру и не содержит прозрачности. */
.footer-modern-content {
  /* Общий фон футера: повторяет градиент навигационных карточек – красный
       отблеск плавно переходит в тёмную основу. Благодаря полной ширине
       футер воспринимается частью сайта, а не отдельным блоком. */
  background: radial-gradient(
    circle at top,
    rgba(255, 0, 0, 0.25) 0,
    rgba(12, 12, 12, 0.96) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  padding: 50px 30px;
  color: #e5e5e5;
  margin-top: 60px;
  /* Делаем плавный изменяющийся фон: медленно перемещаем градиент по площади */
  background-size: 200% 200%;
  animation: footerGradientShift 30s ease infinite;
}

/* Внутренний контейнер футера: выстраиваем блоки в ряд, но разрешаем перенос
   на мобильных разрешениях благодаря flex-wrap. Gap создаёт свободное
   пространство между колонками. */
.footer-modern-content .footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  /* Растягиваем контент футера на всю ширину, чтобы он заполнял нижнюю
       часть сайта. Убираем max-width и используем auto-маржины для
       выравнивания блоков. */
  width: 100%;
  margin: 0 auto;
}

/* Общие стили для колонок футера */
.footer-modern-content .footer-column {
  flex: 1 1 240px;
  min-width: 220px;
}

/* Заголовки в футере: яркое выделение фирменным цветом */
.footer-modern-content .footer-column h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #c51434;
  font-weight: 600;
}

/* Базовый текст и ссылки */
.footer-modern-content .footer-column p,
.footer-modern-content .footer-column a,
.footer-modern-content .partners-list a {
  font-size: 14px;
  color: #e5e5e5;
  text-decoration: none;
  line-height: 1.6;
}

/* Кредиты: отступ от ссылки «Правообладателям» */
.footer-modern-content .footer-credits {
  margin-top: 16px;
  opacity: 0.8;
}

.footer-modern-content .footer-credits + .footer-credits {
  margin-top: 4px;
}

.footer-modern-content .partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-modern-content .partners-list li {
  margin-bottom: 6px;
}

.footer-modern-content .partners-list a:hover {
  color: #c51434;
  text-decoration: underline;
}

/* Рекламный блок: собственный фон, выделенный цветом бренда, плавный
   переход цвета и анимация смены градиента. Background-size увеличен,
   чтобы анимация двигала градиент по поверхности. */
.footer-modern-content .ad-slot {
  /* Анимированная подложка с тёмно‑красными оттенками. Градиент
       плавно меняет позицию, создавая мягкий перелив. Цвет текста
       подбирается по фирменной палитре. */
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.25),
    rgba(50, 0, 20, 0.88),
    rgba(255, 0, 0, 0.25)
  );
  border-radius: 12px;
  padding: 24px;
  color: #ff4b4b;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  background-size: 400% 400%;
  animation: adGradientShift 12s ease infinite;
}

/* Анимация плавного движения градиента в рекламном блоке. Позиция
   градиента изменяется от левого верхнего угла к правому и обратно,
   создавая изменчивый эффект. */
@keyframes footerGradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Анимация для рекламного блока: более длительное смещение сложного градиента */
@keyframes adGradientShift {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Прячем оригинальную подпись в футере, так как новый футер содержит
   информацию об авторских правах. */
/* Прячем старый блок copyright внутри футера, чтобы не дублировать информацию. */
footer .footer-copyright {
  /* Скрываем старое уведомление об авторских правах, чтобы не дублировать
       информацию в новом футере. Используем !important для гарантии. */
  display: none !important;
}

/* Сбрасываем выравнивание старого футера: превращаем контейнер
   <footer class="footer fx-row fx-middle"> в блочный элемент, чтобы
   наш современный футер занимал всю ширину. */
footer.footer.fx-row.fx-middle {
  display: block;
  align-items: stretch;
}

/* Убираем задний фон и отступы у контейнера footer, чтобы наш
   современный футер мог плавно сливаться с основным содержимым.
   Переопределяем основные свойства: фон, паддинги, бордюр и тень. */
footer.footer {
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* Некоторые шаблоны могут выводить стандартную форму поиска и кнопку входа
   вне шапки. Скрываем такие элементы и показываем только внутри топбара. */
form#quicksearch {
  display: none;
}

.topbar-2025 form#quicksearch {
  display: flex;
}

.header-btn.btn.js-login {
  display: none;
}

.topbar-2025 .header-btn.btn.js-login {
  display: inline-flex;
}

/* Скрываем дублирующийся блок поиска и входа, который выводится внизу страницы
   движком DLE. В нём используется класс search-login. Этот блок не нужен,
   поскольку поиск и вход уже реализованы в шапке. */
.search-login {
  display: none !important;
}

/* Пагинация от DLE: убираем мобильную навигацию на широких экранах, потому что
   основной набор ссылок уже отображается выше. На узких экранах
   показываем мобильную навигацию и скрываем стандартную. */
.mobile-nav {
  display: none;
  margin-top: 20px;
}

@media (max-width: 768px) {
  /* На мобильных отображаем мобильную навигацию и скрываем стандартные
       блоки навигации (если они есть). */
  .mobile-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Ссылки и текущая страница в мобильной навигации */
  .mobile-nav span {
    color: #ff4b4b;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 75, 75, 0.15);
  }

  .mobile-nav a {
    color: #e5e5e5;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .mobile-nav a:hover {
    background: rgba(255, 75, 75, 0.25);
    color: #ffffff;
  }

  /* Прячем стандартную навигацию (обычно это <div class="pagination">) на мобилках. */
  .pagination,
  .navigation,
  nav.navigation {
    display: none !important;
  }
}

/* ====== OVERRIDE: НОВОСТИ ПОСЛЕ ВСЕХ СТАРЫХ СТИЛЕЙ ====== */

.news-index__list .release-card__button {
  font-size: 0 !important;
}

.news-index__list .release-card__button::after {
  content: "ЧИТАТЬ";
  font-size: 12px;
  line-height: 1;
}

.news-article.news-full .news-full__actions,
.news-article.news-full .news-full__comments {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

.news-article.news-full .news-full__comments {
  clear: both;
}

.news-article.news-full .news-full__comments-body .add-comms {
  width: 100%;
  max-width: 100%;
}

.news-article.news-full .news-article__image {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.news-index__list .release-card {
  grid-template-columns: 150px minmax(0, 1fr) !important;
}

.news-index__list .release-card__poster {
  display: block !important;
  width: 150px !important;
  height: 106px !important;
  border-radius: 8px;
  overflow: hidden;
}

.news-index__list .release-card__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-index__list .news-card--article {
  grid-template-columns: 176px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  padding: 18px !important;
  min-height: 238px;
  background: linear-gradient(135deg, rgba(255, 45, 50, 0.08), rgba(6, 6, 7, 0.98) 42%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 9px !important;
}

.news-index__list .news-card__thumb {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 176px !important;
  height: 238px !important;
  border-radius: 8px;
  overflow: hidden;
  background: #08090d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.news-index__list .news-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

.news-index__list .release-card__content,
.news-index__list .news-card__body {
  min-width: 0;
  width: 100%;
}

.news-index__list .news-card--article .news-card__meta {
  margin-bottom: 8px;
}

.news-index__list .news-card--article .news-card__title {
  max-width: 650px;
  margin-bottom: 10px;
  font-size: 24px !important;
  line-height: 1.18 !important;
}

.news-index__list .news-card--article .news-card__excerpt {
  max-width: 660px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.58;
}

.news-index__list .news-card--article .news-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: #c90710;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .news-index__list .news-card--article {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    padding: 14px !important;
    min-height: 160px;
  }

  .news-index__list .news-card__thumb {
    width: 112px !important;
    height: 154px !important;
  }

  .news-index__list .news-card--article .news-card__title {
    font-size: 18px !important;
  }
}

/* ====== OVERRIDE: КОММЕНТАРИИ НОВОСТЕЙ ====== */

.news-article.news-full .news-full__comments {
  margin-top: 30px;
}

.news-article.news-full .news-full__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.news-article.news-full .news-full__section-title .fal {
  color: #ff333d;
}

.news-article.news-full .news-full__comments-body {
  padding-top: 20px;
}

.news-article.news-full .news-full__comments-body .add-comms {
  margin: 0 0 24px;
  padding: 18px;
  border-radius: 10px !important;
  background: #07080b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none;
}

.news-article.news-full .news-full__comments-body .ac-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.news-article.news-full .news-full__comments-body .ac-inputs input,
.news-article.news-full .news-full__comments-body .form-secur input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: #08090d;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.news-article.news-full .news-full__comments-body .ac-textarea {
  border-radius: 9px;
  overflow: hidden;
  background: #020308;
  border: 1px solid #3e4455;
}

.news-article.news-full .news-full__comments-body .dleaddcomments-editor,
.news-article.news-full .news-full__comments-body .wseditor,
.news-article.news-full .news-full__comments-body .bb-editor,
.news-article.news-full .news-full__comments-body .wysibb {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #020308 !important;
}

.news-article.news-full .news-full__comments-body .bb-pane,
.news-article.news-full .news-full__comments-body .wysibb-toolbar,
.news-article.news-full .news-full__comments-body .tox-toolbar,
.news-article.news-full .news-full__comments-body .tox-toolbar__primary {
  min-height: 34px !important;
  background: #50586c !important;
  border: 0 !important;
}

.news-article.news-full .news-full__comments-body .bb-btn,
.news-article.news-full .news-full__comments-body .wysibb-toolbar-btn,
.news-article.news-full .news-full__comments-body .tox-tbtn {
  width: 30px !important;
  height: 30px !important;
  margin: 2px !important;
  border-radius: 4px !important;
  background: #b7070d !important;
  color: #fff !important;
}

.news-article.news-full .news-full__comments-body textarea,
.news-article.news-full .news-full__comments-body iframe,
.news-article.news-full .news-full__comments-body .tox-edit-area,
.news-article.news-full .news-full__comments-body .wysibb-body {
  min-height: 160px !important;
  height: 170px !important;
  background: #020308 !important;
  color: #fff !important;
}

.news-article.news-full .news-full__comments-body .ac-submit {
  margin-top: 12px;
}

.news-article.news-full .news-full__comments-body .ac-submit button {
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  background: #b7070d;
  color: #fff;
  font-weight: 700;
}

.news-article.news-full .news-full__comments-body .ac-submit button:hover {
  background: #e01620;
}

.news-article.news-full #dle-ajax-comments {
  margin: 0;
}

.news-article.news-full .news-full__comments-body .comm-item {
  display: block;
  position: relative;
  min-height: 46px;
  margin: 0 0 16px;
  padding: 0 0 0 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.news-article.news-full .news-full__comments-body .comm-avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}

.news-article.news-full .news-full__comments-body .comm-avatar img,
.news-article.news-full .news-full__comments-body .comm-letter {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

.news-article.news-full .news-full__comments-body .comm-one {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 28px;
  color: rgba(255, 255, 255, 0.58);
}

.news-article.news-full .news-full__comments-body .comm-one > span {
  margin-right: 0;
}

.news-article.news-full .news-full__comments-body .comm-author,
.news-article.news-full .news-full__comments-body .comm-author a {
  color: #fff;
  font-weight: 700;
}

.news-article.news-full .news-full__comments-body .comm-two {
  margin: 8px 0 8px;
  padding: 16px 18px;
  background: #101010;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}

.news-article.news-full .news-full__comments-body .comm-three-left > a {
  color: #ff4b4b;
  opacity: 1;
}

@media (max-width: 640px) {
  .news-article.news-full .news-full__comments-body .ac-inputs {
    grid-template-columns: 1fr;
  }
}

/* ====== OVERRIDE: SHORTNEWS МИНИМАЛЬНОЕ ОТЛИЧИЕ ====== */

.news-index__list .news-card--article {
  box-sizing: border-box;
  grid-template-columns: 142px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.news-index__list .news-card__thumb {
  width: 142px !important;
  height: 98px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: #090a0d;
  border: 0 !important;
  overflow: hidden !important;
}

.news-index__list .news-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.news-index__list .news-card--article .news-card__body {
  min-width: 0;
  padding: 0 !important;
}

.news-index__list .news-card--article .news-card__meta {
  margin: 0 0 8px !important;
}

.news-index__list .news-card--article .news-card__title {
  margin: 0 0 8px !important;
  max-width: none !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
}

.news-index__list .news-card--article .news-card__excerpt {
  max-width: none !important;
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.news-index__list .news-card--article .news-card__link {
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #fff;
  border-bottom: 1px solid #ff4b4b;
}

@media (max-width: 700px) {
  .news-index__list .news-card--article {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 12px !important;
  }

  .news-index__list .news-card__thumb {
    width: 104px !important;
    height: 76px !important;
  }
}

/* ====== OVERRIDE: SHORTNEWS КАК НА ГЛАВНОЙ ====== */

.news-index__list .release-card {
  grid-template-columns: 180px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  padding: 18px 20px !important;
}

.news-index__list .release-card__poster {
  width: 180px !important;
  height: 260px !important;
  min-width: 180px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

.news-index__list .release-card__poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.news-index__list .release-card__content {
  min-width: 0;
  padding: 0 !important;
}

.news-index__list .release-card__button {
  font-size: 12px !important;
}

.news-index__list .release-card__button::after {
  content: none !important;
}

@media (max-width: 760px) {
  .news-index__list .release-card {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 14px !important;
  }

  .news-index__list .release-card__poster {
    width: 118px !important;
    height: 172px !important;
    min-width: 118px !important;
  }
}

/* ====== OVERRIDE: ЗАГОЛОВОК НОВОСТЕЙ ====== */

.news-index .news-index__header {
  align-items: center !important;
  margin-bottom: 22px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.news-index__eyebrow {
  display: none !important;
}

.news-index .news-index__title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.news-index .news-index__title::first-letter {
  color: #ff333d;
}

.news-index__list .release-card__badges {
  gap: 7px !important;
}

.news-index__list .release-card__badge {
  min-height: 22px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.news-index__list .release-card__badge--category {
  background: linear-gradient(135deg, #ff3342, #b7070d) !important;
  color: #fff !important;
}

/* ====== OVERRIDE: FRONDA COLORS FOR NEWS BAR ====== */

.news-index .news-index__header {
  position: relative !important;
  padding: 18px 18px 20px !important;
  border: 1px solid rgba(255, 51, 61, 0.16) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 51, 61, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(92, 12, 15, 0.62), rgba(8, 8, 8, 0.96) 52%, rgba(14, 14, 14, 0.98)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34) !important;
  overflow: visible !important;
}

.news-index .news-index__header::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, #c90810, rgba(255, 51, 61, 0.2), transparent) !important;
}

.news-index .news-index__title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

.news-index .news-index__title::first-letter {
  color: #ff333d !important;
}

.news-index__sort {
  margin: 0 !important;
  padding: 0 !important;
}

.news-index__sort form {
  margin: 0 !important;
}

.news-index__sort .sort {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: rgba(8, 8, 8, 0.88) !important;
  border: 1px solid rgba(255, 51, 61, 0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.26) !important;
}

.news-index__sort .sort li {
  display: inline-flex !important;
  margin: 0 !important;
}

.news-index__sort .sort a {
  min-height: 28px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.news-index__sort .sort a:hover {
  background: rgba(255, 51, 61, 0.16) !important;
  color: #fff !important;
}

.news-index__sort .sort li.asc a,
.news-index__sort .sort li.desc a {
  background: linear-gradient(135deg, #d10a13, #8f050b) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(209, 10, 19, 0.22) !important;
}

.news-index__sort .sort li.asc a::after,
.news-index__sort .sort li.desc a::after {
  display: inline-block !important;
  margin-left: 7px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

.news-index__sort .sort li.asc a::after {
  content: "\f106" !important;
}

.news-index__sort .sort li.desc a::after {
  content: "\f107" !important;
}

@media (max-width: 760px) {
  .news-index .news-index__header {
    padding: 16px !important;
  }

  .news-index__sort {
    margin-top: 12px !important;
    width: 100% !important;
  }

  .news-index__sort .sort {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
}

/* ====== OVERRIDE: CLEAN NEWS SORT CONTROL ====== */

.news-index .news-index__header {
  min-height: 64px !important;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(34, 8, 9, 0.72), rgba(8, 8, 8, 0.98) 58%) !important;
  border-color: rgba(255, 51, 61, 0.14) !important;
  box-shadow: none !important;
}

.news-index__sort .sort {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.news-index__sort .sort li {
  display: none !important;
}

.news-index__sort .sort li.asc,
.news-index__sort .sort li.desc {
  display: inline-flex !important;
}

.news-index__sort .sort li.asc a,
.news-index__sort .sort li.desc a {
  min-width: 70px !important;
  min-height: 34px !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  background: rgba(10, 10, 10, 0.92) !important;
  border: 1px solid rgba(255, 51, 61, 0.48) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.news-index__sort .sort li.asc a:hover,
.news-index__sort .sort li.desc a:hover {
  background: rgba(145, 8, 13, 0.54) !important;
}

body .news-index .news-index__sort ul.sort li.asc a,
body .news-index .news-index__sort ul.sort li.desc a,
body .news-index .news-index__sort ul.sort li.sort_by_date a {
  min-width: auto !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  background: rgba(15, 15, 15, 0.96) !important;
  border: 1px solid rgba(255, 51, 61, 0.36) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

body .news-index .news-index__sort ul.sort li.asc a:hover,
body .news-index .news-index__sort ul.sort li.desc a:hover,
body .news-index .news-index__sort ul.sort li.sort_by_date a:hover {
  background: rgba(45, 12, 14, 0.96) !important;
  border-color: rgba(255, 51, 61, 0.58) !important;
}