/* ========= CometComment frontend.css (1.0.224) ========= */

/* Базовый отступ между блоками формы (полями и кнопкой) */
:root {
  --cc-gap: 20px;
}

/* Базовая обертка */
#cometcomment-root.cc-wrap {
  margin: 14px 0 0 0;
  padding: 0;
}

/* Колонка */
#cometcomment-root .cc-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--cc-gap) !important;
  row-gap: var(--cc-gap) !important;
  margin: 0 !important;
}

/* Между комментарием и именем */
#cometcomment-root .cc-form .cc-row:first-of-type {
  margin-bottom: -3px !important;
}

#cometcomment-root .cc-field {
  margin: 0 !important;
}

#cometcomment-root .cc-label {
  display: none !important;
}

/* Поля */
#cometcomment-root .cc-input {
  width: 100% !important;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  border: 1px solid #a3a3a3 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #6b6b6b !important;
  outline: none !important;
  caret-color: #6b6b6b !important;
  box-sizing: border-box !important;
}

#cometcomment-root .cc-input:focus {
  border-color: #dd9300 !important;
  box-shadow: none !important;
}

#cometcomment-root .cc-input::placeholder {
  color: #e0e0e0 !important;
  font-size: 15px !important;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  opacity: 1 !important;
}

#cometcomment-root .cc-input--comment {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Кнопка */
#cometcomment-root .cc-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Отступ между полем имени и кнопкой — согласованный 34px */
#cometcomment-root .cc-actions {
  margin-top: 34px !important;
}

#cometcomment-root .cc-actions .cc-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;

  width: 128px !important;
  height: 55px !important;

  border: 1px solid #a3a3a3 !important;
  border-radius: 30px !important;
  background-color: #ffffff !important;
  color: #6b6b6b !important;

  font-family: Verdana, sans-serif !important;
  font-size: 17px !important;
  font-style: normal !important;
  font-weight: normal !important;
  text-align: center !important;
  line-height: 1em !important;

  box-sizing: border-box !important;
  padding: 0 24px !important;
  text-decoration: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  white-space: nowrap !important;
  outline: none !important;

  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

#cometcomment-root .cc-actions .cc-button:hover {
  background-color: #e0e0e0 !important;
  border-color: #a3a3a3 !important;
}

/* Статус */
#cometcomment-root .cc-status {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  font-size: 14px !important;
  color: #a3a3a3 !important;
  text-align: center !important;
}

/* Заголовок блока комментариев */
#cometcomment-root .cc-comments-header {
  margin-top: 12px !important;
}

#cometcomment-root .cc-comments-title {
  margin: 0;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #000000;
}

/* Линия */
#cometcomment-root .cc-comments-separator {
  border: 0;
  border-top: 1px solid #a3a3a3;
  margin: 11px 0 0 0;
  padding: 0;
}

/* Пустое состояние */
#cometcomment-root .cc-comments-empty {
  margin: 7px 0 27px 0;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  font-size: 15px !important;
  color: #e0e0e0 !important;
}

/* Имя автора комментария / цвет #dd9300 (оранжевый) */
#cometcomment-root .cc-comment-author,
#cometcomment-root .cc-comment-author a {
  color: #dd9300 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  display: block !important;
  margin: 0 !important;
}

/* Один комментарий в списке, расстояние между комментариями по вертикали */
#cometcomment-root .cc-comment {
  margin: 0 0 0px 0 !important; /* 0px - расстояние между комментариями по вертикали */
  padding: 0 !important;
  list-style: none !important;
}

/* Расстояние между комментариями по вертикали (мобильная версия) */
@media (max-width: 768px) {
  #cometcomment-root .cc-comment {
    margin: 0 0 0px 0 !important; /* 0px - расстояние между комментариями по вертикали */
  }
}

/* Внутренняя обёртка: аватарка + текст в одной строке */
#cometcomment-root .cc-comment-inner {
  display: flex !important;
  align-items: flex-start !important;
}

/* Колонка аватарки */
#cometcomment-root .cc-comment-avatar {
  flex: 0 0 auto !important;
  margin: 21px 17px 17px 0 !important; /* сверху | справа | снизу | слева */
}

