.comment-container{display:flex;flex-direction:column;gap:20px}.comment-item{display:flex;flex-direction:column;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #eee}.comment-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.comment-avatar{width:45px;height:45px;border-radius:50%;object-fit:cover;border:2px solid white;box-shadow:0 2px 5px #0000001a}.comment-meta{display:flex;flex-direction:column}.comment-author{font-weight:700;color:var(--text-dark);font-size:.95rem}.comment-date{font-size:.75rem;color:var(--text-light)}.comment-body{color:var(--text-grey);font-size:.9rem;line-height:1.7;margin-bottom:12px;padding-right:5px}.comment-footer{display:flex;justify-content:flex-end;border-top:1px solid #eee;padding-top:10px}.reply-btn{background:transparent;border:1px solid #ddd;color:var(--text-grey);padding:5px 15px;border-radius:20px;font-size:.8rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px}.reply-btn:hover{background:var(--secondary-blue);color:var(--primary-blue);border-color:var(--secondary-blue)}.post-comment-btn{padding:.6rem 1rem!important;font-size:1rem;text-align:center;color:#fdfdfd;background-color:#002d84;border:1px solid #366FDB;border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px}.post-comment-btn:hover{background-color:#00225f}.comment-replies{margin-top:15px;margin-right:30px;border-right:2px solid #e0e0e0;padding-right:15px;display:flex;flex-direction:column;gap:15px}.comment-item.reply{background:#fff;border:1px solid #f0f0f0}.comment-box{background:#fff3e0;color:#e65100;padding:15px;border-radius:8px;text-align:center;font-size:.9rem;border:1px solid #ffe0b2}
