/* ==========================================================================
   انتخابگر گروه کالا — `static/js/cat-picker.js`
   --------------------------------------------------------------------------
   ⚠️ همهٔ کلاس‌ها با پیشوند `cp-`.

   سلکت بومی (`.cp-native`) پنهان است ولی در DOM می‌ماند؛ ارسال فرم و
   اعتبارسنجی از همان می‌گذرد.
   ========================================================================== */
.cp-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
  clip-path: inset(50%) !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}

.cp-root { position: relative; display: flex; flex-direction: column; gap: 10px; }

/* ---------- نوار جست‌وجو + دکمهٔ درختواره ---------- */
.cp-bar { display: flex; gap: 8px; align-items: stretch; }
.cp-field {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), border-radius var(--dur-fast);
}
.cp-field:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.cp-field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
}
.cp-root.is-err .cp-field { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent); }
.cp-search-ic {
  flex: none; width: 18px; height: 18px; margin-inline: 14px 4px;
  background: var(--slate);
  -webkit-mask: var(--vsel-ic-search) center / contain no-repeat;
  mask: var(--vsel-ic-search) center / contain no-repeat;
}
.cp-field:focus-within .cp-search-ic { background: var(--green); }
.cp-q {
  flex: 1; min-width: 0; height: 48px; border: 0 !important; outline: 0; background: none !important;
  box-shadow: none !important; padding: 0 6px !important;
  font: inherit; font-size: .92rem; color: var(--ink);
}
.cp-q::placeholder { color: var(--slate); opacity: .8; }
.cp-spin {
  flex: none; width: 16px; height: 16px; margin-inline-end: 14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--green) 25%, transparent); border-top-color: var(--green);
  animation: cp-spin .8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

.cp-treebtn {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--green) 30%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 10%, var(--surface)), var(--surface));
  color: var(--green-text); font: inherit; font-size: .86rem; font-weight: 800;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.cp-treebtn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--green); background: color-mix(in srgb, var(--green) 14%, var(--surface)); }
.cp-treebtn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cp-tree-ic {
  width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='10' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='17' width='7' height='5' rx='1.5'/%3E%3Cpath d='M6.5 8v10.5H14M6.5 12.5H14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='10' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='17' width='7' height='5' rx='1.5'/%3E%3Cpath d='M6.5 8v10.5H14M6.5 12.5H14'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 520px) {
  .cp-treebtn { padding: 0 14px; }
  .cp-treebtn span:last-child { display: none; }
}

.cp-err { margin: 0; font-size: .76rem; font-weight: 700; color: var(--danger-text); }

/* ---------- گروه انتخاب‌شده ---------- */
.cp-chosen {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px; padding-inline: 12px 10px;
  border-radius: 14px;
  background:
    radial-gradient(300px 80px at 100% 0%, color-mix(in srgb, var(--green) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--green) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
}
.cp-chosen[hidden] { display: none; }
.cp-chosen.is-flash { animation: cp-flash .7s var(--ease-out); }
@keyframes cp-flash {
  0% { transform: scale(.98); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); }
  60% { transform: scale(1); box-shadow: 0 0 0 8px transparent; }
}
.cp-chosen-ic {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; background: var(--surface); font-size: 1.15rem;
  box-shadow: var(--sh-sm); color: var(--green-text); font-weight: 900;
}
.cp-chosen-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-chosen-txt small { font-size: .68rem; font-weight: 700; color: var(--green-text); }
.cp-chosen-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  font-size: .8rem; color: var(--slate); line-height: 1.7;
}
.cp-chosen-path i { font-style: normal; }
.cp-chosen-path b { opacity: .45; font-weight: 400; }
.cp-chosen-path strong { color: var(--ink); font-size: .9rem; font-weight: 900; }
.cp-chosen-edit, .cp-chosen-x {
  flex: none; border: 0; cursor: pointer; font: inherit;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cp-chosen-edit {
  padding: 7px 12px; border-radius: 10px; font-size: .76rem; font-weight: 800;
  background: var(--surface); color: var(--green-text); box-shadow: var(--sh-sm);
}
.cp-chosen-edit:hover { background: var(--green-btn); color: var(--on-green); }
.cp-chosen-x {
  width: 30px; height: 30px; border-radius: 50%; font-size: .78rem;
  background: transparent; color: var(--slate);
}
.cp-chosen-x:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-text); }