/* Основной блок комментария (имя, дата, текст, "Ответить") */
#cometcomment-root .cc-comment-main {
  flex: 1 1 auto !important;
  margin-left: 2px !important;
}

/* Аватарки */
#cometcomment-root .cc-avatar-img {
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 1px solid #a3a3a3 !important;
}

/* Размеры: 60px у родителя */
#cometcomment-root .cc-comment-depth-1 .cc-avatar-img {
  width: 60px !important;
  height: 60px !important;
}

/* Размеры: 50px у ответов */
#cometcomment-root .cc-comment-depth-2 .cc-avatar-img,
#cometcomment-root .cc-comment-depth-3 .cc-avatar-img {
  width: 50px !important;
  height: 50px !important;
}

/* Размеры: 40px у родителя (мобильная версия) */
@media (max-width: 768px) {
#cometcomment-root .cc-comment-depth-1 .cc-avatar-img {
  width: 40px !important;
  height: 40px !important;
 }
/* Размеры: 33px у ответов (мобильная версия) */
#cometcomment-root .cc-comment-depth-2 .cc-avatar-img,
#cometcomment-root .cc-comment-depth-3 .cc-avatar-img {
  width: 33px !important;
  height: 33px !important;
 }
}

/* Список комментариев — базовые стили */
#cometcomment-root .cc-comment-list,
#cometcomment-root .cc-comment-children {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Вложенные списки (ответы) — выравнивание по одной вертикали */
/* Базово: без отступа, чтобы не мешать более точным правилам ниже */
#cometcomment-root .cc-comment-list.children {
  margin: 0 !important;
  padding-left: 0 !important;
}

/* Ответы на комментарий-РОДИТЕЛЬ (depth-1):
 * аватар ребёнка под началом текста родителя
 * 60 (аватар родителя) + 17 (gap) + 2 (сдвиг текста) = 79px
 */
#cometcomment-root .cc-comment-depth-1 > .cc-comment-list.children {
  margin-left: 79px !important;
}

/* Ответы на комментарии глубже (depth-2 и дальше):
 * аватар внука под началом текста ребёнка и так далее
 * 50 (аватар) + 17 (gap) + 2 (сдвиг текста) = 69px
 */
#cometcomment-root .cc-comment-depth-2 > .cc-comment-list.children,
#cometcomment-root .cc-comment-depth-3 > .cc-comment-list.children,
#cometcomment-root .cc-comment-depth-4 > .cc-comment-list.children,
#cometcomment-root .cc-comment-depth-5 > .cc-comment-list.children {
  margin-left: 69px !important;
}

/* Начиная с правнуков НЕ добавляем новый сдвиг:
   ответы-правнуки и глубже идут по одной вертикали с ответами-внуками */
#cometcomment-root .cc-comment-depth-3 > .cc-comment-list.children,
#cometcomment-root .cc-comment-depth-4 > .cc-comment-list.children,
#cometcomment-root .cc-comment-depth-5 > .cc-comment-list.children,
#cometcomment-root .cc-comment-depth-6 > .cc-comment-list.children {
  margin-left: 0 !important;
}

/* На всякий случай: children внутри списков */
#cometcomment-root .cc-comment-list .children {
  list-style: none !important;
}

/* Для безопасности: LI внутри списков без дополнительных отступов */
#cometcomment-root .cc-comment-list li {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Дата и время комментария */
#cometcomment-root .cc-comment-meta,
#cometcomment-root .cc-comment-date,
#cometcomment-root .cc-comment-meta time,
#cometcomment-root .cc-comment-meta .cc-comment-time {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-top: 11px !important;
  font-family: "PT Serif", "Helvetica Neue", sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: #a3a3a3 !important;
}

/* Прижать первый абзац к мета-информации */
#cometcomment-root .cc-comment-main p:first-of-type {
  margin-top: 0 !important;
}

/* Текст комментария */
#cometcomment-root .cc-comment-main,
#cometcomment-root .cc-comment-main p,
#cometcomment-root .cc-comment-main .cc-comment-text {
  font-family: "PT Serif","Helvetica Neue",sans-serif !important;
  font-size: 15px !important;
  color: #302a2c !important;
  line-height: 1.6 !important;
}

