/* public/css/filter-dropdown.css */

/* ===== Root & trigger ===== */
.filter-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  font: inherit;
}

.fd__chev { margin-left: auto; }

/* ===== Panel (popover) ===== */
.fd__panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  z-index: 1000;

  display: grid;
  grid-template-columns: 240px minmax(360px, 1fr);
  gap: 0;
  width: min(900px, 100%);
  max-height: 420px;

  background: #fff;
  border: 1px solid var(--border-200, #e6e6e6);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);

  overflow: hidden;
}

.fd__panel.hidden { display: none; }

/* ===== Left: categories ===== */
.fd__cats {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 420px;
  padding: 10px;
  background: var(--surface-25, #fbfeff);
  border-inline-end: 1px solid var(--border-200, #e6e6e6);
}

.fd__cats::-webkit-scrollbar { width: 2px; }
.fd__cats::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #000 12%, transparent);
  border-radius: 8px;
}

[data-chips][aria-hidden="true"] { display: none !important; }


.fd__cat {
  display: flex;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 2px 0;
  cursor: pointer;
 font-family: Satoshi;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 160%;
letter-spacing: 1.6%;

  color: #404040;
  transition: background .12s ease, color .12s ease;
  align-items: center;
   justify-content: space-between;
}
.fd__cat:hover { background: var(--surface-50, #f5fbfd); }
.fd__cat.is-active {
  background: #EDFCFE;
  color: #0E86AC;
}

/* ===== Right: sections & options ===== */
.fd__sections {
  padding: 12px;
  overflow: auto;
  max-height: 420px;
}

.fd__sections::-webkit-scrollbar { height: 8px; width: 8px; }
.fd__sections::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #000 12%, transparent);
  border-radius: 8px;
}

.fd__section { display: none; }
.fd__section.is-active { display: block; }

.fd__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  margin: 6px 0;
}

.fd__opt:hover {
  background: var(--surface-50, #f7feff);
  border-color: #CDF2F7;
}




.fd__opt  input[type="checkbox" i] {
    height: 16px;
    width: 16px;
    border-top: 2px solid var(--Neutral-300-Disabled, rgba(212, 212, 212, 1));
    background: var(--Neutral-100, rgba(245, 245, 245, 1));
    /* padding: 0px; */
    border-radius: 4px;
    accent-color: #0D92B1;
    color: whilte;
}


/* Checked state highlight */
.fd__opt:has(input[type="checkbox"]:checked) {
  background: #f0fcff;
  border-color: #B7ECF4;
}

/* ===== Chips summary ===== */

.fd__chips  {
    display: flex !important;
    flex-wrap: wrap;
    background-color: transparent !important; 
    gap:8px;
}

.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #B7ECF4;
  background: #CDF2F7;
  
  
  line-height: 1.2;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
.fd-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.fd-chip__x { font-weight: 700; line-height: 1; }

/* ===== Focus ring for interactive bits ===== */
.fd__cat:focus-visible,
.fd__opt:focus-within,
.fd-chip:focus-visible,
.fd__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-500, #0da9cd) 35%, transparent);
}

/* ===== Spacing tightener to match chip density in your TS chips ===== */
.fd__sections .fd__opt { margin-block: 4px; }

/* ===== Responsive (stack on small) ===== */
@media (max-width: 720px) {
  .fd__panel {
    position: fixed;
    inset: auto 12px 12px 12px; /* bottom sheet style */
    top: auto;
    width: auto;
    grid-template-columns: 1fr;
    max-height: 70vh;
  }
  .fd__cats {
    flex-direction: row;
    border-inline-end: none;
    border-bottom: 1px solid var(--border-200, #e6e6e6);
    padding: 8px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .fd__cat { white-space: nowrap; }
}

/* ===== Optional dark mode (keeps your palette vibe) ===== */
@media (prefers-color-scheme: dark) {
  .fd__trigger {
    background: #0b0f11;
    border-color: #1e2a2e;
    color: #eaf7fb;
  }
  .fd__trigger:hover { background: #0f1518; }

  .fd__panel {
    background: #0b0f11;
    border-color: #1e2a2e;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
  .fd__cats { background: #0c1316; border-color: #1e2a2e; }
  .fd__cat { color: #d0ecf4; }
  .fd__cat:hover { background: #0f171a; }
  .fd__cat.is-active { background: #0a2327; color: #7fe3f3; }

  .fd__opt { border-color: transparent; }
  .fd__opt:hover { background: #0f171a; border-color: #15343a; }
  .fd__opt:has(input[type="checkbox"]:checked) {
    background: #0b2328;
    border-color: #164a53;
    box-shadow: 0 0 0 2px #0a3a42;
  }

  .fd-chip {
    background: #0a2327;
    border-color: #164a53;
    color: #b3f0f7;
  }
}


/* ===== Disabled category (left nav) ===== */
.fd__cat.is-disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;            /* blocks clicking/opening */
}
.fd__cat.is-disabled svg { display: none; } /* hide arrow */

/* ===== Disabled/locked section (right pane) ===== */
.fd__section.is-locked {
  display: none !important;        /* never show when locked */
}

/* Optional: small inline guard banner */
.fd__guard-msg {
  display: none;
  margin: 8px 12px 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #FDE68A;
  background: #FFFBEB;
  color: #92400E;
  font-size: 12px;
  line-height: 1.35;
}
.fd__guard-msg.is-visible { display: block; }

/* If you want the options to look greyed out when disabled via JS attr */
.fd__opt.is-disabled,
.fd__opt:has(.ts-opt__cb:disabled) {
  opacity: .5;
  pointer-events: none;
}