/* =========================================================================
   فرم درخواست خرید — استایل حرفه‌ای بازطراحی‌شده  (نسخهٔ اصلاح‌شده)
   بر اساس تحلیل ساختار JSON فرم (Esprit Portal) و HTML رندر شده
   نکته: این فایل به‌همراه purchase-form.js باید بعد از استایل/اسکریپت‌های
   اصلی پرتال (espritstyle.css و اسکریپت‌های فرم) لود شود تا override شود.

   تغییرات نسبت به نسخهٔ قبلی:
   1) هیچ فیلدی حذف/مخفی نمی‌شود — رنگ متن فیلدهای readonly (مثل «نام»)
      برای خوانایی بهتر تیره‌تر شد و هر آیکن/دکمهٔ ویرایش تزریق‌شدهٔ پرتال
      (در صورت وجود) هم استایل گرفت تا از دید خارج نشود.
   2) استایل دراپ‌داون‌ها (هم select ساده و هم select2) با اولویت بالاتر
      (و !important روی موارد حیاتی) قطعی شد تا زیر استایل پیش‌فرض پرتال
      گم نشوند؛ در purchase-form.js هم به‌صورت inline روی selectهای ساده
      اعمال می‌شود تا مستقل از ترتیب لود فایل‌ها کار کند.
   3) زیرفرم «اطلاعات تجهیزات» بازطراحی شد: هر ردیف داخل یک کارت مجزا با
      فاصلهٔ مشخص قرار می‌گیرد و ارتفاع آکاردئون به‌صورت پویا (توسط JS،
      بر اساس scrollHeight) محاسبه می‌شود، نه یک max-height ثابت — همین
      باعث می‌شد با افزایش تعداد ردیف‌ها، ظاهر صفحه بهم بریزد.
   4) فاصله‌گذاری ستون‌ها (gutter) اصلاح شد تا فیلدها به هم نچسبند.
   ========================================================================= */

:root{
  --pf-bg-1:#dfe6fb;
  --pf-bg-2:#eef1fd;
  --pf-bg-3:#e3ecfb;

  --pf-card:#ffffff;
  --pf-card-border:#e7eaf6;

  --pf-section-bg:#f6f7fd;
  --pf-section-bg-hover:#eef0fb;

  --pf-text:#1f2433;
  --pf-text-soft:#6b7280;
  --pf-text-readonly:#3f4557;
  --pf-text-faint:#9aa1b3;

  --pf-border:#e3e6ef;
  --pf-border-focus:#6d6bf2;

  --pf-primary-1:#5b62f0;
  --pf-primary-2:#7a6bf5;
  --pf-primary-contrast:#ffffff;

  --pf-danger:#ef4444;

  --pf-radius-lg:22px;
  --pf-radius-md:14px;
  --pf-radius-sm:10px;

  --pf-shadow-card:0 20px 60px -20px rgba(63,70,140,.25), 0 2px 8px rgba(63,70,140,.06);
  --pf-shadow-focus:0 0 0 4px rgba(109,107,242,.14);

  --pf-font: "Vazirmatn", "IRANSans", "Shabnam", Tahoma, sans-serif;

  /* یک chevron مشترک برای select ساده و select2 */
  --pf-chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ---------- بستر صفحه ---------- */
body{
  font-family:var(--pf-font) !important;
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--pf-bg-1) 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, var(--pf-bg-3) 0%, transparent 55%),
    linear-gradient(180deg, var(--pf-bg-2), #f7f8fd 55%, #eef1fb) !important;
  min-height:100vh;
  color:var(--pf-text);
}

#es-content{
  padding:40px 16px 64px;
}

/* ---------- کارت اصلی فرم ---------- */
.esAdvForm{
  position:relative;
  max-width:900px;
  margin:0 auto;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  border:1px solid var(--pf-card-border);
  border-radius:var(--pf-radius-lg);
  box-shadow:var(--pf-shadow-card);
  padding:8px 8px 28px;
  overflow:visible;
}

