/*
 * هماهنگ کردن ظاهر wpDiscuz با قالب.
 *
 * بخش نظرات را افزونه‌ی wpDiscuz رندر می‌کند، نه comments.php قالب. روی
 * سایت ۳٬۵۱۶ نظر تأییدشده هست، پس غیرفعال کردن افزونه گزینه نیست؛ به‌جایش
 * ظاهرش با توکن‌های قالب هماهنگ می‌شود.
 *
 * اندازه‌گیری ۱۴۰۵/۰۷/۲۵ روی سایت اصلی، چیزی که باید عوض شود:
 *
 *   کادر فرم   پس‌زمینه‌ی کرم rgb(255,246,237)، بدون بردر، بدون گردی
 *   دکمه       سبز rgb(7,178,144)، فونت Arial Hebrew، گردی ۳px
 *   تکست‌اریا  بردر خاکستری #777، فونت Helvetica
 *   شمارنده    ۳۰px، خاکستری #555
 *
 * همه‌ی قانون‌ها زیر #wpdcom محدود شده‌اند، پس اگر روزی افزونه برداشته شود
 * این فایل هیچ اثری ندارد.
 *
 * اختصاصیت: بعضی سلکتورهای افزونه تا سه کلاس زیر یک شناسه دارند، مثل
 * `#wpdcom .wpd-field-comment .wpdiscuz-textarea-wrap textarea`. تکرار
 * شناسه (`#wpdcom#wpdcom`) اختصاصیت را به دو شناسه می‌برد و قطعاً برنده
 * می‌شود، بدون اینکه به !important نیاز باشد. اول با پیشوند `html` امتحان
 * شد و برای تکست‌اریا و شمارنده کافی نبود.
 */

/* ── ریشه ────────────────────────────────────────────────────
   `#wpdcom` فقط سه فرزند مستقیم دارد: پوشش شبکه‌های اجتماعی، کل
   گفت‌وگو (`.wpd-thread-wrapper`) و فرم. سربرگ و فهرست نظرها *داخل*
   گفت‌وگو هستند، نه فرزند مستقیم — پس `order` دادن به آن‌ها بی‌اثر است.

   در DOM فرم از اول بالاتر از گفت‌وگوست، که همان چیزی است که می‌خواهیم.
   دور قبل با `order` جابه‌جایشان کردم و نتیجه‌اش این شد که فرم زیر همه‌ی
   نظرها افتاد. اینجا به ترتیب طبیعی دست نمی‌زنیم. */

/* ── سربرگ و شمارنده ──────────────────────────────────────── */
#wpdcom#wpdcom .wpd-thread-head {
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--border);
}
#wpdcom#wpdcom .wpd-thread-info {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.7;
  color: var(--text);
  border: 0;
}
#wpdcom#wpdcom .wpd-thread-filter { border: 0 }

/* ── کادر فرم ─────────────────────────────────────────────── */
#wpdcom#wpdcom .wpd-form-wrap {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
#wpdcom#wpdcom .wpd-form-head { margin: 0 0 var(--sp-3) }

/* ── ورودی‌ها ─────────────────────────────────────────────── */
#wpdcom#wpdcom textarea,
#wpdcom#wpdcom input[type="text"],
#wpdcom#wpdcom input[type="email"],
#wpdcom#wpdcom input[type="url"] {
  padding: var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.9;
}
#wpdcom#wpdcom textarea { min-height: 96px }

/* ── ویرایشگر Quill ───────────────────────────────────────────
   کادری که کاربر واقعاً در آن می‌نویسد یک contenteditable است، نه
   textarea. روی سایت یک CSS سفارشی هم هست که به آن فونت `vanda` و متن
   نارنجی می‌دهد — همان کادری که در گزارش «زشت» توصیف شده بود. */
