.cca-comments-area {
margin: 40px 0;
}
.cca-approved-comments {
margin-bottom: 32px;
}
.cca-approved-comments h2,
.cca-comment-form h3 {
margin: 0 0 18px;
font-size: clamp(1.3rem, 1.7vw, 1.8rem);
line-height: 1.25;
}
.cca-comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.cca-comment-item {
margin: 0 0 16px;
}
.cca-comment-body {
border: 1px solid #d9e1e8;
border-radius: 8px;
padding: 18px;
background: #fff;
}
.cca-comment-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: baseline;
margin-bottom: 10px;
}
.cca-comment-meta time {
color: #667085;
font-size: 0.92rem;
}
.cca-comment-content > *:last-child {
margin-bottom: 0;
}
.cca-comment-box {
max-width: 720px;
}
.cca-comment-form {
display: grid;
gap: 16px;
padding: 22px;
border: 1px solid #d9e1e8;
border-radius: 8px;
background: #f8fafc;
}
.cca-field {
display: grid;
gap: 7px;
margin: 0;
}
.cca-field label {
font-weight: 700;
}
.cca-field input,
.cca-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #b8c2cc;
border-radius: 6px;
padding: 11px 12px;
font: inherit;
background: #fff;
}
.cca-field input:focus,
.cca-field textarea:focus {
border-color: #1967d2;
outline: 3px solid rgba(25, 103, 210, 0.18);
}
.cca-comment-form button {
justify-self: start;
min-height: 44px;
border: 0;
border-radius: 6px;
padding: 0 18px;
font: inherit;
font-weight: 700;
color: #fff;
background: #155eef;
cursor: pointer;
}
.cca-comment-form button:hover,
.cca-comment-form button:focus {
background: #1048b7;
}
.cca-notice {
margin: 0 0 16px;
border-radius: 6px;
padding: 12px 14px;
font-weight: 600;
}
.cca-notice-success {
border: 1px solid #81c995;
color: #0f5132;
background: #ecfdf3;
}
.cca-notice-error {
border: 1px solid #f5a3a3;
color: #842029;
background: #fff1f1;
}
.cca-honeypot {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.cca-comment-pagination {
margin-top: 18px;
}