/* assets/css/pages/calc.css */
/* Scope: calc.php page-only refinements (no globals) */

#result {
  scroll-margin-top: var(--space-4);
}

/* spacing helpers for this page only */
.calc-mt-12 { margin-top: 12px; }
.calc-mt-10 { margin-top: 10px; }

/* note under the card header */
.calc-note { margin-bottom: 12px; }

.calc-note-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.calc-note-row .calc-note{
  margin-bottom: 0;
}
.calc-help-toggle{
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  font-size: 14px;
  font-weight: 800;
}
.calc-help-panel{
  margin-top: 0;
}

/* Selected list spacing */
.calc-selected{
  gap: 10px;          
  margin-top: 12px;
  margin-bottom: 12px;
}

.calc-quick{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-quick-title{
  font-size: var(--fs-1);
}

.calc-quick-list{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  margin-inline: -2px;
}

.calc-quick-chip{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* subtle scrollbar cleanup */
.calc-quick-list::-webkit-scrollbar{
  height: 6px;
}
.calc-quick-list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
.calc-quick-list::-webkit-scrollbar-track{
  background: transparent;
}

.calc-empty{
  padding: 14px 10px 12px;
  text-align: center;
}

.calc-empty-illus{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(226,180,0,.28), rgba(226,180,0,.05) 60%),
    linear-gradient(135deg, rgba(17,17,17,.08), rgba(17,17,17,.02));
  border: 1px solid var(--border-soft);
  position: relative;
}

.calc-empty-illus::after{
  content:"";
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 1px dashed rgba(0,0,0,.08);
}

.calc-empty-title{
  font-weight: 800;
  font-size: 14px;
}

.calc-empty-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}
.calc-empty-hint{
  padding: 8px 6px;
  opacity: 0.75;
  font-size: var(--fs-1);
  line-height: 1.7;
  text-align: center;
   margin-top: 12px;
  margin-bottom: 14px;
  opacity: 0.65;
}
/* Yield block */
.calc-yield { padding: 10px; }
.calc-yield-title{
  font-size: 14px;
  text-align: center;      /* وسط‌چین */
  margin-bottom: 6px;      /* کمی جمع‌وجورتر */
}
.calc-yield .muted{
  text-align: center;
}

/* Make nested cards feel lighter */
.card .card {
  background: var(--surface-2);
  box-shadow: none;
  border: 1px solid var(--border-soft);
}

/* Slightly tighter topbar on calc page */
.topbar .row .btn {
  height: 40px;
  padding: 0 12px;
}

/* Inputs block feels organized */
#selectedList .card {
  border: 1px solid var(--border-soft);
  padding: 10px;                /* ✅ پدینگ کارت کمتر */
}

/* Search row layout (replaces inline styles) */
.calc-search-row {
  gap: 10px;
  align-items: flex-end;
}

.calc-search-col {
  flex: 1;
  min-width: 240px;
  position: relative;
}

.calc-suggest-wrap {
  position: relative;
}

.calc-suggest{
  position: absolute;
  inset-inline: 0;
  top: 8px;
  z-index: 80; /* ✅ بالاتر از کارت‌ها */
  padding: 10px;
  background: rgba(255,255,255,.985);            /* ✅ پنل مستقل */
  border: 1px solid rgba(0,0,0,.08);             /* ✅ مرز واضح‌تر */
  outline: 1px solid rgba(226,180,0,.18);        /* ✅ accent خیلی ظریف */
  border-radius: 16px;                           /* ✅ حس پنجره */
  box-shadow: 0 18px 45px rgba(0,0,0,.14);       /* ✅ شناوری واقعی */
  max-height: 60vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.calc-suggest-hint {
  margin-top: 8px;
  font-size: var(--fs-1);
  opacity: 0.9;
}

/* Suggest list buttons: make them consistent even if JS adds inline styles */
#mSuggestList .btn {
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: right;

  border-radius: 12px !important;
  border: 1px solid var(--border-soft) !important;
  background: rgba(17, 17, 17, 0.03) !important;

  padding: 10px 12px !important;

  /* reduce accidental tap while scrolling */
  touch-action: pan-y;
}

#mSuggestList .btn:hover {
  background: rgba(226, 180, 0, 0.10) !important;
}