/*
 * `.wpdiscuz-textarea-wrap` خودش flex است و آواتار را کنار ویرایشگر
 * می‌گذارد. دور قبل بردر را به همین ظرف دادم، پس کادر دور آواتار هم
 * کشیده می‌شد و ساختار به‌هم‌ریخته به‌نظر می‌رسید. بردر باید فقط دور خودِ
 * ویرایشگر باشد.
 */
#wpdcom#wpdcom .wpdiscuz-textarea-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0;
  background: none;
  border: 0;
}
#wpdcom#wpdcom .wpd-avatar {
  flex: none;
  margin: 0;
  float: none;
}
#wpdcom#wpdcom .wpd-avatar img {
  width: 40px;
  height: 40px;
}
#wpdcom#wpdcom [id^="wpd-editor-wraper-"] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* خط نارنجی زیر ویرایشگر از CSS سفارشی خود سایت می‌آید و روی عنصر
   نشسته؛ بدون !important پس گرفته نمی‌شود. */
#wpdcom#wpdcom .ql-container,
#wpdcom#wpdcom .ql-container.ql-snow {
  border: 0 !important;
}
#wpdcom#wpdcom .ql-toolbar,
#wpdcom#wpdcom .ql-toolbar.ql-snow {
  border: 0;
  border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
}

/* ردیف دکمه با خود فرم هم‌تراز شود، نه چپ‌چین */
#wpdcom#wpdcom .wc-field-submit,
#wpdcom#wpdcom .wpd-form-col-full {
  padding-inline: 0;
  text-align: start;
}
#wpdcom#wpdcom .ql-container,
#wpdcom#wpdcom .ql-editor {
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text);
  border: 0;
}
#wpdcom#wpdcom .ql-editor {
  min-height: 90px;
  padding: var(--sp-3);
}
#wpdcom#wpdcom .ql-editor p {
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  text-align: start;
}
/* متن راهنمای کادر خالی. روی سایت با رنگ نارنجی #F67F00، فونت Vanda و
   opacity نیم تنظیم شده بود که با بقیه‌ی فرم نمی‌خواند. */
#wpdcom#wpdcom .ql-editor.ql-blank::before {
  right: var(--sp-3);
  left: auto;
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-style: normal;
  opacity: 1;
}
/* هنگام نوشتن، به‌جای حلقه‌ی نارنجی ضخیم فقط بردر کمی پررنگ می‌شود */
#wpdcom#wpdcom [id^="wpd-editor-wraper-"]:focus-within {
  outline: 0;
  border-color: var(--gray-4);
}
#wpdcom#wpdcom .ql-editor:focus,
#wpdcom#wpdcom .ql-editor:focus-visible { outline: 0 }

/* فاصله‌ی دکمه از کادر نوشتن */
#wpdcom#wpdcom .wpd-form-foot { margin-top: var(--sp-4) }
#wpdcom#wpdcom .wc-field-submit { padding-top: 0 }
#wpdcom#wpdcom textarea:focus-visible,
#wpdcom#wpdcom input[type="text"]:focus-visible,
#wpdcom#wpdcom input[type="email"]:focus-visible,
#wpdcom#wpdcom input[type="url"]:focus-visible {
  outline: 0;
  border-color: var(--gray-4);
}
#wpdcom#wpdcom ::placeholder { color: var(--text-faint) }

/* ── دکمه‌ی ثبت ───────────────────────────────────────────── */
/* `.wpd-prim-button` لازم است: دکمه‌ی «بارگذاری دیدگاه‌های بیشتر» یک
   <button> بدون صفت type است، پس [type=submit] نمی‌گیردش و سبز می‌ماند. */
#wpdcom#wpdcom .wpd-prim-button,
#wpdcom#wpdcom input[type="submit"],
#wpdcom#wpdcom button[type="submit"],
#wpdcom#wpdcom .wpd_comm_form .wc_comm_submit {
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand-orange);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: background .2s var(--ease);
}
#wpdcom#wpdcom .wpd-prim-button:hover,
#wpdcom#wpdcom input[type="submit"]:hover,
#wpdcom#wpdcom button[type="submit"]:hover,
#wpdcom#wpdcom .wpd_comm_form .wc_comm_submit:hover {
  background: var(--brand-orange-strong);
}

