/* ==========================================================================
   HERO AI — استایل ویجت‌های المنتور
   فقط چیزهایی که در CSS اصلی پروژه نبودند. رنگ‌ها همه از توکن‌ها می‌آیند.
   ========================================================================== */

.heroai-widget {
  width: 100%;
}

/* المنتور دور هر ویجت یک div می‌گذارد؛ نباید چیدمان بخش را بشکند. */
.elementor-widget-heroai_hero .elementor-widget-container,
.elementor-widget-heroai_gift_band .elementor-widget-container,
.elementor-widget-heroai_cta_band .elementor-widget-container,
.elementor-widget-heroai_promo_band .elementor-widget-container {
  width: 100%;
}

/* ————————————————— آکاردئون پرسش‌های متداول ————————————————— */
.heroai-faq {
  display: grid;
  gap: var(--s-3);
}
.heroai-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.heroai-faq-item:hover {
  border-color: var(--border-strong);
}
.heroai-faq-item.is-open {
  border-color: var(--blue-500);
  box-shadow: var(--sh-sm);
}
.heroai-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.heroai-faq-q .icon {
  margin-inline-start: auto;
  flex-shrink: 0;
  transition: transform var(--t);
  color: var(--text-3);
}
.heroai-faq-item.is-open .heroai-faq-q .icon {
  transform: rotate(180deg);
  color: var(--blue-500);
}
.heroai-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t);
}
.heroai-faq-item.is-open .heroai-faq-a {
  grid-template-rows: 1fr;
}
.heroai-faq-a > div {
  overflow: hidden;
}
.heroai-faq-a p {
  margin: 0;
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-2);
  line-height: 2;
}

/* ————————————————— خط زمانی ————————————————— */
.heroai-timeline {
  position: relative;
  display: grid;
  gap: var(--s-6);
  padding-inline-start: var(--s-6);
}
.heroai-timeline::before {
  content: '';
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 7px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-500), var(--blue-500), var(--violet-500));
  opacity: .35;
}
.heroai-timeline-item {
  position: relative;
}
.heroai-timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(-1 * var(--s-6) + 2px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  box-shadow: 0 0 0 4px var(--bg);
}
.heroai-timeline-item time {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.heroai-timeline-item .heroai-timeline-title,
.heroai-timeline-item h3 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
}
.heroai-timeline-item p {
  margin: 0;
  color: var(--text-2);
  line-height: 2;
}

/* ————————————————— نظرات کاربران ————————————————— */
.heroai-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}
.heroai-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
}
.heroai-testimonial blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  line-height: 2.1;
}
.heroai-testimonial figcaption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
}
.heroai-testimonial figcaption b {
  display: block;
  font-size: var(--fs-base);
}
.heroai-testimonial figcaption span {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* ————————————————— کارت‌های تماس ————————————————— */
.heroai-contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.heroai-contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  text-align: center;
  align-items: center;
}
.heroai-contact-card strong {
  font-size: var(--fs-md);
}
.heroai-contact-card a {
  color: var(--blue-500);
  text-decoration: none;
  direction: ltr;
}

/* ————————————————— تابلوی وضعیت ————————————————— */
.heroai-status-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.heroai-status-row:last-child {
  border-bottom: 0;
}
.heroai-status-row .grow {
  min-width: 0;
}
.heroai-status-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.heroai-status-dot.is-active { background: var(--success); }
.heroai-status-dot.is-degraded { background: var(--warning); }
.heroai-status-dot.is-down { background: var(--danger); }

/* ————————————————— حالت ادیتور ————————————————— */
.elementor-editor-active .heroai-widget a {
  pointer-events: none;
}

@media (max-width: 700px) {
  .heroai-timeline {
    padding-inline-start: var(--s-5);
  }
}

/* ————————————————— دکمه کپی کنسول کد ————————————————— */
.console { position: relative; }
.console-copy {
  position: absolute;
  inset-inline-start: 12px;
  top: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-invert);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.console:hover .console-copy,
.console-copy:focus-visible { opacity: 1; }
.console-copy:hover { background: rgba(255, 255, 255, .2); }

/* ————————————————— علامت نقل‌قول ————————————————— */
.heroai-quote-mark {
  display: block;
  font-size: 44px;
  line-height: 1;
  color: var(--blue-500);
  opacity: .28;
}

