/***********************************************
*   ULTRA‑PRO COMMENT SYSTEM – By Mostafa Khani
************************************************/

/* 1) ساختار اصلی لیست کامنت‌ها */
.comment-list,
.comment-list ol.children {
    list-style: none;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 2) کارت کامنت (اصلی) */
.comment-list > li > article.comment-body {
    background: #287bff9e;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    position: relative;
    transition: 0.25s ease;
    z-index: 2!important;

}

/* 3) کارت کامنت (ریپلای‌ها) */
.comment-list .children article.comment-body {
    background: #287bff;
    padding: 18px;
    border-radius: 14px;
    position: relative;
    transition: 0.25s ease;
    z-index: 2important;
}

/* 4) افکت Hover کارت‌ها */
.comment-body:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    transform: translateY(-2px);
    z-index: 2important;
}

/************************************************
*   5) خطوط اتصال کامنت → ریپلای (بدون باگ)
************************************************/
:root{
  --comment-line:#002f8c;
}

/* حذف خطوط پیشفرض وردپرس */
.comment-list .children,
.comment-list li{
  border:none !important;
}

/* اتصال هر ریپلای */
.comment-list .children > li{
  position:relative;
}

.comment-list .children > li:before{
  content:"";
  position:absolute;
  top:-22px;
  right:28px;
  width:3px;
  height:22px;
  background:var(--comment-line);
  border-radius:3px;
}

/* کارت */
.comment-body{
  position:relative;
  z-index:2;
}

/* حذف خطوط پیشفرض وردپرس */
body .comment-list .children,
body .comment-list .children li,
body .comment-list li.comment,
body .comment-list ol.children{
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    border-color: transparent !important;
}


/************************************************
*   6) اطلاعات نویسنده کامنت + زمان + آواتار
************************************************/

.comment-meta {
    display: flex;
    justify-content: flex-start;
    margin-block-end: .9rem;
    background-color: white;
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
    gap: 12px;
    margin-bottom: 10px
}

.comment-meta .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.comment-author .fn {
    font-family: "ایران سنس";
    font-weight: 700;
    font-size: 14px;
}

.comment-metadata a,
.comment-metadata time {
    font-size: 11px;
    color: #287bff;
    font-family: "ایران یکان";
}

span.says { display: none; }

/************************************************
*   7) دکمه پاسخ به کامنت (Reply Button)
************************************************/

a.comment-reply-link {
    background: linear-gradient(45deg, #FFC33A, #FFD450);
    color: black!important;
    padding: 6px 16px;
    border-radius: 8px;
    font-family: "ایران یکان";
    font-size: 12px;
    display: inline-block;
    transition: 0.25s ease;
}

a.comment-reply-link:hover {
    transform: translateY(-2px);
}

/************************************************
*   8) استایل متن کامنت
************************************************/

.comment-content {
    font-weight: 600;
    font-family: "ایران یکان";
    font-size: 16px;
    line-height: 2;
    color: white;
}

/************************************************
*   9) فرم ارسال کامنت (Comment Form)
************************************************/

#respond {
    margin-top: 30px;
}

#reply-title {
    font-size: 20px;
    font-family: "ایران سنس";
    font-weight: 700;
    margin-bottom: 10px;
}

textarea#comment,
#respond input:not(#submit) {
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 12px;
    font-family: "ایران یکان";
    transition: border 0.25s ease, box-shadow 0.25s ease;
}

textarea#comment:focus,
#respond input:focus {
    border-color: #287bff !important;
    box-shadow: 0 0 0 3px rgba(40,123,255,0.15);
}

/* حذف موارد غیر ضروری */
p.comment-form-url,
p.comment-form-cookies-consent {
    display: none;
}

/************************************************
*   10) دکمه ارسال کامنت
************************************************/

#submit {
    border-radius: 10px;
    background: linear-gradient(45deg, #FFC33A, #FFD450);
    padding: 16px 26px;
    border: none !important;
    font-family: "ایران سنس";
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(255,197,65,0.35);
    transition: 0.3s ease;
}

#submit:hover {
    background: #287bff !important;
    color: white !important;
    transform: translateY(-2px);
}
/************************************************
*   11) فاصبه بین اسم کاربر و لغو پاسخ
************************************************/
#reply-title span,
#reply-title small {
    display: inline-block !important;
    margin-right: 8px !important;
    
}

#reply-title small a {
    color: #d80000 !important; 
    font-weight: bold;
}
/************************************************
*   12) فاصبه بین اسم کاربر و لغو پاسخ
************************************************/

span#email-notes {
    font-family: 'ایران یکان';
}

p.comment-notes {
    font-family: 'ایران یکان';
}

span.required {
    color: red;
}

label {
    font-family: 'ایران یکان';
}

span.title-comments {
    font-family: 'ایران سنس';
    font-weight: 600;
}
/*قرمز کردن رنگ لغو پاسخ*/
a#cancel-comment-reply-link {
    color: red;
}



em.comment-awaiting-moderation {
    font-style: normal;
    font-family: 'ایران سنس';
}
a.comment-reply-link {
    font-weight: 600;
}
.comment-list > li {
    margin-bottom: 10px;
}

.comment-list .children li {
    margin-top: 18px;
}

/* -------------------------------
   12) شاخه (تو رفتگی) پاسخ‌ها از سمت راست
---------------------------------- */
.comment-list .children {
    margin-right: 30px !important;
    padding-right: 20px !important;
    border-right: 2px solid #d7d7d7 !important;
}

/* -------------------------------
   13) کارت پاسخ‌ها از سمت راست کوچکتر شود
---------------------------------- */
.comment-list .children > li > .comment-body {
    width: 100% !important;     /* عرض کمتر */
    margin-right: 0 !important;
    margin-left: auto !important;  /* کارت را به راست می‌چسباند */
    direction: rtl;
}

/* -------------------------------
   14) سطح دوم پاسخ‌ها
---------------------------------- */
.comment-list .children .children > li > .comment-body {
    width: 100% !important;
    margin-left: auto !important;
}

p.logged-in-as {
    font-family: 'ایران یکان';
}

/* -------------------------------
   15) رسپانسیو سازی موبایل
---------------------------------- */
@media screen and (max-width: 768px){

   #comments .comment-meta {
      display: flex;
      justify-content: center;
      margin-block-end: .9rem;
      padding: 5px 10px 4px 10px;
      align-content: center;
      flex-wrap: nowrap;
      align-items: flex-end;
      flex-direction: row;
}


  /* سایز کارت کامنت‌ها */
  .comment-body{
    padding: 14px 16px !important;
    border-radius: 16px !important;
    width: 100% !important;
  }

  /* فاصله بین کامنت‌ها */
  .comment-list > li{
    margin-bottom: 20px !important;
  }

  /* ریپلای‌ها: کمی کمتر ایندنت شوند */
  .comment-list .children > li{
    width: 100% !important;
    margin-left: auto !important; /* برای RTL */
  }

  /* خط اتصال: کوتاه‌تر و نزدیک‌تر به کارت */
  .comment-list .children > li:before{
    right: 18px !important;   /* قبلا زیاد بود */
    height: 12px !important;  /* کوتاه‌تر */
    width: 2px !important;    /* باریک‌تر */
  }

  /* متن‌ها کوچکتر */
  .comment-author{
    font-size: 15px !important;
  }
  .comment-meta{
    font-size: 13px !important;
  }

  /* دکمه پاسخ */
  .reply a{
    padding: 5px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

}