/* Всплывающее окно на весь экран (content-popup.js). Вид статьи внутри — классы сайта (.main-article …);
   здесь только каркас окна. Канон: frontend/CLAUDE-POPUP.md. */
/* Крестик закреплён в правом верхнем углу окна на всех экранах (на мобильном статья на всю ширину — это единственный
   способ закрыть). Своя светлая подложка: виден и на светлой статье, и на тёмном фоне; filter: none — у тёмной темы
   Bootstrap инвертирует иконку в белую. */
.sns-popup .sns-popup__close {
  position: fixed;
  top: .75em;
  right: 1.25em;
  z-index: 5;
  box-sizing: content-box;
  width: 1.25em;
  height: 1.25em;
  padding: .6em;
  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.5em 0 3em;
}

.sns-popup__article {
  margin: 0 auto;
}

.sns-popup__state {
  padding: 4em 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: .6em;
  left: 1em;
  z-index: 5;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .48em;
  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.25em;
  line-height: 1em;
  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.5em 1.5em;
}

.sns-popup__item {
  padding: .9em 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: .25em;
  font-size: .9em;
  opacity: .85;
}

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

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

.sns-popup .sns-popup__subtitle {
  margin: 1em 1.5em .5em;
  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.5em;
}

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

.sns-popup-post__head,
.sns-popup-comment__head {
  font-size: .9em;
  margin-bottom: .25em;
  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,
.sns-popup-ask-form { margin: .5em 0 1em; }
.sns-popup-reply-form textarea,
.sns-popup-ask-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,
.sns-popup-ask-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; }

/* Список вопросов FAQ: иконки справа от вопроса — «Показать ответ» (collapse под строкой) и «Задать уточняющий вопрос» (форма под строкой). */
.sns-popup__row {
  display: flex;
  align-items: flex-start;
  gap: .5em;
}

.sns-popup__row .sns-popup__link {
  flex: 1 1 auto;
  width: auto;
}

.sns-popup__tools {
  display: flex;
  flex: 0 0 auto;
  gap: .25em;
}

.sns-popup .sns-popup__tools button {
  padding: .1em .35em;
  border: 0;
  background: transparent;
  color: #ad1516;
  font-size: 1.15em;
  line-height: 1.3;
  cursor: pointer;
}

.sns-popup .sns-popup__tools button:hover,
.sns-popup .sns-popup__tools button:focus-visible {
  color: #ff140a;
}

.sns-popup__answer {
  margin: .6em 0 0 1em;
  padding-left: 1em;
  border-left: 2px dotted #ad1516;
  font-size: .95em;
}

.sns-popup-ask-holder {
  margin: .6em 1em 0;
}

.sns-popup-ask-form textarea::placeholder { color: #8a8f94; }

/* Уточняющие вопросы (level > 0): на 1px мельче родителя и без жирного — в блоке страницы и в списке окна. */
button.sns-popup-trigger.faq-child {
  font-size: calc(1em - 1px);
  font-weight: 400;
}

.sns-popup .sns-popup__link.faq-child {
  font-size: calc(1.05em - 1px);
  font-weight: 400;
}

/* Без пунктирной границы над уточнениями: линия остаётся под всей группой «вопрос + его уточнения». */
.sns-popup__item:has(+ .sns-popup__item--child),
.notes-area__card:has(+ .notes-area__card--child) {
  border-bottom: 0;
}

li.faq-child-item {
  border-top: 0 !important;
}

li:has(+ .faq-child-item) {
  border-bottom: 0 !important;
}

/* Без отступа между вопросом и его уточнениями: у родителя нет нижнего паддинга, у уточнения — верхнего. */
.sns-popup__item.sns-popup__item:has(+ .sns-popup__item--child),
.notes-area__card.notes-area__card:has(+ .notes-area__card--child) {
  padding-bottom: 0;
}

.sns-popup__item.sns-popup__item--child,
.notes-area__card.notes-area__card--child {
  padding-top: 0;
}

li:has(+ .faq-child-item) {
  padding-bottom: 0 !important;
}

li.faq-child-item {
  padding-top: 0 !important;
}

/* Основной вопрос экрана: ответ слева, иконки (ответ / уточняющий вопрос) справа от него, ниже заголовка. */
.sns-popup__main-row {
  display: flex;
  align-items: flex-start;
  gap: .75em;
}

.sns-popup__main-row .sns-popup__main-answer {
  flex: 1 1 auto;
  min-width: 0;
}

.sns-popup__main-tools {
  flex: 0 0 auto;
}

/* форма под основным вопросом: поля слева и справа — как у списка (1.5em) */
.sns-popup__main-row + .sns-popup-ask-holder {
  margin: .6em 1.5em 1em;
}