/* ————————————————— شبکه‌های جمع‌شونده ویجت‌ها ————————————————— */
.heroai-widget .collapsible-grid {
  position: relative;
  max-height: var(--clamp-h, 660px);
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.heroai-widget .collapsible-grid::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.heroai-widget .collapsible-grid.is-expanded {
  max-height: none;
}
.heroai-widget .collapsible-grid.is-expanded::after {
  display: none;
}

/* ————————————————— هم‌ترازی دکمه‌ی کارت ابزار —————————————————
   فوتر کارت style="margin-top:auto" دارد تا به ته کارت بچسبد، ولی
   .tool-card در pages.css روی display:block است و margin-top:auto آنجا به
   صفر حل می‌شود — یعنی آن auto هیچ‌وقت کار نمی‌کرده. کارت‌ها هم‌ارتفاع بودند
   (گرید کششان می‌داد) ولی محتوا از بالا می‌ریخت، پس هر توضیحِ یک‌خطی دکمه را
   بالاتر از توضیح دوخطیِ بغلش می‌نشاند.

   ستون فلکس همان auto را زنده می‌کند. عمداً به .heroai-widget محدود شده:
   همین کلاس را هاب /panel/tools/ افزونه‌ی hero-ai هم استفاده می‌کند و
   دست‌زدن به قاعده‌ی مشترک در pages.css یعنی تغییر UI آن افزونه از اینجا. */
.heroai-widget .tool-card {
  display: flex;
  flex-direction: column;
}

/* عنوان کارت هم به همان مقصد دکمه‌ی «اجرای ابزار» لینک است. رنگ و وزن از
   خودِ تیتر می‌آید؛ فقط زیر ماوس کمی به رنگ برند می‌رود تا کلیک‌شدنی‌بودنش
   پیدا باشد. تگ تیتر با کنترل ویجت عوض می‌شود، پس هدف خودِ کلاس لینک است نه
   یک تگ خاص. */
.heroai-widget .tool-card-title-link {
  color: inherit;
  text-decoration: none;
}
.heroai-widget .tool-card-title-link:hover {
  color: var(--blue-500);
}

/* ————————————————— سقف چند ردیف اول —————————————————
   خواهر collapsible-grid بالا، با یک تفاوت: آنجا ارتفاع پیکسلی می‌بُرد و
   ردیف آخر نصفه می‌ماند، اینجا JS ردیف‌ها را از offsetTop واقعی تشخیص می‌دهد
   و کارت‌های ردیف‌های بعد کلاً از جریان خارج می‌شوند، پس ردیف کامل می‌ماند.
   محوشدگی برای همین کوتاه‌تر است — چیزی بریده نشده که بخواهد پنهان شود، فقط
   لبه‌ی پایین نرم می‌شود تا معلوم باشد ادامه دارد. */
.heroai-widget .heroai-clamped-out {
  display: none;
}
.heroai-widget [data-heroai-rows] {
  position: relative;
}
.heroai-widget [data-heroai-rows].is-clamped::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  /*
   * کوتاه و ملایم، عمداً.
   *
   * نسخه‌ی اول ۷۲ پیکسل و ۸۰٪ بود و روی مرورگر واقعی دکمه‌های «اجرای ابزار»
   * ردیف آخر را می‌شست — رنگ‌پریده می‌شدند و شبیه باگ رندر بود نه یک افکت.
   * حالا فقط لبه‌ی پایینِ کارت‌ها را نرم می‌کند و به دکمه‌ها نمی‌رسد.
   *
   * color-mix استفاده شد تا رنگ از همان --bg بیاید؛ هارد‌کدکردن مقدارش یعنی
   * روز عوض‌شدن توکن، این یکی جا می‌ماند.
   */
  height: 48px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 60%, transparent));
  pointer-events: none;
}

/* ————————————————— ریل افقی روی موبایل —————————————————
   زیر ۶۴۰ پیکسل شبکه یک‌ستونه می‌شود و پانزده کارت یعنی پانزده ردیف. سقف دو
   ردیف هم آنجا معنای بدی پیدا می‌کرد: فقط دو کارت از پانزده‌تا. پس روی موبایل
   چیدمان از شبکه به یک ردیف افقی اسکرول‌شونده عوض می‌شود و همه‌ی کارت‌ها در
   دسترس می‌مانند.

   دو مشتری دارد و عمداً یکی نیستند:
   — شبکه‌ی ابزارها همیشه ریل می‌شود، چون همه‌جا پیش‌نمایش است.
   — شبکه‌ی مدل‌ها فقط وقتی data-heroai-rail می‌گیرد که ویجت در المنتور روشنش
     کرده باشد و جست‌وجویش خاموش باشد؛ فهرستی که در آن جست‌وجو می‌شود نباید
     پشت اسکرول افقی برود.

   سقف ردیفِ ابزارها لازم نیست در JS استثنا شود و نشده: وقتی همه‌ی کارت‌ها روی
   یک ردیف نشسته‌اند offsetTop همه یکی است، تابع فقط یک ردیف می‌بیند، چیزی
   نمی‌بُرد و دکمه‌ی «مشاهده بیشتر» خودش پنهان می‌ماند. */
