/* Articles Comments Component Styles */

/* Hover highlight */
.article-comments-wrapper .comment-item { transition: background-color .25s ease; }
.article-comments-wrapper .comment-item:hover { background:#f8f9fa; }

.article-comments-wrapper .comment-item.newly-added { animation: commentsFlashNew 1.2s ease; }
@keyframes commentsFlashNew { 0%{background:#e7f3ff;} 100%{background:transparent;} }

/* Toggle buttons spacing */
#comments-toggle-section button + button { margin-left:.5rem; }

/* Comments Pagination specific styles */
#comments-pagination .pagination {
    justify-content: center;
    margin: 0;
}

#comments-pagination .page-item {
    display: inline-block;
    flex-shrink: 0;
}

#comments-pagination .page-link {
    color: #222;
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    box-sizing: border-box;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#comments-pagination .page-link:hover,
#comments-pagination .page-link:focus {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
    text-decoration: none;
    transform: none;
}

#comments-pagination .page-item.active .page-link {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

#comments-pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    cursor: not-allowed;
}

/* Loading state for submit button (reuse .loading if present globally) */
.comment-form-loading { position: relative; pointer-events:none; opacity:.7; }
.comment-form-loading::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid #e3e3e3; border-top:2px solid #0d6efd; border-radius:50%; animation: spin .8s linear infinite; }

@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Mobile refinements */
@media (max-width:576px){
  .article-comments-wrapper .comment-item { padding-left:.25rem; padding-right:.25rem; }

  #comments-pagination .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    min-width: 28px;
    height: 28px;
  }
}