/*
 * 定期便（商品ID 1560）の選択欄。
 * 読み込むのは定期便の商品ページだけ（mu-plugins/astra-subscription-support.php）。
 *
 * テーマは選択欄の <select> を隠し、JavaScript が作るボタン／独自プルダウンを表に出す
 * （assets/section-composite.css）。定期便ではその JavaScript を外しているので、
 * <select> を出し直し、テーマと同じ見た目（角丸・細い枠・白文字・右に山形）に整える。
 *
 * 指定はすべて body.postid-1560 に限定する。他の商品ページには当たらない。
 */

/* テーマの display:none を打ち消す。クラス数を1つ多くしたうえで !important。 */
body.postid-1560 .composite_form .component_options select.component_options_select {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 46px 12px 20px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background-color: transparent;
  /* 右端の山形（白・不透明度 70%） */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* 選択肢の一覧は端末標準の表示になるため、文字色を戻す（背景が白いため）。 */
body.postid-1560 .composite_form .component_options select.component_options_select option {
  color: #111;
  background-color: #fff;
}

body.postid-1560 .composite_form .component_options select.component_options_select:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

body.postid-1560 .composite_form .component_options select.component_options_select:focus,
body.postid-1560 .composite_form .component_options select.component_options_select:focus-visible {
  outline: none;
  border-color: var(--astra-cyan, #6ee7f2);
}

/* 欄と欄の間隔（テーマのボタン表示と同じ程度に保つ）。 */
body.postid-1560 .composite_form .composite_component .component_options_select_wrapper {
  margin-top: 4px;
}