.cmt-section{
margin:0;
border-top:var(--bw1) solid var(--bc1);
overflow:hidden;
background-color:var(--bg2);
width:100%;
}
.cmt-toggle{
width:100%;
background-color:transparent;
border:none;
padding:16px var(--gap);
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gap);
color:var(--tx1);
font-family:var(--ff2);
font-size:20px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.cmt-toggle:hover,
.cmt-toggle.active{
background-color:var(--hv1);
color:var(--cl1);
}
.cmt-icon,
.cmt-arrow{
width:24px;
height:24px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.cmt-icon svg,
.cmt-arrow svg{
width:24px;
height:24px;
stroke:currentColor;
fill:currentColor;
}
.cmt-text{
flex:1;
text-align:left;
}
.cmt-content{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease,border-top-width 0s .3s;
border-top:0 solid var(--bc1);
}
.cmt-content.active{
grid-template-rows:1fr;
border-top-width:var(--bw1);
transition:grid-template-rows .3s ease,border-top-width 0s 0s;
}
.cmt-content-inner{
overflow:hidden;
min-height:0;
}
.cmt-list{
padding:0;
}
.cmt-item{
display:flex;
gap:var(--gd2);
padding:var(--gap);
border-bottom:var(--bw1) solid var(--bc1);
}
.cmt-item:last-child{
border-bottom:none;
}
.cmt-avatar{
width:40px;
height:40px;
min-width:40px;
border-radius:50%;
background-color:var(--cl1);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.cmt-avatar span{
font-family:var(--ff2);
font-size:16px;
font-weight:800;
color:var(--wht);
}
.cmt-body{
flex:1;
min-width:0;
}
.cmt-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 12px;
margin-bottom:6px;
}
.cmt-author{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:700;
font-size:var(--fz1);
color:var(--tx1);
}
.cmt-author .role-badge{
margin-left:0;
}
.cmt-author.role-admin{
color:var(--rd1);
}
.cmt-author.role-writer{
color:var(--lnk);
}
.cmt-avatar.cmt-avatar-admin{
background-color:var(--rd1);
}
.cmt-avatar.cmt-avatar-writer{
background-color:var(--lnk);
}
.cmt-avatar.cmt-avatar-pic{
background-size:cover;
background-position:center;
background-color:var(--bg3);
}
.cmt-date{
font-size:14px;
color:var(--tx3);
}
.cmt-msg{
font-size:var(--fz1);
line-height:var(--lh1);
color:var(--tx2);
word-wrap:break-word;
}
.cmt-yt-wrap{
position:relative;
width:100%;
max-width:480px;
padding-bottom:56.25%;
margin:8px 0;
border-radius:var(--br2);
overflow:hidden;
}
.cmt-yt{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
}
.cmt-add-wrap{
padding:var(--gap);
background-color:var(--bg3);
display:flex;
flex-direction:column;
align-items:center;
}
.cmt-list+.cmt-add-wrap{
border-top:var(--bw1) solid var(--bc1);
}
.cmt-add-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:fit-content;
padding:14px 24px;
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
}
.cmt-add-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.cmt-add-btn.active{
background-color:var(--ob3);
border-color:var(--cl1);
color:var(--cl1);
}
.cmt-form-wrap{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
overflow:hidden;
width:100%;
}
.cmt-form-wrap.active{
grid-template-rows:1fr;
}
.cmt-form-inner{
overflow:hidden;
min-height:0;
}
.cmt-form-content{
padding-top:var(--gap);
}
.cmt-form-content h3{
font-family:var(--ff2);
font-size:18px;
font-weight:700;
color:var(--cl1);
margin:0 0 var(--gd2);
text-transform:uppercase;
letter-spacing:1px;
}
.cmt-form{
display:flex;
flex-direction:column;
gap:var(--gd2);
}
.cmt-form label{
display:block;
font-size:14px;
font-weight:600;
color:var(--tx2);
margin-bottom:4px;
}
.cmt-form input[type="text"],
.cmt-form input[type="email"],
.cmt-form textarea{
width:100%;
padding:12px 14px;
font-size:var(--fz1);
font-family:var(--ff1);
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
outline:none;
}
.cmt-form input[type="text"]:focus,
.cmt-form input[type="email"]:focus,
.cmt-form textarea:focus{
border-color:var(--cl1);
}
.cmt-form textarea{
min-height:220px;
line-height:var(--lh1);
box-shadow:inset var(--fbs);
}
.cmt-form button[type="submit"]{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 24px;
background-color:var(--cl1);
color:var(--blk);
border:none;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
align-self:flex-start;
}
.cmt-form button[type="submit"]:hover{
background-color:var(--oh2);
}
.cmt-form p{
margin:0;
}
.cmt-form-error{
color:var(--rd1);
font-size:13px;
margin-top:2px;
}
.cmt-success{
color:var(--cl2);
font-size:var(--fz1);
padding:var(--gd2);
background-color:var(--gb1);
border-radius:var(--br0);
margin:0 0 var(--gap);
width:fit-content;
text-align:center;
}
.cmt-pending{
color:var(--cl1);
font-size:var(--fz1);
padding:var(--gd2);
background-color:var(--ob2);
border-radius:var(--br2);
margin:0 0 var(--gd2);
}
.cmt-error{
color:var(--rd1);
font-size:var(--fz1);
padding:var(--gd2);
background-color:var(--rb1);
border-radius:var(--br2);
margin:0 0 var(--gd2);
}
.cmt-actions{
display:inline-flex;
align-items:center;
gap:4px;
margin-left:auto;
}
.cmt-edit-btn,
.cmt-delete-btn{
background:none;
border:none;
padding:2px 8px;
font-family:var(--ff2);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer;
border-radius:var(--br0);
transition:background-color .15s,color .15s;
}
.cmt-edit-btn{
color:var(--tx3);
}
.cmt-edit-btn:hover{
color:var(--cl1);
background-color:var(--hv1);
}
.cmt-delete-btn{
color:var(--tx3);
}
.cmt-delete-btn:hover{
color:var(--rd1);
background-color:rgba(244,67,54,0.08);
}
.cmt-edit-form{
display:none;
margin-top:var(--gd2);
}
.cmt-edit-form textarea{
width:100%;
min-height:120px;
padding:10px 12px;
font-size:var(--fz1);
font-family:var(--ff1);
line-height:var(--lh1);
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
outline:none;
resize:vertical;
}
.cmt-edit-form textarea:focus{
border-color:var(--cl1);
}
.cmt-edit-actions{
display:flex;
align-items:center;
gap:8px;
margin-top:8px;
}
.cmt-edit-save{
padding:8px 18px;
background-color:var(--cl1);
color:var(--blk);
border:none;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer;
}
.cmt-edit-save:hover{
background-color:var(--oh2);
}
.cmt-edit-cancel{
padding:8px 18px;
background-color:var(--bg2);
color:var(--tx2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-family:var(--ff2);
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer;
}
.cmt-edit-cancel:hover{
border-color:var(--cl1);
color:var(--cl1);
}
.cmt-delete-form{
display:none;
margin-top:var(--gd2);
}
.cmt-delete-confirm{
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
background-color:rgba(244,67,54,0.06);
border:1px solid rgba(244,67,54,0.2);
border-radius:var(--br0);
}
.cmt-delete-confirm span{
font-size:var(--fz1);
font-weight:600;
color:var(--tx1);
}
.cmt-delete-yes{
padding:6px 14px;
background-color:var(--rd1);
color:var(--wht);
border:none;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer;
}
.cmt-delete-yes:hover{
opacity:0.85;
}
.cmt-delete-no{
padding:6px 14px;
background-color:var(--bg2);
color:var(--tx2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-family:var(--ff2);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
cursor:pointer;
}
.cmt-delete-no:hover{
border-color:var(--cl1);
color:var(--cl1);
}
.g-recaptcha{
margin-top:var(--gd2);
}
.grecaptcha-badge{
visibility:hidden;
}
.cmt-commenting-as{
font-size:15px;
color:var(--tx2);
margin:0 0 16px;
padding:10px 14px;
background:var(--bg2);
border-radius:var(--br5);
}
.cmt-commenting-as strong{
color:var(--cl1);
}
.cmt-login-gate{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.cmt-login-gate-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:fit-content;
padding:14px 24px;
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
text-decoration:none;
}
.cmt-login-gate-link:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.cmt-login-gate-sub{
font-size:13px;
color:var(--tx3);
}
.cmt-login-gate-sub a{
color:var(--cl1);
text-decoration:none;
font-weight:700;
}
.cmt-login-gate-sub a:hover{
text-decoration:underline;
}