/*
  shows-filters.css
  The white filter card above the shows list: search, dropdowns, quick date chips, near-me row.
  Also holds the small button and chip styles the listing uses.
  Needs css/base.css.
*/

.fm-filters { display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--fm-radius); background: #fff; }
.fm-filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.fm-filters__row--chips { align-items: center; gap: 0.5rem; }
.fm-filters__row--near { padding-top: 1rem; border-top: 1px solid var(--fm-rule); }
.fm-filters__label { margin-right: 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fm-muted); }

/* ---------- Form fields ---------- */
.fm-field { display: grid; gap: 0.3rem; min-width: 0; }
.fm-field--grow { flex: 1 1 14rem; }
.fm-field label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fm-muted); }
.fm-field__pair { display: flex; gap: 0.5rem; }
.fm-field :where(input, select) {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.8rem;
  font: inherit; font-size: var(--fm-t-sm); color: var(--fm-ink);
  border: 1px solid var(--fm-rule); border-radius: 8px; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fm-field input[name="pc"] { width: 9.5rem; text-transform: uppercase; }
/* Hover darkens the border; focus is one solid blue line, 2px, no glow */
.fm-field :where(input, select):hover:not(:disabled, :focus-visible) { border-color: #a9bccb; }
.fm-field :where(input, select):focus-visible { outline: none; border-color: var(--fm-blue); box-shadow: inset 0 0 0 1px var(--fm-blue); }
.fm-field select:disabled, .fm-field option:disabled { color: #8b99a4; }

/* ---------- Buttons and chips ---------- */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.6rem; padding: 0.5rem 1.1rem;
  font: inherit; font-size: var(--fm-t-sm); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  color: var(--fm-blue); background: #fff; border: 1px solid var(--fm-blue); border-radius: 999px;
}
.fm-btn:hover { background: var(--fm-blue-tint); }
.fm-btn--primary { color: #fff; background: var(--fm-blue); }
.fm-btn--primary:hover { background: var(--fm-blue-deep); }
.fm-btn--plain { border-color: transparent; }

.fm-chip {
  min-height: 2.1rem; padding: 0.3rem 0.95rem; font: inherit; font-size: var(--fm-t-xs); font-weight: 600; cursor: pointer;
  color: var(--fm-ink); background: #fff; border: 1px solid var(--fm-rule); border-radius: 999px;
}
.fm-chip:hover { border-color: var(--fm-blue); color: var(--fm-blue); }
.fm-chip.is-on { color: #fff; background: var(--fm-blue); border-color: var(--fm-blue); }