/* ─────────────────────────────────────────────────────────────
   فرم‌ها — استعلام قیمت و تماس با ما
   ───────────────────────────────────────────────────────────── */

.form-layout,
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .form-layout, .contact-layout { grid-template-columns: 1fr; }
}

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.form-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.form-card__title svg { width: 20px; height: 20px; color: var(--orange-500); }
.form-card__sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: calc(var(--space-4) * -1); margin-bottom: var(--space-5); }
.form-card__note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin-top: var(--space-3); }

.form-section { border: none; margin-bottom: var(--space-6); }
.form-section legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  width: 100%;
  border-bottom: 1px dashed var(--border-strong);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-row .field { margin-bottom: 0; }

.field label,
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--navy-800); }
.field label em { color: var(--danger); font-style: normal; }

.field input,
.field textarea,
.field select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-400); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px var(--orange-100);
}
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] { border-color: var(--danger); }

.field textarea { resize: vertical; min-height: 100px; line-height: var(--lh-normal); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); text-align: left; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-inline-start: var(--space-8); cursor: pointer; }
.select-wrap__caret {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  color: var(--text-muted);
}

/* ── انتخاب بسته‌بندی ─────────────────────────────────────── */

.pack-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-3); }
.pack-option input { position: absolute; opacity: 0; pointer-events: none; }
.pack-option span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.pack-option span svg { width: 24px; height: 24px; color: var(--navy-700); }
.pack-option span em { font-style: normal; font-size: var(--fs-sm); }
.pack-option:hover span { border-color: var(--navy-800); }
.pack-option input:checked + span { border-color: var(--orange-500); background: var(--orange-100); }
.pack-option input:focus-visible + span { outline: 2px solid var(--orange-500); outline-offset: 2px; }

/* ── honeypot: پنهان از کاربر، قابل دیدن برای ربات ────────── */

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── هشدار / موفقیت ───────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.alert--success { background: var(--success-bg); border: 1px solid #b7e4c7; }
.alert__icon { width: 28px; height: 28px; color: var(--success); flex-shrink: 0; }
.alert h2 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.alert p { font-size: var(--fs-sm); color: var(--text-body); }
.tracking-code {
  display: inline-block;
  padding: 2px 10px;
  background: var(--white);
  border-radius: var(--radius-sm);
  color: var(--navy-800);
  font-weight: var(--fw-bold);
}

/* ── ستون کناری ───────────────────────────────────────────── */

.process-card {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: rgba(255,255,255,.78);
  margin-bottom: var(--space-4);
}
.process-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  font-size: var(--fs-md);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.process-card__title svg { width: 18px; height: 18px; color: var(--orange-500); }
.process-card__list li { display: flex; gap: var(--space-3); padding-bottom: var(--space-4); position: relative; }
.process-card__list li:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 30px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,.18);
}
.process-card__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--orange-500);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  z-index: 1;
  padding-block-start: var(--digit-optical-nudge);
}
.process-card__list strong { display: block; color: var(--white); font-size: var(--fs-sm); }
/* فقط توضیحِ داخل <div> — نه بَج شماره، وگرنه display:grid آن باطل می‌شود */
.process-card__list div span { display: block; font-size: var(--fs-xs); margin-top: 2px; line-height: 1.7; }

.contact-card,
.map-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.contact-card__title,
.map-card__title {
  font-size: var(--fs-md);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.contact-card li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.contact-card li + li { margin-top: var(--space-3); }
.contact-card svg { width: 17px; height: 17px; color: var(--orange-500); flex-shrink: 0; }

.map-card__label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.map-card__frame {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  aspect-ratio: 4/3;
  background: var(--gray-100);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  text-align: center;
  padding: var(--space-4);
}
.map-card__pin { width: 32px; height: 32px; color: var(--orange-500); }
.map-card__frame p { font-size: var(--fs-xs); color: var(--text-muted); }
.map-card__address { font-size: var(--fs-sm); line-height: var(--lh-normal); margin-bottom: var(--space-4); }

/* ── نوار تماس ────────────────────────────────────────────── */

/* تعداد ستون‌ها عمداً ثابت است (نوار همیشه ۴ آیتم دارد).
   با auto-fit، آیتمی که به سطر بعد می‌افتاد خط جداکننده‌اش را نگه
   می‌داشت و یک خط عمودیِ بی‌همسایه اول سطر می‌ماند. */
.contact-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.contact-bar__item { text-align: center; border-inline-start: 1px solid var(--border); padding-inline: var(--space-4); }
.contact-bar__item:nth-child(4n + 1) { border-inline-start: none; }
.contact-bar__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--navy-800);
  color: var(--white);
  padding: 11px;
  margin: 0 auto var(--space-3);
}
.contact-bar__item h2 { font-size: var(--fs-sm); margin-bottom: var(--space-2); position: relative; padding-bottom: var(--space-2); }
.contact-bar__item h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 28px;
  height: 2px;
  background: var(--orange-500);
}
.contact-bar__item span { display: block; font-size: var(--fs-sm); color: var(--text-body); direction: ltr; }

/* تبلت: دو ستون — جداکننده فقط بین دو ستون، و سطر دوم خط بالا می‌گیرد */
@media (max-width: 900px) {
  .contact-bar { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .contact-bar__item:nth-child(2n + 1) { border-inline-start: none; }
  .contact-bar__item:nth-child(n + 3) { border-top: 1px solid var(--border); padding-top: var(--space-5); }
}

/* موبایل: تک‌ستونی، بدون خط عمودی و بدون padding افقیِ هدررفته */
@media (max-width: 560px) {
  .contact-bar { grid-template-columns: 1fr; padding: var(--space-4); }
  .contact-bar__item {
    border-inline-start: none;
    border-top: none;
    padding-inline: 0;
    padding-top: 0;
  }
  .contact-bar__item + .contact-bar__item {
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
  }
}

/* ── موبایل: فرم‌های عمومی ────────────────────────────────────
   دو مشکل واقعی روی صفحه‌ی باریک:
   ۱) padding ۳۲px کارت روی عرض ۳۴۳px، فقط ۲۷۸px برای محتوا می‌گذاشت.
   ۲) فونت ۱۳px ورودی‌ها باعث می‌شود سافاری iOS هنگام فوکوس روی فیلد
      صفحه را زوم کند؛ زیر ۱۶px این رفتار قطعی است. */
@media (max-width: 560px) {
  .form-card { padding: var(--space-4); }
  .contact-card,
  .map-card { padding: var(--space-4); }
  .form-card__title { font-size: var(--fs-md); }

  .field input,
  .field textarea,
  .field select { font-size: var(--fs-md); }
}

/* ── ورودی فایل در فرم‌های عمومی ──────────────────────────── */

.file-input { position: relative; display: flex; align-items: center; }
.file-input input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.file-input__label {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--gray-50);
  transition: border-color var(--transition), color var(--transition);
}
.file-input:hover .file-input__label,
.file-input input:focus + .file-input__label {
  border-color: var(--orange-500);
  color: var(--navy-800);
}
.file-input.has-file .file-input__label { border-style: solid; color: var(--navy-800); background: var(--white); }