/* ============================================
   FILTERS COMPONENT — clean, consistent fields
   - All controls share one sizing language (40px)
   - Chips render as equal-width tiles (no ragged wrap)
   - Selects / inputs sized to match chips
   ============================================ */

.filters {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-4));
  overflow: visible;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .filters {
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Backdrop — only on mobile */
.filters-backdrop { display: none; }

/* ===== Header ===== */
.filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: var(--space-5);
}

[data-theme="dark"] .filters__header {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.filters__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

.filters__title svg {
  width: 17px;
  height: 17px;
  color: var(--color-primary);
}

.filters__reset {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--t-fast) var(--ease-out);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.filters__reset:hover {
  background-color: var(--color-primary-soft);
}

.filters__reset:active { transform: scale(0.96); }

/* ===== Filter Group ===== */
.filter-group { margin-bottom: var(--space-5); }
.filter-group:last-child { margin-bottom: 0; }

.filter-group__label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
  padding-left: 8px;
  border-left: 2px solid var(--color-primary);
}

/* ===== Shared control sizing (selects + inputs) ===== */
.filter-select,
.filter-input {
  width: 100%;
  height: 40px;
  padding: 0 0.85rem;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--t-normal) var(--ease-out),
              background-color var(--t-normal) var(--ease-out),
              box-shadow var(--t-normal) var(--ease-out);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-input {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.09);
}

.filter-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

.filter-input::placeholder {
  color: var(--color-text-subtle);
  font-weight: 500;
}

.filter-select:hover,
.filter-input:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* ===== Chip group — comfortable pills (wrap, no truncation) ===== */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  height: 40px;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-fast) var(--ease-out);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.filter-chip:active { transform: scale(0.95); }

[data-theme="dark"] .filter-chip {
  border-color: rgba(255, 255, 255, 0.09);
}

.filter-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  transform: translateY(-1px);
}

.filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: 0 6px 16px var(--color-primary-glow);
}

/* ===== Mobile drawer ===== */
.filters-toggle { display: none; }

@media (max-width: 900px) {
  .filters {
    position: fixed;
    top: 0;
    left: 0;
    width: min(330px, 90vw);
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--color-border);
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;        /* smooth slide, no spring bounce / lag */
    backface-visibility: hidden;
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    /* solid site surface (matches the rest of the website, not washed glass) */
    background-color: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: auto;
  }

  [data-theme="dark"] .filters {
    background-color: var(--color-surface);
  }

  .filters.is-open { transform: translateX(0); }

  /* plain dark overlay (no animated backdrop-filter -> smoother on phones) */
  .filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(5, 8, 17, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-normal) var(--ease-out), visibility var(--t-normal) var(--ease-out);
    z-index: calc(var(--z-modal) - 1);
  }

  .filters-backdrop.is-open { opacity: 1; visibility: visible; }

  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.1rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--t-fast);
    box-shadow: var(--shadow-sm);
  }

  .filters-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .filters-toggle svg { width: 16px; height: 16px; color: var(--color-primary); }

  .filters__close { display: inline-flex !important; }
}

.filters__close {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  margin-left: 8px;
  transition: all var(--t-fast);
}

.filters__close:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background-color: var(--color-danger-soft);
}

.filters__close svg { width: 14px; height: 14px; }

/* ============================================
   SMOOTH CUSTOM SELECT (replaces native dropdown)
   ============================================ */

/* Home filter panel: smooth selects fill the column width */
.filter-group .ss-select { display: block; width: 100%; }