.comment-form {
    background-color: var(--comment-form-background);
    border: 1px solid var(--comment-form-border);
    box-shadow: 2px 2px 4px var(--comment-form-shadow);
    border-radius: 8px;
    margin-bottom: 16px;
}

.comment-title-label {
    font-size: 1em;
    font-weight: bold;
    margin: 16px;
}

.comment-title-textfield {
    display: block;
    margin: 16px auto;
    width: calc(100% - 32px);
}

.comment-body-label {
    font-size: 1em;
    font-weight: bold;
    margin: 16px 16px 5px 16px;
}

.comment-body-section textarea {
    display: block;
    min-height: 100px;
    margin: 16px auto;
    width: calc(100% - 32px);
    resize: none;
    padding: 8px;
}

.comments-section {
    background-color: var(--comments-section-background);
    border: 1px solid var(--comments-section-border);
    box-shadow: 4px 4px 6px var(--comments-section-shadow);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 16px auto 2rem auto;
    padding: 2rem;
}

.comment-card {
    background-color: var(--comment-card-background);
    border: 1px solid var(--comment-card-border);
    box-shadow: 0 1px 2px var(--comment-card-shadow);
    display: grid;
    grid-template: 2fr / 2fr;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.comment-card-data {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-header-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-body {
    color: var(--comment-body-color);
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 12px;
}

.comment-username {
  /* Nudges the username down slightly for visual alignment */
  transform: translateY(6px);
}

.comment-card-btns {
    display: flex;
    flex-direction: row;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.comment-author {
    color: var(--comment-author-color);
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.delete-comment-btn:hover .material-symbols-rounded {
    color: var(--delete-comment-btn-hover-color);
}

.like-count {
    color: var(--like-count-color);
    font-size: 0.9rem;
    align-self: center;
    justify-self: center;
}

.comment-submit-section {
    text-align: right;
    margin: 0 16px 16px 0;
}

.comment-card.reply {
  margin-left: 30px;
  border-left: 2px solid #ccc; /* Adds a visual line for the thread */
  padding-left: 10px; /* Adds space between the line and the content */
}

/* Deeper nesting for multiple reply levels */
.comment-card.reply .comment-card.reply {
  margin-left: 30px; /* Indents replies to replies */
}

.replies.hidden {
  display: none;
}