/* ── آواتار ───────────────────────────────────────────────── */
#wpdcom#wpdcom .wpd-avatar img {
  border: 0;
  border-radius: 50%;
}

/* ── فهرست نظرات ──────────────────────────────────────────── */
#wpdcom#wpdcom .wpd-comment-wrap {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
/*
 * اندازه‌ی نام، تاریخ و «پاسخ» را CSS سفارشی خود سایت با !important
 * تحمیل می‌کند (۲۲px و ۱۸px). دو شناسه هم جلویش را نمی‌گیرد، پس اینجا
 * ناچار !important استفاده شده — تنها جای این فایل.
 *
 * بهتر است آن قانون‌ها از تنظیمات wpDiscuz یا «CSS اضافی» سفارشی‌سازی
 * پاک شوند؛ تا وقتی هستند، دو جا با هم می‌جنگند.
 */
#wpdcom#wpdcom .wpd-comment-author,
#wpdcom#wpdcom .wpd-comment-author a {
  font-size: var(--fs-sm) !important;
  line-height: 1.8 !important;
  font-weight: 700;
  color: var(--text);
}
#wpdcom#wpdcom .wpd-comment-date,
#wpdcom#wpdcom .wpd-comment-link,
#wpdcom#wpdcom .wpd-comment-footer .wpd-vote-result,
#wpdcom#wpdcom .wpd-comment-footer .wpd-reply-button {
  font-size: var(--fs-xs) !important;
  line-height: 1.8 !important;
  color: var(--text-muted) !important;
}
#wpdcom#wpdcom .wpd-comment-footer .wpd-reply-button:hover {
  color: var(--brand-orange) !important;
}

/* ورودی‌های نام و ایمیل هم نارنجی و با بردر نارنجی تحمیل شده‌اند */
#wpdcom#wpdcom .wpdiscuz-item input {
  color: var(--text) !important;
  padding: var(--sp-3) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md) !important;
}
/* ── فیلدهای نام، ایمیل و سایت ────────────────────────────────
   سنجیده روی سایت زنده، ۱۴۰۵/۰۷/۲۷:
   - wpDiscuz فیلدها را در دو ستون شناور می‌چیند: «نام» و «سایت» زیر هم
     در یکی و «ایمیل» تنها در دیگری.
   - کل ردیف را با margin-right:70px ثابت زیر آواتار جا می‌دهد؛ آواتار و
     فاصله‌اش در این قالب ۵۲ پیکسل است، پس ردیف ۱۸ پیکسل با کادر نوشتن
     هم‌تراز نبود.
   - فاصله‌ی ۳۰ پیکسلی جای آیکن را قانون padding بالا (با !important)
     صفر کرده بود و آیکن روی متن راهنما می‌افتاد.
   - فیلدهای اجباری از `#wpdcom input:required` یک سایه‌ی خاکستری
     می‌گرفتند و از «سایت» تیره‌تر بودند.
   - CSS سفارشی سایت به ورودی‌ها فونت ۱۸px با !important می‌دهد؛ کادر
     نوشتن ۱۵px است.

   ستون‌های افزونه کنار گذاشته می‌شوند (display:contents) و فیلدها یک شبکه‌ی
   سه‌ستونه می‌شوند به ترتیب نام، ایمیل، سایت. هر فیلد دیگری که افزونه
   اضافه کند یک ردیف کامل می‌گیرد. زیر ۶۰۰ پیکسل که خود افزونه آواتار را
   پنهان می‌کند، یک ستون و بدون تورفتگی. */
#wpdcom#wpdcom .wpd-form-foot { margin-inline: calc(40px + var(--sp-3)) 0 }