/* highlight span produced by JS */
#mSuggestList span[style*="text-decoration:underline"] {
  text-decoration: none !important;
  box-shadow: inset 0 -2px 0 rgba(226, 180, 0, 0.35);
}

/* Form actions row */
.calc-actions{
  justify-content: flex-end;
  margin-top: 10px;          /* ✅ کمی جمع‌وجورتر */
}

/* دکمه اصلی محاسبه (فقط در همین صفحه) */
.calc-actions .btn--primary{
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* حس pressed */
.calc-actions .btn--primary:active{
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(0,0,0,.12);
}

/* Mobile: تمام‌عرض و هماهنگ با طراحی */
@media (max-width: 640px){
  .calc-actions{
    margin-top: 10px;
  }
  .calc-actions .btn--primary{
    width: 100%;
  }
}

/* ============================= */
/* Calc – Result Mode (Step 1)   */
/* ============================= */
/* این تغییر بین این دو خط اعمال شده */

/* وقتی نتیجه وجود دارد، ورودی‌ها جمع شوند */
body:has(#result .calc-res-item) #selectedList{
  max-height: 72px;          /* فقط یک نمای خلاصه */
  overflow: hidden;
  position: relative;

  padding-top: 4px;
  padding-bottom: 4px;

  border-radius: 14px;
  transition:
    max-height .35s ease,
    opacity .25s ease;
}

/* افکت محو شدن پایین برای حس collapse */
body:has(#result .calc-res-item) #selectedList::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 32px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--surface-1)
  );
  pointer-events: none;
}

/* پایان تغییر */
/* ============================= */
/* Calc – Result Mode Toggle (Step 2) */
/* ============================= */
/* این تغییر بین این دو خط اعمال شده */

/* وقتی لیست جمع شده، حس tappable بده */
body:has(#result .calc-res-item) #selectedList{
  cursor: pointer;
}

/* hint راهنما */
body:has(#result .calc-res-item) #selectedList::before{
  content: "↕︎ برای ویرایش مواد ضربه بزن";
  display: block;
  text-align: center;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
  pointer-events: none;
}

/* وقتی باز شد، hint حذف شود */
body:has(#result .calc-res-item) #selectedList.is-open::before{
  content: none;
}

/* وقتی باز شد، محدودیت ارتفاع برداشته شود */
body:has(#result .calc-res-item) #selectedList{
  max-height .55s cubic-bezier(.18,.68,.32,1), /* حرکت اصلی */
    opacity .35s ease,
    transform: translateY(-2px) scale(.985);

  transform-origin: top center;
}

body:has(#result .calc-res-item) #selectedList.is-open{
  max-height: 1400px;          /* کمی بزرگ‌تر برای لیست‌های بلند */
  overflow: visible;
  cursor: default;

  opacity: 1;
  transform: translateY(0) scale(1);
}
body:has(#result .calc-res-item) #selectedList:not(.is-open){
  opacity: .92;
}
/* پایان تغییر */

/* Result list spacing */
.calc-result-list { margin-top: 12px; }

.calc-summary-card{
  margin-top: 12px;
}

.calc-summary-main{
  text-align: center;
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-soft);
}

.calc-summary-label{
  font-size: 12px;
  opacity: .75;
}

.calc-summary-value{
  font-size: 22px;
  font-weight: 800;
}

.calc-summary-sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.calc-summary-sub-label{
  font-size: 12px;
  opacity: .8;
}

.calc-summary-sub-value{
  font-weight: 700;
  white-space: nowrap;
}

.calc-summary-sub--muted{
  opacity: .8;
}

.calc-copy-btn{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.calc-summary-main .calc-copy-btn{
  justify-self: center;
}

/* Mobile */
@media (max-width: 640px) {
  .topbar .row { width: 100%; }
  .topbar .row .btn { flex: 1; }

  .calc-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .calc-actions .btn {
    width: 100%;
  }
}
@media (max-width: 640px){
  .calc-note-row{
    align-items: center;
    flex-direction: row;
  }
  .calc-help-toggle{
    width: 28px;
    min-width: 28px;
  }
}
/* --- Calc: compact qty row in selected material cards --- */
/* این تغییر بین این دو خط اعمال شده: کاهش ارتفاع input/select در کارت مواد */
.calc-qty-row{
  margin-top: 8px;
  align-items: center;
  gap: 8px;
}

/* فقط داخل کارت‌های انتخاب‌شده: ارتفاع اینپوت‌ها کوتاه‌تر */
#selectedList .calc-qty-row .input{
  height: 36px;          /* قبلاً عملاً نزدیک 40+ بود */
  padding-block: 0;      /* ارتفاع اضافی از padding عمودی */
  line-height: 36px;     /* متن دقیقاً وسط */
  font-size: var(--fs-1);
}