@media (max-width: 640px) {
  [data-heroai-tools] > [data-grid],
  [data-heroai-rail] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* اسکرول افقی ته ریل، صفحه‌ی پشت سر را جابه‌جا نکند. */
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;

    /*
     * لبه‌تا‌لبه: حاشیه‌ی منفی ریل را به بیرون می‌کشد و padding هم‌اندازه، همان
     * گودی را از داخل برمی‌گرداند. نتیجه این است که کارت اول دقیقاً زیر تیتر
     * خودش می‌ماند ولی کارت‌های بعدی از لبه‌ی صفحه رد می‌شوند — همان چیزی که
     * ریل را از یک باکس اسکرول‌دار جدا می‌کند.
     *
     * ۲۴ پیکسلِ --s-5 عدد دلبخواه نیست: ظرف ویجت المنتور در wordpress.css
     * همین را به‌عنوان گودی کناری می‌گذارد، در هر عرضی (اندازه‌گیری‌شده).
     */
    margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
    /* تا کارتی که snap می‌شود هم به لبه‌ی صفحه نچسبد و همان گودی را داشته باشد. */
    scroll-padding-inline-start: var(--s-5);

    /* overflow افقی، عمودی را هم می‌بُرد؛ این دو خط سایه‌ی کارت را نجات می‌دهد
       بی‌آنکه ارتفاع بلوک عوض شود. */
    padding-block: 6px;
    margin-block: -6px;

    /* نوار اسکرول روی دسکتاپِ باریک هم پنهان بماند؛ خودِ نیم‌کارتِ بعدی
       نشانه‌ی کافی است که ادامه دارد. */
    scrollbar-width: none;
  }
  [data-heroai-tools] > [data-grid]::-webkit-scrollbar,
  [data-heroai-rail]::-webkit-scrollbar {
    display: none;
  }

  [data-heroai-tools] > [data-grid] > *,
  [data-heroai-rail] > * {
    /* کمی کمتر از عرض کامل، تا لبه‌ی کارت بعدی پیدا باشد. */
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* حالت خالی کارت نیست، یک پیام است؛ تمام عرض بگیرد و snap نشود. */
  [data-heroai-tools] > [data-grid] > .empty,
  [data-heroai-rail] > .empty {
    flex-basis: 100%;
    scroll-snap-align: none;
  }

  /* شبکه‌ی مدل‌ها هم‌زمان collapsible-grid است: سقف ارتفاع و محوشدگی‌اش روی
     ریل معنا ندارد و اگر بماند ردیف را از وسط می‌بُرد.

     overflow-x اینجا دوباره اعلام می‌شود و اضافی نیست: قاعده‌ی
     `.heroai-widget .collapsible-grid` از بالا `overflow: hidden` می‌گذارد و
     ویژگی‌اش از انتخابگر ریل بیشتر بود. نتیجه ریلی می‌شد که با انگشت و چرخ
     ماوس تکان نمی‌خورد — و چون scrollLeft روی جعبه‌ی hidden هم جواب می‌دهد،
     تستی که با اسکریپت اسکرول کند این را نمی‌گیرد. */
  [data-heroai-rail].collapsible-grid {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  [data-heroai-rail].collapsible-grid::after {
    content: none;
  }
  /* دکمه‌ی «مشاهده همه» هم با همان سقف می‌رود. */
  .heroai-rail-hide {
    display: none;
  }
}

/* ————————————————— فرم تماس ————————————————— */
.heroai-hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.heroai-contact-form {
  position: relative;
}
.heroai-contact-form .hint.is-error {
  color: var(--danger);
}
.heroai-contact-form button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* ————————————————— فقط برای صفحه‌خوان ————————————————— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ————————————————— پنهان‌سازی کارت‌های فیلترشده —————————————————
   ویژگی hidden کافی نیست: قاعده‌های .model-card{display:flex} و
   .tool-card{display:block} از نظر ویژگی CSS بر قاعده پیش‌فرض مرورگر
   برای [hidden] غلبه می‌کنند و کارت سر جایش می‌ماند. */
.heroai-filtered-out {
  display: none !important;
}

/* پیل‌ها شمارنده کوچک کنار متن دارند. */
.pill-tabs .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pill-tabs .pill .muted {
  opacity: .75;
}
.pill-tabs .pill.is-active .muted {
  color: inherit;
  opacity: .85;
}

/* حالت خالی داخل شبکه */
.grid > .empty {
  text-align: center;
  padding: var(--s-8) var(--s-5);
}
.grid > .empty h5 {
  margin: var(--s-3) 0 var(--s-2);
}
.grid > .empty p {
  color: var(--text-2);
  margin: 0;
}

/* ————————————————— چیدمان کارت‌های تماس ————————————————— */
.heroai-contact-grid.is-start .heroai-contact-card {
  text-align: start;
  align-items: flex-start;
}
.heroai-contact-grid.is-start .heroai-contact-card .metric-value {
  font-weight: 700;
}