/* =============================================================
   FIND PARLOUR — search results
   ============================================================= */

.bk-find__bar { background: var(--bk-surface); border-bottom: 1px solid var(--bk-border); padding-block: var(--bk-space-5); }
.bk-find__bar .bk-pill { box-shadow: var(--bk-shadow-sm); max-width: none; }

.bk-find__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-4); flex-wrap: wrap; margin-top: var(--bk-space-4); }
.bk-find__filters { display: flex; align-items: center; gap: var(--bk-space-2); flex-wrap: wrap; }
.bk-find__filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 40px; border-radius: var(--bk-radius-pill);
  background: var(--bk-bg); box-shadow: inset 0 0 0 1px var(--bk-border);
  font-size: var(--bk-fs-sm); cursor: pointer;
  transition: box-shadow var(--bk-dur-fast) var(--bk-ease);
}
.bk-find__filter:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.bk-find__filter i { color: var(--bk-text-muted); font-size: 13px; }
.bk-find__filter select { border: none; background: transparent; font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text); cursor: pointer; padding-block: 8px; }
.bk-find__filter select:focus { outline: none; }
/* Item 4: replace the global purple focus-square with a pill-shaped subtle ring
   and kill the mobile tap-highlight. */
.bk-find__filter, .bk-find__filter * { -webkit-tap-highlight-color: transparent; }
.bk-find__filter select:focus-visible { box-shadow: none; outline: none; }
.bk-find__filter:focus-within { box-shadow: inset 0 0 0 1.5px var(--bk-ink); border-radius: var(--bk-radius-pill); }
.bk-find__clear { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); padding: 8px 10px; border-radius: var(--bk-radius-pill); }
.bk-find__clear:hover { color: var(--bk-error); background: var(--bk-hover); }
.bk-find__count { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }

.bk-find__body { padding-block: var(--bk-space-8) var(--bk-space-16); }
.bk-find__title { font-size: var(--bk-fs-h2); font-weight: var(--bk-fw-extrabold); letter-spacing: -0.01em; margin-bottom: var(--bk-space-6); }
.bk-find__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bk-space-6) var(--bk-space-4); }