/* هدر کارت (عنوان فرم + توضیح) — از روی Form_Name ساخته می‌شود */
.pf-form-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:26px 28px 20px;
}
.pf-form-header .pf-heading h1{
  font-size:22px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--pf-text);
}
.pf-form-header .pf-heading p{
  margin:0;
  font-size:13.5px;
  color:var(--pf-text-soft);
}
.pf-form-header .pf-heading-icon{
  width:46px;height:46px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pf-primary-1),var(--pf-primary-2));
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(91,98,240,.55);
  flex:0 0 auto;
}
.pf-form-header .pf-heading-icon svg{width:22px;height:22px;}

/* ---------- سکشن‌های آکاردئونی ---------- */
.pf-section{
  margin:14px 20px;
  border:1px solid var(--pf-card-border);
  border-radius:var(--pf-radius-md);
  overflow:hidden;
  background:#fff;
  transition:box-shadow .2s ease;
}
.pf-section + .pf-section{ margin-top:14px; }

.pf-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 20px;
  cursor:pointer;
  background:var(--pf-section-bg);
  -webkit-user-select:none;
  user-select:none;
}
.pf-section-header:hover{ background:var(--pf-section-bg-hover); }

.pf-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:15px;
  color:var(--pf-text);
}
.pf-section-title .pf-section-icon{
  width:28px;height:28px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  color:var(--pf-primary-1);
  border:1px solid var(--pf-card-border);
  flex:0 0 auto;
}
.pf-section-title .pf-section-icon svg{ width:15px;height:15px; }

.pf-section-chevron{
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--pf-text-soft);
  background:#fff;
  border:1px solid var(--pf-card-border);
  transition:transform .25s ease;
  flex:0 0 auto;
}
.pf-section-chevron svg{width:12px;height:12px;}
.pf-section.is-collapsed .pf-section-chevron{ transform:rotate(180deg); }

/* نکتهٔ اصلاح‌شده: به‌جای max-height ثابت (که با رشد زیرفرم بهم می‌ریخت)،
   ارتفاع واقعی توسط purchase-form.js و بر اساس scrollHeight تنظیم می‌شود.
   مقدار پیش‌فرض اینجا فقط برای زمانی است که جاوااسکریپت هنوز اجرا نشده. */
.pf-section-body-wrap{
  overflow:hidden;
  transition:max-height .3s ease, opacity .25s ease, padding .25s ease;
  opacity:1;
}
.pf-section.is-collapsed .pf-section-body-wrap{
  max-height:0 !important;
  opacity:0;
}

.pf-section-body{
  padding:18px 20px 6px;
  margin:0 !important;
}

/* ---------- ردیف / ستون‌های فرم (با gutter مشخص) ---------- */
.pf-section-body.es-row{
  display:flex;
  flex-wrap:wrap;
  margin:0 -10px;
  gap:0;
}
.pf-section-body .es-form-item-col{
  padding:0 10px 18px;
  box-sizing:border-box;
}

/* ---------- لیبل‌ها ---------- */
.es-form-label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--pf-text-soft);
  margin-bottom:7px;
  padding:0 2px;
}
.pf-required-star{
  color:var(--pf-danger);
  margin-left:3px;
  font-weight:700;
}

/* ---------- ورودی‌ها ---------- */
.form-control-row{ position:relative; }

