/* Start custom CSS for post-comments, class: .elementor-element-7f48abf */<!-- ====================================================================
  استایل سفارشی بخش «دیدگاه‌ها» (ویجت Post Comments المنتور / تم Hello Elementor)
  فقط روی #comments و فرزندانش اعمال می‌شود؛ هیچ بخش دیگری از سایت را تغییر نمی‌دهد.

  نحوه نصب:
  1) این کد را داخل یک ویجت «HTML» المنتور، دقیقاً بالای ویجت «Post Comments»
     (یا هرجای دلخواه در همان صفحه) قرار دهید.
  2) چون ویجت Post Comments خودش id="comments" را در خروجی تولید می‌کند،
     لازم نیست هیچ ساختار HTML اضافه‌ای بسازید — این فقط CSS/JS است.
  3) اگر بخش "CSS سفارشی" خود ویجت (Advanced > Custom CSS) استفاده می‌کنید
     به‌جای ویجت HTML، فقط بخش <style> پایین را در آنجا کپی کنید و
     به‌جای "#comments" بنویسید ".elementor-13640 .elementor-element.elementor-element-7f48abf" (پیشوند خودکار المنتور)
     — اما روش ویجت HTML امن‌تر و قابل‌کنترل‌تر است، پس همان را پیشنهاد می‌کنیم.

  نکته درباره آواتار حروفی:
  HTML پیش‌فرض وردپرس برای این کامنت‌ها <img class="avatar"> ندارد (چون آواتار غیرفعال است)،
  و CSS به‌تنهایی نمی‌تواند «حرف اول یک متن» را بخواند تا در یک دایره نشانش دهد.
  برای همین یک اسکریپت کوچک و مستقل اضافه شده که فقط همین یک کار را می‌کند:
  حرف اول نام هر نویسنده کامنت را می‌خواند و در یک دایرهٔ رنگی قبل از نامش قرار می‌دهد.
  این اسکریپت چیزی در بقیه صفحه تغییر نمی‌دهد و کاملاً ایزوله است.
==================================================================== -->