#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row > .wpd-form-col-left,
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row > .wpd-form-col-right { display: contents }
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row > .clearfix { display: none }
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row .wpdiscuz-item {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  order: 4;
  grid-column: 1 / -1;
}
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row .wpdiscuz-item.wc_name-wrapper { order: 1; grid-column: auto }
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row .wpdiscuz-item.wc_email-wrapper { order: 2; grid-column: auto }
#wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row .wpdiscuz-item.wc_website-wrapper { order: 3; grid-column: auto }

#wpdcom#wpdcom .wpd-form-row .wpdiscuz-item input {
  width: 100%;
  font-size: var(--fs-sm) !important;
  padding-block: var(--sp-2) !important;
  box-shadow: none;
}
#wpdcom#wpdcom .wpd-form-row .wpd-has-icon input {
  padding-inline-start: calc(var(--sp-3) + 22px) !important;
}
#wpdcom#wpdcom .wpd-form-row .wpd-has-icon .wpd-field-icon {
  inset-inline-start: var(--sp-3);
  inset-inline-end: auto;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  line-height: 1;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  pointer-events: none;
}

/* دکمه‌ی ثبت اول ردیف، هم‌تراز با فیلدها. CSS سفارشی سایت آن را وسط می‌برد و
   خود افزونه margin-right:2% می‌دهد که لبه‌اش را از فیلدها جلوتر می‌گذاشت. */
#wpdcom#wpdcom .wc-field-submit { justify-content: flex-start }
#wpdcom#wpdcom .wc-field-submit .wc_comm_submit { margin: 0 }

@media (max-width: 600px) {
  #wpdcom#wpdcom .wpd-form-foot { margin-inline: 0 }
  #wpdcom#wpdcom .wpdiscuz-textarea-foot + .wpd-form-row { grid-template-columns: minmax(0, 1fr) }
  #wpdcom#wpdcom .wc-field-submit .wc_comm_submit { width: 100% }
}

/* ۲۲px بود. قانون قبلی فقط روی ظرف نشست و پاراگراف داخلش دست‌نخورده
   ماند — متن واقعی نظر همان پاراگراف است. */
#wpdcom#wpdcom .wpd-comment-text,
#wpdcom#wpdcom .wpd-comment-text p,
#wpdcom#wpdcom .wpd-comment-text li {
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--text);
}
#wpdcom#wpdcom .wpd-comment-text p { margin: 0 0 var(--sp-2) }
#wpdcom#wpdcom .wpd-comment-text p:last-child { margin-bottom: 0 }
#wpdcom#wpdcom .wpd-comment-text a { color: var(--brand-orange) }

/* ── دکمه‌های کوچک (پاسخ، رأی، اشتراک) ─────────────────────── */
#wpdcom#wpdcom .wpd-reply-button,
#wpdcom#wpdcom .wpd-vote-up,
#wpdcom#wpdcom .wpd-vote-down,
#wpdcom#wpdcom .wpd-tools-actions {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
#wpdcom#wpdcom .wpd-reply-button:hover { color: var(--brand-orange) }

/* رنگ لهجه‌ی افزونه که درون‌خطی چاپ می‌شود و سبز است */
#wpdcom#wpdcom .wpd-blog-administrator .wpd-comment-label,
#wpdcom#wpdcom .wpd-blog-editor .wpd-comment-label {
  background-color: var(--brand-orange);
  color: #fff;
}
#wpdcom#wpdcom .wpd-blog-administrator .wpd-comment-author,
#wpdcom#wpdcom .wpd-blog-administrator .wpd-comment-author a,
#wpdcom#wpdcom .wpd-blog-editor .wpd-comment-author,
#wpdcom#wpdcom .wpd-blog-editor .wpd-comment-author a {
  color: var(--text);
}

@media (max-width: 600px) {
  #wpdcom#wpdcom .wpd-form-wrap { padding: var(--sp-4) }
}