/* input مقدار مصرف */
.calc-qty-input{
  width: 110px;
  text-align: center;
  padding-inline: 10px;
}

/* select واحد */
.calc-qty-unit .input{
  min-width: 110px;
}

.calc-qty-shortcuts{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.calc-qty-chip{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(17,17,17,.04);
}

/* Mobile: even tighter */
@media (max-width: 640px){
  .calc-qty-input{ width: 92px; }
  .calc-qty-unit .input{ min-width: 92px; }

  #selectedList .calc-qty-row .input{
    height: 34px;
    line-height: 34px;
  }
}
/* این تغییر بین این دو خط اعمال شده: اکشن‌های کارت آخر (حذف + ماده بعدی) */
/* این تغییر بین این دو خط اعمال شده: اکشن‌ها تک‌دکمه‌ای تا وقتی next واقعاً visible شود */
.calc-remove-row{
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* پیش‌فرض: فقط حذف ماده (تمام‌عرض و وسط) */
.calc-remove-row .calc-remove-btn{
  width: 100%;
  max-width: 220px;
}

/* استایل مشترک دکمه‌های این ردیف */
.calc-remove-row .btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: var(--fs-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.calc-remove-row .calc-remove-btn{
  color: var(--danger);
  border-color: rgba(214,69,69,.35);
  background: rgba(214,69,69,.06);
}

/* فقط وقتی دکمه next visible شد، ردیف دو ستونه شود */
@supports selector(:has(*)){
  /* نرم شدن تغییر چیدمان */
  .calc-remove-row{
    transition: gap .22s ease;
  }

  .calc-remove-row .calc-remove-btn,
  .calc-remove-row .calc-next-btn{
    transition:
      max-width .42s ease,
      width .42s ease,
      flex-basis .42s ease,
      transform .18s ease,
      opacity .18s ease;
    will-change: max-width, flex-basis, opacity, transform;
  }

  .calc-remove-row:has(.calc-next-btn.is-visible){
    gap: 10px;
  }

  .calc-remove-row:has(.calc-next-btn.is-visible) .calc-remove-btn,
  .calc-remove-row:has(.calc-next-btn.is-visible) .calc-next-btn{
    flex: 1 1 0;
    max-width: 180px;
    width: auto;
  }
}

/* پایان تغییر */


/* این تغییر بین این دو خط اعمال شده: next-btn خارج از layout تا زمان نمایش + انیمیشن همزمان */
.calc-next-btn{
  /* از نظر بصری */
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  pointer-events: none;

  /* از نظر layout: تا وقتی مخفی است جا نگیرد */
  max-width: 0;
  width: 0;
  padding-inline: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  overflow: hidden;

  transition:
    opacity .18s ease,
    transform .18s ease,
    max-width .22s ease,
    width .22s ease,
    padding .22s ease;
}

.calc-next-btn.is-visible{
  /* ظاهر */
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;

  /* جا گرفتن در layout */
  width: auto;
  max-width: 180px;          /* هماهنگ با max-width دکمه‌ها */
  padding-inline: 12px !important;
  margin: 0 !important;
  border-width: 1px !important;
}
/* پایان تغییر */


/* سازگاری با نسخه فعلی JS (تا گام ۱۱) */
.calc-next-btn[style*="display: inline-flex"]{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* پایان تغییر */

@media (max-width: 360px){
  .calc-remove-row{
    gap: 8px;
  }
  .calc-card-actions .btn{
    padding: 0 10px;
    height: 34px;
    border-radius: 12px;
  }
}

/* --- Yield compact rows --- */
.calc-yield-row,
.calc-yield-waste{
  margin-top: 8px;   /* ✅ کمتر */
  align-items: center;
  gap: 8px;          /* ✅ کمتر */
}

.calc-yield-label{
  white-space: nowrap;
  opacity: .85;
}

.calc-yield-input{
  width: 120px;
  text-align: center;
  padding-inline: 10px;
}

.calc-yield-unit .input{
  min-width: 110px;
}

.calc-yield-waste-input{
  width: 90px;
  text-align: center;
}
/* این تغییر بین این دو خط اعمال شده: هماهنگ‌سازی ارتفاع input/select در کارت خروجی */
.calc-yield .input{
  height: 36px;
  padding-block: 0;
  line-height: 36px;
  font-size: var(--fs-1);
}

@media (max-width: 640px){
  .calc-yield .input{
    height: 34px;
    line-height: 34px;
  }
}
.calc-yield-suffix{
  white-space: nowrap;
  opacity: .75;
}

@media (max-width: 640px){
  .calc-yield-input{ width: 104px; }
  .calc-yield-unit .input{ min-width: 96px; }
  .calc-yield-waste-input{ width: 84px; }
}
/* --- Result cards: compact & aligned (title|price then qty|pct) --- */

/* top row: title (right) | price pill (left) */
#result .calc-res-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#result .calc-res-top .h2{
  flex: 1;
  min-width: 0;
}

#result .calc-res-top .pill{
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-inline: 12px;
  margin-inline-start: auto; /* بچسب به چپ */
  min-width: 92px;          /* ستون قیمت ثابت‌تر برای هم‌ترازی */
}

/* meta row: qty under title (right) | pct under price (left) */
#result .calc-res-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

#result .calc-res-meta > :first-child{
  text-align: right;
  white-space: nowrap;
}

