/*=====================================
Comments
======================================*/

.ts-comments{

    margin:80px 0;

    padding-top:30px;

    border-top:1px solid #e5e7eb;

}

.ts-comments .comments-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:38px;

    font-weight:700;

    color:#111827;

    margin-bottom:40px;

}

.ts-comments .comments-title span{

    font-size:16px;

    font-weight:500;

    color:#6b7280;

}

/*=====================================
Comment List
======================================*/

.comment-list{

    list-style:none;

    padding:0;

    margin:0 0 40px;

}

.comment-list>li{

    margin-bottom:35px;

    padding-bottom:35px;

    border-bottom:1px solid #ececec;

}

.comment-body{

    display:flex;

    gap:18px;

}

.comment-author img{

    width:60px;

    height:60px;

    border-radius:50%;

}

.comment-meta{

    margin-bottom:12px;

}

.comment-author .fn{

    font-size:18px;

    font-weight:700;

    color:#111827;

    font-style:normal;

}

.comment-metadata{

    margin-top:3px;

    font-size:14px;

}

.comment-metadata a{

    color:#6b7280;

    text-decoration:none;

}

.comment-content{

    margin-top:10px;

    line-height:1.8;

    color:#374151;

    font-size:17px;

}

.reply{

    margin-top:18px;

}

.reply a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}

/*=====================================
Form
======================================*/

.comment-respond{

    margin-top:60px;

}

.comment-reply-title{

    font-size:34px;

    margin-bottom:25px;

    font-weight:700;

}

.comment-notes{

    display:none;

}

.comment-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.comment-form-author,

.comment-form-email,

.comment-form-url{

    width:100%;

}

.comment-form input[type=text],

.comment-form input[type=email],

.comment-form input[type=url],

.comment-form textarea{

    width:100%;

    padding:18px 20px;

    border:1px solid #d1d5db;

    border-radius:12px;

    font-size:17px;

    transition:.3s;

    outline:none;

    background:#fff;

}

.comment-form textarea{

    min-height:180px;

    resize:vertical;

}

.comment-form input:focus,

.comment-form textarea:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.08);

}

.comment-form-cookies-consent{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

}

.form-submit{

    margin-top:10px;

}

.comment-form input[type=submit]{

    background:#111827;

    color:#fff;

    border:none;

    padding:16px 40px;

    border-radius:10px;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.comment-form input[type=submit]:hover{

    background:#2563eb;

}

/*=====================================
Logged in
======================================*/

.logged-in-as{

    margin-bottom:20px;

    color:#4b5563;

}

.logged-in-as a{

    color:#2563eb;

    text-decoration:none;

}

/*=====================================
No comment
======================================*/

.no-comments{

    margin-bottom:35px;

    font-size:18px;

    color:#6b7280;

}

/*=====================================
Children
======================================*/

.children{

    list-style:none;

    margin-top:30px;

    margin-left:70px;

    padding-left:30px;

    border-left:2px solid #f3f4f6;

}

/*=====================================
Tablet
======================================*/

@media(max-width:992px){

.comment-body{

    gap:15px;

}

.comment-author img{

    width:52px;

    height:52px;

}

.comment-reply-title{

    font-size:30px;

}

}

/*=====================================
Mobile
======================================*/

@media(max-width:768px){

.ts-comments{

    margin:60px 0;

}

.ts-comments .comments-title{

    font-size:30px;

}

.comment-body{

    flex-direction:column;

}

.comment-author img{

    width:48px;

    height:48px;

}

.children{

    margin-left:15px;

    padding-left:15px;

}

.comment-form textarea{

    min-height:160px;

}

.comment-form input[type=submit]{

    width:100%;

}

}

/*=====================================
Small Mobile
======================================*/

@media(max-width:480px){

.ts-comments .comments-title{

    font-size:26px;

}

.comment-content{

    font-size:16px;

}

.comment-form input,

.comment-form textarea{

    padding:16px;

    font-size:16px;

}

}


/**/
.comment-list{
    margin:0;
    padding:0;
    list-style:none;
}

.comment{
    padding:35px 0;
    border-bottom:1px solid #ececec;
}

.comment-body{
    display:grid;

    grid-template-columns:60px 1fr auto;

    grid-template-areas:
        "avatar author date"
        "avatar content content"
        "avatar reply reply";

    column-gap:18px;
}

.comment-author{
    display:contents;
}

.comment-author img{
    grid-area:avatar;

    width:56px;
    height:56px;

    border-radius:50%;
}

.comment-author .fn{

    grid-area:author;

    font-size:20px;

    font-weight:700;

    font-style:normal;

}

.comment-metadata{

    grid-area:date;

    justify-self:end;

    font-size:15px;

}

.comment-content{

    grid-area:content;

    margin-top:8px;

    font-size:18px;

    line-height:1.8;

}

.reply{

    grid-area:reply;

    justify-self:end;

    margin-top:20px;

}

.reply a{

    font-weight:700;

    text-decoration:none;

}
@media(max-width:768px){

.comment-body{

grid-template-columns:50px 1fr;

grid-template-areas:

"avatar author"

"avatar date"

"content content"

"reply reply";

}

.comment-metadata{

justify-self:start;

margin-top:4px;

}

.reply{

margin-top:15px;

}

}
.ts-comments{

    margin-top:70px;

    padding-top:40px;

    border-top:1px solid #ececec;

}

.comments-title{

    font-size:34px;

    margin-bottom:35px;

}

.comment{

    padding:35px 0;

    border-bottom:1px solid #ececec;

}

.comment-body{

    display:grid;

    grid-template-columns:60px 1fr auto;

    grid-template-areas:
        "avatar author date"
        "avatar content content"
        "avatar reply reply";

    gap:15px 20px;

}

.comment-author{

    display:contents;

}

.comment-author img{

    grid-area:avatar;

    width:56px;

    height:56px;

    border-radius:50%;

}

.comment-author .fn{

    grid-area:author;

    font-size:20px;

    font-weight:700;

    font-style:normal;

}

.comment-metadata{

    grid-area:date;

    justify-self:end;

}

.comment-content{

    grid-area:content;

    font-size:18px;

    line-height:1.8;

}

.reply{

    grid-area:reply;

    justify-self:end;

}

.comment-form{

    margin-top:40px;

}

.comment-form textarea{

    width:100%;

    min-height:170px;

    padding:20px;

    border:1px solid #d9d9d9;

    border-radius:10px;

    resize:vertical;

}

.comment-form input[type=submit]{

    margin-top:20px;

    background:#111;

    color:#fff;

    border:none;

    padding:16px 36px;

    border-radius:10px;

    cursor:pointer;

}