.d-flex {
    display: flex;
}
.justify-content-between {
    justify-content: space-between;
}
.justify-content-end {
    justify-content: end;
}
.align-items-center {
    align-items: center;
}
.flex-direction-column {
    flex-direction: column;
}
.gap-1 {
    gap: 10px;
}
.gap-2 {
    gap: 20px;
}
.w-100 {
    width: 100%;
}
.article-comment {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-msg, .textarea {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #e2e2e2;
    resize: vertical;
    background-color: #fff;
}

.textarea:focus {
    transition: none
}

.login-link, .delete-comment, .reply-comment {
    color: #065FD4;
}

.send-comment-btn {
    display: flex;
    border-radius: 2px;
    background-color: #C92A57;
    padding: 8px 12px;
    cursor: pointer;
    color: #fff;
}

.comment-separator {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
}
.item-comment {
    display: flex;
    gap: 10px;
    background-color: #fafafc;
    border-radius: 4px;
    padding: 16px;
}

.comment-author {
    color: #222;
    font-weight: bold;
    font-size: 16px;
}

.mt-6 {
    margin-top: 6px;
}
.br {
    margin-top: 21px;
}

.reply-expand:hover {
    color: #C92A57;
    cursor: pointer;
    svg {
        stroke: #C92A57;
    }
}
.reply-expand {
    display: flex;
    align-items: center;
    width: fit-content;
    color: #9f9f9f;
}
.time-com {
    color: #9f9f9f;
}
.reply-comment, .delete-comment:hover {
    cursor: pointer;
}
.load-more-comments {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #065FD4;
    border-radius: 4px;
    font-size: 16px;
    padding: 6px 12px;
    cursor: pointer;
    color: #fff;
}
.item-comment-wait-approve {
    display: flex;
    gap: 10px;
    border-radius: 4px;
    padding: 16px;
    background-color: rgba(238,213,211,.2);
}
.empty-comment {
    height: 50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #fafafc; 
    width: 100%;
}
.comment-post-form {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.content-comment {
    border-left: 2px solid #e2e2e2;
    padding-left: 16px;
    margin-top: 10px;
}
.content-comment.child {
    border:0px;
    padding-left: 0px;
}
.content-comment .item-comment {
    display: none;
}
.content-comment.expanded .item-comment {
    display: flex;
}
.continue-reading {
    text-decoration: underline;
    text-underline-position: under;
    color: #9f9f9f;
    cursor: pointer;
}
.continue-reading:hover {
    color: #C92A57;
}
.head_box_comment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 4px;
    background-color: #fafafc;
    padding: 16px;
}
.comment-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.full-content {
    word-break: break-word;
    white-space: pre-wrap;
}
.comment-text {
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: pre-wrap;
}
.comment-text.expanded {
    -webkit-line-clamp: unset;
}
.hidden {
    display: none;
}
.filter_comment {
    border-bottom: 1px solid #f2f2f2;
}
.filter_comment span {
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 7px;
}
.filter_comment .active {
    color: #B42652 !important;
    border-bottom: 1px solid #B42652; 
}
.post_title {
    display: flex;
    align-items: center;
    font-size: 18px;
}
.reactions-wrap {
    display: flex; 
    align-items: center;
    cursor: pointer;
    gap: 5px;
}
.reactions-wrap.disabled {
    pointer-events: none;
}
.reactions-wrap.active path{
    fill: #065FD4;
}

/* SVG icons for reply expand button using CSS */
.reply-expand {
    position: relative;
    padding-left: 25px; /* Space for the icon */
}

.reply-expand::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

/* Normal state - arrow pointing down */
.reply-expand::before {
    background-image: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='-2.4 -2.4 28.80 28.80' fill='none' xmlns='http://www.w3.org/2000/svg' transform='rotate(270)matrix(1, 0, 0, -1, 0, 0)' stroke='%239f9f9f'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.46967 10.0303C6.17678 9.73744 6.17678 9.26256 6.46967 8.96967L11.4697 3.96967C11.7626 3.67678 12.2374 3.67678 12.5303 3.96967L17.5303 8.96967C17.8232 9.26256 17.8232 9.73744 17.5303 10.0303C17.2374 10.3232 16.7626 10.3232 16.4697 10.0303L12.75 6.31066L12.75 14.5C12.75 15.2133 12.9702 16.3 13.6087 17.1868C14.2196 18.0353 15.2444 18.75 17 18.75C17.4142 18.75 17.75 19.0858 17.75 19.5C17.75 19.9142 17.4142 20.25 17 20.25C14.7556 20.25 13.2804 19.298 12.3913 18.0632C11.5298 16.8667 11.25 15.4534 11.25 14.5L11.25 6.31066L7.53033 10.0303C7.23744 10.3232 6.76256 10.3232 6.46967 10.0303Z' fill='%239f9f9f'/%3E%3C/g%3E%3C/svg%3E");
}

/* Expanded state - arrow pointing up */
.reply-expand.expanded::before {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='-2.4 -2.4 28.80 28.80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.46967 10.0303C6.17678 9.73744 6.17678 9.26256 6.46967 8.96967L11.4697 3.96967C11.7626 3.67678 12.2374 3.67678 12.5303 3.96967L17.5303 8.96967C17.8232 9.26256 17.8232 9.73744 17.5303 10.0303C17.2374 10.3232 16.7626 10.3232 16.4697 10.0303L12.75 6.31066L12.75 14.5C12.75 15.2133 12.9702 16.3 13.6087 17.1868C14.2196 18.0353 15.2444 18.75 17 18.75C17.4142 18.75 17.75 19.0858 17.75 19.5C17.75 19.9142 17.4142 20.25 17 20.25C14.7556 20.25 13.2804 19.298 12.3913 18.0632C11.5298 16.8667 11.25 15.4534 11.25 14.5L11.25 6.31066L7.53033 10.0303C7.23744 10.3232 6.76256 10.3232 6.46967 10.0303Z' fill='%239f9f9f'/%3E%3C/svg%3E");
}

/* doshin add */
.reply-comment:hover{
        color: #595959;
}
.delete-comment:hover{
        color: #595959;
}
.reply-expand:hover{
        color: #0066C0;
}

.send-comment-btn {
    background-color: #0066C0;
}