/* Comments Section */
.comments-section {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title {
    color: #ffffff;
    border-bottom: 1px solid #3d3d3d;
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
}

/* Comment Form */
.comment-form textarea {
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    resize: none;
    transition: all 0.3s ease;
}

.comment-form textarea:focus {
    background-color: #333333;
    border-color: #4f4d4e;
    box-shadow: 0 0 0 0.2rem rgba(79, 77, 78, 0.25);
}

/* Fix text color in comment form input fields */
.comment-form textarea,
.reply-comment-form textarea,
.edit-comment-form textarea,
.comment-textarea {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
}

.comment-form textarea::placeholder,
.reply-comment-form textarea::placeholder,
.edit-comment-form textarea::placeholder,
.comment-textarea::placeholder {
    color: #aaaaaa !important;
}

/* Ensure username is white in comments */
.comment-username,
.comment-content h5,
.comment-content h5.mb-0,
.comment .card-body .comment-content h5.mb-0.font-UglyQua {
    color: #ffffff !important;
}

/* Also ensure small text elements inside usernames keep their intended color */
.comment-content h5 small,
.comment-content h5.mb-0 small,
.comment-username small {
    color: #bbbbbb !important; /* Lighter gray for timestamps/secondary info */
}

/* Make sure all comment text inputs have white text */
.dark-input {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
}

/* Ensure dropdown menus don't have black text */
.dropdown-item {
    color: #e0e0e0 !important;
}

.dropdown-item:hover {
    color: #ffffff !important;
    background-color: rgba(79, 77, 78, 0.15) !important;
}

/* Make dropdown ellipsis icon white in comments */
.comment .card-body .dropdown .btn-link.text-muted,
.comment-content .dropdown .btn-link.text-muted {
    color: #ffffff !important;
}

.comment .card-body .dropdown .btn-link.text-muted i.fa-ellipsis-v,
.comment-content .dropdown .btn-link.text-muted i.fa-ellipsis-v {
    color: #ffffff !important;
}

/* Add hover effect */
.comment .card-body .dropdown .btn-link.text-muted:hover,
.comment-content .dropdown .btn-link.text-muted:hover,
.comment .card-body .dropdown .btn-link.text-muted:hover i,
.comment-content .dropdown .btn-link.text-muted:hover i {
    color: #4f4d4e !important;
}

/* Dark mode styling for comment dropdown menu */
.comment .dropdown-menu,
.comment-content .dropdown-menu {
    background-color: #2d2d2d !important;
    border: 1px solid #3d3d3d !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Style for dropdown items in comment section */
.comment .dropdown-menu .dropdown-item,
.comment-content .dropdown-menu .dropdown-item {
    color: #e0e0e0 !important;
    padding: 0.6rem 1rem !important;
    transition: all 0.2s ease;
}

/* Hover state for dropdown items */
.comment .dropdown-menu .dropdown-item:hover,
.comment-content .dropdown-menu .dropdown-item:hover {
    background-color: rgba(79, 77, 78, 0.15) !important;
    color: #ffffff !important;
}

/* Special styling for delete action */
.comment .dropdown-menu .dropdown-item.delete-comment-btn,
.comment-content .dropdown-menu .dropdown-item.delete-comment-btn {
    color: #dc3545 !important;
}

.comment .dropdown-menu .dropdown-item.delete-comment-btn:hover,
.comment-content .dropdown-menu .dropdown-item.delete-comment-btn:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

/* Ensure dropdown icons have proper color */
.comment .dropdown-menu .dropdown-item i,
.comment-content .dropdown-menu .dropdown-item i {
    color: inherit !important;
    opacity: 0.8;
}

/* Position adjustment for dropdown */
.comment .dropdown-menu,
.comment-content .dropdown-menu {
    transform: none !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
}

/* Comments List */
.comments-list {
    margin-top: 2rem;
}

.comment {
    background-color: #1d1d1b;
    border: none;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.comment:hover {
    transform: translateY(-3px);
}

.comment .card-body {
    padding: 1.25rem;
}

/* Avatar Styles */
.comment-avatar img,
.comment-avatar .avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.avatar-placeholder {
    background-color: #4f4d4e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Comment Content */
.comment-content {
    flex: 1;
}

.comment-text {
    color: #e0e0e0;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    word-break: break-word;
}

/* Comment Actions */
.comment-actions {
    display: flex;
    align-items: center;
}

.comment-actions button {
    color: #bbbbbb;
    padding: 0;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.comment-actions button:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Reply Form */
.reply-form textarea {
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    resize: none;
    font-size: 0.95rem;
}

.reply-form textarea:focus {
    background-color: #333333;
    border-color: #4f4d4e;
    box-shadow: 0 0 0 0.2rem rgba(79, 77, 78, 0.25);
}

/* Replies List */
.replies-list {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 1px solid #3d3d3d;
}

.replies-list .comment {
    margin-bottom: 1rem;
}

/* For nested reply cards, make them slightly different */
.replies-list .comment {
    background-color: #222222;
}

/* Edit Form */
.edit-comment-form textarea {
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    resize: none;
    width: 100%;
    font-size: 0.95rem;
}

.edit-comment-form textarea:focus {
    background-color: #333333;
    border-color: #4f4d4e;
    box-shadow: 0 0 0 0.2rem rgba(79, 77, 78, 0.25);
}

/* No Comments Message */
.no-comments {
    background-color: #1d1d1b;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.no-comments p {
    color: #6f6f6f;
    font-size: 1.1rem;
    margin: 0;
}

/* Auth Prompt */
.auth-prompt {
    background-color: #1d1d1b;
    color: #e0e0e0;
    border: 1px solid #3d3d3d;
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.5rem;
}

.auth-prompt a {
    color: #4f4d4e;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-prompt a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Like Button Styles */
.btn-like {
    background-color: #2d2d2d;
    border: 2px solid #4f4d4e;
    color: #ffffff;
    padding: 0.5rem 1rem;  /* Reduced from 0.75rem 1.5rem */
    transition: all 0.3s ease;
    border-radius: 2rem;
    font-weight: 500;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 0.95rem;  /* Reduced from 1.1rem */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-like i {
    margin-right: 0.5rem;  /* Reduced from 0.75rem */
    color: #e0e0e0;
    font-size: 1.05rem;  /* Reduced from 1.2rem */
    transition: all 0.3s ease;
}

/* Heart icon states */
.btn-like i.empty-heart {
    color: #e0e0e0;
}

.btn-like i.liked-heart {
    color: #dc3545;
}

.btn-like.liked {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.4);
}

.btn-like:hover {
    background-color: #3d3d3d;
    border-color: #6f6f6f;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.btn-like.liked:hover {
    background-color: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.5);
}

/* Animation for like button */
@keyframes likeAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.animate-like {
    animation: likeAnimation 0.5s ease;
}

/* Modal Styling for Delete Confirmation */
.dark-modal {
    background-color: #222222;
    color: #e0e0e0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.dark-modal .modal-header {
    border-bottom-color: #3d3d3d;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #1d1d1b 0%, #2d2d2d 100%);
}

.dark-modal .modal-footer {
    border-top-color: #3d3d3d;
    padding: 1rem 1.5rem;
}

.dark-modal .modal-body {
    padding: 1.5rem;
}

.dark-modal .btn-close {
    background-color: transparent;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.dark-modal .btn-close:hover {
    opacity: 1;
}

.dark-modal .btn-secondary {
    background-color: #444;
    border-color: #444;
    transition: all 0.3s ease;
}

.dark-modal .btn-secondary:hover {
    background-color: #555;
    border-color: #555;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.dark-modal .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    transition: all 0.3s ease;
}

.dark-modal .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .comment-avatar img,
    .comment-avatar .avatar-placeholder {
        width: 32px;
        height: 32px;
    }
    
    .comment .card-body {
        padding: 1rem;
    }
    
    .replies-list {
        padding-left: 0.5rem;
    }
}