<style>
  /* ---------- محدوده و توکن‌های رنگی هم‌سو با تم سایت ---------- */
  #comments.comments-area{
    --c-ink:#14213d;
    --c-ink-soft:#3c4d72;
    --c-parchment:#f8f3e7;
    --c-parchment-deep:#efe6d2;
    --c-gold:#a9782e;
    --c-gold-bright:#c79640;
    --c-maroon:#6c2a37;
    --c-line:#e2d6bd;
    --c-ok:#2f6b4f;

    font-family:'Vazirmatn',sans-serif;
    direction:rtl;
    text-align:right;
    color:var(--c-ink);
    background:var(--c-parchment);
    border:1px solid var(--c-line);
    border-radius:16px;
    padding:32px 28px;
    max-width:880px;
    margin:0 auto;
    line-height:1.85;
  }
  #comments.comments-area *{box-sizing:border-box;}
  #comments.comments-area a{color:var(--c-maroon);text-decoration:none;}
  #comments.comments-area a:hover{text-decoration:underline;}
  #comments.comments-area :focus-visible{outline:2px solid var(--c-gold-bright);outline-offset:2px;}

  /* ---------- عنوان «N پاسخ» ---------- */
  #comments.comments-area .title-comments{
    font-family:'Vazirmatn',sans-serif;
    font-size:1.3rem;
    font-weight:800;
    color:var(--c-ink);
    margin:0 0 26px;
    padding-bottom:16px;
    border-bottom:2px solid var(--c-line);
    display:flex;
    align-items:center;
    gap:10px;
  }
  #comments.comments-area .title-comments::before{
    content:'\f086'; /* fa-comments */
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    color:var(--c-gold);
    font-size:1.1rem;
  }

  /* ---------- فهرست کامنت‌ها ---------- */
  #comments.comments-area ol.comment-list,
  #comments.comments-area ol.children{
    list-style:none;
    margin:0;
    padding:0;
  }
  #comments.comments-area ol.children{
    margin-top:14px;
    padding-right:28px;
    border-right:2px dashed var(--c-line);
  }
  #comments.comments-area li.comment,
  #comments.comments-area li.comment.even,
  #comments.comments-area li.comment.odd,
  #comments.comments-area li.comment.alt{
    list-style:none;
    margin:0 0 16px;
  }
  #comments.comments-area ol.children > li.comment{margin-bottom:14px;}
  #comments.comments-area ol.children > li.comment:last-child{margin-bottom:0;}

  /* ---------- بدنهٔ هر کامنت ---------- */
  #comments.comments-area .comment-body{
    background:#fff;
    border:1px solid var(--c-line);
    border-radius:12px;
    padding:18px 20px;
    transition:.2s;
  }
  #comments.comments-area ol.children .comment-body{
    background:var(--c-parchment-deep);
    border-color:var(--c-line);
  }
  #comments.comments-area .comment-body:hover{
    border-color:var(--c-gold-bright);
    box-shadow:0 6px 18px rgba(20,33,61,.07);
  }

  /* ---------- نوار بالای کامنت: نام + تاریخ ---------- */
  #comments.comments-area .comment-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px 16px;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px dashed var(--c-line);
  }
  #comments.comments-area .comment-author.vcard{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.96rem;
  }

  /* ---------- آواتار حروفی (دایرهٔ رنگی با حرف اول نام) ----------
     کلاس .ft-avatar توسط اسکریپت پایین صفحه قبل از نام نویسنده درج می‌شود؛
     اگر اسکریپت اجرا نشود، طرح‌بندی بدون آن هم درست و کامل کار می‌کند. */
  #comments.comments-area .ft-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--c-gold-bright), var(--c-maroon));
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-weight:700;
    font-size:.92rem;
    flex:none;
    line-height:1;
  }

  #comments.comments-area .comment-author .fn{
    font-style:normal;
    font-weight:700;
    color:var(--c-ink);
    font-size:.98rem;
  }
  #comments.comments-area .comment-author .fn a{color:var(--c-ink);}
  #comments.comments-area .comment-author .says{
    display:none; /* «گفت:» حذف بصری برای ظاهر تمیزتر؛ محتوای متنی همچنان برای screen reader باقی می‌ماند */
  }

  #comments.comments-area .comment-metadata{
    font-family:'JetBrains Mono',monospace;
    font-size:.76rem;
    color:var(--c-ink-soft);
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
  }
  #comments.comments-area .comment-metadata a{
    color:var(--c-ink-soft);
  }
  #comments.comments-area .comment-metadata time{
    direction:ltr;
    unicode-bidi:embed;
  }
  #comments.comments-area .comment-metadata .edit-link a{
    color:var(--c-gold);
    border:1px solid var(--c-line);
    border-radius:6px;
    padding:2px 8px;
    font-size:.72rem;
  }
  #comments.comments-area .comment-metadata .edit-link a:hover{
    background:var(--c-parchment-deep);
    text-decoration:none;
  }

  /* ---------- متن کامنت ---------- */
  #comments.comments-area .comment-content{
    color:var(--c-ink-soft);
    font-size:.96rem;
  }
  #comments.comments-area .comment-content p{
    margin:0 0 10px;
  }
  #comments.comments-area .comment-content p:last-child{margin-bottom:0;}
  #comments.comments-area .comment-content a{word-break:break-word;}

  /* ---------- دکمهٔ پاسخ ---------- */
  #comments.comments-area .reply{
    margin-top:12px;
    text-align:left;
  }
  #comments.comments-area .reply a.comment-reply-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Vazirmatn',sans-serif;
    font-size:.82rem;
    font-weight:600;
    color:var(--c-maroon);
    background:var(--c-parchment-deep);
    border:1px solid var(--c-line);
    border-radius:8px;
    padding:6px 14px;
    transition:.18s;
  }
  #comments.comments-area .reply a.comment-reply-link::before{
    content:'\f3e5'; /* fa-reply */
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:.78rem;
  }
  #comments.comments-area .reply a.comment-reply-link:hover{
    background:var(--c-maroon);
    color:#fff;
    text-decoration:none;
    border-color:var(--c-maroon);
  }

  /* ---------- فرم ارسال دیدگاه ---------- */
  #comments.comments-area #respond.comment-respond{
    margin-top:34px;
    padding-top:28px;
    border-top:2px solid var(--c-line);
  }
  #comments.comments-area .comment-reply-title{
    font-family:'Vazirmatn',sans-serif;
    font-size:1.15rem;
    font-weight:800;
    color:var(--c-ink);
    margin:0 0 18px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #comments.comments-area .comment-reply-title::before{
    content:'\f4ad'; /* fa-comment-dots */
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    color:var(--c-gold);
    font-size:1rem;
  }
  #comments.comments-area .comment-reply-title small{
    font-size:.78rem;
    font-weight:400;
  }
  #comments.comments-area .comment-reply-title small a{
    color:var(--c-maroon);
    background:var(--c-parchment-deep);
    border:1px solid var(--c-line);
    border-radius:6px;
    padding:3px 10px;
  }

  #comments.comments-area .logged-in-as{
    font-size:.86rem;
    color:var(--c-ink-soft);
    background:var(--c-parchment-deep);
    border:1px dashed var(--c-line);
    border-radius:10px;
    padding:10px 14px;
    margin:0 0 18px;
  }
  #comments.comments-area .required-field-message{
    display:block;
    margin-top:4px;
    font-size:.78rem;
  }
  #comments.comments-area .required{color:var(--c-maroon);}

  #comments.comments-area .comment-form-comment{margin:0 0 18px;}
  #comments.comments-area .comment-form-comment label,
  #comments.comments-area .comment-form-author label,
  #comments.comments-area .comment-form-email label,
  #comments.comments-area .comment-form-url label{
    display:block;
    font-size:.85rem;
    font-weight:600;
    color:var(--c-ink-soft);
    margin-bottom:6px;
  }
  #comments.comments-area textarea#comment,
  #comments.comments-area input#author,
  #comments.comments-area input#email,
  #comments.comments-area input#url{
    width:100%;
    font-family:'Vazirmatn',sans-serif;
    font-size:.95rem;
    color:var(--c-ink);
    background:var(--c-parchment);
    border:1px solid var(--c-line);
    border-radius:9px;
    padding:11px 14px;
    resize:vertical;
  }
  #comments.comments-area textarea#comment:focus,
  #comments.comments-area input#author:focus,
  #comments.comments-area input#email:focus,
  #comments.comments-area input#url:focus{
    outline:2px solid var(--c-gold-bright);
    outline-offset:1px;
    border-color:var(--c-gold-bright);
  }

  #comments.comments-area .comment-form-author,
  #comments.comments-area .comment-form-email,
  #comments.comments-area .comment-form-url{
    display:inline-block;
    width:100%;
    margin:0 0 16px;
  }
  /* اگر فیلدهای نام/ایمیل/سایت فعال باشند، کنار هم و ریسپانسیو بچینیم */
  #comments.comments-area .comment-form-author,
  #comments.comments-area .comment-form-email{
    max-width:100%;
  }
  @media (min-width:640px){
    #comments.comments-area .comment-form-author,
    #comments.comments-area .comment-form-email,
    #comments.comments-area .comment-form-url{
      display:inline-flex;
      flex-direction:column;
      width:calc(33.333% - 11px);
      vertical-align:top;
      margin-left:16px;
    }
    #comments.comments-area .comment-form-url{margin-left:0;}
  }

  #comments.comments-area .form-submit{margin:6px 0 0;}
  #comments.comments-area input#submit{
    font-family:'Vazirmatn',sans-serif;
    font-weight:700;
    font-size:.95rem;
    color:#1b1305;
    background:var(--c-gold-bright);
    border:1px solid transparent;
    border-radius:10px;
    padding:12px 30px;
    cursor:pointer;
    transition:.2s;
  }
  #comments.comments-area input#submit:hover{
    background:#dba94f;
    transform:translateY(-1px);
  }

  /* ---------- ریسپانسیو ---------- */
  @media (max-width:640px){
    #comments.comments-area{padding:22px 16px;border-radius:12px;}
    #comments.comments-area .comment-body{padding:14px 14px;}
    #comments.comments-area ol.children{padding-right:16px;}
    #comments.comments-area .comment-meta{flex-direction:column;align-items:flex-start;}
    #comments.comments-area .reply{text-align:right;}
  }

  @media (prefers-reduced-motion:reduce){
    #comments.comments-area *{transition:none!important;}
  }
