/* =============================================================
   aetta — フォーム部品の調整
   base.css（M-Raising から継承）が input 全般に白背景＋枠線を
   !important で当てているため、select2 の内部部品まで枠が付く。
   ここで select2 をテーマの入力欄と同じ見え方に整える。
   ============================================================= */

/* select2 の外枠を、他の入力欄と同じ意匠にする。
   ⚠️ `--inline` は並び替えなどの小さいセレクト。テーマが 25px 前後で組んでいるので
   ここで min-height / padding を当てると引き伸ばされ、矢印だけ上に取り残される。 */
.select2-container--default .select2-selection--single:not(.select2-selection--inline),
.select2-container--default .select2-selection--multiple{
  background:#fff !important;
  border:1.5px solid rgba(22,35,59,.28) !important;
  border-radius:0 !important;
  min-height:46px;
  padding:4px 6px;
}

/* 並び替えなどの inline セレクト：高さはテーマに任せ、見た目だけ他の入力欄に合わせる */
.select2-container--default .select2-selection--inline{
  background:#fff !important;
  border:1.5px solid rgba(22,35,59,.28) !important;
  border-radius:0 !important;
  min-height:0;
  padding:0;
}
.select2-container--default .select2-selection--inline .select2-selection__rendered{
  line-height:1.5;
  padding:7px 28px 7px 10px;
}
/* 矢印を上下中央に置く（既定は上寄せで、箱の高さが変わるとずれる） */
.select2-container--default .select2-selection--inline .select2-selection__arrow{
  top:0;
  height:100%;
}

/* ---------- 検索フォーム：キーワード・セレクト・ボタンの高さを揃える ----------
   テーマは3つを別々に組んでいて、実測でキーワード48px / select2 58px / ボタン50px と
   バラバラだった。1つの変数で揃える。 */
.hp-form--listing-search,
.hp-form--vendor-search{
  --emr-control-h:48px;
}
.hp-form--listing-search .hp-form__fields,
.hp-form--listing-search .hp-form__footer,
.hp-form--vendor-search .hp-form__fields,
.hp-form--vendor-search .hp-form__footer{
  align-items:center;
}
.hp-form--listing-search .hp-field--search,
.hp-form--listing-search .select2-selection--single,
.hp-form--listing-search .hp-form__button,
.hp-form--vendor-search .hp-field--search,
.hp-form--vendor-search .select2-selection--single,
.hp-form--vendor-search .hp-form__button{
  height:var(--emr-control-h);
  min-height:var(--emr-control-h) !important;
  box-sizing:border-box;
}
.hp-form--listing-search .select2-selection--single,
.hp-form--vendor-search .select2-selection--single{
  padding:0 !important;
  display:flex;
  align-items:center;
}
.hp-form--listing-search .select2-selection__rendered,
.hp-form--vendor-search .select2-selection__rendered{
  line-height:1.4;
  width:100%;
}
.hp-form--listing-search .select2-selection__arrow,
.hp-form--vendor-search .select2-selection__arrow{
  top:0;
  height:100%;
}
.hp-form--listing-search .hp-form__button,
.hp-form--vendor-search .hp-form__button{
  padding-top:0;
  padding-bottom:0;
  line-height:1;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple{
  border-color:var(--mr-cobalt) !important;
}

/* ★ 内部の検索用 input には枠も背景も付けない
   （これが「空の四角」に見えていた正体） */
.select2-container .select2-search__field,
.select2-container .select2-search--inline .select2-search__field{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  min-height:0 !important;
  padding:4px 2px !important;
  margin:0 !important;
}

/* プレースホルダの文字 */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.select2-container .select2-search__field::placeholder{
  color:rgba(22,35,59,.5);
}

/* 選択済みタグのチップ */
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--mr-cobalt) !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  padding:3px 8px !important;
  margin:3px 4px 3px 0 !important;
  font-size:13px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color:#fff !important;
  margin-right:6px;
  border:0 !important;
  background:transparent !important;
}

/* ドロップダウン */
.select2-container--default .select2-dropdown{
  border:1.5px solid var(--mr-ink) !important;
  border-radius:0 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--mr-cobalt) !important;
}

/* =============================================================
   チェックボックス／ラジオ
   ネイティブのままだと background が transparent のままで、紙の地色が
   ボックスの中に透けて「枠だけ」に見える（実測 background:rgba(0,0,0,0)）。
   ブラウザ差も出るので自前で描く。
   ============================================================= */

/* 生成りの紙の上に置くので、白い面だけでは「四角い枠がある」ことが伝わらない。
   枠を 2px・不透明度を上げて、白い箱としてはっきり読めるようにする。
   1.5px はブラウザが 1px に丸めるので端数を使わない。 */
