.comments-section {border-radius: var(--border-radius);padding: 1rem;margin-top: 5rem;}
:root[data-bs-theme="dark"] .comments-section {background: #3a3f44;}
.comments-section h3 {font-size: 1.5rem; color: var(--dark-color); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color);}
.comment {background: white;border-radius: var(--border-radius);padding: 10px;margin-bottom: 1rem;border-left: 4px solid var(--primary-color);font-size: 14px;max-width: 900px;}
.comment.pending-comment {border-left: 4px solid #ffc107; background: #fff9e6; opacity: 0.9;}
.comment-meta {justify-content: space-between; align-items: center;}
.comment-author {font-weight: 600; color: var(--dark-color);}
.comment-date {color: var(--secondary-color); font-size: 0.875rem;}
.comment-content {color: var(--dark-color); line-height: 1.6;}
.comment-form-toggle { background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 10px 20px; border-radius: 8px; margin-bottom: 0; transition: all 0.3s ease; border: none; box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2); font-size: 14px; text-align:center;}
.comment-form-toggle:hover { background: linear-gradient(135deg, #0056b3, #004085); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); color: white; }
.comment-form-toggle .toggle-icon { transition: transform 0.3s ease; float: right; margin-top: 2px; }
.comment-form-content { border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; padding: 20px; margin-top: 0; }
.comment-form { margin-top: 30px; margin-top: 2rem;border-radius: 8px; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); }
.comment-form h4 {color: var(--dark-color); margin-bottom: 1.5rem;}
.comment.ms-4 {border-left: 2px solid #e9ecef; margin-left: 1rem !important; padding-left: 1rem;}
.comment.ms-8 {border-left: 2px solid #e9ecef; margin-left: 2rem !important; padding-left: 1rem;}
.comment.ms-12 {border-left: 2px solid #e9ecef; margin-left: 3rem !important; padding-left: 1rem;}
.comment.ms-16 {border-left: 2px solid #e9ecef; margin-left: 4rem !important; padding-left: 1rem;}
.captcha-container {display: flex; align-items: initial; gap: 1rem;}
.captcha-image {background: linear-gradient(45deg, var(--primary-color), #0056b3); color: white; border-radius: var(--border-radius); font-family: 'Courier New', monospace; font-size: 1rem; letter-spacing: 0.2rem; min-width: 70px; text-align: center; border: 2px solid var(--border-color); align-content: center;}
.captcha-input {flex: 0 0 120px; font-size: 14px; text-align: center;}
.reply-form {background: #f8f9fa; border-radius: 6px; padding: 1rem; border-left: 3px solid var(--primary-color); margin-top: 1rem;}
.reply-btn {font-size: 0.8rem; padding: 2px 0.5rem;}
.captcha-container-small {display: flex; align-items: center; gap: 0.5rem;}
.captcha-small {background: var(--primary-color); color: white; padding: 0.25rem 0.5rem; border-radius: 4px;}
.captcha-input-small {max-width: 80px;}
.comments-section .form-control,#commentForm,#submit-btn {font-size:14px;}
@media (max-width: 768px) {.comment.ms-4,.comment.ms-8,.comment.ms-12,.comment.ms-16 {margin-left: 0.5rem !important; padding-left: 0.5rem;} .reply-form {padding: 0.75rem;} .captcha-container-small {align-items: flex-start; gap: 0.25rem;}
.comment-form {padding: 5px; font-size: 14px;} .comment {padding: 10px;} .captcha-input {flex: 1; width: 100%;}
}