/* =============================================================================
   Mohammed Reviews · home.css   (Home only — shared card/badge/chip rules live in shared.css)
   ============================================================================= */

.hero-section { padding-top: clamp(20px, 4vw, 40px); }

/* ---------- search input ---------- */

.search-input { position: relative; display: flex; align-items: center; }
.search-input__icon {
  position: absolute; inset-inline-start: 12px;
  display: grid; place-items: center; color: var(--muted); pointer-events: none;
}
.search-input__icon .icon { width: 18px; height: 18px; }
.search-input__field { padding-inline-start: 40px; padding-inline-end: 40px; }
.search-input__field::-webkit-search-cancel-button { display: none; }
.search-input__clear {
  position: absolute; inset-inline-end: 4px;
  width: 36px; height: 36px;
}

/* ---------- filter bar ---------- */

.filter-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: clamp(20px, 3.5vw, 32px); }
.filter-bar__row { display: flex; align-items: center; gap: 10px; }
.chip-row { display: flex; gap: 8px; flex: 1; min-width: 0; padding-block: 2px; overflow-y: hidden; scrollbar-width: none; }   /* sideways only, no vertical scroll, no bar */
.chip-row::-webkit-scrollbar { display: none; }
.filter-bar__toggle { position: relative; flex: none; }
.filter-bar__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--cyan); color: var(--cyan-ink);
  border-radius: 999px; font-size: .6875rem; font-weight: 700;
}
.active-filters { min-height: 0; }
.active-filters .btn--ghost { color: var(--muted); }

/* ---------- filters dialog content ---------- */

.filters-form { display: grid; gap: 22px; }
.filters-group { display: grid; gap: 10px; }
.filters-group__title { font-size: var(--fs-sm); font-weight: 700; }
.filters-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- results grid + load more ---------- */

#results-slot { min-height: 120px; }

/* Upcoming section sits directly under the hero with less top padding than a normal section. */
#upcoming-section { padding-top: 0; }


/* Phones: rating lives inside the Filters sheet; the chip row would only scroll sideways in a cramped strip. */
@media (max-width: 767px) {
  .filter-bar__row .chip-row { display: none; }
  .filter-bar__toggle { width: 100%; justify-content: center; }
}