.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  /* Use the page bg so the panel stays visually distinct from any
     striping on result lists (browse model cards, route cards, event
     cards, route drives, trim cards — those alternate between
     --panel and --panel-2). The border + radius still mark it as a
     CTA surface. */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.filters[hidden] {
  display: none;
}

/* Header toggle that expands/collapses the filter panel below. On
   routes/ and events/ the panel also hosts the page CTA (Submit a
   route / Create event), so this button is the only header chrome
   alongside the page title. */
.filter-toggle {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.filter-toggle:hover,
.filter-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.filter-toggle .filter-toggle-caret {
  font-size: 10px;
  color: var(--muted);
  transition: transform 120ms ease;
}

.filter-toggle[aria-expanded="true"] .filter-toggle-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

/* CTA row sits at the top of the filter panel, full-bleed across
   the grid so the button reads as a primary action rather than a
   single-cell control. The divider below visually separates it from
   the filter controls. */
.filter-cta-row {
  grid-column: 1 / -1;
  display: flex;
  margin: 0;
}

.filter-cta-row .filter-cta.cta-btn {
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.filter-divider {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Active-filter chips, when rendered inside the filter panel, span
   the full grid row and collapse their default outer margin so the
   grid's own gap handles spacing. The selector also applies to the
   standalone pill row on pages that still render chips outside the
   panel. */
.filters .active-filters {
  grid-column: 1 / -1;
  margin: 0;
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter label,
.filter .filter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.filter input,
.filter select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 15px;
  min-width: 0;
}

.filter input:focus,
.filter select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ----- Range slider filters (e.g. min road conditions, max traffic) ----- */
.filter-slider-wrap,
.filter-slider-row .filter-slider-ticks {
  max-width: 220px;
}
.filter-slider-wrap {
  position: relative;
  width: 100%;
  isolation: isolate;
}
.filter-slider-notch {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  background: var(--border);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.filter input[type="range"].filter-slider {
  background: transparent;
  border: none;
  padding: 0;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 1;
}
.filter input[type="range"].filter-slider:focus {
  outline: none;
  border: none;
}
.filter input[type="range"].filter-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.filter input[type="range"].filter-slider::-moz-range-track {
  height: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.filter input[type="range"].filter-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  margin-top: -6px;
  cursor: pointer;
}
.filter input[type="range"].filter-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}
.filter-slider-value {
  color: var(--text);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.filter-slider-ticks {
  position: relative;
  height: 14px;
  font-size: 10px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}
.filter-slider-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ----- Checklist (multi-select) filters ----- */
.checklist {
  position: relative;
}

.checklist > summary {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 28px 8px 10px;
  border-radius: 6px;
  font-size: 15px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.checklist > summary::-webkit-details-marker {
  display: none;
}

.checklist[open] > summary,
.checklist > summary:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.checklist-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

.checklist-summary.has-selection {
  color: var(--text);
}

.checklist-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 10px;
  pointer-events: none;
  transition: transform 120ms ease;
}

.checklist[open] .checklist-caret {
  transform: translateY(-50%) rotate(180deg);
}

.checklist-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 160px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.checklist-item:hover {
  background: var(--panel-2);
}

.checklist-item input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.checklist-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox {
  position: relative;
}

.combobox-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  /* 40px tall, matched to the checklist summary's new height after
     bumping summary font-size to 15px (8 + 18 line height + 8 padding +
     2 border ≈ 36–40px depending on UA metrics). border-box folds
     padding + border into min-height so the empty-state combobox sits
     at the same vertical size as the other multi-select pickers in
     the same filter row. */
  box-sizing: border-box;
  min-height: 40px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: text;
}

.combobox.is-open .combobox-input-wrap,
.combobox-input-wrap:focus-within {
  border-color: var(--accent);
}

.combobox-chips {
  display: contents;
}

.combobox-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  padding: 2px 4px 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 100%;
}

.combobox-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-chip-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
}

.combobox-chip-remove:hover {
  color: var(--accent);
  background: var(--panel-2);
}

.filter input.combobox-input {
  flex: 1 0 100%;
  min-width: 60px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 15px;
  padding: 4px 2px;
  font-family: inherit;
}

.filter input.combobox-input:focus,
.filter input.combobox-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.filter input.combobox-input::placeholder {
  color: var(--muted);
}

.combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 160px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px;
  z-index: 20;
}

