/* Search page specific styles - build on top of base.css */

/* Hero */
.search-hero { position: relative; padding-block: var(--space-14) var(--space-9); background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent), linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%); }
.search-hero .hero-sub { color: var(--color-text-muted); margin-top: -8px; margin-bottom: var(--space-7); }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); }
.search-form input[type="search"] { font-size: 1.05rem; padding: 0.9rem 1rem; border-color: rgba(255,255,255,0.18); background: color-mix(in srgb, var(--color-surface) 88%, transparent); }
.quick-chips { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-full); background: rgba(255,255,255,0.04); color: var(--color-text); cursor: pointer; transition: background-color var(--duration-200) var(--ease-standard), border-color var(--duration-200) var(--ease-standard), transform var(--duration-100) var(--ease-standard); }
.chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); }
.chip:active { transform: translateY(0.5px); }

/* Filters */
.filters { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); background: var(--color-surface); }
.filters-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-7); }
.filter-group { display: grid; gap: var(--space-2); align-content: start; }
.filter-group.checkbox { align-content: center; }
.price-range .price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; }
.price-sep { color: var(--color-text-muted); }

/* Advanced */
.advanced { margin-top: var(--space-6); }
.advanced-summary { padding: 0.6rem 0.9rem; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); cursor: pointer; }
.advanced[open] .advanced-summary { background: rgba(255,255,255,0.06); }
.advanced-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-6); }
.adv-col { display: grid; gap: var(--space-2); }
.adv-help { grid-column: 1 / -1; color: var(--color-text-muted); }

/* Results */
.results { padding-block: var(--space-10); }
.results-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.results-summary { color: var(--color-text-muted); }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); margin-top: var(--space-6); }
.result-card { background: var(--color-elevated); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); display: grid; grid-template-rows: auto 1fr auto; }
.result-media img { width: 100%; height: 200px; object-fit: cover; background: #0f0f12; }
.result-body { padding: var(--space-6); display: grid; gap: var(--space-4); }
.result-title { font-size: var(--text-xl); }
.result-desc { color: var(--color-text-muted); margin: 0; }
.result-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-top: 1px solid rgba(255,255,255,0.06); }
.result-rating { color: var(--color-accent); font-weight: 600; }

/* Empty state */
.empty-state { margin-top: var(--space-8); }

/* Related, Popular, History, Tips */
.related, .popular, .history { padding-block: var(--space-9); }
.history-head { flex-direction: column; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); }
.tips .tips-list { margin: 0; padding-left: 1rem; display: grid; gap: var(--space-3); }

/* Responsive */
@media (max-width: 1100px) {
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .search-form { grid-template-columns: 1fr; }
  .filters-bar { grid-template-columns: 1fr 1fr; }
  .results-grid { grid-template-columns: 1fr; }
}