/* Всплывающее окно на весь экран (content-popup.js). Вид статьи внутри — классы сайта (.main-article …);
   здесь только каркас окна. Канон: frontend/CLAUDE-POPUP.md. */
/* Крестик закреплён в правом верхнем углу окна на всех экранах (на мобильном статья на всю ширину — это единственный
   способ закрыть). Своя светлая подложка: виден и на светлой статье, и на тёмном фоне; filter: none — у тёмной темы
   Bootstrap инвертирует иконку в белую. */
.sns-popup .sns-popup__close {
  position: fixed;
  top: .75rem;
  right: 1.25rem;
  z-index: 5;
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: .6rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .45);
  filter: none;
  opacity: 1;
}

.sns-popup .sns-popup__close:hover {
  background-color: #fff;
}

/* Сверху оставляем место под крестик, чтобы он не закрывал заголовок статьи. */
.sns-popup .modal-body {
  padding: 3.5rem 0 3rem;
}

.sns-popup__article {
  margin: 0 auto;
}

.sns-popup__state {
  padding: 4rem 0;
  text-align: center;
  opacity: .8;
}

/* Кнопка, заменившая ссылку в основном блоке: выглядит как ссылка, ссылкой не является. */
button.sns-popup-trigger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* «Назад» — слева вверху, закреплена так же, как ×; показывается, когда в окне больше одного экрана
   (например, список тем форума → тема). Иконка — стрелка через CSS, без картинок и ссылок. */
.sns-popup .sns-popup__back {
  position: fixed;
  top: .75rem;
  left: 1.25rem;
  z-index: 5;
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: .6rem;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .45);
  color: #212529;
  font-size: 1.25rem;
  line-height: 1.25rem;
  cursor: pointer;
}

.sns-popup .sns-popup__back[hidden] {
  display: none;
}

.sns-popup .sns-popup__back::before {
  content: "\2190";
}

.sns-popup .sns-popup__back:hover {
  background-color: #fff;
}

/* Список (темы форума, вопросы FAQ): строки-кнопки под заголовком, вид — как у карточек блока. */
.sns-popup .sns-popup__list {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
}

.sns-popup__item {
  padding: .9rem 0;
  border-bottom: 1px dotted rgba(0, 0, 0, .3);
}

.sns-popup__item:last-child {
  border-bottom: 0;
}

.sns-popup .sns-popup__link {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 1.05em;
  font-weight: 600;
  color: #ad1516;
}

.sns-popup .sns-popup__link:hover {
  color: #ff140a;
}

.sns-popup__note {
  margin-top: .25rem;
  font-size: .9em;
  opacity: .85;
}

/* Тема форума в окне (только чтение): первое сообщение и дерево комментариев. */
.sns-popup-post,
.sns-popup-comment {
  padding: .5rem 0;
}

.sns-popup-post {
  margin: 0 1.5rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.sns-popup .sns-popup__subtitle {
  margin: 1rem 1.5rem .5rem;
  font-size: 1.15em;
}

.sns-popup .sns-popup__article > .article-content__body > .sns-popup-comment,
.sns-popup .article-content__body > .sns-popup-comment {
  margin: 0 1.5rem;
}

/* Ответы вложены: отступ и вертикальная линия слева, как в дереве на странице темы. */
.sns-popup-comment .sns-popup-comment {
  margin-left: .9rem;
  padding-left: .9rem;
  border-left: 2px solid rgba(0, 0, 0, .15);
}

.sns-popup-post__head,
.sns-popup-comment__head {
  font-size: .9em;
  margin-bottom: .25rem;
  opacity: .9;
}

.sns-popup-comment__deleted {
  margin: 0;
  font-style: italic;
  opacity: .7;
}

/* Ответ в окне темы форума (2026-09-25): «Ответить» у комментария, форма внизу ветки, пометка «на модерации», сообщение после отправки. */
.sns-popup-reply {
    display: inline-block;
    margin: .25em 0 .5em;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8em;
    color: #ad1516;
    cursor: pointer;
}
.sns-popup-reply:hover { text-decoration: underline; }
.sns-popup-comment--pending { opacity: .85; border-left: .15em dashed #c75858; padding-left: .75em; }
.sns-popup-comment__pending { font-size: .8em; font-style: italic; color: #b06a00; }
.sns-popup-reply-area { margin-top: 2em; padding: 1em 1.5em 1.5em; border-top: 1px dotted #c75858; }
.sns-popup-reply-form { margin: .5em 0 1em; }
.sns-popup-reply-form textarea {
    width: 100%;
    padding: .6em .75em;
    border: 1px solid #ced4da;
    border-radius: .4em;
    background: #fff;
    color: #212529;
    font: inherit;
    resize: vertical;
}
.sns-popup-reply-form textarea:focus { outline: none; border-color: #ad1516; box-shadow: 0 0 0 .15em rgba(173, 21, 22, .15); }
.sns-popup-reply-form__note { margin-top: .4em; font-size: .8em; color: #6c757d; }
.sns-popup-reply-form__actions { display: flex; justify-content: flex-end; gap: .5em; margin-top: .5em; }
.sns-popup-reply-form--inline { margin-left: 0; }
.sns-popup-reply-form textarea::placeholder { color: #8a8f94; }
.sns-popup__notice { margin: .5em 0 1em; padding: .6em .9em; border-radius: .4em; background: #e8f4ea; color: #1e6b2c; font-size: .9em; }
.sns-popup__notice--error { background: #fbe9e9; color: #a12222; }