/* セレクトボックス（ドロップダウン）の共通スタイル。
   01_home.htmlの「お相手の名前」ドロップダウン（.simple-select）のために書かれたもので、
   カテゴリー（施術部位）の絞り込みでも同じ見た目を使い回すため、01_home.htmlのインライン
   <style>から切り出した（issue #716）。切り出しにあたって定義は変更していない。
   01_home.html固有の上書き（.home-toolbar-select系）は01_home.html側に残している。

   単一選択（.simple-select__itemがbutton）と複数選択（labelとチェックボックス）の
   両方がこの1組のクラスを共有する。複数選択の組み立ては shared/multi-select.js を参照。 */

.simple-select { position: relative; }
.simple-select__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--c-ink-900);
  background: #fff; border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer;
}
.simple-select__toggle:hover { background: var(--c-line-soft); }
.simple-select__toggle .material-symbols-outlined { font-size: 18px; color: var(--c-ink-500); transition: transform .15s; }
/* 「贈った相手」「もらった相手」ラベルの左に人影アイコンを添える（ユーザー指摘、2026-08-21）。
   黒塗りつぶしにし、開閉時に回転するのはキャレット(.simple-select__toggle-caret)のみに
   限定する（人影アイコンまで回転していたのを修正、ユーザー指摘、2026-08-21） */
.simple-select__toggle-label { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.simple-select__toggle-label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simple-select__toggle .simple-select__toggle-icon { font-variation-settings: 'FILL' 1; color: var(--c-ink-900); }
.simple-select__toggle.is-open .simple-select__toggle-caret { transform: rotate(180deg); }
.simple-select__panel {
  display: none; position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px;
}
.simple-select__panel.is-open { display: block; }
.simple-select__item {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  min-height: 44px; padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-size: 16px; font-weight: 400; color: var(--c-ink-900);
  background: none; border: 0; font-family: inherit;
}
.simple-select__item:hover { background: var(--c-line-soft); }
.simple-select__item.is-selected { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }
/* プラン名は複数選択のためチェックボックス付きのlabelにする（ユーザー指摘、2026-08-07） */
.simple-select__item input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }

/* 複数選択（shared/multi-select.js）専用。選択解除用の「すべて」をパネル先頭に常設し、
   チェックボックスの項目と区切り線で分ける。「すべて」は横スクロールチップだった頃の
   「すべて」チップと同じ役割で、押すと選択が全部外れる（issue #716） */
.simple-select__item--all { border-bottom: 1px solid var(--c-line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }