/* ==========================================================================
   منوی بازشونده‌ی چندانتخابی با چک‌باکس (Liquid Glass)
   <details class="ms"> + پنل شیشه‌ای. روی دسکتاپ زیر دکمه باز می‌شود، روی موبایل به‌صورت
   «شیت» بالای تب‌بار با پس‌زمینه‌ی تیره. بدون JavaScript هم باز/بسته می‌شود.
   ========================================================================== */

/* پنل باز باید روی کارت‌های زیر فرم بیاید */
html body .pf {
  position: relative;
  z-index: 30;
}

.ms {
  position: relative;
  min-width: 0; /* بدون این، متن بلند دکمه از ستون grid بیرون می‌زند و روی فیلد کناری می‌افتد */
}

/* دکمه: همان ظاهر pf-select (کپسول + شورون بالا/پایین)، با متن و شمارنده */
html body .ms-trigger {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.ms-trigger::-webkit-details-marker {
  display: none;
}

.ms-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-count {
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 6px color-mix(in oklch, var(--accent) 40%, transparent);
}

.ms-count[hidden] {
  display: none;
}

.ms[open] > .ms-trigger {
  background-color: var(--lg-fill-hover);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);
}

.ms-backdrop {
  display: none;
}

/* پنل شیشه‌ای */
.ms-panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: max(100%, 270px);
  max-height: min(420px, 70vh);
  overflow: hidden;
  border: 1px solid var(--lg-border);
  border-radius: 24px;
  /* پنل داخل فرم شیشه‌ای (.pf) است و backdrop-filter تو در تو بیرون از والد را محو نمی‌کند؛
     پس پس‌زمینه تقریباً مات است تا کارت‌های زیرش دیده نشوند */
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-highlight);
  transform-origin: top;
}

.ms[open] > .ms-panel {
  animation: ms-in 0.28s var(--lg-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes ms-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
}

.ms-head strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ms-clear {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--lg-spring, ease);
}

.ms-clear:hover {
  background: var(--lg-fill);
}

.ms-list {
  margin: 0;
  padding: 0 8px 4px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ردیف گزینه */
html body .ms-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 0.9375rem;
  transition: background-color 0.15s ease;
}

html body .ms-opt:hover {
  background: var(--lg-fill);
}

html body .ms-opt:has(input:checked) {
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}

html body .ms-opt > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-n {
  flex: none;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ms-foot {
  padding: 8px 12px 12px;
  border-top: 0.5px solid var(--lg-sep, var(--border));
}

/* موبایل: شیت پایین، بالای تب‌بار شناور، با پس‌زمینه‌ی تیره */
@media (max-width: 620px) {
  /* backdrop-filter روی والد، عنصر را containing block فرزندهای fixed می‌کند و شیت پایین را خراب می‌کرد؛
     روی موبایل کارت فیلتر مات می‌شود */
  html body .pf {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg-card);
  }

  .ms-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: block;
    background: rgba(0, 0, 0, 0.38);
    animation: ms-fade 0.25s ease;
  }

  .ms-panel {
    position: fixed;
    inset-inline: 12px;
    top: auto;
    bottom: calc(var(--bottom-nav-h, 68px) + var(--bottom-nav-gap, 12px) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 96;
    width: auto;
    max-height: min(62vh, 480px);
    transform-origin: bottom;
  }

  .ms[open] > .ms-panel {
    animation: ms-sheet-in 0.34s var(--lg-spring, cubic-bezier(0.22, 1, 0.36, 1));
  }

  @keyframes ms-sheet-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
}

@keyframes ms-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ms[open] > .ms-panel,
  .ms-backdrop {
    animation: none;
  }
}

/* منوی تک‌انتخابی (مرتب‌سازی): پنل بدون دکمه‌ی «اعمال»؛ کوتاه و هم‌عرض دکمه */
.ms-single .ms-panel {
  width: max(100%, 220px);
  grid-template-rows: auto minmax(0, 1fr);
}

.ms-single .ms-list {
  padding-bottom: 10px;
}