</style>

<script>
(function(){
  // اسکریپت مستقل و کوچک: فقط حرف اول نام نویسنده هر کامنت را می‌خواند
  // و یک دایرهٔ رنگی (.ft-avatar) قبل از نام او قرار می‌دهد.
  // هیچ تغییری در ساختار اصلی کامنت‌های وردپرس ایجاد نمی‌کند و در صورت
  // اجرا نشدن (مثلاً غیرفعال بودن جاوااسکریپت)، طراحی همچنان درست می‌ماند.
  function initAvatars(){
    var authors = document.querySelectorAll('#comments.comments-area .comment-author.vcard');
    authors.forEach(function(authorEl){
      if(authorEl.querySelector('.ft-avatar')) return; // جلوگیری از تکرار
      var nameEl = authorEl.querySelector('.fn');
      if(!nameEl) return;
      var name = (nameEl.textContent || '').trim();
      var firstChar = name.charAt(0) || '?';
      var span = document.createElement('span');
      span.className = 'ft-avatar';
      span.setAttribute('aria-hidden', 'true');
      span.textContent = firstChar.toUpperCase();
      authorEl.insertBefore(span, authorEl.firstChild);
    });
  }
  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', initAvatars);
  } else {
    initAvatars();
  }
})();
</script>/* End custom CSS */