.es-form-control{
  width:100%;
  box-sizing:border-box;
  font-family:var(--pf-font);
  font-size:13.5px;
  color:var(--pf-text);
  background:#fbfbfe;
  border:1.5px solid var(--pf-border);
  border-radius:var(--pf-radius-sm);
  padding:11px 14px;
  line-height:1.5;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.es-form-control::placeholder{ color:var(--pf-text-faint); }

.es-form-control:hover{ border-color:#c9cdea; }
.es-form-control:focus{
  outline:none;
  border-color:var(--pf-border-focus);
  box-shadow:var(--pf-shadow-focus);
  background:#fff;
}
.es-form-control[readonly]{
  background:#f3f4f9;
  color:var(--pf-text-readonly);
  cursor:default;
}
.es-form-control[readonly]:focus{ box-shadow:none; border-color:var(--pf-border); }

textarea.es-form-control{ min-height:78px; resize:vertical; }

/* دکمه/آیکن ویرایشِ فیلدهای readonly که پرتال ممکن است تزریق کند
   (initEditableField) — تا زیر ظاهر جدید فرم گم یا نامعلوم نشود */
.form-control-row .es-editable-btn,
.form-control-row [class*="editable"],
.form-control-row [class*="edit-field"]{
  position:absolute;
  top:50%;
  left:10px;
  transform:translateY(-50%);
  z-index:2;
  color:var(--pf-primary-1);
  cursor:pointer;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------- select ساده (غیر select2) ---------- */
/* استایل با اولویت بالا و !important تا زیر استایل پیش‌فرض پرتال گم نشود؛
   علاوه‌براین در purchase-form.js همین مقادیر به‌صورت inline هم اعمال
   می‌شوند تا مستقل از ترتیب لود فایل‌های CSS تضمین شده باشد. */
.esAdvForm select.es-form-control{
  -webkit-appearance:none !important;
  appearance:none !important;
  background-color:#fbfbfe !important;
  border:1.5px solid var(--pf-border) !important;
  border-radius:var(--pf-radius-sm) !important;
  padding:11px 38px 11px 14px !important;
  font-family:var(--pf-font) !important;
  font-size:13.5px !important;
  color:var(--pf-text) !important;
  line-height:1.5 !important;
  height:auto !important;
  cursor:pointer;
  background-repeat:no-repeat !important;
  background-position:left 12px center !important;
  background-image:var(--pf-chevron-svg) !important;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.esAdvForm select.es-form-control::-ms-expand{ display:none; }
.esAdvForm select.es-form-control:hover{ border-color:#c9cdea !important; }
.esAdvForm select.es-form-control:focus{
  outline:none !important;
  border-color:var(--pf-border-focus) !important;
  box-shadow:var(--pf-shadow-focus) !important;
  background-color:#fff !important;
}

/* ---------- select2 (فیلدهای مبتنی بر دیتابیس) ---------- */
.select2-container{ width:100% !important; }
.select2-container .select2-selection--single{
  height:auto !important;
  border:1.5px solid var(--pf-border) !important;
  border-radius:var(--pf-radius-sm) !important;
  background:#fbfbfe !important;
  padding:11px 38px 11px 14px !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.select2-container .select2-selection--single .select2-selection__rendered{
  padding:0 !important;
  font-family:var(--pf-font);
  font-size:13.5px;
  color:var(--pf-text);
  line-height:1.5;
}
.select2-container--open .select2-selection--single,
.select2-selection--single:focus{
  border-color:var(--pf-border-focus) !important;
  box-shadow:var(--pf-shadow-focus) !important;
}
/* پیکان پیش‌فرض select2 حذف و با chevron یکسان با selectهای ساده جایگزین شد */
.select2-selection__arrow{
  height:100% !important;
  width:32px !important;
  left:8px !important;
  right:auto !important;
  background-image:var(--pf-chevron-svg);
  background-repeat:no-repeat;
  background-position:center;
}
.select2-selection__arrow b{ display:none !important; }

/* پنل نتایج select2 */
.select2-dropdown{
  border:1.5px solid var(--pf-border-focus) !important;
  border-radius:var(--pf-radius-sm) !important;
  box-shadow:0 16px 34px -12px rgba(63,70,140,.28);
  overflow:hidden;
  font-family:var(--pf-font);
}
.select2-search--dropdown{ padding:8px; background:#fff; }
.select2-search--dropdown .select2-search__field{
  border:1.5px solid var(--pf-border) !important;
  border-radius:var(--pf-radius-sm) !important;
  padding:8px 10px !important;
  font-family:var(--pf-font);
  font-size:13px;
  outline:none;
}
.select2-search--dropdown .select2-search__field:focus{
  border-color:var(--pf-border-focus) !important;
}
.select2-results__option{
  padding:9px 14px;
  font-size:13.5px;
  color:var(--pf-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--pf-primary-1) !important;
  color:#fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]{
  background:var(--pf-section-bg);
  color:var(--pf-text);
}
.select2-results__message{
  color:var(--pf-text-faint);
  font-size:12.5px;
  padding:10px 14px;
}

/* آیکن‌های داخل اینپوت (تزریق‌شده توسط JS) */
.pf-input-icon{
  position:absolute;
  top:50%;
  left:14px;
  transform:translateY(-50%);
  width:17px;height:17px;
  color:var(--pf-text-faint);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  z-index:1;
}
.pf-input-icon svg{ width:100%; height:100%; }
.form-control-row.pf-has-icon .es-form-control{ padding-left:40px !important; }
.form-control-row.pf-has-icon select.es-form-control{ padding-left:40px !important; }
.form-control-row.pf-has-icon .select2-container .select2-selection--single{ padding-left:40px !important; }

/* ---------- تاریخ ---------- */
.es-form-control.datepicker{ cursor:pointer; }

/* ---------- زیرفرم (اطلاعات تجهیزات) ---------- */
.es-form-subform{
  border:1.5px dashed var(--pf-border);
  border-radius:var(--pf-radius-md);
  padding:16px;
  background:#fafbff;
}
.es-form-subform > .es-row:first-child{
  align-items:center;
  font-weight:700;
  font-size:13.5px;
  color:var(--pf-text);
}
.es-form-subform .btn-to-add-row{
  font-family:var(--pf-font);
  font-size:12.5px;
  font-weight:600;
  border:none;
  border-radius:var(--pf-radius-sm);
  padding:8px 16px;
  background:#eef0fd;
  color:var(--pf-primary-1);
  cursor:pointer;
  transition:background .15s ease;
}
.es-form-subform .btn-to-add-row:hover{ background:#e2e5fb; }

/* کانتینر ردیف‌های زیرفرم — با کلاسی که purchase-form.js اضافه می‌کند */
.pf-subform-rows{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}
.pf-subform-rows:empty{ margin-top:0; }

/* هر ردیفِ زیرفرم به‌صورت یک کارت جدا — دیگر با رشد تعداد، فرم بهم نمی‌ریزد
   چون خودِ ردیف‌ها ستونی و مجزا چیده می‌شوند و ارتفاع اکاردئون هم پویا است */
.pf-subform-row{
  position:relative;
  background:#fff;
  border:1px solid var(--pf-card-border);
  border-radius:var(--pf-radius-sm);
  padding:20px 14px 2px;
  box-shadow:0 4px 14px -8px rgba(63,70,140,.18);
}
.pf-subform-row::before{
  content:"قلم " attr(data-index);
  position:absolute;
  top:-11px;
  right:14px;
  background:linear-gradient(135deg,var(--pf-primary-1),var(--pf-primary-2));
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 12px;
  border-radius:20px;
  box-shadow:0 6px 14px -6px rgba(91,98,240,.55);
}
.pf-subform-row .es-row{
  display:flex;
  flex-wrap:wrap;
  margin:0 -8px;
}
.pf-subform-row .es-form-item-col{
  padding:0 8px 14px;
  box-sizing:border-box;
}

/* دکمه‌ی حذف ردیف زیرفرم — پوشش الگوهای رایج کلاس (remove/hazf/delete) */
.pf-subform-row .es-btn-danger,
.pf-subform-row [class*="remove"],
.pf-subform-row [class*="hazf"],
.pf-subform-row [class*="delete"]{
  border:none;
  background:#fef2f2;
  color:#dc2626;
  font-weight:600;
  font-size:12px;
  padding:6px 14px;
  border-radius:var(--pf-radius-sm);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.pf-subform-row .es-btn-danger:hover,
.pf-subform-row [class*="remove"]:hover,
.pf-subform-row [class*="hazf"]:hover,
.pf-subform-row [class*="delete"]:hover{
  background:#fee2e2;
}

/* ---------- کپچا ---------- */
.pf-footer .es-form-captcha-row{
  align-items:center;
}
.pf-footer .captcha-image{
  border-radius:var(--pf-radius-sm);
  border:1.5px solid var(--pf-border);
}
.pf-footer .es-input-group{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.pf-footer .es-input-group-append .refreshCaptcha{
  border:1.5px solid var(--pf-border);
  background:#fbfbfe;
  border-radius:var(--pf-radius-sm);
  width:42px;
  display:flex;align-items:center;justify-content:center;
  color:var(--pf-primary-1);
  cursor:pointer;
}
.pf-footer .es-form-captcha{
  flex:1;
}

/* ---------- فوتر (کپچا + دکمه‌ها) ---------- */
.pf-footer{
  margin:18px 20px 4px;
  padding-top:6px;
  border-top:1px dashed var(--pf-card-border);
}
.pf-footer-actions{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0 6px;
  flex-wrap:wrap;
}
.pf-footer-actions > .es-form-item-col{
  flex:0 1 auto !important;
  max-width:none !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
}
.pf-footer-actions > .es-form-item-col .es-row{ margin:0 !important; }

/* دکمه ثبت */
button.ersalform,
.pf-footer-actions button[type="submit"]{
  font-family:var(--pf-font);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:var(--pf-primary-contrast);
  background:linear-gradient(135deg,var(--pf-primary-1),var(--pf-primary-2));
  padding:13px 28px;
  border-radius:var(--pf-radius-sm);
  box-shadow:0 12px 24px -10px rgba(91,98,240,.55);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button.ersalform:hover{ filter:brightness(1.06); box-shadow:0 16px 30px -10px rgba(91,98,240,.6); }
button.ersalform:active{ transform:translateY(1px); }
button.ersalform i{ font-size:14px; }

/* دکمه انصراف */
.pf-cancel-btn{
  font-family:var(--pf-font);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1.5px solid var(--pf-border);
  background:#fff;
  color:var(--pf-text-soft);
  font-size:14px;
  font-weight:600;
  padding:13px 22px;
  border-radius:var(--pf-radius-sm);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  order:2;
}
.pf-cancel-btn:hover{
  background:#fef2f2;
  border-color:#fca5a5;
  color:#dc2626;
}
.pf-cancel-btn svg{ width:14px;height:14px; }
button.ersalform{ order:1; }

/* ---------- فیلدهای پویا (نمایش/عدم‌نمایش شرطی) ---------- */
.es-form-item-col[style*="display: none"],
.es-row.es-form-group[style*="display: none"]{
  display:none !important;
}

/* ---------- بلوکر ارسال ---------- */
#submitBlocker.es-form-blocker{
  display:none;
  position:fixed;inset:0;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(2px);
  z-index:9999;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width:640px){
  #es-content{ padding:20px 10px 40px; }
  .esAdvForm{ border-radius:18px; }
  .pf-form-header{ flex-direction:row; padding:20px 18px 14px; }
  .pf-section{ margin:12px 12px; }
  .pf-section-header{ padding:13px 16px; }
  .pf-section-body{ padding:14px 16px 2px; }
  .pf-footer{ margin:14px 14px 4px; }
  .pf-footer-actions{ flex-direction:column-reverse; align-items:stretch; }
  .pf-footer-actions button.ersalform,
  .pf-footer-actions .pf-cancel-btn{ width:100%; justify-content:center; }
  .pf-subform-row{ padding:18px 10px 2px; }
}

/* ---------- دسترس‌پذیری ---------- */
.es-form-control:focus-visible,
.pf-section-header:focus-visible,
.pf-cancel-btn:focus-visible,
button.ersalform:focus-visible{
  outline:2px solid var(--pf-border-focus);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .pf-section-body-wrap,
  .pf-section-chevron,
  button.ersalform,
  .pf-cancel-btn{ transition:none !important; }
}