#result .calc-res-pct{
  min-width: 92px;          /* دقیقاً هم‌عرض با pill */
  display: inline-flex;
  justify-content: center;  /* وسط ستون قیمت */
  text-align: left;
  white-space: nowrap;
}

.calc-res-bar{
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}

.calc-res-bar::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--pct, 0) * 1%);
  background: linear-gradient(90deg, rgba(226,180,0,.65), rgba(226,180,0,.25));
}
/* --- Result item cards: polish & compact --- */
/* این تغییر بین این دو خط اعمال شده: پولیش کارت‌های نتیجه */
#result .calc-res-item{
  padding: 10px;
}

#result .calc-res-top{
  gap: 10px;
}

#result .calc-res-top .h2{
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

#result .calc-res-top .pill{
  height: 30px;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 12px;
}

#result .calc-res-meta{
  margin-top: 8px;
  gap: 10px;
}

#result .calc-res-meta .muted{
  font-size: 12px;
  line-height: 1.25;
}

#result .calc-res-pct{
  opacity: .9;
}
/* این تغییر بین این دو خط اعمال شده */

/* ✅ کارت ماده: هدر دو ردیفه (عنوان بالا، متا زیر عنوان) */
.calc-mat-head{
   display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;                     /* ✅ کمتر */
  margin-bottom: 6px;           /* ✅ کمتر */
}

.calc-mat-title-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-mat-title{
  margin:0;
  font-size:14px;
  line-height:1.2;

  /* عنوان مستقل و وسط‌چین */
  text-align: center;
  flex: 1 1 auto;

  /* اگر طولانی بود، با احترام کوتاه شود */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.calc-remove-mini{
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--danger);
  border-color: rgba(214,69,69,.35);
  background: rgba(214,69,69,.08);
}

.calc-remove-mini:active{
  transform: scale(0.96);
}

/* ردیف متا: فضای کامل، بدون خفه‌کردن */
.calc-mat-meta{
  display:flex;
  align-items:center;
  justify-content: center; /* وسط‌چین کلی برای ردیف دوم */
  gap:6px;

  font-size:12px;

  width: 100%;
  max-width: none;
  flex: none;

  /* اجازه بده متن اگر لازم شد wrap بشه (فشرده نشه) */
  white-space: normal;
  overflow: visible;
}

/* متن‌های متا */
.calc-mat-metaLabel{ opacity:.9; }

.calc-mat-price{
  color:var(--color-text-primary);
  font-weight:600;

  /* توی ردیف دوم دیگه ellipsis لازم نداریم */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* جداکننده تاریخ */
.calc-mat-dot{ display:none; }

.calc-mat-date{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-size: 11px;
  opacity: .9;
}

.calc-mat-date::before,
.calc-mat-meta .js-jdate::before{
  content: none;
}

.calc-mat-metaLabel,
.calc-mat-dot,
.calc-mat-date{
  flex: 0 0 auto;
}
.calc-mat-meta .js-jdate{ flex: 0 0 auto; }

.calc-mat-no-price{
  color: var(--danger);
  font-weight: 700;
}

.calc-price-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,180,0,.45);
  background: rgba(226,180,0,.12);
  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
}

