@charset "utf-8";

/* Comment section styling merged */
.comments { margin-top:0.5rem; padding:0; background-color:ghostwhite; width: 100%; max-width: 768px; }
.comment { padding:1rem; border-bottom:1px solid #eee; display:flex; flex-direction:column; gap:0.5rem; }
.comment-others{padding:0.1rem; border-bottom:1px solid #eee; display:flex; flex-direction:column; gap:0.2rem; }
.comment-author { font-weight:bold; font-size:1rem; color:#333; }
.comment .info { font-size:0.85rem; color:#777; }
.comments .text { font-size:0.1.1rem; line-height:1.4; white-space:pre-wrap; padding:0.5rem; background-color: #E8E0E0; }
.comment .actions { display:flex; gap:0.5rem; }
.comment .actions .vote-btn { background:#eee; border:none; border-radius:4px; padding:0.4rem 0.8rem; font-size:0.9rem; cursor:pointer; }
.comment .actions .vote-btn:hover { background:#ddd; }
.comment-form { margin-top:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.comment-form textarea { width:100%; padding:0.8rem; font-size:1rem; line-height:1.5; border:1px solid #ccc; border-radius:5px; resize:vertical; min-height:100px; transition:border-color 0.2s, box-shadow 0.2s; }
.comment-form textarea:focus { outline:none; border-color:#007bff; box-shadow:0 0 0 2px rgba(0,123,255,0.25); }
.comment-form textarea::placeholder { color:#999; }
.comment-form .btn { align-self:flex-end; background:#007bff; color:#fff; padding:0.6rem 1.2rem; border:none; border-radius:4px; cursor:pointer; font-size:0.9rem; }
.comment-form .btn:hover { background:#0056b3; }

/* Pagination reuse */
.pagination { text-align:center; margin:1.5rem 0; }
.pagination a, .pagination span { display:inline-block; padding:0.4rem 0.8rem; margin:0 0.2rem; text-decoration:none; border:1px solid #ccc; border-radius:3px; font-size:0.9rem; color:#333; }
.pagination .active { background:#007bff; color:#fff; border-color:#007bff; }

/* Responsive */
@media (max-width:480px) {
  .comment { padding:0.8rem; }
  .comment .actions { flex-wrap:wrap; }
  .comment-form { flex-direction:column; }
}
@media (min-width:768px) {
  .comment { flex-direction:row; align-items:flex-start; }
  .comment-author { flex:0 0 120px; }
  .comment .info, .comment .text { flex:1; }
  .comment .actions { flex:0 0 auto; align-self:center; }
  .comment-form { flex-direction:row; align-items:flex-start; }
  .comment-form textarea { flex:1; }
  .comment-form .btn { margin-left:1rem; align-self:center; }
}