/* Comment Section - General */
#comment-section {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: #3e3e3e;
    border-radius: 5px;
}

/* Individual Comment Styling */
.comment {
    background: #555;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    word-wrap: break-word;
}
@media (max-width: 768px) {
    #comment-section {
        width: 90% !important; /* Reduce width to match other elements */
        max-width: 600px; /* Ensure it doesn't stretch too much */
        margin: 0 auto; /* Center it */
        padding: 15px; /* Ensure consistent spacing */
        box-sizing: border-box; /* Prevents width from exceeding parent */
    }
    .comment-item {
        width: 90%;
        margin: 0 auto;
    }
}
.oauth-button {
    display: inline-block;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    margin: 5px;
}
.oauth-button.google {
    background-color: #db4437;
    color: white;
}
.oauth-button.facebook {
    background-color: #3b5998;
    color: white;
}
.oauth-button:hover {
    opacity: 0.9;
}

#comment-section h3 {
    text-align: center;
    color: #ffd700;
}

.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.comment-item img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.comment-text {
    flex: 1;
    color: #fff;
}

.comment-meta {
    font-size: 12px;
    color: #ccc;
}
/* Comment Form */
.comment-form {
    width: 100%;
    max-width: 700px;
    margin: auto;
}
#comment-form textarea {
    width: 95%;
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 8px;
}

#comment-form button {
    background-color: #ffd700;
    color: #222;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-top: 8px;
    margin-bottom: 12px; /* Add spacing below the button */
}

#comment-form button:hover {
    background-color: #e6c200;
}
.comment-sort button {
    background-color: #ffd700;
    color: #222;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin: 5px;
}

.comment-sort button:hover {
    background-color: #e6c200;
}
.comment-votes button {
    background-color: #444;
    color: #ffd700;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-right: 5px;
}

.comment-votes button:hover {
    background-color: #555;
}
.comment-actions button {
    background-color: #666;
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-right: 5px;
}

.comment-actions button {
    background-color: #666;
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-right: 5px;
}

.comment-actions button:hover {
    background-color: #888;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .comment-section {
        width: 90%; /* Reduce width for mobile */
        padding: 15px;
    }
    
    .comment {
        font-size: 14px;
    }

    .comment-form {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .comment-section {
        width: 95%;
        padding: 10px;
    }

    .comment {
        font-size: 13px;
    }
}
.upvote-btn, .downvote-btn {
    font-size: 16px; /* or whatever your default size is */
    font-family: inherit; /* inherit normal text font */
    padding: 4px 8px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}