/* --- Price Modal --- */
.calc-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  --calc-kb-offset: 0px;
  --calc-vv-h: 100vh;
}

.calc-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.calc-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .2s ease;
}

.calc-modal__panel{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom) + var(--calc-kb-offset));
  background: var(--surface-1);
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  padding: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(12px);
  transition: transform .25s ease, opacity .25s ease;
  max-height: min(calc(var(--calc-vv-h) - 20px), 560px);
  overflow-y: auto;
}

.calc-modal.is-open .calc-modal__backdrop{
  opacity: 1;
}

.calc-modal.is-open .calc-modal__panel{
  opacity: 1;
  transform: translateY(0);
}

.calc-modal__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.calc-modal__close{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
}

.calc-modal__form{
  margin-top: 12px;
  display: grid;
  gap: 12px;
  position: relative;
}

.calc-modal__row{
  gap: 10px;
  align-items: flex-end;
}

.calc-modal__col{
  flex: 1 1 0;
  min-width: 0;
}

.calc-modal__date{
  gap: 8px;
  justify-content: center;
}

.calc-modal__date .input{
  width: 90px;
}

.calc-modal__actions{
  justify-content: flex-end;
  gap: 10px;
}

.calc-modal__msg{
  background: rgba(255,240,240,.88);
  border: 1px solid rgba(214,69,69,.35);
  color: var(--danger);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(-6px) scaleY(.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
  margin: 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.calc-modal__msg.is-show{
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.calc-modal__msg--float{
  position: absolute;
  inset-inline: 0;
  bottom: 54px;
}

.calc-modal__msg--field{
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 3;
}

.calc-field-wrap{
  position: relative;
  z-index: 2;
}

.calc-modal__msg--warn{
  background: rgba(255,248,224,.90);
  border-color: rgba(226,180,0,.45);
  color: #8a5a00;
}

.calc-modal__msg--ok{
  background: rgba(235,255,244,.88);
  border-color: rgba(47,158,68,.32);
  color: #1f7a4a;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .calc-modal__msg{
    background: rgba(255,240,240,.98);
  }
  .calc-modal__msg--warn{
    background: rgba(255,248,224,.98);
  }
  .calc-modal__msg--ok{
    background: rgba(235,255,244,.98);
  }
}

.calc-save-card{
  margin-top: 12px;
  padding: 10px;
}

.calc-save-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  white-space: nowrap;
}

.calc-save-btn.is-disabled{
  opacity: .7;
}

.calc-save-meta{
  display: grid;
  gap: 8px;
}

.calc-save-meta__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.calc-save-actions{
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.calc-save-actions .btn{
  width: 100%;
}

#productTitle.is-error{
  border-color: rgba(214,69,69,.55);
  box-shadow: 0 0 0 2px rgba(214,69,69,.12);
}

@media (min-width: 900px){
  .calc-modal__panel{
    left: 50%;
    right: auto;
    width: min(560px, calc(100% - 32px));
    transform: translateX(-50%);
    bottom: calc(20px + var(--calc-kb-offset));
  }
}

/* <!-- این تغییر بین این دو خط اعمال شده: وسط‌چین کردن کنترل‌های فروش سریع --> */
.calc-sell-row{
  margin-top: 12px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calc-sell-row .btn{
  min-width: 44px;
}

.calc-sell-input{
  width: 92px;
  text-align: center;
}

.calc-sell-range{
  width: 100%;
  flex: 1 1 100%;
}

.calc-sell-row .calc-range{
  flex: 1 1 100%;
  margin-top: 6px;
}

.calc-sell-step{
  white-space: nowrap;
  opacity: .85;
}
/* --- Result summary (KPI) --- */
/* این تغییر بین این دو خط اعمال شده: KPI summary block */
#result .spread.calc-mt-12,
#result .spread.calc-mt-10{
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 10px;
}

/* فاصله دو KPI پشت سر هم کمتر شود */
#result .spread.calc-mt-10{
  margin-top: 8px !important;
}

