/* <select> を置き換えた UI の見た目（assets/select-picker.js）。
 *
 * 商品詳細のバリエーション（カラー / フレーバー）と、一覧ページの並び替えで
 * 共通して使う。どちらも中身は「ボタンの集まり」か「自前のドロップダウン」。
 *
 * ネイティブのプルダウンは開いたときの一覧を OS が描くため、書体も配色も
 * サイトに合わせられない。だから一覧ごと自前で作っている。
 */

/* 選択肢の少ない項目はボタンにする。 */
.astra-picker-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.astra-picker-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 120px;
  height: 48px;
  padding: 0 24px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: transparent;
  color: #CBCBCB;
  font-family: var(--astra-source-code-pro), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.astra-picker-pill:hover:not(:disabled) {
  border-color: #4EC3E1;
}

.astra-picker-pill[aria-checked='true'] {
  border-color: #4EC3E1;
  color: #4EC3E1;
}

.astra-picker-pill:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* サイズ（S / M / L / XL）だけは円形にして、一列に並べる。
 *
 * 幅は文字なりにしない。S と XL で丸の大きさが変わってしまい、粒が揃わない。
 * 48px の正円に固定すると 4つで 4×48 + 3×12（gap）= 228px に収まるので、
 * スマホの幅でも折り返さない（既定の pill は min-width 120px で、
 * 4つ並べると 516px になって2段に割れていた）。
 *
 * 印は select-picker.js が <select> の data-attribute_name から付ける。
 * 属性の登録名で決まるので、単品の商品ページ（ASTRΛ T-shirt）でも、
 * 組み合わせ商品に同梱されるとき（ASTRΛ Launch Pack の T シャツ）でも同じ形になる。
 * `size` も見ているのは、属性をグローバル属性（pa_size）に作り直したときのため。 */
.astra-picker-pills[data-astra-attribute='サイズ'],
.astra-picker-pills[data-astra-attribute='size'] {
  flex-wrap: nowrap;
}

.astra-picker-pills[data-astra-attribute='サイズ'] .astra-picker-pill,
.astra-picker-pills[data-astra-attribute='size'] .astra-picker-pill {
  flex: none;
  min-width: 0;
  width: 48px;
  padding: 0;
  border-radius: 50%;
}

/* デバイスの色（DARK / CLEAN）のボタンに置く色見本。
 *
 * 「ダーク」「クリーン」という文字だけでは、読んで初めてどちらが黒か分かる。
 * 文字の前に四角を置くと見ただけで対応が付く。一覧のカードに出している見本
 * （component-card-astra-product.css の .astra-color-swatch）と同じ形。
 *
 * 印を付けるのは composite-options.js で、デバイスの色の欄にしか付かない。
 * 色は選択肢ごとに --astra-swatch で渡される（対応表は PHP 側が持つ）。
 *
 * 枠線が要る。DARK は黒い背景に、CLEAN は白飛びして、どちらも枠が無いと
 * 四角に見えない。枠はボタンの選択状態に合わせず一定にする——選択中の
 * ボタンだけ見本の色が変わったように見えるため。 */
.astra-picker-pill__swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: var(--astra-swatch, transparent);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* --- 独自のドロップダウン（フレーバーなど選択肢の多い項目）------------
 *
 * ネイティブの <select> は、開いたときの一覧を OS が描くため、フォントも
 * 配色もサイトに合わせられない。閉じているときの見た目だけ整えても
 * 中身がちぐはぐになるので、一覧ごと作っている。 */
.astra-picker-dropdown {
  position: relative;
  max-width: 420px;
}

.astra-picker-dropdown__trigger {
  width: 100%;
  height: 48px;
  padding: 0 5.2rem 0 2rem;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--astra-source-code-pro), sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.astra-picker-dropdown__trigger:hover,
.astra-picker-dropdown__trigger[aria-expanded='true'] {
  border-color: #4EC3E1;
}

/* 未選択のあいだは文言を控えめに。 */
.astra-picker-dropdown__trigger.is-placeholder {
  color: #8C8C8C;
}

/* 選択済み。カラーのボタンと同じく枠も文字もシアンにする。
   矢印は背景画像なので、シアン版に差し替える。 */
.astra-picker-dropdown__trigger.is-selected {
  border-color: #4EC3E1;
  color: #4EC3E1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%234EC3E1' d='M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");
}

.astra-picker-dropdown__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.astra-picker-dropdown__option {
  padding: 12px 20px;
  color: #CBCBCB;
  font-family: var(--astra-source-code-pro), sans-serif;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.astra-picker-dropdown__option:hover,
.astra-picker-dropdown__option:focus-visible {
  outline: none;
  background-color: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.astra-picker-dropdown__option[aria-selected='true'] {
  color: #4EC3E1;
}

.astra-picker-dropdown__option[aria-disabled='true'] {
  opacity: 0.3;
  cursor: not-allowed;
}


/* 置き換え済みの <select> は値の持ち主として残すが、見せない。
 * WooCommerce 側の指定（クラス4つ）に勝てるよう、こちらもクラスを重ねる。 */
.woocommerce div.product form.cart .variations select.astra-picker-select--replaced,
.woocommerce .woocommerce-ordering select.astra-picker-select--replaced,
select.astra-picker-select--replaced {
  display: none;
}

/* 並び替えは一覧の右上に置く。幅は中身なりで、伸ばさない。 */
.woocommerce-ordering .astra-picker-dropdown {
  min-width: 220px;
}