/* Блок «поделиться + лайк + комментарии» для блога lesnoy-kontur.ru.
   Отдельным файлом, чтобы не трогать общую тему сайта. */

.engage {
  margin: 34px 0 10px;
  padding: 20px 22px;
  border: 1px solid #e6e0d0;
  border-radius: 12px;
  background: #fbf9f3;
}

.engage-title {
  margin: 22px 0 14px;
  font-size: 20px;
}

.comments-count { color: #6b6b6b; font-weight: 400; }

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.share-label { font-size: 14px; color: #6b6b6b; margin-right: 2px; }

.share-btn {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #ddd5c0;
  background: #fff;
  color: #3b3b3b;
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.share-btn:hover { border-color: #d4a843; color: #8a6a12; }

.share-copy, .like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #ddd5c0;
  background: #fff;
  color: #3b3b3b;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.share-copy:hover { border-color: #d4a843; color: #8a6a12; }
.like-btn:hover { border-color: #e26a8d; color: #c2506f; }
.like-btn.liked { background: #fdeef3; border-color: #f3c2d2; color: #c2506f; }
.like-heart { font-size: 15px; line-height: 1; }
.like-btn:disabled { opacity: .6; cursor: default; }

.comments-empty { color: #6b6b6b; font-size: 14.5px; margin: 6px 0; }

.comment {
  background: #fff;
  border: 1px solid #e6e0d0;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 10px;
}
.comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.comment-head b { font-size: 14.5px; }
.comment-head span { font-size: 12.5px; color: #8a8a8a; }
.comment p { margin: 0; font-size: 15px; line-height: 1.55; }

.comment-form { margin-top: 14px; }
.comment-form input[type=text],
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid #e6e0d0;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 8px;
  background: #fff;
  color: #232323;
}
.comment-form textarea { min-height: 96px; resize: vertical; }
.comment-form button[type=submit] {
  padding: 10px 22px;
  border-radius: 22px;
  border: none;
  background: #d4a843;
  color: #2b2b2b;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.comment-form button[type=submit]:hover { background: #c69a35; }

.comment-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.comment-status { font-size: 14px; margin: 10px 0 0; color: #6b6b6b; }
.comment-status.ok { color: #1f6f43; }
.comment-status.err { color: #b3261e; }

@media (max-width: 480px) {
  .engage { padding: 16px 14px; }
  .share-btn, .share-copy, .like-btn { font-size: 12.5px; padding: 6px 11px; }
  .engage-title { font-size: 18px; }
}