/* ---------- فهرست کشویی ---------- */
.cp-drop {
  position: absolute; z-index: 60; top: 54px; inset-inline: 0;
  max-height: min(430px, 62vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(4,10,20,.35), var(--sh-md);
  animation: cp-drop .16s var(--ease-out);
}
@keyframes cp-drop { from { opacity: 0; transform: translateY(-4px); } }
.cp-sec {
  padding: 10px 10px 6px; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
  color: var(--slate);
}
.cp-opt, .cp-hit-main {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  text-align: start; font: inherit; color: var(--ink);
  transition: background var(--dur-fast);
}
.cp-opt:hover, .cp-opt.is-active { background: color-mix(in srgb, var(--green) 9%, transparent); }
.cp-opt.is-active { box-shadow: inset 3px 0 0 var(--green); }
[dir="rtl"] .cp-opt.is-active { box-shadow: inset -3px 0 0 var(--green); }
.cp-opt.is-on .cp-opt-name::after, .cp-hit.is-on .cp-opt-name::after, .cp-item.is-on .cp-item-name::after {
  content: " ✓"; color: var(--green-text); font-weight: 900;
}
.cp-opt-ic, .cp-item-ic {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--bg-subtle); font-size: 1rem;
}
.cp-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-opt-name { font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-crumbs {
  display: flex; flex-wrap: wrap; gap: 0 5px; align-items: center;
  font-size: .72rem; color: var(--slate); line-height: 1.7;
}
.cp-crumbs i { font-style: normal; }
.cp-crumbs b { opacity: .45; font-weight: 400; }
.cp-root mark, .cp-modal mark {
  background: color-mix(in srgb, #fbbf24 38%, transparent); color: inherit;
  border-radius: 4px; padding: 0 1px;
}
.cp-count {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; color: var(--slate); background: var(--bg-subtle);
  white-space: nowrap;
}
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.cp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .78rem; font-weight: 700;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.cp-chip:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 7%, transparent); transform: translateY(-1px); }
.cp-more {
  width: 100%; margin-top: 4px; padding: 11px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--bg-subtle); color: var(--green-text);
  font: inherit; font-size: .8rem; font-weight: 800;
}
.cp-more:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.cp-msg {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 12px; font-size: .84rem; color: var(--slate); text-align: center;
}
.cp-msg.is-bad { color: var(--danger-text); }
.cp-msg.is-big { flex-direction: column; padding: 60px 12px; font-size: .92rem; }
.cp-msg.is-big span { font-size: 2.4rem; opacity: .5; }
.cp-link { border: 0; background: none; color: var(--green-text); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
.cp-keys {
  padding: 8px 10px 4px; font-size: .66rem; color: var(--slate); opacity: .75; text-align: center;
}
@media (hover: none) { .cp-keys { display: none; } }
.cp-dots { display: inline-flex; gap: 4px; }
.cp-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: cp-dot 1s infinite ease-in-out;
}
.cp-dots i:nth-child(2) { animation-delay: .15s; }
.cp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cp-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   مودال
   ========================================================================== */
.cp-lock, .cp-lock body { overflow: hidden; }
.cp-modal { position: fixed; inset: 0; z-index: var(--z-modal, 400); display: grid; place-items: center; padding: 20px; }
.cp-modal[hidden] { display: none; }
.cp-veil {
  position: absolute; inset: 0; background: rgba(4,10,20,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s var(--ease-out);
}
.cp-dialog {
  position: relative; width: min(1120px, 100%); height: min(780px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 26px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 40px 100px -30px rgba(4,10,20,.6);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .22s var(--ease-out), transform .28s var(--ease-out);
}
.cp-modal.is-in .cp-veil { opacity: 1; }
.cp-modal.is-in .cp-dialog { opacity: 1; transform: none; }

.cp-mhead {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px;
}
.cp-mhead-ic {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--green), #34d399);
  box-shadow: 0 10px 24px -10px var(--green);
  position: relative;
}
.cp-mhead-ic::after {
  content: ""; position: absolute; inset: 11px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='10' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='17' width='7' height='5' rx='1.5'/%3E%3Cpath d='M6.5 8v10.5H14M6.5 12.5H14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='10' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='17' width='7' height='5' rx='1.5'/%3E%3Cpath d='M6.5 8v10.5H14M6.5 12.5H14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cp-mhead-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-mhead-t b { font-size: 1.05rem; font-weight: 900; }
.cp-mhead-t small { font-size: .74rem; color: var(--slate); }
.cp-mx {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--bg-subtle); color: var(--ink); font-size: .9rem;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.cp-mx:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-text); transform: rotate(90deg); }

.cp-msearch {
  margin: 0 20px 10px; display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg-subtle);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.cp-msearch:focus-within { border-color: var(--green); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); }
.cp-msearch input {
  flex: 1; min-width: 0; height: 50px; border: 0 !important; outline: 0; background: none !important;
  box-shadow: none !important; padding: 0 6px !important;
  font: inherit; font-size: .98rem; color: var(--ink);
}

.cp-trail {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 0 20px 10px; font-size: .78rem;
}
.cp-trail[hidden] { display: none; }
.cp-trail button {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 4px 8px; border-radius: 8px; color: var(--slate);
}
.cp-trail button:hover { background: var(--bg-subtle); color: var(--ink); }
.cp-trail button:last-child { color: var(--green-text); background: color-mix(in srgb, var(--green) 9%, transparent); }
.cp-trail b { color: var(--slate); opacity: .5; font-weight: 400; }

.cp-mbody { flex: 1; min-height: 0; position: relative; border-top: 1px solid var(--line); background: var(--bg-subtle); }

