.content-comments {
    --comment-primary: #0e4e96;
    --comment-ink: #15243a;
    --comment-muted: #6d7887;
    margin-top: 42px;
    padding: 28px;
    border: 1px solid #e4eaf1;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, #f7faff 100%);
    box-shadow: 0 14px 38px rgba(14, 78, 150, .08);
}
.content-comments__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.content-comments__header h2 { margin: 3px 0 0; color: var(--comment-ink); font-size: 28px; }
.content-comments__eyebrow { color: var(--comment-primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.content-comments__count { display: inline-flex; min-width: 30px; height: 30px; padding: 0 8px; align-items: center; justify-content: center; margin-inline-start: 6px; border-radius: 20px; background: var(--comment-primary); color: #fff; font-size: 14px; vertical-align: middle; }
.content-comments__header-icon { color: rgba(14, 78, 150, .16); font-size: 48px; }
.content-comments__form, .content-comments__login {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    background: #fff;
}
.content-comments__form label { display: block; margin-bottom: 9px; color: var(--comment-ink); font-weight: 700; }
.content-comments__form textarea { width: 100%; resize: vertical; min-height: 125px; padding: 14px 16px; border: 1px solid #d9e2ed; border-radius: 11px; background: #fbfdff; color: var(--comment-ink); line-height: 1.8; transition: border-color .2s, box-shadow .2s; }
.content-comments__form textarea:focus { outline: 0; border-color: var(--comment-primary); box-shadow: 0 0 0 3px rgba(14, 78, 150, .11); }
.content-comments__form-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.content-comments__form-footer small { color: var(--comment-muted); }
.content-comments__feedback { margin-top: 13px; padding: 10px 13px; border-radius: 9px; }
.content-comments__feedback.is-success { display: block !important; background: #eaf8ef; color: #176b39; }
.content-comments__feedback.is-error { display: block !important; background: #fff0f0; color: #a22626; }
.content-comments__login { display: flex; align-items: center; gap: 16px; }
.content-comments__login > i { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 50%; background: #e9f2fc; color: var(--comment-primary); font-size: 20px; }
.content-comments__login div { flex: 1; }
.content-comments__login p { margin: 4px 0 0; color: var(--comment-muted); line-height: 1.7; }
.content-comments__notice { margin-bottom: 20px; padding: 13px 16px; border-radius: 10px; background: #fff5df; color: #8b5b00; }
.content-comments__loading, .content-comments__empty, .content-comments__error { padding: 28px 12px; text-align: center; color: var(--comment-muted); }
.content-comment { position: relative; display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid #e7edf4; }
.content-comment:last-child { border-bottom: 0; }
.content-comment__avatar { display: grid; flex: 0 0 46px; height: 46px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #0e4e96, #1976c9); color: #fff; font-weight: 800; text-transform: uppercase; }
.content-comment__body { min-width: 0; flex: 1; }
.content-comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 7px; }
.content-comment__author { color: var(--comment-ink); font-weight: 800; }
.content-comment__date { color: var(--comment-muted); font-size: 12px; }
.content-comment__text { margin: 0; color: #344257; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-comment__badge { padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.content-comment__badge--pending { background: #fff0cc; color: #8a5a00; }
.content-comment__badge--official { background: #e5f0ff; color: var(--comment-primary); }
.content-comment--official { margin: 8px 0; padding: 18px; border: 1px solid #d5e5fa; border-radius: 13px; background: #f5f9ff; }
.content-comments__pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.content-comments__page-button { padding: 8px 15px; border: 1px solid #d5dfeb; border-radius: 9px; background: #fff; color: var(--comment-primary); }
.content-comments__page-button:disabled { cursor: not-allowed; opacity: .45; }
[dir="rtl"].content-comments { font-family: 'IRANSansX', sans-serif; }
@media (max-width: 575.98px) {
    .content-comments { margin-top: 28px; padding: 19px 15px; border-radius: 14px; }
    .content-comments__header h2 { font-size: 23px; }
    .content-comments__header-icon { font-size: 37px; }
    .content-comments__login { align-items: flex-start; flex-wrap: wrap; }
    .content-comments__login .site-button { width: 100%; text-align: center; }
    .content-comments__form-footer { align-items: stretch; flex-direction: column; }
    .content-comments__form-footer .site-button { width: 100%; }
    .content-comment { gap: 10px; }
    .content-comment__avatar { flex-basis: 38px; height: 38px; }
}