/* متن سمت راست */
#result .spread.calc-mt-12 .muted,
#result .spread.calc-mt-10 .muted{
  font-size: 12px;
  line-height: 1.25;
}

/* pill KPI یکدست و هم‌قد */
#result .spread.calc-mt-12 .pill,
#result .spread.calc-mt-10 .pill{
  height: 30px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
/* --- Quick Sell card polish --- */
/* این تغییر بین این دو خط اعمال شده: پولیش کارت قیمت فروش سریع */
#result .card[style*="margin-top:12px;"]{
  padding: 10px;
}

#result .card[style*="margin-top:12px;"] .h2{
  text-align: center;
  margin: 0;
}

#result .card[style*="margin-top:12px;"] .muted{
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
}

/* ردیف کنترل ضریب: هم‌قد و هماهنگ */
#result .calc-sell-row{
  margin-top: 10px;
  gap: 8px;
}

#result .calc-sell-row .btn{
  height: 36px;
  width: 44px;
  padding: 0;
  border-radius: 12px;
}

#result .calc-sell-input{
  height: 36px;
  line-height: 36px;
  padding-block: 0;
  border-radius: 12px;
}

/* خروجی قیمت فروش: برجسته‌تر */
#sellPriceOut{
  height: 34px;
  padding-inline: 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* hint رُند شدن اگر ظاهر شد، جمع‌وجور */
.sell-round-hint{
  text-align: center;
  font-size: 12px !important;
  line-height: 1.4;
}
/* --- Reset button (after result) --- */
/* این تغییر بین این دو خط اعمال شده: هماهنگ‌سازی دکمه محاسبه جدید */
#result #btnResetCalc{
  height: 44px;                 /* هم‌قد دکمه محاسبه */
  width: 100%;                  /* در موبایل تمام‌عرض */
  border-radius: 14px;
  justify-content: center;

  /* حس ghost تمیز */
  background: transparent;
  border: 1px solid var(--border-soft);
  box-shadow: none;
}

/* حالت لمس */
#result #btnResetCalc:active{
  transform: translateY(1px);
}
/* --- Suggest Backdrop (local, low-risk) --- */
/* این تغییر بین این دو خط اعمال شده: backdrop برای suggest */
body.suggest-open .calc-search-col{
  position: relative; /* تضمین */
  z-index: 60;        /* خود ناحیه سرچ بالاتر دیده شود */
}

body.suggest-open .calc-search-col{
  position: relative;
  z-index: 60;
}

/* overlay فقط زیر پنل suggest (نه بالای آن) */
body.suggest-open .calc-search-col::after{
  content:"";
  position: absolute;

  inset-inline: -10px;
  top: calc(8px + 56px);  /* تقریبی: پایین‌تر از input+label */
  bottom: -14px;

  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 40;
  pointer-events: none;
}
@media (max-width: 640px){
  input, select, textarea{
    font-size: 16px !important;
  }
}
/* این تغییر بین این دو خط اعمال شده: highlight ملایم کارت فعال */
.calc-card.is-active{
  background: linear-gradient(
    0deg,
    rgba(226,180,0,0.06),
    rgba(226,180,0,0.06)
  );
  border-color: rgba(226,180,0,0.35);
  box-shadow:
    0 0 0 1px rgba(226,180,0,0.18),
    0 8px 20px rgba(0,0,0,0.06);
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}
/* پایان تغییر */

@keyframes calc-breathe-soft {
  0% {
    box-shadow:
      0 0 0 1px rgba(226,180,0,0.18),
      0 8px 20px rgba(0,0,0,0.06);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(226,180,0,0.28),
      0 10px 26px rgba(0,0,0,0.08);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(226,180,0,0.18),
      0 8px 20px rgba(0,0,0,0.06);
  }
}
/* فقط وقتی کارت active است */
.calc-card.is-active{
  animation: calc-breathe-soft 3.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .calc-card.is-active{
    animation: none;
  }
}
/* Quick Sell +/- buttons visual upgrade */
#result .calc-sell-row .btn {
  height: 36px;              /* هم‌قد input */
  width: 44px;
  font-size: 20px;           /* علامت بزرگ، قاب جمع */
  font-weight: 700;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition:
    background-color .2s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

