/*
 * FilterBar — one component, two shapes.
 *
 *   hero     a single white pill on the Sand hero panel, carrying the one
 *            coral action the page exists for. No card of its own: the panel
 *            behind it belongs to the page, so the pill reads as the object.
 *   compact  the filter rail above the results — a white card of quiet
 *            controls, brand for what is active, sage for what is selected.
 *
 * Colour comes from the token layer only; the disclosure arrows are drawn
 * from currentColor rather than a background image so they follow the theme.
 */

/* ── Shell ────────────────────────────────────────────────────────── */

.filterBar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: opacity var(--transition);
}

.filterBar.isLoading {
  opacity: 0.7;
  pointer-events: none;
}

.heroMode {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

/* ── Search ───────────────────────────────────────────────────────── */

.searchSection {
  margin-bottom: 0;
}

.omniBoxContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The hero pill: hairline, soft corner, everything else sits inside it. */
.heroMode .omniBoxContainer {
  gap: 0.375rem;
  padding: 0.3125rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.heroMode .omniBoxContainer:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

.omniIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-left: 0.625rem;
  color: var(--text-muted);
}

.omniInput {
  flex: 1;
  min-width: 0;
  padding: 0.6875rem 0.875rem;
  font-family: var(--font-ui);
  /* 1rem, not smaller: iOS Safari zooms the viewport on any control under
     16px, which throws the user out of the hero on first tap. */
  font-size: var(--step-0);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.omniInput::placeholder {
  color: var(--text-muted);
}

.omniInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

/* Inside the pill the input carries no chrome — the pill holds the border
   and the focus ring, so the two never double up. */
.heroMode .omniInput {
  background: none;
  border-color: transparent;
  padding-left: 0.5rem;
}

.heroMode .omniInput:focus {
  border-color: transparent;
  box-shadow: none;
}

.searchButton {
  flex: 0 0 auto;
  padding: 0.6875rem 1.25rem;
  font-size: var(--step--1);
  border-radius: var(--radius-sm);
}

.heroMode .searchButton {
  padding: 0.75rem 1.375rem;
}

.spinner {
  width: 1.0625rem;
  height: 1.0625rem;
  border: 2px solid rgba(var(--text-inverse-rgb), 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Hero supporting copy ─────────────────────────────────────────── */

.searchHint {
  margin: 0.75rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.searchHint strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.nearMeRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

/* Quiet text link, not a second button: the coral submit is the decisive
   action and nothing beside it may compete for the same weight. */
.nearMeBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.375rem;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand);
  cursor: pointer;
  transition: color var(--transition);
}

.nearMeBtn:hover:not(:disabled) {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nearMeBtn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.nearMeSpinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(var(--brand-rgb), 0.3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: nearMeSpin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes nearMeSpin {
  to { transform: rotate(360deg); }
}

.geoError {
  margin: 0;
  max-width: 340px;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--brand-strong);
  text-align: center;
}

/* ── Controls row (radius + phase + advanced toggle) ──────────────── */

.controlsRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
}

.controlsRow .advancedToggle {
  margin-left: auto;
}

.radiusControl {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.radiusLabel {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Selects ──────────────────────────────────────────────────────── */

.selectShell {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.selectShellWide {
  flex: 1;
  min-width: 180px;
}

.selectShell select {
  width: 100%;
}

/* Drawn, not imaged: a background-image arrow has to hardcode its own
   colour, and would stay light-mode grey on the dark ground. */
.selectChevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  pointer-events: none;
  color: var(--text-muted);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.filterSelect,
.controlSelect {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), background-color var(--transition),
    box-shadow var(--transition), color var(--transition);
}

.filterSelect {
  padding: 0.5625rem 2rem 0.5625rem 0.75rem;
  font-size: var(--step--1);
  font-weight: 500;
}

.controlSelect {
  padding: 0.4375rem 1.875rem 0.4375rem 0.75rem;
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
}

.filterSelect:hover:not(:disabled),
.controlSelect:hover:not(:disabled) {
  border-color: var(--border-strong);
  background-color: var(--bg-secondary);
}

.filterSelect:focus,
.controlSelect:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

/* Selected — i.e. this control is narrowing the list. Sage tint, brand
   line: the same pairing the results use for "on". */
.selectActive {
  background-color: rgba(var(--sage-rgb), 0.38);
  border-color: var(--brand);
  color: var(--brand-strong);
  font-weight: 600;
}

.selectActive:hover:not(:disabled) {
  background-color: rgba(var(--sage-rgb), 0.5);
  border-color: var(--brand);
}

.filters {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ── Advanced filters toggle ──────────────────────────────────────── */

.advancedToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), background-color var(--transition),
    color var(--transition);
}

.advancedToggle:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Applied filters read as a brand chip, so it's obvious at a glance that
   the list below is being narrowed. */
.advancedToggleActive {
  border-color: var(--brand);
  background: var(--brand-bg);
  color: var(--brand);
  font-weight: 600;
}

.advancedToggleActive:hover {
  border-color: var(--brand);
  background: var(--brand-bg);
  color: var(--brand-strong);
}

.clearButton {
  padding: 0.4375rem 0.875rem;
  font-size: var(--step--1);
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.chevronDown,
.chevronUp {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}

.chevronDown {
  border-top: 4.5px solid currentColor;
}

.chevronUp {
  border-bottom: 4.5px solid currentColor;
}

/* ── Narrow ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .filterBar {
    padding: 0.875rem;
  }

  /* The hero pill stays a pill at every width — stacking it would lose the
     one shape the page is built around. Only the results bar stacks. */
  .filterBar:not(.heroMode) .omniBoxContainer {
    flex-direction: column;
    align-items: stretch;
  }

  .filterBar:not(.heroMode) .searchButton {
    width: 100%;
  }

  .filters {
    flex-direction: column;
  }

  .selectShellWide {
    min-width: 100%;
  }

  .controlsRow {
    gap: 0.5rem;
  }

  .controlsRow .advancedToggle {
    margin-left: 0;
  }

  .controlSelect {
    flex: 1;
    min-width: 140px;
  }

  .searchHint {
    text-align: left;
  }

  .nearMeRow {
    align-items: flex-start;
  }

  .geoError {
    text-align: left;
  }
}

@media (max-width: 420px) {
  /* Below this the pin costs more room than it earns. */
  .heroMode .omniIcon {
    display: none;
  }

  .heroMode .omniInput {
    padding-left: 0.75rem;
  }

  .heroMode .searchButton {
    padding: 0.75rem 0.875rem;
  }
}
