/* ══════════════════════════════════════════════════════════════
   Comments — shared between book_detail.html and blog_detail.html
══════════════════════════════════════════════════════════════ */
.cmt-section { max-width: 760px; }
.cmt-heading {
  display: flex; align-items: center; gap: var(--ds-space-2);
  font-family: var(--ds-font-display); font-weight: 800; font-size: 1.4rem;
  color: var(--ds-text); margin-block-end: var(--ds-space-5);
}
.cmt-heading i { color: var(--ds-gold); }
.cmt-count-badge {
  font-size: .78rem; font-weight: 700; color: var(--ds-primary); background: var(--ds-primary-light);
  border-radius: var(--ds-radius-full); padding: 2px 10px;
}

/* Form */
.cmt-form { margin-block-end: var(--ds-space-6); }
.cmt-input {
  display: block; width: 100%; resize: vertical;
  padding: 12px 14px; font-size: .92rem; color: var(--ds-text); font-family: var(--ds-font-sans);
  background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-md);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.cmt-input:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 3px rgba(209,102,85,.12); }
.cmt-form__actions { display: flex; justify-content: flex-end; margin-block-start: var(--ds-space-3); }

.cmt-login-prompt {
  display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap;
  background: var(--ds-bg-muted); border: 1px solid var(--ds-border-light);
  border-radius: var(--ds-radius-lg); padding: var(--ds-space-4); margin-block-end: var(--ds-space-6);
  font-size: .9rem; color: var(--ds-text-muted);
}
.cmt-login-prompt i { color: var(--ds-gold); font-size: 1.2rem; }
.cmt-login-prompt .vs-btn { margin-inline-start: auto; }

.cmt-empty { color: var(--ds-text-subtle); font-size: .9rem; padding-block: var(--ds-space-4); }

/* Comment item */
.cmt-list { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.cmt-item {
  display: flex; gap: var(--ds-space-3);
  margin-inline-start: calc(var(--cmt-depth, 0) * 28px);
}
@media (max-width: 575.98px) {
  .cmt-item { margin-inline-start: calc(var(--cmt-depth, 0) * 14px); }
}
.cmt-item__avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-primary-light); color: var(--ds-primary);
  font-weight: 800; font-family: var(--ds-font-display); font-size: .95rem;
}
.cmt-item__body { flex: 1; min-width: 0; }
.cmt-item__meta { display: flex; align-items: baseline; gap: var(--ds-space-2); flex-wrap: wrap; margin-block-end: 2px; }
.cmt-item__name { font-weight: 700; font-size: .9rem; color: var(--ds-text); }
.cmt-item__date { font-size: .76rem; color: var(--ds-text-subtle); }
.cmt-item__text { font-size: .9rem; line-height: 1.6; color: var(--ds-text); margin: 0 0 6px; white-space: pre-line; }

.cmt-item__actions { display: flex; align-items: center; gap: var(--ds-space-4); margin-block-end: 6px; }
.cmt-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: .78rem; font-weight: 600; color: var(--ds-text-subtle);
  transition: color .15s;
}
.cmt-action-btn:hover { color: var(--ds-primary-text); }
.cmt-action-btn--danger:hover { color: #dc2626; }
.cmt-delete-form { display: inline; margin: 0; }

.cmt-reply-form { margin-block: 8px var(--ds-space-3); }
.cmt-reply-form[hidden] { display: none; }
.cmt-reply-form .cmt-input { font-size: .86rem; }

.cmt-replies {
  margin-block-start: var(--ds-space-4);
  padding-inline-start: var(--ds-space-4);
  border-inline-start: 2px solid var(--ds-border-light);
  display: flex; flex-direction: column; gap: var(--ds-space-4);
}