/* صفحه محاسبه حق‌الوکاله — فرم سمت راست، نتیجه و مسیر محاسبه سمت چپ. */
.af-shell {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  padding: 16px;
  align-items: start;
}
.af-form, .af-result { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.af-shell .panel { padding: 14px; }
.af-shell h3 { margin: 0 0 10px; color: #123c35; font-size: 15px; }
.af-shell .field { display: block; margin-bottom: 12px; }
.af-shell .field > span { display: block; font-size: 14px; margin-bottom: 5px; }
.af-shell select, .af-shell input[type="text"], .af-shell input:not([type]) {
  width: 100%; padding: 8px 10px; border: 1px solid #ccd5d2; border-radius: 7px;
  font-family: inherit; font-size: 14px; background: #fff;
}
.field-hint { display: block; color: #5a6b65; font-size: 12px; margin-top: 4px; line-height: 1.7; }
.switch-line { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 0; }
.switch-line input { width: auto; }
/* برچسب فقط برای صفحه‌خوان. legend داخل .segmented-control را calculator.css «width: 100%» می‌داد و چون absolute
   است در راست‌به‌چپ ۲۰۹ پیکسل از چپ صفحه بیرون می‌زد (body پهن‌تر از پنجره)؛ ویژگی بیشتر و margin منفی جلویش را می‌گیرد. */
.sr-only, .segmented-control legend.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* نسخه منسوخ باید در نگاه اول دیده شود، نه اینکه لای متن گم شود. */
.af-repealed {
  background: #fdf3e3; border: 1px solid #d6a44d; border-right: 4px solid #d6a44d;
  border-radius: 7px; padding: 9px 11px; font-size: 13px; color: #6b4d16; line-height: 1.8;
}

.af-amount { font-size: 13px; color: #5a6b65; }
.af-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #eef2f0;
}
.af-total:last-child { border-bottom: 0; }
.af-total strong { font-size: 16px; color: #123c35; direction: ltr; }
.af-total.grand { background: #123c35; color: #fff; border-radius: 7px; padding: 11px; margin-top: 8px; border: 0; }
.af-total.grand strong { color: #fff; font-size: 18px; }
/* راهنمای معادل تومان وقتی داخل ردیف جمع کل (زمینه‌ی تیره) قرار می‌گیرد: روی خط بعد جا می‌شود (flex-basis: 100%) و رنگش برای خوانایی روی زمینه‌ی تیره تغییر می‌کند. */
.af-total.grand { flex-wrap: wrap; }
.af-total.grand .money-hint { flex-basis: 100%; background: rgba(255,255,255,.14); color: #eafaf3; margin-top: 6px; }

.af-range { background: #f2f6f4; border: 1px solid #ccd5d2; border-radius: 7px; padding: 10px; font-size: 13px; line-height: 1.9; }
.af-check { padding: 7px 9px; border-radius: 6px; font-size: 13px; margin-bottom: 6px; line-height: 1.8; }
.af-check.pass { background: #eef6f2; border: 1px solid #b6d8c8; }
.af-check.fail { background: #fdecea; border: 1px solid #e0a9a4; color: #8f2018; }
.af-gap { background: #fdf3e3; border: 1px solid #d6a44d; border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; line-height: 1.8; }

.af-step { border-bottom: 1px solid #eef2f0; padding: 9px 0; font-size: 13px; }
.af-step:last-child { border-bottom: 0; }
.af-step b { color: #123c35; display: block; margin-bottom: 3px; }
.af-step code { direction: ltr; unicode-bidi: plaintext; display: block; background: #f2f6f4; padding: 5px 7px; border-radius: 5px; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.af-src { font-size: 12.5px; color: #5a6b65; line-height: 2; }
.af-src b { color: #123c35; }

@media (max-width: 980px) {
  .af-shell { grid-template-columns: 1fr; }
}

/* راهنمای زیر فیلد مبلغ: معادل تومان و همان مبلغ به حروف.
   هدف این است که کاربر بدون شمردن صفرها بفهمد چه عددی وارد کرده. */
.money-hint {
  display: block; margin-top: 5px; padding: 5px 9px; border-radius: 6px;
  background: #f2f6f4; color: #2f5d52; font-size: 12px; line-height: 1.75;
  overflow-wrap: anywhere;
}

/* شبکه‌ی فیلدها به‌طور پیش‌فرض از پایین هم‌تراز است (align-items: end) تا کادرها
   با هر تعداد خط برچسب در یک خط بمانند. ولی راهنمای زیر فیلد مبلغ، ارتفاع آن خانه
   را زیاد می‌کند و بقیه‌ی کادرهای همان ردیف را به پایین هل می‌دهد. در چنین شبکه‌ای
   هم‌ترازی از بالا می‌شود تا کادرها سرجایشان بمانند و راهنما زیرشان بیفتد. */
.ef-field-grid.has-money-hint { align-items: start; }
.ef-field-grid.has-money-hint .switch-line { align-self: start; margin-top: 26px; }

/* ——— دکمه‌های کوچک افزودن/حذف ردیف (فرم‌های پویا مثل سهم‌الارث) ———
   دکمه‌های استاندارد .button برای این کاربرد (افزودن یک ردیف، حذف یک کارت) بیش از حد
   بزرگ و پررنگ بودند و کل عرض را می‌گرفتند. اینجا دو نوع کوچک و مجزا تعریف می‌شود:
   افزودن = دکمه‌ی مثبت (سبز، برای دیده‌شدن) کنار عنوان بخش؛ حذف = دکمه‌ی خنثی و کوچک
   بالای هر کارت، تا با هاور رنگش قرمز شود و نیت مخرب بودنش را نشان دهد. */
.ef-subhead-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 18px;
}
.ef-subhead-row .ef-subhead { margin: 0; }

.button-add-row {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; min-height: 0; border-radius: 999px;
  background: #1E7A4C; color: #fff; border: 0;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  transition: background-color .15s ease, transform .1s ease;
}
.button-add-row::before { content: "+"; font-size: 15px; line-height: 1; font-weight: 900; }
.button-add-row:hover { background: #176B41; }
.button-add-row:active { transform: translateY(1px); }

.row-card { position: relative; }
.row-remove {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; min-height: 0; border-radius: 999px;
  background: transparent; color: #8a8f8c; border: 1px solid #dfe3e1;
  font-size: 11.5px; font-weight: 700;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.row-remove:hover { background: #fbeceb; color: #b3261e; border-color: #f0c9c6; }
/* راست‌چین است؛ محتوای کارت باید فضای دکمه‌ی گوشه‌ی بالا-چپ را نگیرد. */
.row-card > .ef-field-grid:first-of-type { padding-inline-end: 84px; }