/* بخش «درخواست مشاوره» — کارتِ فرم، دکمهٔ فرستنده با حالت درحالِ ثبت، و ترکیبِ بصریِ برنامهٔ دنتیوال */

.consult-section {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border-subtle);
  /* پیوندهای #consultation از هدر و فوتر به اینجا می‌آیند؛ بی این فاصله تیتر زیر هدرِ چسبان می‌رفت */
  scroll-margin-top: calc(var(--header-height, 4.5rem) + var(--sp-4));
}

/* تیتر میانه: kicker + عنوان + یک خطِ راهنما، نه چند بند توضیح */
.consult-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--sp-8);
}

/* نشانِ کوچک بالای تیتر؛ هم‌شکل با `hero-kicker` تا زبان بصریِ صفحه یکی بماند */
.consult-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}

.consult-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--color-text-strong);
}

.consult-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* چیدمانِ موبایل تک‌ستونه؛ تصویر با `order` بالای فرم می‌رود و شبکه میانه‌چین می‌ماند تا فرم و تصویر یک ستونِ واحد داشته باشند */
.consult-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--sp-7);
}

.consult-aside {
  order: -1;
}

/* حداقل عرض صفر برای هر نیمه تا متن بلند و تصویر هرگز از ردیف بیرون نزنند */
.consult-card,
.consult-aside {
  min-width: 0;
}

/* کارت فرم عمودی می‌ماند تا راهِ جایگزینِ تماس هم‌سطح معقولی با کفِ تصویر داشته باشد */
.consult-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* هنگام تمرکز روی هر فیلد، کارت کمی برجسته می‌شود تا کاربر بداند کجا کار می‌کند */
.consult-card:focus-within {
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-md);
}

/* فرم دو فیلد دارد، پس شبکهٔ پیش‌فرضِ `lead-form` اینجا تک‌ستونی می‌شود */
.consult-card .lead-form-grid {
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

/* فرم ارتفاعِ کارت را می‌گیرد تا دکمهٔ فرستنده همیشه به کفِ ستون برسد */
.consult-card .lead-form {
  flex: 1 1 auto;
}

/* ارتفاعِ کنترل‌ها یکسان تا فرم فشرده و مرتب بماند؛ فاصلهٔ داخلیِ دکمه با `.btn` یکی است */
.consult-card .lead-form input,
.consult-card .consult-submit {
  min-height: 44px;
}

/* دکمهٔ فرستندهٔ فرم مشاوره؛ وضعیت‌های درحالِ ثبت و ثبت‌شد از توکن‌ها رنگ می‌گیرند */
.consult-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-4);
  font-weight: var(--fw-medium);
}

.consult-submit .consult-submit-label {
  display: inline-block;
}

/* حالتِ ارسال: متنِ دکمه عوض می‌شود و نشانِ چرخان کنارش می‌چرخد؛ منبعِ وضعیت همان فیلدهای فرم است */
.consult-submit.is-loading .consult-submit-label {
  color: transparent;
}

.consult-submit.is-loading .consult-submit-label::after {
  content: attr(data-loading);
  color: currentcolor;
}

@keyframes consult-spin {
  to { transform: rotate(360deg); }
}

.consult-submit.is-loading .consult-submit-icon::after {
  content: '';
  inline-size: 0.95em;
  block-size: 0.95em;
  border-radius: 50%;
  border: 0.14em solid currentcolor;
  border-top-color: transparent;
  animation: consult-spin 0.7s linear infinite;
}

.consult-submit.is-done {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-on-brand);
}

.consult-submit.is-done .consult-submit-label {
  color: transparent;
}

.consult-submit.is-done .consult-submit-label::after {
  content: attr(data-done);
  color: currentcolor;
}

