/* ─────────────────────────────────────────────────────────────
   SEARCH RESULTS PAGE
   letbe.art
───────────────────────────────────────────────────────────── */

/* ── Search header (no divider, tight group) ────────────── */
.search-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--sp-12);
}
.search-header .lead { margin-bottom: 0; }

/* ── Search input ────────────────────────────────────────── */
.search-bar-wrap { margin-bottom: var(--sp-12); position: relative; }

.search-page-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--c-muted);
  pointer-events: none;
  z-index: 1;
}

.search-page-input {
  width: 100%;
  height: 48px;
  padding: 0 42px 0 42px;
  border: 1.4px solid var(--c-muted);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  font-weight: var(--fw-body);
  background: var(--c-white);
  color: var(--c-black);
  outline: none;
  transition: border-color var(--t-fast);
}
.search-page-input:hover    { border-color: rgba(10,10,10,0.5); }
.search-page-input:focus    { border-color: var(--c-black); }
.search-page-input::placeholder { color: var(--c-muted); }
.search-page-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-page-input::-ms-clear { display: none; }

.search-page-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  display: none;
  transition: color var(--t-fast);
}
.search-page-clear:hover { color: var(--c-black); }
.search-page-clear svg { width: 22px; height: 22px; }

/* ── Filter trigger row ──────────────────────────────────── */
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: var(--fw-ui);
  color: var(--c-muted);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.filter-btn:hover,
.filter-btn[aria-expanded="true"] { border-color: var(--c-black); color: var(--c-black); }
.filter-btn.active {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

.clear-all-btn {
  font-family: var(--font-sans);
  font-size: var(--text-13);
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--t-fast);
  padding: 0;
  background: none;
  border: none;
}
.clear-all-btn:hover { color: var(--c-black); text-decoration: underline; }

/* ── Result count ────────────────────────────────────────── */
.results-meta {
  font-size: var(--text-13);
  color: var(--c-muted);
  margin-bottom: var(--sp-16);
  min-height: 1.4em;
}

/* ── Results list ────────────────────────────────────────── */
.results-list { border-top: 1px solid var(--c-border); }

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--c-border);
  gap: var(--sp-12);
  text-decoration: none;
  color: inherit;
}
.result-item:hover .result-name { text-decoration: underline; }

.result-body  { flex: 1; min-width: 0; }

.result-name {
  font-size: var(--text-16);
  font-weight: var(--fw-ui);
  color: var(--c-black);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-meta {
  font-size: var(--text-13);
  color: var(--c-muted);
  margin-bottom: var(--sp-6);
}

.result-arrow {
  display: flex;
  align-items: center;
  color: var(--c-muted);
  flex-shrink: 0;
}
.result-arrow svg { width: 24px; height: 24px; }

.results-empty,
.results-loading {
  padding: var(--sp-48) 0;
  color: var(--c-muted);
  font-size: var(--text-16);
}

/* ── Discover section (empty state) ──────────────────────── */
.discover-section {
  padding-top: var(--sp-16);
}

.discover-label {
  font-family: var(--font-sans);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-12);
}

/* ─────────────────────────────────────────────────────────────
   FILTER PANEL  (fp-*)
───────────────────────────────────────────────────────────── */

/* ── Backdrop overlay ────────────────────────────────────── */
.fp-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms;
}
.fp-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel (outer — slides up from bottom) ───────────────── */
.fp {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  pointer-events: none;
}
.fp.visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Inner wrap (visual card, max-width centred on desktop) ─ */
.fp-wrap {
  max-width: 560px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border: 1px solid var(--c-border);
  border-bottom: none;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* On mobile: full-width, no side borders */
@media (max-width: 560px) {
  .fp-wrap {
    border-left: none;
    border-right: none;
  }
}

/* ── Drag handle ─────────────────────────────────────────── */
.fp-handle {
  flex-shrink: 0;
  width: 36px;
  height: 3px;
  background: var(--c-border);
  border-radius: 2px;
  margin: 10px auto 8px;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.fp-tabs {
  flex-shrink: 0;
  display: flex;
  border-bottom: 1px solid var(--c-border);
  padding: 0 var(--sp-16);
}

.fp-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 10px var(--sp-16);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: var(--fw-ui);
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.fp-tab:hover   { color: var(--c-black); }
.fp-tab.active  { color: var(--c-black); border-bottom-color: var(--c-black); }

/* ── Tab badge ───────────────────────────────────────────── */
.fp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--c-black);
  color: var(--c-white);
  font-size: var(--text-11);
  font-weight: var(--fw-ui);
}
.fp-badge:empty { display: none; }

/* ── Panes ───────────────────────────────────────────────── */
.fp-pane {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.fp-pane.active { display: flex; }

/* In-pane search (Art / Country) */
.fp-pane-search {
  flex-shrink: 0;
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--c-border);
}

.fp-search-input {
  width: 100%;
  height: 36px;
  padding: 0 var(--sp-12);
  border: 1.4px solid var(--c-muted);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: var(--fw-body);
  color: var(--c-black);
  background: var(--c-surface);
  outline: none;
  transition: border-color var(--t-fast);
}
.fp-search-input:hover { border-color: rgba(10,10,10,0.5); }
.fp-search-input:focus { border-color: var(--c-black); background: var(--c-white); }
.fp-search-input::placeholder { color: var(--c-muted); }

/* Chip area (scrollable) */
.fp-chips-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-16);
  -webkit-overflow-scrolling: touch;
}

/* ── Chip rows ───────────────────────────────────────────── */
.fp-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
}

.fp-chips-divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-12) 0;
}

/* ── Individual chips ────────────────────────────────────── */
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--text-12);
  font-weight: var(--fw-ui);
  color: var(--c-subtle);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.fp-chip:hover { border-color: var(--c-black); color: var(--c-black); }
.fp-chip.active {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}
.fp-chip-x {
  font-size: var(--text-14);
  line-height: 1;
  opacity: 0.7;
}
.fp-chip-count {
  font-size: var(--text-11);
  color: var(--c-muted);
  margin-left: 2px;
}
.fp-chip.active .fp-chip-count { color: rgba(255,255,255,0.6); }

/* Clear chip (plain text + ×, no border) */
.fp-chip-clear {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 4px;
  font-family: var(--font-sans);
  font-size: var(--text-12);
  color: var(--c-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t-fast);
}
.fp-chip-clear:hover { color: var(--c-black); }

/* Empty search state */
.fp-no-results {
  font-size: var(--text-13);
  color: var(--c-muted);
  padding: var(--sp-8) 0;
}