/* دکمه افزایش (+) */
#sellPlus {
  color: #1f7a4a;
  background: rgba(46, 204, 113, 0.18); /* سبز ملایم */
  border: 1px solid rgba(46, 204, 113, 0.35);
}

#sellPlus:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
}

/* دکمه کاهش (-) */
#sellMinus {
  color: #8a5a00;
  background: rgba(255, 179, 0, 0.22); /* نارنجی متمایل به زرد */
  border: 1px solid rgba(255, 179, 0, 0.45);
}

#sellMinus:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
}
/* موبایل: لمس‌پذیرتر */
@media (max-width: 640px){
  #result .calc-sell-row .btn{
    width: 48px;
  }
}
/* ============================= */
/* Calc – Result Invalidate (Step 3) */
/* ============================= */
/* این تغییر بین این دو خط اعمال شده */

#result.is-invalid{
  opacity: .65;
  filter: saturate(.9);
  transition: opacity .25s ease, filter .25s ease;
}

/* پیام هشدار کوچک */
.calc-invalid-hint{
  display: none;
  margin-top: 10px;
  text-align: center;
  font-size: 12px;

  color: #8a5a00; /* amber text */
  background: rgba(226,180,0,.12);
  border: 1px solid rgba(226,180,0,.35);
  border-radius: 12px;
  padding: 8px 10px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* وقتی نتیجه invalid است */
#result.is-invalid .calc-invalid-hint{
  display: flex;
  animation: calc-amber-breathe 3.8s ease-in-out infinite;
}

.calc-recalc-btn{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  border-color: rgba(226,180,0,.55);
}

/* ============================= */
/* Calc – Breathing Motion (Step 3.5) */
/* ============================= */
/* این تغییر بین این دو خط اعمال شده */

/* نفس کشیدن خیلی نرم برای هشدار */
@keyframes calc-amber-breathe {
  0% {
    opacity: .65;
    box-shadow: 0 0 0 0 rgba(226,180,0,.15);
  }
  50% {
    opacity: .9;
    box-shadow: 0 0 0 6px rgba(226,180,0,.28);
  }
  100% {
    opacity: .65;
    box-shadow: 0 0 0 0 rgba(226,180,0,.15);
  }
}

/* pulse خیلی ملایم برای CTA */
@keyframes calc-cta-pulse {
  0% {
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
  50% {
    box-shadow:
      0 10px 22px rgba(226,180,0,.28),
      0 0 0 6px rgba(226,180,0,.18);
  }
  100% {
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
}
#result.is-invalid ~ .calc-form .calc-actions .btn--primary{
  animation: calc-cta-pulse 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  #result.is-invalid .calc-invalid-hint,
  #result.is-invalid ~ .calc-actions .btn--primary,
  #result.is-invalid + .calc-actions .btn--primary{
    animation: none;
  }
}

/* --- Calc Sticky Summary Bar --- */
.calc-sticky-bar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom));

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);

  z-index: 998; /* زیر نوار پایینی */
}