/* راهِ جایگزین برای کسی که خودش تماس می‌گیرد؛ شماره تنها زمانی که تنظیم شده رندر می‌شود */
.consult-alt {
  margin: var(--sp-3) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.consult-alt a {
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* پیامِ وضعیتِ فرم باید بی‌رنگ هم خوانده شود: کنار رنگ، كادر و نشانهٔ متنی می‌نشیند */
.consult-card .lead-form-msg.is-success,
.consult-card .lead-form-msg.is-error {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid;
  border-radius: var(--radius-md);
  line-height: var(--lh-relaxed);
}

.consult-card .lead-form-msg.is-success {
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
}

.consult-card .lead-form-msg.is-error {
  background: var(--color-danger-surface);
  border-color: var(--color-danger-border);
}

/* نشانهٔ متنی با کد یونی‌کد نوشته می‌شود تا به رمزگذاری فایل وابسته نباشد */
.consult-card .lead-form-msg.is-success::before { content: '\2713\00A0'; }
.consult-card .lead-form-msg.is-error::before { content: '\2715\00A0'; }

/* ترکیبِ بصری در عرض کم هم‌عرضِ کارت می‌ماند تا جفتِ فرم و تصویر یک ستونِ واحد دیده شود */
.consult-aside {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

/* قابِ ترکیبِ بصری نیمهٔ دومِ ردیف را می‌گیرد و تصویر را میانهٔش می‌نشاند تا با کارتِ فرم هم‌سطح بماند */
.consult-visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--c-brand-100), var(--color-surface) 62%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* قوسِ برند در گوشهٔ قاب؛ لایهٔ پس‌زمینه می‌ماند تا گوشهٔ قاب خالی دیده نشود */
.consult-visual::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--sp-12));
  bottom: calc(-1 * var(--sp-16));
  inline-size: 12rem;
  block-size: 12rem;
  border-radius: 50%;
  background: var(--color-brand-subtle);
  pointer-events: none;
}

/* شناورِ بسیار ملایم برای زنده بودن؛ سرعت و دامنه کوتاه تا حواس کاربر را پرت نکند */
.consult-scene {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 100%;
  block-size: auto;
  animation: consult-float 7.5s var(--ease-in-out) infinite;
}

@keyframes consult-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* نقش‌های رنگیِ ترکیب؛ هر نقش یک توکن دارد تا رنگِ سخت‌کد جایگزین نکند و در تاریک‌مود هم‌حالت شود */
.cs-halo { fill: var(--color-brand-subtle); opacity: 0.6; }
.cs-card { fill: var(--color-surface-raised); stroke: var(--color-border); }
.cs-bar { fill: var(--color-brand-subtle); }
.cs-soft { fill: var(--color-brand-subtle); }
.cs-mute { fill: var(--color-surface-sunken); }
.cs-brand { fill: var(--color-brand); }
.cs-brand-3 { fill: var(--c-brand-300); }
.cs-line { stroke: var(--color-border); stroke-width: 1; }
.cs-brand-line { stroke: var(--color-brand); stroke-width: 1.5; }
.cs-grid-line { stroke: var(--color-border-subtle); fill: none; }
.cs-brand-stroke { stroke: var(--color-brand); fill: none; }
.cs-on-brand { fill: var(--color-text-on-brand); }
.cs-on-brand-stroke { stroke: var(--color-text-on-brand); fill: none; }

/* ── ردیف فرم و تصویر ─────────────────────────────────────────────────────── */
/* تبلت و دسکتاپ از ۹۹۲px به بالا یک ردیف واقعی دارند؛ هر نیمه `minmax(0, 1fr)` و سقفِ عرضِ کارت و قاب برداشته شده تا نیمهٔ واقعیِ ظرف را بگیرند و تصویر هرگز به ستونِ فرم نریزد */
@media (min-width: 992px) {
  .consult-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    max-width: 72rem;
    justify-content: normal;
  }

  .consult-card,
  .consult-aside {
    max-width: none;
  }

  .consult-aside {
    order: 0;
  }

  .consult-card {
    padding: var(--sp-7) var(--sp-6);
  }

  .consult-card .lead-form input,
  .consult-card .consult-submit {
    min-height: 42px;
  }
}

/* نمایشگرهای پهن: کارت پهن نمی‌شود و فاصلهٔ ستون کمی باز می‌شود */
@media (min-width: 1280px) {
  .consult-grid {
    gap: var(--sp-10);
  }

  .consult-card {
    padding: var(--sp-8) var(--sp-7);
  }
}

/* روی عرضِ کم فاصلهٔ داخلیِ کارت و قاب کم می‌شود تا کنترل‌ها پهن و بی‌بیرون‌زدن بمانند */
@media (max-width: 575px) {
  .consult-grid {
    gap: var(--sp-5);
  }

  .consult-card {
    padding-inline: var(--sp-4);
  }

  .consult-visual {
    padding-inline: var(--sp-3);
  }
}

/* با کاهش حرکت، شناور و گذارها خاموش می‌شوند و محتوا بی‌حرکت و کامل دیده می‌شود */
@media (prefers-reduced-motion: reduce) {
  .consult-card {
    transition: none;
  }

  .consult-scene {
    animation: none;
  }

  .consult-submit.is-loading .consult-submit-icon::after {
    animation: none;
  }
}