/* منوی کشویی گیسو — جایگزین کنترل پیش‌فرض مرورگر */

:root {
  --gsel-bg: hsl(var(--popover, 0 0% 100%));
  --gsel-text: hsl(var(--popover-foreground, 240 10% 4%));
  --gsel-muted: hsl(var(--muted-foreground, 240 4% 46%));
  --gsel-line: hsl(var(--border, 240 6% 90%));
  --gsel-accent: hsl(var(--accent, 349 89% 58%));
  --gsel-soft: hsl(var(--accent, 349 89% 58%) / 0.12);
  --gsel-hover: hsl(var(--muted, 240 5% 96%));
  --gsel-thumb: hsl(var(--foreground, 240 10% 4%) / 0.38);
  --gsel-radius: 0.8rem;
}

html[data-theme] {
  --gsel-bg: var(--surface, #fff);
  --gsel-text: var(--text, #171d20);
  --gsel-muted: var(--text-mute, #6d7880);
  --gsel-line: var(--line-strong, var(--line, #d5dee4));
  --gsel-accent: var(--accent, #4d799f);
  --gsel-soft: color-mix(in srgb, var(--gsel-accent) 14%, transparent);
  --gsel-hover: color-mix(in srgb, var(--gsel-text) 6%, var(--gsel-bg));
  --gsel-thumb: color-mix(in srgb, var(--gsel-accent) 72%, var(--gsel-text));
}

/* نوار فیلتر: جستجو دیگر تا چند ده پیکسل جمع نمی‌شود */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.filter-search {
  flex: 1 1 12rem;
  width: auto;
  min-width: min(100%, 11rem);
  max-width: none;
}
.filter-search .input {
  width: 100%;
  min-width: 0;
}
.filter-select {
  flex: 1 1 9.5rem;
  width: auto;
  max-width: 14rem;
  min-width: min(100%, 8.75rem);
}
.filter-select select,
.filter-select .gsel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.filter-bar > .btn { flex: 0 0 auto; }

@media (max-width: 840px) {
  .filter-search,
  .filter-select,
  .filter-bar > .btn {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

.gsel { position: relative; width: 100%; min-width: 0; }
.gsel-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.gsel-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.85rem;
  padding-inline-end: 2.15rem;
  border: 1px solid var(--gsel-line);
  border-radius: var(--gsel-radius);
  background: var(--gsel-bg);
  color: var(--gsel-text);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gsel-btn:hover { border-color: color-mix(in srgb, var(--gsel-accent) 55%, var(--gsel-line)); }
.gsel-btn:focus-visible {
  outline: none;
  border-color: var(--gsel-accent);
  box-shadow: 0 0 0 4px var(--gsel-soft);
}
.gsel.is-open .gsel-btn { border-color: var(--gsel-accent); box-shadow: 0 0 0 4px var(--gsel-soft); }
.gsel.is-invalid .gsel-btn { border-color: #c2414b; box-shadow: 0 0 0 4px color-mix(in srgb, #c2414b 18%, transparent); }
.gsel.is-disabled .gsel-btn { opacity: 0.55; cursor: not-allowed; }
.gsel-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsel-chevron {
  position: absolute;
  inset-inline-end: 0.7rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  color: var(--gsel-muted);
  transform: translateY(-50%);
  transition: transform .2s ease;
  pointer-events: none;
}
.gsel.is-open .gsel-chevron { transform: translateY(-50%) rotate(180deg); }

.gsel-pop {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.35rem;
  border: 1px solid var(--gsel-line);
  border-radius: 1rem;
  background: var(--gsel-bg);
  color: var(--gsel-text);
  box-shadow: 0 18px 40px -18px rgb(23 29 32 / 0.45), 0 0 0 1px color-mix(in srgb, var(--gsel-accent) 18%, transparent);
  overflow: hidden;
}
.gsel-pop::before {
  content: "";
  position: absolute;
  inset-inline: 0.7rem;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--gsel-accent);
}
.gsel-pop[hidden] { display: none !important; }

.gsel-find {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0.2rem 0.3rem;
  padding: 0 0.65rem;
  height: 2.15rem;
  border: 1px solid var(--gsel-line);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--gsel-hover) 80%, var(--gsel-bg));
}
.gsel-find input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}
.gsel-find input::placeholder { color: var(--gsel-muted); }
.gsel-find svg { flex: none; color: var(--gsel-muted); }

.gsel-scroll {
  max-height: 16.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gsel-thumb) transparent;
}
.gsel-scroll::-webkit-scrollbar { width: 11px; }
.gsel-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.gsel-scroll::-webkit-scrollbar-thumb {
  background: var(--gsel-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

.gsel-group {
  padding: 0.55rem 0.7rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--gsel-muted);
}
.gsel-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
}
.gsel-opt:hover,
.gsel-opt.is-active { background: var(--gsel-hover); }
.gsel-opt.is-on { background: var(--gsel-soft); font-weight: 700; }
.gsel-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.gsel-opt span { min-width: 0; }
.gsel-mark {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  opacity: 0;
  color: var(--gsel-accent);
}
.gsel-opt.is-on .gsel-mark { opacity: 1; }
.gsel-empty {
  margin: 0;
  padding: 0.8rem 0.7rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--gsel-muted);
}

/* جاهایی که منو باید جمع‌وجور بماند و ردیف را از صفحه بیرون نزند */
.plp-sort .gsel,
.fb-sort .gsel {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}
@media (max-width: 520px) {
  .plp-sort > span { display: none; }
}

/* هدر پنل: جستجو نباید دکمه‌های آیکون را له کند */
.app-main > header > .btn-icon { flex-shrink: 0; }
.app-main > header > [data-cmdk-open] {
  width: auto;
  min-width: 0;
  flex: 1 1 8rem;
  max-width: 24rem;
}
.app-main > header > .ms-auto { flex-shrink: 0; }
.plp-sort .gsel-btn,
.fb-sort .gsel-btn {
  height: 2.4rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.ct-field .gsel-btn {
  min-height: 3rem;
  height: auto;
  border-width: 1.5px;
  border-radius: 14px;
  font-size: 1rem;
}

/* اسکرول منوهای پنل که از قبل سفارشی بودند */
.popover ul,
[data-cmdk-list],
.app-sidebar [data-nav] {
  scrollbar-width: thin;
  scrollbar-color: var(--gsel-thumb) transparent;
}
.popover ul::-webkit-scrollbar,
[data-cmdk-list]::-webkit-scrollbar,
.app-sidebar [data-nav]::-webkit-scrollbar { width: 11px; }
.popover ul::-webkit-scrollbar-thumb,
[data-cmdk-list]::-webkit-scrollbar-thumb,
.app-sidebar [data-nav]::-webkit-scrollbar-thumb {
  background: var(--gsel-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .gsel-btn,
  .gsel-chevron { transition: none; }
}