﻿.blog-comments { margin-top:36px; padding-top:28px; border-top:1px solid #e9e3f1; }
.blog-comments__heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.blog-comments .blog-comments__eyebrow { font-size:9px; text-transform:uppercase; letter-spacing:.13em; color:#a96020; font-weight:600; margin:0 0 8px; }
.blog-comments__heading h3 { color:#17172f; font-size:26px; line-height:1.3; font-weight:600; margin:0; }
.blog-comments__heading>span { font-size:11px; color:#83718f; background:#f5f1fa; padding:7px 12px; border-radius:20px; }
.blog-comments .blog-comment-form { border:1px solid #e8e0f0; border-radius:16px; padding:25px; background:#fff; margin-bottom:22px; }
.blog-comment-form__intro { margin-bottom:22px; }
.blog-comments .blog-comment-form__intro h4 { font-size:18px; color:#17172f; line-height:1.4; margin:0 0 8px; font-weight:600; }
.blog-comments .blog-comment-form__intro p { color:#897795; font-size:12px; line-height:1.7; margin:0; }
.blog-comment-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:13px; }
.blog-comment-form__field--wide { grid-column:1/-1; }
.blog-comment-form__field label { display:block; font-size:12px; font-weight:500; color:#736080; margin-bottom:8px; }
.blog-comment-form__field label>span { color:#a96020; }
.blog-comment-form input,.blog-comment-form textarea { width:100%; min-height:45px; padding:12px 14px; font-family:inherit; font-size:13px; line-height:1.6; background:#faf9fc; color:#574361; border:1px solid #e3daec; border-radius:9px; box-shadow:none; }
.blog-comment-form input::placeholder,.blog-comment-form textarea::placeholder { color:#a797b2; }
.blog-comment-form input:focus,.blog-comment-form textarea:focus { border-color:#aea0cf; background:#fff; outline:3px solid #09008f08; }
.blog-comment-form textarea { min-height:130px; resize:vertical; }
.blog-comments .blog-comment-form__privacy { display:flex; align-items:flex-start; gap:7px; font-size:10px; line-height:1.8; color:#9783a3; margin:0 0 21px; }
.blog-comment-form__privacy i { margin-top:4px; color:#a18ab1; }
.blog-comment-form__footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:20px; }
.blog-comment-form__footer small { font-size:10px; color:#8b7899; line-height:1.8; }
.blog-comment-form__footer small i { color:#9a8aa7; margin-right:4px; }
.blog-comments .blog-comment-form button[type=submit] { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:44px; padding:11px 18px; color:#fff; background:#09008f; border:0; border-radius:9px; font-size:12px; font-weight:600; cursor:pointer; }
.blog-comments__request { display:flex; align-items:center; gap:15px; border:1px solid #eee2d3; background:#fff8ef; border-radius:12px; padding:18px; margin-bottom:28px; }
.blog-comments__request>i { flex-shrink:0; color:#a96020; background:#ffedd6; padding:12px; border-radius:10px; }
.blog-comments .blog-comments__request p { margin:0; flex:1; }
.blog-comments__request strong { display:block; font-size:13px; line-height:1.5; color:#6b4d2e; }
.blog-comments__request p>span { display:block; font-size:10px; color:#a58c70; line-height:1.7; margin-top:3px; }
.blog-comments__request button { flex-shrink:0; border:0; padding:8px 0; color:#a96020; background:none; font-size:11px; font-weight:600; cursor:pointer; }
.blog-comments__empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:32px 20px; border-radius:13px; border:1px dashed #e4d9ef; background:#faf8fc; }
.blog-comments__empty>i { color:#b4a1c6; font-size:24px; }
.blog-comments__empty strong { color:#736080; font-size:14px; font-weight:500; }
.blog-comments .blog-comments__empty p { margin:0; color:#a08cac; font-size:11px; line-height:1.7; }
.blog-comments__list { display:grid; gap:16px; }
.blog-comment { padding:20px; border:1px solid #e9e2f0; border-radius:13px; background:#fff; min-width:0; }
.blog-comment__header { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:15px; }
.blog-comment__author { display:flex; align-items:center; gap:10px; min-width:0; }
.blog-comment__avatar { display:flex; align-items:center; justify-content:center; flex:0 0 32px; height:32px; border-radius:50%; background:#f0ebfa; color:#09008f; font-size:12px; font-weight:600; }
.blog-comment__author strong { font-size:13px; font-weight:600; color:#574361; overflow-wrap:anywhere; }
.blog-comment__header time { color:#a18cad; font-size:10px; flex-shrink:0; }
.blog-comment__content { font-size:13px; line-height:1.85; color:#7e6a8d; overflow-wrap:anywhere; }
.blog-comment__actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:16px; }
.blog-comment__actions form { margin:0; }
.blog-comment__link { border:0; background:none; color:#8c73a0; font-size:11px; padding:4px 0; cursor:pointer; }
.blog-comment__link i { margin-right:4px; }
.blog-comment__link--danger { color:#be6973; }
.blog-comment__replies { margin-top:18px; padding-left:16px; border-left:2px solid #e5dcef; display:grid; gap:12px; }
.blog-comments .blog-comment-form--nested { display:none; margin-top:18px; background:#faf8fc; padding:20px; }
.blog-comments .blog-comment-form--nested.is-visible { display:block; }
.blog-comment-form--nested>button { margin-top:15px; }
.blog-comment__trap { position:absolute; left:-9999px; opacity:0; width:1px!important; min-height:0!important; }
.blog-comments__notice,.blog-comments__errors { padding:15px; margin-bottom:20px; border-radius:10px; font-size:12px; line-height:1.7; }
.blog-comments__notice { background:#eff8f2; color:#5b8770; }
.blog-comments__errors { background:#fff0f1; color:#a35360; }
.blog-comments__errors ul { margin:8px 0 0; }
@media(max-width:575px) { .blog-comments .blog-comment-form { padding:20px; }.blog-comment-form__grid { grid-template-columns:1fr; gap:14px; }.blog-comment-form__footer { align-items:stretch; flex-direction:column; gap:14px; }.blog-comments__request { flex-wrap:wrap; }.blog-comments__request p { flex-basis:70%; }.blog-comments__request button { margin-left:51px; }.blog-comment { padding:16px; }.blog-comment__header { align-items:flex-start; flex-direction:column; gap:9px; }.blog-comment__replies { padding-left:10px; }.blog-comments__heading h3 { font-size:24px; } }