.bk-find__empty { grid-column: 1 / -1; text-align: center; padding: var(--bk-space-16) var(--bk-space-5); background: var(--bk-surface); border-radius: var(--bk-radius-lg); display: flex; flex-direction: column; align-items: center; gap: var(--bk-space-3); }
.bk-find__empty i { font-size: 44px; color: var(--bk-text-faint); }
.bk-find__empty h3 { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-bold); }
.bk-find__empty p { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-find__empty .bk-btn { margin-top: var(--bk-space-3); }

/* Pagination */
.bk-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--bk-space-10); }
.bk-pagination__btn, .bk-pagination__page {
  min-width: 40px; height: 40px; padding-inline: 8px; border-radius: var(--bk-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text);
  box-shadow: inset 0 0 0 1px var(--bk-border);
  transition: all var(--bk-dur-fast) var(--bk-ease);
}
.bk-pagination__btn:hover, .bk-pagination__page:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.bk-pagination__page.is-current { background: var(--bk-ink); color: #fff; box-shadow: none; }
.bk-pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.bk-pagination__dots { color: var(--bk-text-faint); padding-inline: 4px; }

/* ===== Item 9 — mobile single-search trigger → full-screen search sheet ===== */
.bk-find__mobiletrigger { display: none; }
.bk-find__searchhead { display: none; }

@media (max-width: 768px) {
  /* Hide the inline pill; show a single compact search bar instead. */
  .bk-find__searchwrap { display: none; }

  .bk-find__mobiletrigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--bk-radius-pill);
    background: var(--bk-bg);
    box-shadow: var(--bk-shadow-sm), inset 0 0 0 1px var(--bk-border);
    color: var(--bk-text-muted);
    font-size: var(--bk-fs-sm);
    text-align: start;
  }
  .bk-find__mobiletrigger i { color: var(--bk-primary-600); font-size: 16px; }
  .bk-find__mobiletrigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Full-screen sheet holding the real search pill. */
  .bk-find__searchwrap.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: var(--bk-z-modal);
    background: var(--bk-bg);
    padding: 0 16px env(safe-area-inset-bottom, 16px);
    overflow-y: auto;
  }
  .bk-find__searchhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--bk-border);
    position: sticky;
    top: 0;
    background: var(--bk-bg);
    margin-bottom: 16px;
  }
  .bk-find__searchhead-title { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-md); }
  /* Item 3: the search pill inside the sheet — fields stacked FULL-WIDTH. */
  .bk-find__searchwrap.is-open .bk-pill { box-shadow: none; width: 100%; flex-direction: column; gap: 10px; padding: 0; max-width: none; margin: 0; }
  .bk-find__searchwrap.is-open .bk-pill__field { width: 100%; }
  .bk-find__searchwrap.is-open .bk-pill__submit,
  .bk-find__searchwrap.is-open .bk-pill__field--submit,
  .bk-find__searchwrap.is-open .bk-pill button[type="submit"] { width: 100%; }

  /* Filters on a phone.
     These used to be forced onto one nowrap row with `flex: 1 1 0`, so all
     five chips collapsed to the same ~77px and the two dropdowns truncated to
     «۵ ▾» and «ج ▾» — unreadable, and the row still overflowed the toolbar.
     A two-column grid gives every chip a real, equal width and lets the set
     grow to a third row when the radius filter appears. */
  .bk-find__toolbar { flex-wrap: wrap; gap: 10px; }
  .bk-find__filters {
    flex: 1 1 100%;
    display: grid;
    /* auto-fit rather than a fixed 2 columns: a 320px phone gets two chips per
       row, a large phone or small tablet fits three or four instead of
       stretching four chips across the width. */
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
    align-items: stretch;
  }
  .bk-find__filter {
    width: 100%; min-width: 0; height: 44px;
    justify-content: flex-start; gap: 8px;
    padding-inline: 12px;
  }
  .bk-find__filter i { flex: 0 0 auto; }
  /* The label is the part that must give way, never the icon. */
  .bk-find__filter > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bk-find__filter select {
    width: 100%; min-width: 0; padding-inline-end: 2px;
    text-overflow: ellipsis;
  }
  /* «پاک کردن» reads as an action, not a filter, so it takes its own full row
     under the chips instead of sitting in a half-width cell beside one. */
  .bk-find__clear {
    grid-column: 1 / -1;
    justify-content: center;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--bk-border);
    height: 40px; display: inline-flex; align-items: center;
  }
  .bk-find__count { flex: 1 1 100%; margin: 0; }

  /* On a 320px phone the 148px track no longer fits twice, and auto-fit would
     drop to a single column — five stacked rows of chips. Force two columns
     there; the labels ellipsis slightly, which is a better trade than the
     height. */
  @media (max-width: 360px) {
    .bk-find__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-find__filter { padding-inline: 10px; gap: 6px; }
  }

  /* Prevent the page scrolling behind the open sheet. */
  body.bk-find-search-open { overflow: hidden; }
}

/* «باز است» toggle and «نزدیک من» radius search in the filter bar. */
.bk-find__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bk-find__toggle,
.bk-find__nearby {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font: inherit; white-space: nowrap;
}
.bk-find__nearby { background: none; }
.bk-find__toggle.is-on,
.bk-find__nearby.is-on {
    background: var(--bk-primary-tint);
    color: var(--bk-primary-600);
    box-shadow: inset 0 0 0 1px var(--bk-primary-300);
}
.bk-find__nearby[disabled] { opacity: .65; cursor: progress; }
/* Distance badge on a salon card when the results are location-based. */
.bk-salon-card__distance {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--bk-fs-xs); color: var(--bk-text-muted);
}