/*==========================
COMMENTS
==========================*/

.comment-section{
margin-bottom: 20px;

margin-top:10px;

padding:15px;

background:#161616;

border-radius:12px;

border:1px solid #2b2b2b;

}

.comment-section h2{
color: #fff;
font-size:22px;

display:flex;

align-items:center;

gap:10px;


}

#commentCount{

font-size:15px;

color:#888;

}

.comment-box{

display:flex;

flex-direction:column;

gap:10px;

}

.comment-box textarea{
margin-top: 20px;

resize:none;

min-height:110px;

padding:15px;

background:#202020;

border:1px solid #333;

color:#fff;

border-radius:10px;

font-size:15px;

outline:none;

}

.comment-box textarea:focus{

border-color:#3ea6ff;

}

.comment-actions{

display:flex;

justify-content:flex-end;

gap:10px;

}

.comment-actions button{

padding:10px 20px;

border:none;

border-radius:25px;

cursor:pointer;

font-weight:bold;

}

#cancelComment{

background:#2d2d2d;

color:white;

}

#postComment{

background:#3ea6ff;

color:white;

}

.login-comment{

padding:20px;

text-align:center;

background:#202020;

border-radius:10px;

}

#commentsContainer{

margin-top:25px;

}




.comment-card{

display:flex;

align-items:flex-start;

padding:10px 0;

border-top:1px solid rgba(255,255,255,.06);

}



.comment-avatar{
    width:42px;
}

.avatar-letter{
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
    background:#3b82f6;
    color:#fff;
}

.comment-body{
    flex:1;
    min-width:0;
}

.comment-top{
    display:flex;
    align-items:center;
    gap:10px;
}

.comment-user{
    margin-top: 3px;
    color:#b9b9b9;
    font-size:14px;
    /*font-weight:600;*/
}

.comment-time{
    margin-top: 3px;
    font-size: 10px;
    color:#9a9a9a;
}

.comment-message{
    font-size:16px;
    line-height:1.7;
    color:#e5e5e5;
    margin-bottom:10px;
    word-break:break-word;
}

.comment-actions-row{
    display:flex;
    align-items:center;
    gap:18px;
}

.comment-actions-row button{

display:flex;

align-items:center;

gap:6px;

background:none;

border:none;

color:#aaa;

cursor:pointer;

padding:0;


transition:.2s;

}

.comment-actions-row button:hover{
    color:#fff;
}

.comment-like i,
.comment-dislike i{

font-size:18px;

}


.reply-btn{

font-weight:500;

}


.reply-box{
margin-top:14px;
margin-left:10;

}

.reply-box textarea{

width:100%;

min-height:70px;

background:#222;

border:1px solid #444;

color:white;

padding:10px;

border-radius:8px;

resize:none;

}

.reply-box button{

margin-top:8px;

padding:8px 18px;

border:none;

background:#3ea6ff;

border-radius:20px;

color:white;

cursor:pointer;

}



.pin-badge{

margin-left:8px;

font-size:12px;

color:#3ea6ff;

}

.heart-badge{

margin-left:5px;

}


.reply-text{

resize:none;

overflow:hidden;

min-height:70px;

max-height:300px;

}


.reply-container{
overflow: auto;
display:none;
/*
position:relative;

margin-top:14px;

margin-left:26px;

padding-left:22px; */

}


.reply-container::before{

content:"";

position:absolute;

left:0;

top:0;

bottom:0;

width:2px;

background:#3f3f3f;

border-radius:2px;

}

.reply-container>.comment-card{

margin-top:18px;

padding-top:0;

border-top:none;

}

.reply-container .reply-container{

margin-left:24px;

}

.reply-container.show{

display:block;

}





.reply-toggle{

display:inline-flex;

align-items:center;

gap:8px;

margin-top:14px;

padding:6px 0;

cursor:pointer;

color:#3ea6ff;

font-size:14px;

font-weight:600;

user-select:none;

transition:.2s;

}

.reply-toggle:hover{

color:#6cc5ff;

}

.reply-toggle i{

font-size:12px;

transition:.25s;

}


.reply-toggle.open i{

transform:rotate(180deg);

}

.reply-hidden{

display:none;

}

.reply-hidden.show{

display:block;

}


.more-replies{

margin-top:12px;

margin-left:8px;

color:#3ea6ff;

font-size:14px;

font-weight:600;

cursor:pointer;

display:inline-block;

user-select:none;

}

.more-replies:hover{

color:#69beff;

}