/* ==========================================================================
   Comments — система комментариев wood. Дизайн 1-в-1 с исходным компонентом,
   стили вынесены из инлайна в классы. Зелёные акценты совпадают с сайтом.
   ========================================================================== */

.comments-section {
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;            /* сайт задаёт body 300 — возвращаем 400 как в исходнике */
  color: #191a19;
  padding: 64px 20px 88px;
}
.comments-inner {
  max-width: 1284px;
  margin: 0 auto;
}
/* SVG-спрайт иконок — не занимает места, только хранит <symbol> для <use> */
.comments-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.comments-section ::placeholder {
  color: #A3B8AB;
  font-weight: 300;
  font-size: 15.32px;
  line-height: 24px;
}
.comments-section a {
  color: #3B945F;
  text-decoration: none;
}
.comments-section a:hover { text-decoration: underline; }

/* ---- Шапка: заголовок + счётчик + сортировка / чип пользователя ---- */
.comments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
  border-bottom: 1px solid oklch(0.90 0.006 150);
  padding-bottom: 24px;
}
.comments-title {
  color: #191a19;
  font-size: 37.44px;
  font-weight: 600;
  line-height: 40px;
  margin: 0;
}
.comments-title .comments-count { color: oklch(0.52 0.01 150); font-weight: 600; }
.comments-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Чип авторизованного пользователя в шапке. Высота 48px — как у кнопок форм сайта. */
.comments-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  box-sizing: border-box;
  background: #e9f2ec;              /* под зелёную палитру сайта (как поля форм) */
  border: 1px solid #cfe0d5;
  border-radius: 2px;
  padding: 0 14px;
}
/* Иконка пользователя ближе к слову «Пользователь» (уменьшаем зазор от общего gap) */
.comments-user-chip > svg { margin-right: -4px; }
.comments-user-chip-label { font-size: 15px; color: oklch(0.45 0.01 150); white-space: nowrap; }
.comments-user-chip-label b { color: oklch(0.19 0.01 150); }
.comments-user-chip .sep { font-size: 15px; color: oklch(0.85 0.006 150); white-space: nowrap; }
.comments-logout {
  font-family: 'Montserrat', sans-serif; background: none; border: none; padding: 0;
  color: oklch(0.36 0.07 152);       /* тот же цвет, что у иконки пользователя */
  font-weight: 500; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.comments-logout svg { flex: 0 0 auto; }
.comments-logout:hover { color: #1fb163; }

/* ---- Приглашение войти (не авторизован) ---- */
.comments-login {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: oklch(0.97 0.004 150);
  border: 1px solid oklch(0.90 0.006 150);
  border-radius: 2px;
  padding: 22px 24px;
  margin-bottom: 48px;
}
.comments-login-icon { width: 40px; height: 40px; position: relative; flex: 0 0 auto; }
/* Замок = дужка + корпус. В оригинале это реальные <div> (border-box из глобального *).
   Псевдоэлементы под глобальный `* {box-sizing}` НЕ попадают, поэтому задаём border-box явно —
   иначе дужка растягивается и уезжает. */
.comments-login-icon::before {
  content: ""; box-sizing: border-box; position: absolute; top: 0; left: 6px; width: 16px; height: 12px;
  border: 2.5px solid oklch(0.36 0.07 152); border-bottom: none; border-radius: 9px 9px 0 0;
}
.comments-login-icon::after {
  content: ""; box-sizing: border-box; position: absolute; bottom: 2px; left: 2px; width: 24px; height: 15px;
  background: oklch(0.36 0.07 152); border-radius: 4px;
}
.comments-login-text { flex: 1 1 260px; }
.comments-login-text .t1 { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.comments-login-text .t2 { font-size: 15px; color: #333; }

/* ---- Кнопки ---- */
.comments-btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  padding: 12px 32px;          /* высота как у кнопок форм сайта (заявка/обратный звонок) */
  font-weight: 400;
  font-size: 15.32px;          /* точь-в-точь как у кнопок форм сайта */
  line-height: 24px;
  background: #3b945f;
  color: #f5faf7;
  cursor: pointer;
  transition: all 0.3s ease;
}
.comments-btn-primary:hover:not(:disabled) { background: #1fb163; }
.comments-btn-primary:disabled:not(.loadsend) {
  background: #ccd1ce;
  color: rgba(21, 26, 23, 0.45);   /* серый текст неактивной кнопки — как в калькуляторах и формах сайта */
  cursor: not-allowed;
}
/* Антибот-проверка на кнопке «Получить код» — состояние как у форм сайта
   (.modal_btn.loadsend): текст прячется, показывается робот с подписью. */
.comments-btn-primary .load { display: none; }
.comments-btn-primary.loadsend {
  background: rgba(247, 186, 0, 0.07);
  cursor: not-allowed;
  transition: none;            /* мгновенно, как у кнопок форм сайта: у базовой кнопки
                                  стоит transition .3s и фон иначе «перетекает» */
}
.comments-btn-primary.loadsend .send { display: none; }
.comments-btn-primary.loadsend .load {
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: rgba(21, 26, 23, 0.45);
  font-family: 'Montserrat', sans-serif;
  font-size: 15.32px;
  font-weight: 400;
  line-height: 24px;
}
.robot-icon { transition: opacity 0.3s ease; }
.comments-login-btn { flex: 0 0 auto; padding: 12px 32px; height: auto; }

.comments-btn-action {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  border: none;
  border-radius: 2px;
  padding: 10px 24px;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  transition: all 0.2s ease;
  background: #3b945f;
  color: #f5faf7;
  cursor: pointer;
}
.comments-btn-action:hover:not(:disabled) { background: #1fb163; }
.comments-btn-action:disabled { background: #ccd1ce; color: rgba(21, 26, 23, 0.45); cursor: not-allowed; }

/* Состояние загрузки (когда идёт отправка с фото): кнопка остаётся зелёной,
   текст скрыт, по центру крутится белое кольцо-спиннер. */
.comments-btn-primary.is-loading,
.comments-btn-action.is-loading {
  background: #3b945f !important;
  color: transparent !important;
  position: relative;
  pointer-events: none;
}
.comments-btn-primary.is-loading::after,
.comments-btn-action.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(245, 250, 247, 0.45);
  border-top-color: #f5faf7;
  border-radius: 50%;
  animation: cm-btn-spin 0.7s linear infinite;
}
@keyframes cm-btn-spin { to { transform: rotate(360deg); } }
/* Кнопка «Отмена» — тот же layout, что actionButtonStyle, но контурная (cancelActionStyle) */
.comments-btn-cancel {
  display: flex; justify-content: center; align-items: center;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid oklch(0.85 0.006 150); border-radius: 2px;
  padding: 10px 24px; font-weight: 400; font-size: 14px; line-height: 150%;
  background: none; color: oklch(0.4 0.01 150); cursor: pointer;
  transition: all 0.2s ease;
}
.comments-btn-cancel:hover { background: none; }

/* ---- Форма нового комментария (авторизован) ---- */
.comments-compose { margin-bottom: 48px; }
.comments-textarea-wrap { position: relative; }
.comments-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  min-height: 81px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15.32px;          /* как в textarea формы заявки */
  font-weight: 300;
  line-height: 24px;
  color: #4A4D4B;
  background: #E9F2EC;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 14px 16px 63px;
  outline: none;
  transition: all 0.2s ease;
}
.comments-textarea::placeholder { color: #A3B8AB; font-weight: 300; }
.comments-textarea:hover { border-radius: 8px; border-color: #BED4C7; }
.comments-textarea:focus { border-radius: 8px; border-color: #41CC79; background: #E4EDE7; }
.comments-attach-btn {
  position: absolute;
  bottom: 13px;
  left: 17px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #d8ddd9;
  border-radius: 2px;
  color: #5f6660;
  cursor: pointer;
  transition: all 0.2s ease;
}
/* При наведении зеленеет только рамка — сам фотоаппарат остаётся тёмным */
.comments-attach-btn:hover:not(:disabled) { border-color: #41CC79; background: oklch(0.97 0.004 150); }
.comments-attach-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Счётчик символов — внизу справа поля, бледно-серый; ближе к лимиту — янтарный, сверх — красный */
.comments-char-counter {
  position: absolute;
  bottom: 15px;
  right: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #A3B8AB;
  pointer-events: none;
  user-select: none;
}
.comments-char-counter.warn { color: #C77700; }
.comments-char-counter.over { color: #df1300; }
.comments-compose-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
/* Текстареа без нижнего места под кнопку-скрепку (загрузка фото — Фаза 5) */
.comments-textarea.plain { padding: 14px 16px; }

/* Превью загружаемых картинок */
.comments-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.comments-thumb { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.comments-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; border: 1px solid oklch(0.90 0.03 152); transition: border-color 0.2s ease; }
.comments-thumb img:hover { border-color: #41CC79; }
.comments-thumb-remove {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 999px; border: 1px solid oklch(0.85 0.006 150); background: #fff;
  color: oklch(0.4 0.01 150); font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ---- Бейджи (имя пользователя / ADMIN / на модерации) ---- */
.comments-badge-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;   /* сайт задаёт body line-height:24px — иначе бейдж раздувается */
  color: oklch(0.36 0.07 152);
  border-radius: 5px;
  padding: 6px 10px 6px 8px;
  background: oklch(0.96 0.015 152);
}
/* Бейдж в форме ответа — чуть насыщеннее (без клика) */
.comment-reply-head .comments-badge-user { background: oklch(0.94 0.03 152); }
.comments-badge-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;   /* см. .comments-badge-user — гасим body line-height:24px */
  color: oklch(0.5 0.14 82);
  background: oklch(0.94 0.06 88);
  border-radius: 5px;
  padding: 7px 10px 7px 8px;
  letter-spacing: 0.02em;
}
.comments-badge-clickable { cursor: pointer; transition: background 0.5s ease; }
.comments-badge-user.comments-badge-clickable:hover { background: oklch(0.90 0.03 152); }
/* Флажок «на модерации» — жёлтый треугольник (цвет и фон как у бейджа админа).
   Высота бокса = высоте бейджа имени (padding 6px + иконка 17px = 29px),
   чтобы фоны имени и флажка были на одном уровне. По клику — всплывашка. */
.comment-mod-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 7px;
  border: none;
  border-radius: 5px;
  background: oklch(0.94 0.06 88);    /* фон как у бейджа админа */
  cursor: pointer;
  position: relative;
  transition: background 0.5s ease;   /* плавный возврат фона после подсветки */
}
.comment-mod-flag svg { display: block; }

/* Плашка «Отзыв» — ставит и снимает админ через своё меню.
   Высота ровно как у флажка модерации (padding 6px + иконка 17px = 29px), просто шире
   из-за слова. Цвет — фирменный зелёный сайта, но ПЛОТНОЙ заливкой: так плашка не
   путается ни с янтарными «ADMIN»/модерацией, ни со светло-зелёным бейджем имени.
   Контраст текста к фону 4.78:1 — читается по стандарту доступности. */
.comment-review-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px 6px 7px;
  border: none;
  border-radius: 5px;
  background: #2F7D4E;
  color: #F5FAF7;
  font-family: 'Montserrat', sans-serif;  /* кнопка не наследует шрифт страницы */
  font-size: 11px;
  font-weight: 700;
  line-height: normal;                    /* гасим body line-height:24px, иначе плашка раздувается */
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;                     /* якорь для всплывашки */
  transition: background 0.3s ease;
}
.comment-review-flag:hover { background: #27683F; }
.comment-review-flag svg { display: block; color: currentColor; }
/* Кнопка «Опубликовать» (админ снимает с модерации) */
.comment-publish {
  font-family: 'Montserrat', sans-serif; background: none; border: none; padding: 0;
  color: #1fb163; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.comment-publish:hover { color: #178a4e; }

/* ---- Лента комментариев ---- */
.comments-list { display: flex; flex-direction: column; gap: 30px; }
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.comment-badge-wrap { position: relative; }
.comment-date { font-size: 13px; color: oklch(0.58 0.01 150); }
.reply .comment-date { font-size: 12.5px; }
.comment-edit-pencil {
  background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; cursor: pointer;
  color: oklch(0.6 0.01 150); transition: color 0.2s ease;
  position: relative; top: -1px;   /* оптическое выравнивание по одной линии с датой */
}
.comment-edit-pencil svg { display: block; }
.comment-edit-pencil:hover { color: #41CC79; }
.comment-text {
  margin: 6px 8px 0 11px;
  font-size: 15px;
  line-height: 1.6;
  color: oklch(0.24 0.01 150);
  white-space: pre-line;        /* сохраняем переносы строк, лишние пробелы схлопываем */
  overflow-wrap: break-word;    /* длинные слова/строки переносим, не ломаем вёрстку */
}
/* Ссылки, которые вставляет админ — тот же зелёный, что и ссылки в формах (.checkbox_text a) */
.comment-text a { color: #3B945F; text-decoration: none; }
.comment-text a:hover { text-decoration: underline; }
.reply .comment-text { margin: 5px 8px 0 11px; font-size: 14.5px; }
.comment-replyto {
  color: inherit; font-size: inherit; font-weight: inherit;
  margin-right: 6px; white-space: nowrap; cursor: pointer;
}
.comment-replyto:hover { text-decoration: underline; }

/* Картинки в комментарии */
.comment-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; margin-left: 11px; }
/* При редактировании блок фото прячется (imagesBlock.hidden=true в JS): фото
   уже показываются как редактируемые превью с крестиками под полем ввода. Без
   этого правила display:flex выше перебивал бы атрибут hidden, и фото дублировались. */
.comment-images[hidden] { display: none; }
.comment-images img {
  width: 140px; height: 140px; object-fit: cover; border-radius: 2px;
  border: 1px solid oklch(0.90 0.03 152); cursor: zoom-in; transition: border-color 0.2s ease;
}
.comment-images img:hover { border-color: #41CC79; }

/* Ссылка "Ответить" */
.comment-reply-link {
  font-family: 'Montserrat', sans-serif;
  background: none; border: none; padding: 0;
  margin-top: -4px; margin-left: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  color: oklch(0.55 0.008 150);
  font-weight: 400; font-size: 15px; cursor: pointer;
}
.comment-reply-link:hover { color: #1fb163; }

/* Подсветка комментария при клике по @Имя (авто-сброс через 3.5с).
   Цвет у обычного пользователя зелёный, у админа — золотистый. */
.comment-card {
  border-radius: 6px;
  transition: background-color 0.5s ease;
  padding: 2px 0 6px 0;
  margin: -2px 0 4px 0;
}
.reply .comment-card { padding: 1px 0 6px 0; margin: -1px 0 4px 0; }
.comment-card.comment-highlighted { background: oklch(0.94 0.03 152); }
.comment-card.comment-highlighted.is-admin { background: oklch(0.94 0.06 88); }
.comment-card.comment-highlighted .comments-badge-user,
.comment-card.comment-highlighted .comments-badge-admin { background: transparent; }
/* Флажок «на модерации» во время подсветки сливается с зелёным фоном карточки.
   transition:none — жёлтый уходит МГНОВЕННО (без мелькания при новом комменте и
   мгновенно при клике по @Имя). Возврат к жёлтому плавный — за счёт базового
   transition на .comment-mod-flag (появляется, когда подсветка спадёт). */
.comment-card.comment-highlighted .comment-mod-flag { background: transparent; transition: none; }

/* Меню действий (три точки / клик по имени) */
/* Бейдж имени в карточке — кликабельный, открывает меню */
.comment-badge-wrap > .comments-badge-user,
.comment-badge-wrap > .comments-badge-admin { cursor: pointer; transition: background 0.3s ease; }
.comment-badge-wrap > .comments-badge-user:hover { background: oklch(0.90 0.03 152); }

/* Всплывашка «Ссылка скопирована» по клику на имя (обычный пользователь/гость) */
.comment-copy-toast {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  white-space: nowrap;
  background: #191A19;
  color: #F5FAF7;
  font-family: 'Montserrat', sans-serif;   /* кнопка-флажок не наследует шрифт — задаём явно */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;              /* своя высота строки — не наследуем от родителя */
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  z-index: 30;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.comment-copy-toast.show { opacity: 1; transform: translateY(0); }

.comment-menu[hidden] { display: none; }
.comment-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
  z-index: 20;
  overflow: hidden;
  min-width: 190px;
}
.comment-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; background: none; border: none;
  font-family: 'Montserrat', sans-serif; font-size: 13.5px;
  color: oklch(0.24 0.01 150); cursor: pointer; white-space: nowrap;
}
.comment-menu button:hover { background: oklch(0.96 0.006 150); }
.comment-menu button.publish { font-weight: 700; color: #3b945f; }
.comment-menu button.unpublish { color: oklch(0.5 0.14 82); }
.comment-menu button.delete { color: #c0392b; }
.comment-menu-overlay { position: fixed; inset: 0; z-index: 15; cursor: default; }

/* Форма редактирования — оформление как у формы ответа (textarea .comments-textarea,
   миниатюры .comments-thumbs). Фото под полем, кнопки ниже. */
.comment-edit-wrap { margin-top: 8px; }
.comment-edit-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Ответы */
.comment-replies {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
  margin-left: 11px;
  padding-left: 20px;
  border-left: 2px solid oklch(0.92 0.006 150);
}

/* Форма ответа */
.comment-reply-form { display: flex; gap: 12px; margin-top: 16px; }
.comment-reply-form[hidden] { display: none; }
.comment-reply-form-inner { flex: 1 1 260px; min-width: 200px; }
.comment-reply-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.comment-reply-head .chev { color: oklch(0.6 0.01 150); font-size: 15px; }
.comment-reply-head .to { font-size: 13px; color: oklch(0.55 0.01 150); }
.comment-reply-head .to b { color: oklch(0.36 0.07 152); }
/* Текстареа ответа: как в исходнике (чуть меньше основного поля) */
.comment-reply-textarea { min-height: 85px; font-size: 14.5px; padding: 11px 14px 63px; }

/* ---- Пагинация ---- */
/* Пустое состояние ленты */
.comments-empty {
  text-align: center; padding: 48px 20px;
  color: oklch(0.55 0.01 150); font-size: 15px;
}

.comments-pagination {
  display: flex; flex-direction: row;
  align-items: center; justify-content: flex-start;
  gap: 6px;
  padding: 28px 0 0;
}
/* Пустой контейнер пагинации (одна страница) не занимает место */
.comments-pagination:empty { display: none; }
/* Кнопки-цифры */
.comments-page-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px;
  color: #0E1310;
  background: #FFFFFF; border: 1px solid oklch(0.9 0.006 150); border-radius: 3px;
  cursor: pointer; padding: 0; transition: background-color 0.2s ease;
}
.comments-page-btn:hover { background: oklch(0.94 0.03 152); }
.comments-page-btn.active { background: #3b945f; color: #FFFFFF; }
.comments-page-btn.active:hover { background: #3b945f; }
/* Многоточие */
.comments-page-ellipsis {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 17px; color: #0E1310;
}
/* Стрелки « ‹ » / « › » */
.comments-page-arrow {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border: 1px solid oklch(0.85 0.01 152); border-radius: 3px;
  cursor: pointer; padding: 0;
}
.comments-page-arrow.prev { margin-right: 4px; }
.comments-page-arrow.next { margin-left: 4px; }
.comments-page-arrow:disabled { opacity: 0.35; cursor: default; }
.comments-page-arrow svg { display: block; }

/* ---- Модалка входа / подтверждения / лайтбокс (для этапа авторизации) ---- */
.comments-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000;
}
/* [hidden] должен побеждать display:flex у overlay */
.comments-modal-overlay[hidden] { display: none; }
/* Ошибка внутри шага модалки — в едином стиле с формами сайта (.erorrmsg) */
.comments-modal-error {
  display: none; width: 100%; box-sizing: border-box;
  margin-top: 20px; padding: 12px;
  background: rgba(223, 19, 0, 0.12); color: #191919;
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: 15.32px; line-height: 24px; text-align: center;
}
.comments-modal-error:not([hidden]) { display: block; }
/* Подсветка невалидного поля — как input.error в формах */
.comments-input.error { border-color: #df1300 !important; background: rgba(223, 19, 0, 0.12) !important; }
.comments-modal {
  width: min(596px, 100%);
  background: #fcfffd;
  padding: 40px;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.comments-modal.small { width: min(440px, 100%); }
.comments-modal-close {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  border-radius: 0; border: none; background: transparent; cursor: pointer;
  line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center;
}
.comments-modal-title { font-weight: 600; font-size: 37.44px; line-height: 40px; color: #191a19; }
.comments-modal-title.sm { font-size: 28px; line-height: 34px; }
.comments-modal p { font-weight: 300; font-size: 15.32px; line-height: 24px; color: #191a19; margin-top: 20px; }
.comments-field { margin-top: 28px; }
.comments-field-label { font-weight: 500; font-size: 22.64px; line-height: 32px; color: #151a16; margin-bottom: 12px; }
.comments-field-label .req { color: red; }
.comments-input {
  box-sizing: border-box; width: 100%;
  font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 15.32px; line-height: 24px;
  color: #4A4D4B; background: #E9F2EC; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 0; outline: none; transition: all 0.2s ease;
}
.comments-input:hover { border-radius: 8px; border-color: #BED4C7; }
.comments-input:focus { border-radius: 8px; border-color: #41CC79; background: #E4EDE7; }
.comments-input.code { height: 48px; font-size: 18px; letter-spacing: 6px; text-align: center; padding: 0 24px; }
/* Плейсхолдер-звёздочки поверх пустого поля кода */
.comments-code-wrap { position: relative; }
.comments-code-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 7px; pointer-events: none;
  font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 22px; line-height: 1;
  color: #9aa39c; transform: translateY(3px);
}
.comments-code-ph.hidden { display: none; }
.comments-modal .comments-btn-primary { width: 100%; margin-top: 24px; }
.comments-modal-link {
  width: 100%; font-family: 'Montserrat', sans-serif; background: none; border: none;
  color: #4A4D4B; font-size: 13.5px; font-weight: 400; cursor: pointer; margin-top: 14px;
}
/* согласие (чекбокс) */
.comments-consent { margin-top: 20px; }
.comments-consent label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; user-select: none; }
.comments-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.comments-consent-box {
  width: 20px; height: 20px; min-width: 20px; display: flex; align-items: center; justify-content: center;
  margin-top: 4px; transition: all 0.2s ease; border: 1px solid #d8e1dc; background: #e9f2ec;
}
.comments-consent input:checked + .comments-consent-box { border-color: #e8f0fe; }
/* Подсветка рамки при наведении на зону чекбокса — как в формах заявки/звонка */
.comments-consent label:hover .comments-consent-box { border-color: #41CC79; }
.comments-consent-box::after {
  content: ""; width: 10px; height: 10px; background: #3B945F; opacity: 0;
  transform: scale(0); transition: all 0.2s ease;
}
.comments-consent input:checked + .comments-consent-box::after { opacity: 1; transform: scale(1); }
.comments-consent-text { font-weight: 400; font-size: 12px; line-height: 20px; color: rgba(21, 26, 23, 0.45); }
.comments-modal-danger {
  flex: 1; padding: 12px 24px; background: #c0392b; color: #fff; border: none; border-radius: 2px;
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 15px; cursor: pointer; transition: background 0.15s ease;
}
.comments-modal-danger:hover { background: #a5301f; }
.comments-modal-actions { display: flex; gap: 12px; margin-top: 28px; }
.comments-modal-cancel {
  flex: 1; padding: 12px 24px; background: none; color: #4A4D4B;
  border: 1px solid oklch(0.85 0.006 150); border-radius: 2px;
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 15px; cursor: pointer;
}

/* Лайтбокс */
.comments-lightbox {
  position: fixed; inset: 0; background: oklch(0.1 0.01 150 / 0.86);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1200;
}
.comments-lightbox img { max-width: min(900px, 92vw); max-height: 88vh; object-fit: contain; border-radius: 4px; }
.comments-lightbox-close, .comments-lightbox-nav {
  position: absolute; border: none; background: oklch(1 0 0 / 0.12); color: #fff; cursor: pointer; border-radius: 999px;
}
.comments-lightbox-close { top: 20px; right: 24px; width: 36px; height: 36px; font-size: 17px; line-height: 1; }
.comments-lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 20px; }
.comments-lightbox-nav.prev { left: 16px; }
.comments-lightbox-nav.next { right: 16px; }

/* ---- Адаптив ---- */
/* Планшет/мобильный: заголовки и модалка — 1-в-1 с сайтом (.section_title / .modal_content) */
@media (max-width: 992px) {
  .comments-title { font-size: 26px; line-height: 28px; cursor: pointer; }  /* == .section_title (mobile); тап скроллит к первому комменту (comments.js) */
  /* Модалка входа / кода / имени — как попап форм сайта: прижата к верху и
     белый фон во всю ширину экрана (без боковых полей). */
  .comments-modal-overlay { align-items: flex-start; padding: 16px 0 0; }
  .comments-modal { width: 100%; max-width: none; padding: 40px 20px; max-height: calc(100vh - 16px); }
  .comments-modal-title { font-size: 26px; line-height: 40px; }        /* == .modal_title (mobile) */
  .comments-modal p { font-size: 15px; }
  .comments-field-label { font-size: 18px; line-height: 133%; }        /* == .input_title (mobile) */
}
@media (max-width: 768px) {
  .comments-section { padding: 48px 20px 64px; }   /* верхний отступ как у секций сайта на мобильном */
  /* Отступ под заголовком — как у секций сайта на мобильном (компактнее) */
  .comments-head { margin-bottom: 20px; padding-bottom: 18px; }
  /* Чип пользователя — на всю ширину; в одну строку без переноса:
     иконка слева, имя (при длинном — многоточие), иконка выхода справа. */
  .comments-head-right { width: 100%; }
  .comments-user-chip { width: 100%; gap: 8px; }
  .comments-user-chip > svg { flex: 0 0 auto; }               /* иконка не сжимается */
  .comments-user-chip .sep { display: none; }                 /* разделитель убираем */
  .comments-user-chip-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Иконка + «Выход» в правом углу (обычный порядок: сначала иконка, потом слово) */
  .comments-logout { margin-left: auto; flex: 0 0 auto; }
  .comments-pagination { justify-content: center; }

  /* Плашка «Войдите…»: [замок | заголовок], подпись во всю ширину ниже,
     кнопка «Войти по E-mail» на всю ширину (как кнопки форм сайта). */
  .comments-login {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "sub  sub"
      "btn  btn";
    align-items: center;
    gap: 8px 12px;
    padding: 20px;
  }
  /* Ширина бокса замка = ширине самой графики (иначе справа пустое место
     и заголовок кажется далеко). */
  .comments-login-icon { grid-area: icon; width: 28px; }
  .comments-login-text { display: contents; }
  /* Заголовок выравниваем по нижней линии замка, а не по центру (+3px ниже) */
  .comments-login-text .t1 { grid-area: title; margin-bottom: 0; align-self: end; position: relative; top: 3px; }
  /* Подпись и кнопку выравниваем по левому краю корпуса замка (он на left:2px
     внутри бокса), иначе они на 2px вылезают левее замка. */
  .comments-login-text .t2 { grid-area: sub; padding-left: 2px; }
  .comments-login-btn { grid-area: btn; margin-top: 6px; margin-left: 2px; width: calc(100% - 2px); }
}