/* ⚠️ **HivePress のチェックボックス/ラジオは、本物の input が見えていない。**
 *
 * 親テーマ（hivetheme/frontend.min.css）が
 *   .hp-field input[type=checkbox]{opacity:0;position:absolute;visibility:hidden}
 * で input を隠し、隣の `span::before` を枠、`span::after` をチェック印として
 * 描いている。**input に background を当てても何も起きない。**
 * さらに ::before は background-color を持たないため、下の紙色がそのまま
 * 透けて「チェック欄が背景色になっている」状態になる。枠線も
 * rgba(7,36,86,.075)＝不透明度7.5%でほぼ見えない。
 *
 * 実際に効かせるべき対象は疑似要素のほう。下の .hp-field ... ::before を見ること。
 *
 * こちらの input への指定は、HivePress 以外のフォーム（Contact Form 7 など
 * .hp-field を持たないもの）のために残している。 */
input[type="checkbox"],
input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0 8px 0 0;
  background:#fff;
  border:2px solid #70757C;
  border-radius:0;
  cursor:pointer;
  transition:background-color .12s, border-color .12s;
}

input[type="radio"]{ border-radius:50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover{ border-color:var(--mr-cobalt); }

input[type="checkbox"]:checked{
  background-color:var(--mr-cobalt);
  border-color:var(--mr-cobalt-deep);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='square' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:13px;
}

input[type="radio"]:checked{
  border-color:var(--mr-cobalt);
  background-image:radial-gradient(var(--mr-cobalt) 0 45%, #fff 47%);
}

.hp-form input[type="checkbox"]:focus-visible,
.hp-form input[type="radio"]:focus-visible{
  outline:2px solid var(--mr-gold);
  outline-offset:1px;
}

/* ラベルは箱と文字を縦中央で揃える */
.hp-form label.hp-field--checkbox,
.hp-form label.hp-field--radio,
.hp-form .hp-field--checkboxes label,
.hp-form .hp-field--radio label{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

/* ---------- 絞り込みサイドバー：選択肢の縦の間延びを詰める ----------
   li は 24px + margin-bottom 8px で1行32px固定だった。曜日は1文字ラベルが
   7行縦積みで240px を占めていたので、横に並べて折り返す。 */
/* 構造は .hp-form__field--checkboxes > .hp-field--checkboxes > ul > li。
   グリッドを敷くのは ul。ラッパーの div に敷いても子が ul 1つなので効かない。 */
.hp-form--listing-filter .hp-field--checkboxes > ul{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:6px 10px;
}

.hp-form--listing-filter .hp-field--checkboxes > ul > li{
  margin:0;
}

/* ジャンルのラジオ（階層あり）は縦のままでよいが、行間だけ詰める */
.hp-form--listing-filter .hp-form__field--radio li{
  margin-bottom:2px;
}

/* フィールド間の余白（既定 24px）も少し詰める */
.hp-form--listing-filter .hp-form__field{
  margin-bottom:18px;
}

/* ---------- HivePress のチェックボックス/ラジオ（疑似要素で描かれる本体） ---------- */

/* 枠線の色は**不透明**にする。
 *
 * ブラウザは border-radius の付いた枠を「4辺の円弧」に分けて描き、角で継ぐ。
 * 色が半透明（rgba）だと継ぎ目で二重に重なって濃くなり、円が歪んで見える。
 * さらにこの要素は行ボックスの都合で left:382.5px のような**半ピクセル位置**に
 * 置かれるため、アンチエイリアスが左右で非対称になって歪みが強調される。
 * 不透明色にすると二重合成が起きないので、その分きれいに出る。
 *
 * 色 #70757C は、元の半透明指定を紙色に重ねたときの実効値。濃さは変えていない。 */
.hp-field input[type="checkbox"] + span::before,
.hp-field input[type="radio"] + span::before{
  background-color:#fff;
  border:2px solid #70757C;
  border-radius:0;
}

.hp-field input[type="radio"] + span::before{ border-radius:50%; }

.hp-field input[type="checkbox"] + span:hover::before,
.hp-field input[type="radio"] + span:hover::before{ border-color:var(--mr-cobalt); }

/* チェック済み。親テーマの既定色（緑 #15cd72）ではなくコバルトに揃える。 */
.hp-field input[type="checkbox"]:checked + span::before{
  background-color:var(--mr-cobalt);
  border-color:var(--mr-cobalt-deep);
}

.hp-field input[type="checkbox"]:checked + span::after{ border-color:#fff; }

/* ラジオは白い面に点を打つ形。面まで塗ると選択がわかりにくい。 */
.hp-field input[type="radio"]:checked + span::before{
  background-color:#fff;
  border-color:var(--mr-cobalt);
}

.hp-field input[type="radio"]:checked + span::after{ background-color:var(--mr-cobalt); }