.calc-sticky-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.calc-sticky-count,
.calc-sticky-total{
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.calc-sticky-total-val{
  font-weight: 800;
}

.calc-sticky-bar.is-stale .calc-sticky-total-val{
  opacity: .7;
}

.calc-sticky-bar.is-disabled{
  opacity: .88;
}

.calc-sticky-bar.is-disabled .calc-sticky-btn{
  opacity: .6;
}

.calc-sticky-btn{
  height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  min-width: 120px;
}

.calc-sticky-spacer{
  height: 150px;
}

@media (min-width: 900px){
  .calc-sticky-bar{
    bottom: 16px;
    left: 50%;
    right: auto;
    width: min(720px, calc(100% - 32px));
    transform: translateX(-50%);
  }
  .calc-sticky-spacer{
    height: 100px;
  }
}

/* ============================= */
/* Calc - KDS override pass      */
/* ============================= */
.calc-page .calc-yield-help{
  margin-top: 6px;
}

.calc-page .calc-inline-error,
.calc-page .calc-inline-muted{
  margin-top: 10px;
}

.calc-page .calc-res-top{
  align-items: center;
}

.calc-page .calc-res-name{
  margin: 0;
  font-size: 14px;
}

.calc-page .calc-save-head{
  align-items: center;
  gap: 10px;
}

.calc-page .calc-save-title{
  margin: 0;
  font-size: 14px;
}

.calc-page .calc-save-limit-note{
  margin-top: 4px;
  font-size: 12px;
}

.calc-page .calc-sell-card{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.calc-page .calc-sell-title{
  margin: 0;
  text-align: center;
  font-size: 14px;
}

.calc-page .calc-sell-note{
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}

.calc-page .calc-sell-out{
  margin-top: 12px;
}

.calc-page .calc-actions--post-result{
  margin-top: 12px;
}

.calc-page .calc-modal__date-note{
  margin-top: 6px;
  font-size: 12px;
}

.calc-page .calc-qty-unit-select{
  min-width: 120px;
}

.calc-page .calc-mat-title{
  text-align: center;
}

.calc-page .calc-mat-meta{
  margin-top: 6px;
}

.calc-page .calc-suggest-match{
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.calc-page .calc-sell-mode{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calc-page .calc-sell-mode__btn{
  height: 38px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.calc-page .calc-sell-mode__btn.is-active{
  border-color: rgba(226,180,0,.55);
  background: rgba(226,180,0,.14);
}

.calc-page .calc-sell-mode__btn:disabled{
  opacity: .6;
}

.calc-page .calc-sell-panel{
  margin-top: 10px;
}

.calc-page .calc-sell-panel[hidden]{
  display: none !important;
}

.calc-page .calc-sell-advanced-gate{
  margin-top: 10px;
  text-align: center;
}

.calc-page .calc-advanced-setup{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.calc-page .calc-advanced-setup .btn{
  width: 100%;
}

.calc-page .calc-advanced-calc{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.calc-page .calc-advanced-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calc-page .calc-advanced-sep{
  margin-top: 2px;
  border-top: 1px dashed var(--border-soft);
  opacity: .8;
}

.calc-page .calc-advanced-controls{
  display: grid;
  gap: 8px;
}

.calc-page .calc-range{
  position: relative;
  padding-top: 16px;
  --range-pct: 50%;
  --range-sat: 1;
}

.calc-page .calc-range[data-range-variant="profit"]{
  --range-sat: 1.16;
}

.calc-page .calc-range[data-range-variant="time"]{
  --range-sat: .82;
}

.calc-page .calc-range__input{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 0;
  background: transparent;
  touch-action: pan-y;
}

.calc-page .calc-range__input::-webkit-slider-runnable-track{
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #d6d4cc, #d6d4cc),
    linear-gradient(90deg, #f8e79f 0%, #ecbd34 56%, #d6913f 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, var(--range-pct) 100%;
  filter: saturate(var(--range-sat));
}

.calc-page .calc-range__input::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff7d9;
  border: 3px solid #1f1d19;
  box-shadow: 0 3px 10px rgba(0,0,0,.24);
  margin-top: -8px;
  cursor: pointer;
}

.calc-page .calc-range__input::-moz-range-track{
  height: 14px;
  border-radius: 999px;
  background: #d6d4cc;
}

.calc-page .calc-range__input::-moz-range-progress{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f8e79f 0%, #ecbd34 56%, #d6913f 100%);
  filter: saturate(var(--range-sat));
}

.calc-page .calc-range__input::-moz-range-thumb{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff7d9;
  border: 3px solid #1f1d19;
  box-shadow: 0 3px 10px rgba(0,0,0,.24);
  cursor: pointer;
}

.calc-page .calc-range__input:focus-visible{
  outline: none;
}

.calc-page .calc-range__input:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 4px rgba(226,180,0,.25), 0 3px 10px rgba(0,0,0,.24);
}

.calc-page .calc-range__input:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 4px rgba(226,180,0,.25), 0 3px 10px rgba(0,0,0,.24);
}

.calc-page .calc-range__bubble{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -6px) scale(.92);
  min-width: 56px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #1c1b18;
  background: #f7eac2;
  border: 1px solid rgba(226,180,0,.55);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2;
}

.calc-page .calc-range__bubble.is-show{
  opacity: 1;
  transform: translate(-50%, -10px) scale(1);
}

.calc-page .calc-advanced-breakdown{
  margin-top: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}

.calc-page .calc-advanced-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.calc-page .calc-advanced-edit{
  margin-top: 2px;
}

.calc-page .advanced-round-hint{
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
}

.calc-page .calc-workshop-modal-note{
  font-size: 12px;
}