.combobox-option {
  display: block;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-option:hover,
.combobox-option.active {
  background: var(--panel-2);
}

.combobox-option-empty {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.reset {
  align-self: end;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  height: 36px;
}

.routes-filters .reset,
.events-filters .reset {
  align-self: start;
}

.reset:hover {
  color: var(--text);
  border-color: var(--accent);
}

.count {
  color: var(--muted);
  font-size: 12px;
  margin: 0 4px 12px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Top margin keeps the pill row from colliding with .filters above
     on pages where the filter bar's own bottom margin was zeroed for
     the edge-to-edge mobile layout (/routes/, /events/). On desktop
     .filters keeps its 20px bottom margin, so the extra 10px here
     reads as a small breathing gap rather than collision. */
  margin: 10px 4px;
}

.active-filters[hidden] {
  display: none;
}

.car-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--surface, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}

.car-filter-pill-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.car-filter-pill-value {
  color: var(--text);
}

.car-filter-pill-clear {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
}

.car-filter-pill-clear:hover {
  color: var(--text);
  background: var(--border);
}

.filter-variant-search {
  position: relative;
  grid-column: 1 / -1;
}

.filter-variant-search input[type="search"] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 15px;
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.filter-variant-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  cursor: pointer;
}

.filter-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 700px) {
  /* Filter panel overlays the page content instead of pushing it down
     when "Options" is expanded. Position absolute relative to <main>
     (made position: relative below), anchored to the static position
     right after .page-header. left/right: 0 spans main's padding box,
     which is viewport-wide on mobile (main has 16px side padding but
     no border), so the panel reaches the screen edges naturally — no
     negative margins needed. z-index keeps it above the results grid.
     Applies to all pages that use the shared .filters panel (browse,
     routes, events). */
  main:has(> .filters) {
    position: relative;
  }

  .filters {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    padding: 12px 10px;
    gap: 10px 10px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
  }

  /* Inputs / selects / summary at 16px on mobile — iOS Safari /
     WKWebView zooms the page on focus for any text input < 16px, and
     that zoom is more disruptive than a one-pixel size jump between
     breakpoints. The dropdown options below (`checklist-item`,
     `combobox-option`) stay at the 15px desktop size because they're
     divs, not inputs, and don't trigger the same auto-zoom. */
  .filter input,
  .filter select,
  .checklist > summary,
  .combobox-input,
  .filter-variant-search input[type="search"] {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 40px;
  }

  .checklist > summary {
    padding: 10px 32px 10px 12px;
  }

  .combobox-input-wrap {
    min-height: 40px;
    padding: 4px 8px;
  }

  /* Override the shared 10px input padding above so the input + wrap
     padding don't stack above the 40px target. */
  .filter input.combobox-input {
    padding: 6px 4px;
  }

  /* Dropdown options (checklist + combobox): bigger rows so a finger
     reliably hits exactly one. */
  .checklist-item,
  .combobox-option {
    padding: 12px 10px;
    font-size: 15px;
    min-height: 44px;
  }

  .checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  /* Range slider thumb: 24px is enough to drag with a fingertip without
     overshooting the next notch. */
  .filter input[type="range"].filter-slider {
    height: 24px;
  }

  .filter input[type="range"].filter-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -10px;
  }

  .filter input[type="range"].filter-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }

  .reset,
  .filter-cta-row .filter-cta.cta-btn {
    height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .filter-toggle {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 40px;
  }

  /* Active-filter pills: bigger clear (×) button for fingers. */
  .car-filter-pill {
    padding: 6px 6px 6px 12px;
    font-size: 13px;
  }

  .car-filter-pill-clear {
    font-size: 20px;
    padding: 4px 10px;
    min-width: 32px;
    min-height: 32px;
  }
}