/* --------------------------------------------------------------------------
   お問い合わせフォーム「国」の検索付きセレクト
   （assets/js/country-select.js が生成する DOM に対応）

   style_form.css は header.php から生の <link> で読まれていて
   バージョン文字列が付かない（.htaccess で CSS は1週間キャッシュ）。
   更新のたびに古いCSSが残るのを避けるため、このファイルは functions.php から
   filemtime 付きで enqueue している。
   -------------------------------------------------------------------------- */

/* 元の <select>。値の保持と CF7 の検証にだけ使うので画面には出さない */
.rinxs-combobox__native {
  display: none;
}

.rinxs-combobox {
  position: relative;
  margin-bottom: 15px;
}

/*
 * style_form.css の .wpcf7-form input[type="text"] と詳細度が並ぶと
 * 読み込み順（wp_head が先）で負けるため、.rinxs-combobox を挟んで一段上げる。
 */
.wpcf7-form .rinxs-combobox input.rinxs-combobox__input {
  width: 100%;
  padding: 15px 40px 15px 15px;
  margin-bottom: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: 'Georgia', serif;
  font-size: 16px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
}

.wpcf7-form .rinxs-combobox input.rinxs-combobox__input:focus {
  border-color: #999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* CF7 の検証エラー時。クラスは非表示の <select> に付くので隣接セレクタで拾う */
.rinxs-combobox__native.wpcf7-not-valid + .rinxs-combobox input.rinxs-combobox__input {
  border-color: #dc3232;
}

.rinxs-combobox__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* display: flex が [hidden] の既定値に勝つので明示的に打ち消す */
.rinxs-combobox__list[hidden] {
  display: none;
}

.rinxs-combobox__option {
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}

.rinxs-combobox__option[hidden] {
  display: none;
}

.rinxs-combobox__option:hover,
.rinxs-combobox__option.is-active {
  background-color: #eef0f7;
}

.rinxs-combobox__option.is-selected {
  font-weight: bold;
}

.rinxs-combobox__empty {
  padding: 10px 15px;
  color: #888;
  font-size: 14px;
}

.rinxs-combobox__empty[hidden] {
  display: none;
}