/* Base font for comments */
.comments-section .card {
  font-size: 1rem;              /* 16px */
}

/* Tweak padding and font on smaller screens */
@media (max-width: 576px) {
  .comments-section .card {
    font-size: 0.875rem;        /* 14px */
  }
  .comments-section .card-header,
  .comments-section .card-body {
    padding: 0.5rem;
  }
}

/* Slightly larger on very large screens */
@media (min-width: 1200px) {
  .comments-section .card {
    font-size: 1.125rem;        /* 18px */
  }
}

/* Allow header controls to wrap if needed */
.comments-section .card-header {
  flex-wrap: wrap;
}
.comments-section .card-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0; /* allow text to ellipsize */
}



.comments-section .card {
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.comments-section .card .card-footer {
  font-size: 0.875rem;
  color: #6c757d;
}
.comments-section .replies {
  margin-left: 2rem;
}
.comment-form.card {
  margin-bottom: 2rem;
}
.comment-form .btn {
  min-width: 100px;
}

/* ------------------------------------------------------------------ */
/* Comment action row (Reply / 👍 / 👎) — ghost-style with voted pill  */
/* ------------------------------------------------------------------ */

:root {
  --cmt-brand:      #0e6630;
  --cmt-brand-soft: #e8f3ec;
  --cmt-down:       #b03030;
  --cmt-down-soft:  #fbeaea;
  --cmt-ink-soft:   #6b7681;
  --cmt-hover:      rgba(20, 30, 40, 0.05);
}

.comments-section .cmt-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
}

.comments-section .cmt-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  min-height: 32px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--cmt-ink-soft);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.05s ease;
}

.comments-section .cmt-action:hover,
.comments-section .cmt-action:focus-visible {
  background: var(--cmt-hover);
  color: #2a3340;
  outline: none;
}

.comments-section .cmt-action:active {
  transform: translateY(1px);
}

.comments-section .cmt-action--reply {
  margin-right: auto;
}

.comments-section .cmt-action--reply i {
  font-size: 0.95rem;
  opacity: 0.85;
}

.comments-section .cmt-action-group {
  display: inline-flex;
  gap: 2px;
}

.comments-section .cmt-action__emoji {
  font-size: 1.05rem;
  line-height: 1;
}

.comments-section .cmt-action__count {
  font-variant-numeric: tabular-nums;
  color: #8390a0;
  font-size: 0.85rem;
}

/* Voted state — filled pill in brand color so the user knows they voted. */
.comments-section .cmt-action--up.is-voted {
  background: var(--cmt-brand-soft);
  color: var(--cmt-brand);
}
.comments-section .cmt-action--up.is-voted .cmt-action__count {
  color: var(--cmt-brand);
  font-weight: 600;
}
.comments-section .cmt-action--down.is-voted {
  background: var(--cmt-down-soft);
  color: var(--cmt-down);
}
.comments-section .cmt-action--down.is-voted .cmt-action__count {
  color: var(--cmt-down);
  font-weight: 600;
}

/* Small viewports: tighten, keep tap targets sane (>= 36px). */
@media (max-width: 576px) {
  .comments-section .cmt-action {
    padding: 8px 10px;
    min-height: 36px;
    font-size: 0.8rem;
  }
  .comments-section .cmt-action__emoji {
    font-size: 1rem;
  }
}