/* Убираем лишние отступы у абзацев комментария */
#cometcomment-root .cc-comment-main p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Мобильные мелкие подстройки */
@media (max-width: 768px) {
  #cometcomment-root .cc-comments-header {
    margin-top: 20px !important;
  }
}

@media (max-width: 768px) {
  #cometcomment-root .cc-status {
    margin-top: 5px !important;
  }
}

/* Список комментариев (мобильная версия) */
@media (max-width: 768px){
  #cometcomment-root .cc-comment-main,
  #cometcomment-root .cc-comment-main p,
  #cometcomment-root .cc-comment-main .cc-comment-text {
    font-size: 14px !important;
    color: #000000 !important;
    line-height: 1.6 !important;
  }
}

/* Выравнивание ступенек (мобильная версия) */
@media (max-width: 768px) {

  /* Родительские комментарии — оставляем как есть */
  #cometcomment-root .cc-comment-depth-1 .cc-comment-inner {
    margin-left: 0 !important;
  }

  /* Ответ-ребёнок — сдвиг влево, но меньше чем на десктопе */
  #cometcomment-root .cc-comment-depth-2 .cc-comment-inner {
    margin-left: -32px !important;
  }

  /* Ответ-внук — ещё одна ступенька */
  #cometcomment-root .cc-comment-depth-3 .cc-comment-inner {
    margin-left: -61px !important;
  }

  /* Ответы глубже — чтобы не уходили в лесенку бесконечно */
  #cometcomment-root .cc-comment-depth-4 .cc-comment-inner,
  #cometcomment-root .cc-comment-depth-5 .cc-comment-inner,
  #cometcomment-root .cc-comment-depth-6 .cc-comment-inner {
    margin-left: -61px !important;
  }

  /* Список детей также не должен иметь дополнительных отступов */
  #cometcomment-root .cc-comment-list.children {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* Ссылка "Ответить" под комментарием */
#cometcomment-root .cc-comment-footer {
  margin-top: 1px !important;
}

#cometcomment-root .cc-reply-link {
  font-family: "PT Serif","Helvetica Neue",sans-serif !important;
  font-size: 14px !important; /* Размер слова "Ответить" под комментарием */
  margin-left: 0 !important; /* Отступ слова Ответить" вправо */
  color: #a3a3a3 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#cometcomment-root .cc-reply-link:hover {
  text-decoration: underline !important;
}

/* Информер "ответ на комментарий для ..." над полем комментария */
#cometcomment-root .cc-reply-notice {
  margin: -10px 0 0 0 !important;
  font-family: "PT Serif","Helvetica Neue",sans-serif !important;
  font-size: 14px !important;
  color: #a3a3a3 !important;
  text-align: center !important; /* Центрируем весь текст */
  width: 100% !important;
}

/* Имя автора в информере "ответ на комментарий для ..." */
#cometcomment-root .cc-reply-notice__author {
  color: #dd9300 !important;
  font-size: 14px !important;
}

/* Слово "Отменить" в информере */
#cometcomment-root .cc-reply-notice__cancel {
  display: block !important;    /* Отдельная строка */
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: #a3a3a3 !important;
  font-family: "PT Serif","Helvetica Neue",sans-serif !important;
  font-size: 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-style: italic;
  text-transform: capitalize;
  text-align: center !important; /* Центрируем слово "Отменить" */
  margin-top: 1px !important;    /* Не трогаем вертикальное положение */
}

/* Подчеркивание слова "отменить" в информере */
#cometcomment-root .cc-reply-notice__cancel:hover {
  text-decoration: underline !important;
}

/* Расстояние между блоком комментариев и футером */
#cometcomment-root .cc-comment-list {
  margin-bottom: 30px !important;
}

/* Подвинуть якорь #comments на 10px вверх */
#comments {
  scroll-margin-top: 10px !important;
}
/* Подвинуть якорь #respond на 30px вверх */
#respond {
  scroll-margin-top: 30px !important;
}