/* ستون‌ها (Miller) */
.cp-cols {
  height: 100%; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.cp-cols[hidden] { display: none; }
.cp-col {
  flex: 1 0 280px; max-width: 400px; height: 100%; display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--line); background: var(--surface);
  scroll-snap-align: start;
  animation: cp-col .22s var(--ease-out);
}
.cp-col:nth-child(even) { background: color-mix(in srgb, var(--bg-subtle) 55%, var(--surface)); }
@keyframes cp-col { from { opacity: 0; transform: translateX(-12px); } }
[dir="rtl"] .cp-col { animation-name: cp-col-rtl; }
@keyframes cp-col-rtl { from { opacity: 0; transform: translateX(12px); } }
.cp-colhead {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 8px; border-bottom: 1px dashed var(--line);
}
.cp-colhead b { flex: 1; min-width: 0; font-size: .82rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-back {
  display: none; border: 0; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 800;
  padding: 6px 10px; border-radius: 10px; background: var(--bg-subtle); color: var(--ink);
}
.cp-back::before { content: "→ "; }
.cp-pickhere {
  flex: none; border: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800;
  padding: 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green-text);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cp-pickhere:hover { background: var(--green-btn); color: var(--on-green); }
.cp-colbody { flex: 1; overflow-y: auto; padding: 6px; overscroll-behavior: contain; scrollbar-width: thin; }

.cp-item { display: flex; align-items: center; gap: 2px; border-radius: 12px; transition: background var(--dur-fast); }
.cp-item:hover { background: color-mix(in srgb, var(--green) 7%, transparent); }
.cp-item.is-open { background: color-mix(in srgb, var(--green) 13%, transparent); }
.cp-item-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 0; background: none; cursor: pointer; text-align: start;
  font: inherit; color: var(--ink);
}
.cp-item-name { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-item.is-open .cp-item-name { color: var(--green-text); font-weight: 900; }
.cp-chev {
  flex: none; width: 8px; height: 8px; border: solid var(--slate); border-width: 0 2px 2px 0;
  transform: rotate(135deg); opacity: .6; margin-inline: 2px 4px;
}
[dir="ltr"] .cp-chev { transform: rotate(-45deg); }
.cp-item.is-open .cp-chev { border-color: var(--green-text); opacity: 1; }
.cp-item-pick {
  flex: none; width: 30px; height: 30px; margin-inline-end: 6px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: .78rem; font-weight: 900; color: var(--green-text);
  opacity: 0; transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.cp-item:hover .cp-item-pick, .cp-item.is-open .cp-item-pick, .cp-item-pick:focus-visible { opacity: 1; }
.cp-item-pick:hover { background: var(--green-btn); color: var(--on-green); border-color: transparent; }
@media (hover: none) { .cp-item-pick { opacity: 1; } }

/* نتایج جست‌وجو */
.cp-res { position: absolute; inset: 0; overflow-y: auto; padding: 10px 14px; overscroll-behavior: contain; }
.cp-res[hidden] { display: none; }
.cp-hit {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  border-radius: 14px; background: var(--surface); border: 1px solid transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.cp-hit:hover, .cp-hit.is-active { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); box-shadow: var(--sh-sm); }
.cp-hit.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent); }
.cp-hit-main { padding: 10px 12px; }
.cp-hit-main .cp-opt-name { font-size: .92rem; }
.cp-hit-go {
  flex: none; margin-inline-end: 10px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: .72rem; font-weight: 800; color: var(--slate);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cp-hit-go:hover { color: var(--green-text); border-color: var(--green); }

.cp-mfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface);
}
.cp-mcur { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; }
.cp-mcur-l { color: var(--slate); font-weight: 700; }
.cp-mfoot .cp-keys { padding: 0; }

.cp-skel { display: flex; flex-direction: column; gap: 8px; padding: 16px; width: 300px; background: var(--surface); }
.cp-skel i {
  height: 42px; border-radius: 12px;
  background: linear-gradient(90deg, var(--skeleton-base, var(--bg-subtle)), var(--skeleton-shine, var(--line)), var(--skeleton-base, var(--bg-subtle)));
  background-size: 200% 100%; animation: cp-skel 1.2s infinite linear;
}
@keyframes cp-skel { to { background-position: -200% 0; } }

/* ---------- موبایل: شیت تمام‌صفحه، یک ستون با «بازگشت» ---------- */
@media (max-width: 720px) {
  .cp-modal { padding: 0; place-items: end stretch; }
  .cp-dialog { width: 100%; height: 94vh; border-radius: 24px 24px 0 0; transform: translateY(40px); }
  .cp-mhead { padding: 14px 16px 10px; }
  .cp-msearch { margin: 0 16px 10px; }
  .cp-trail { padding: 0 16px 8px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .cp-col { flex-basis: 100%; max-width: none; border: 0; animation-duration: .18s; }
  .cp-col:not(:last-child) { display: none; }
  .cp-back { display: inline-block; }
  .cp-mfoot .cp-keys { display: none; }
  .cp-drop { max-height: 55vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-dialog, .cp-veil, .cp-col, .cp-drop, .cp-chosen.is-flash { transition: none; animation: none; }
}