/* TOP「セラピストを探す」の検索（セラピスト一覧と同じ動き。parts/js/therapist-search.js）で足した部分。
   元からある見た目は index.css の「セラピストを探す（Figma: 8:4757）」にある。
   index.css はキャッシュ用の番号（idx/index.php の ?=…）が main と develop で別々に進んでいて、
   触るとリリースのたびに衝突するので、追加分はこのファイルに分けている。 */

/* 出し分けは hidden 属性で行う。.search__item などは display を持っていて hidden が効かないので、ここで消す。 */
.search [hidden] { display: none !important; }

/* セラピスト名検索（こだわり検索の上に常に出す） */
.search__name { margin-top: 40px; }
.search__name + .search__filter { margin-top: 20px; }
.search__name-title {
  display: block; font-family: var(--font-mincho); font-size: 14px;
  letter-spacing: 0.1em; color: var(--color-brown);
}
.search__name-input {
  display: block; width: 100%; margin-top: 10px; padding: 15px 20px 15px 46px;
  border: 1px solid var(--color-gold-mid); border-radius: 10px;
  appearance: none; -webkit-appearance: none;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a8895a" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>') no-repeat left 20px center;
  /* 16px未満だと iOS Safari が入力時に画面を拡大する */
  font-family: var(--font-mincho); font-size: 16px; letter-spacing: 0.06em; color: var(--color-ink);
}
.search__name-input::placeholder { color: rgba(10, 10, 10, 0.4); }
.search__name-input:focus { outline: 2px solid var(--color-gold-mid); outline-offset: 2px; }

/* 0人の項目は消さずに、目立たないグレーにする（人数は選んだ条件に応じて付け替わる）。
   選んだまま0人になった項目は、選択中の色を薄くして出す。 */
.search__option.is-empty label { border-color: rgba(10, 10, 10, 0.12); background: transparent; color: rgba(10, 10, 10, 0.35); }
.search__option.is-empty .search__option-count { color: rgba(10, 10, 10, 0.3); }
.search__option.is-empty input:checked + label { opacity: 0.5; }

/* 条件をクリア（元の「上記条件で検索する」の位置） */
.search__clear {
  display: block; margin: 20px auto 0; padding: 6px 10px; border: 0; background: none;
  font-family: var(--font-mincho); font-size: 14px; letter-spacing: 0.08em;
  color: var(--color-brown); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* 該当人数（並び替えの上） */
.search__result {
  margin: 24px 0 0; font-family: var(--font-mincho); font-size: 14px;
  letter-spacing: 0.08em; color: var(--color-brown);
}
.search__result span { margin: 0 4px; font-family: var(--font-decor); font-size: 22px; line-height: 1; color: var(--color-ink); }
.search__result + .search__sort { margin-top: 12px; }

/* 一覧。消えるカードをこの中に絶対配置で浮かせ、高さを動かしている間も行が引き伸ばされないよう上に詰める。 */
.search__list { position: relative; align-content: start; }
/* 0件の案内は一覧の区切り線の下に出す（一覧が無いときだけ自前の区切り線を使う）。 */
.search__list + .search__empty { margin-top: 0; padding-top: 0; border-top: 0; }