/* =================================================================
 * c-search-dialog — PC 共通検索ダイアログ（サイト内検索 / 製品検索）
 * Figma: 4997:217033 "SerchBox"（製品検索ビュー）
 *   https://www.figma.com/design/9BeImZo6qSqbBipfxuh4yW/?node-id=4997-217033
 *
 * - PC 専用（≤1024px は site-shell/sp の検索に委譲し非表示）
 * - 値は tokens.css 経由。Figma 固有の実寸（px）はそのまま採用
 * - SVG はファイル外出し（search.svg / close.svg を mask-image ＋ currentColor）
 * - 開閉/タブ切替 JS: shared/site-shell/scripts.blade.php（#srch-overlay 等）
 * - 区分→カテゴリー連動・カテゴリーCSV化 JS: public/js/app.js
 *
 * ※ Figma 未指定で当方判断: ①背景オーバーレイの暗幕色（旧実装準拠）
 *    ②チェック「選択時」見た目（ラジオ選択時に倣う）③hover 状態
 * =================================================================*/

/* ---- オーバーレイ（暗幕） ---------------------------------------- */
.c-search-dialog {
  position: fixed;
  inset: 0;
  /* Figma 4997:217030: 暗幕(Rectangle 4223)はヘッダーの背面に敷き、ヘッダーは暗幕の上に見える */
  z-index: calc(var(--header-z) - 1);
  display: none;
  align-items: flex-start; /* ダイアログはヘッダー直下に上寄せ（SerchBox y≈ヘッダー下端） */
  justify-content: center;
  box-sizing: border-box;
  padding: var(--header-height-pc) 32rem 32rem; /* 上=ヘッダー高さ分 */
  background: rgba(0, 0, 0, 0.6); /* Figma 未指定: 旧実装準拠の暗幕 */
}

.c-search-dialog.is-open { display: flex; }

/* ---- 白カード本体（SerchBox） ----------------------------------- */
.c-search-dialog__box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20rem;
  box-sizing: border-box;
  width: 100%;
  /* Figma 4997:217040 詳細検索パネル=1120px ＋ 本カードの padding 32px×2 = 1184px */
  max-width: 1184rem;
  max-height: calc(100vh - var(--header-height-pc) - 32rem);
  overflow-y: auto;
  padding: 32rem;
  background: var(--color-white);
  border-radius: 32rem;
}

/* ---- タブ ------------------------------------------------------- */
.c-search-dialog__tabs {
  display: flex;
  justify-content: center;
  padding-left: 5rem;
}

/* タブ本体は共通 c-tab（pill・on-bg）へ統合。ここでは横幅だけ Figma 値（680px）に固定 */
.c-search-dialog__tablist {
  width: 680rem;
  max-width: 100%;
}

/* ---- パネル（詳細検索 ＝ #F5F2F0 のボックス） -------------------- */
.c-search-dialog__panel {
  box-sizing: border-box;
  width: 100%;
  padding: 60rem;
  background: var(--color-bg-02);
  border-radius: 24rem;
}

.c-search-dialog__panel--is-hidden { display: none; }

.c-search-dialog__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rem;
  width: 100%;
}

.c-search-dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  width: 100%;
}

/* ---- 行（ラベル + コントロール） -------------------------------- */
.c-search-dialog__row {
  display: flex;
  align-items: center;
  gap: 40rem;
  width: 100%;
}

.c-search-dialog__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8rem;
  width: 110rem;
}

.c-search-dialog__bullet {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: var(--color-key);
}

.c-search-dialog__label-text {
  color: var(--color-neutral-01);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
}

/* 区分ラジオ群 / カテゴリーチェック群 */
.c-search-dialog__radios,
.c-search-dialog__checks {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 10rem;
  min-width: 0;
}

.c-search-dialog__checks { align-content: flex-start; }

.c-search-dialog__empty {
  margin: 0;
  color: var(--color-neutral-02);
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);
}

/* ---- ラジオ（radio_btn） ---------------------------------------- */
.c-search-dialog__radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  box-sizing: border-box;
  height: 36rem;
  padding: 0 14rem 0 10rem;
  background: var(--color-white);
  border: 2rem solid transparent;
  border-radius: 20rem;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

.c-search-dialog__radio--is-active,
.c-search-dialog__radio:has(.c-search-dialog__radio-input:checked) {
  background: var(--color-bg-03);   /* 選択=BG03（Figma radio_btn 準拠） */
  border-color: var(--color-white);
}

.c-search-dialog__radio-input,
.c-search-dialog__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-search-dialog__radio-mark {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18rem;
  height: 18rem;
  background: var(--color-white);
  border: 1.5rem solid var(--color-border);
  border-radius: 50%;
}

.c-search-dialog__radio-input:checked + .c-search-dialog__radio-mark { border-color: transparent; }

.c-search-dialog__radio-input:checked + .c-search-dialog__radio-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10rem;
  height: 10rem;
  background: var(--color-key);
  border-radius: 50%;
}

/* ---- チェックボックス（checkbox_radio_btn） --------------------- */
.c-search-dialog__check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  box-sizing: border-box;
  padding: 10rem 14rem 10rem 12rem;
  background: var(--color-white);
  border: 2rem solid transparent;
  border-radius: 20rem;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

/* 選択時の見た目は Figma 未提供（ラジオ選択時に倣う） */
.c-search-dialog__check:has(.c-search-dialog__check-input:checked) {
  background: var(--color-bg-03);
  border-color: var(--color-white);
}

/* 標準チェックボックス（c-field__check-ui）に統一。
   旧: 空=白+グレー枠 / 選択=オレンジ塗り+白チェック（ダイアログだけ別デザインだった）
   正: 空=bg-03 のグレー塗り / 選択=白地+キーカラー(オレンジ)チェック */
.c-search-dialog__check-mark {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16rem;
  height: 16rem;
  background: var(--color-bg-03);
  border: none;
  border-radius: var(--radius-sm);   /* 4px */
}

.c-search-dialog__check-input:checked + .c-search-dialog__check-mark {
  background: var(--color-white);
}

.c-search-dialog__check-input:checked + .c-search-dialog__check-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 5.5rem;
  height: 10rem;
  border: solid var(--color-key);
  border-width: 0 2.5rem 2.5rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-search-dialog__radio-text,
.c-search-dialog__check-text {
  color: var(--color-neutral-01);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  line-height: normal;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.c-search-dialog__radio-input:focus-visible + .c-search-dialog__radio-mark,
.c-search-dialog__check-input:focus-visible + .c-search-dialog__check-mark {
  outline: 2rem solid var(--color-key);
  outline-offset: 2rem;
}

/* ---- 区切り線（line / #D9D9D9 88%） ----------------------------- */
.c-search-dialog__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-bg-disabled);
}

/* ---- キーワード入力（white_btn） -------------------------------- */
.c-search-dialog__input-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.c-search-dialog__input {
  box-sizing: border-box;
  width: 100%;
  height: 56rem;
  padding: 0 32rem;
  background: var(--color-white);
  border: 0;
  border-radius: 28rem;
  color: var(--color-neutral-01);
  font-family: var(--font-jp);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}

.c-search-dialog__input::placeholder { color: var(--color-neutral-02); }

.c-search-dialog__input:focus-visible {
  outline: 2rem solid var(--color-key);
  outline-offset: 2rem;
}

/* ---- アクションボタン（reset_icon_btn / search_icon_btn） -------- */
.c-search-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 24rem;
}

.c-search-dialog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  box-sizing: border-box;
  height: 56rem;
  border: 2rem solid transparent;
  border-radius: 28rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

.c-search-dialog__btn--reset {
  padding: 0 20rem 0 32rem;
  background: var(--color-bg-03);
  border-color: var(--color-white);
  color: var(--color-black);
}

.c-search-dialog__btn--search {
  min-width: 180rem;
  padding: 0 20rem 0 40rem;
  background: var(--color-key);
  border-color: var(--color-key);
  color: var(--color-white);
}

/* hover は Figma 未指定（控えめなデフォルト） */
.c-search-dialog__btn--reset:hover { background: var(--color-neutral-04); }
.c-search-dialog__btn--search:hover {
  background: var(--color-orange-01);
  border-color: var(--color-orange-01);
}

.c-search-dialog__btn-icon {
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.c-search-dialog__btn-icon--search {
  width: 20rem;
  height: 20rem;
  -webkit-mask-image: url("/img/common/icons/search.svg");
          mask-image: url("/img/common/icons/search.svg");
}

.c-search-dialog__btn-icon--reset {
  width: 14rem;
  height: 14rem;
  color: var(--color-key); /* リセットは文字=黒・×=キー色 */
  -webkit-mask-image: url("/img/common/icons/close.svg");
          mask-image: url("/img/common/icons/close.svg");
}

/* ---- 閉じる ----------------------------------------------------- */
.c-search-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  width: 100%;
  padding: 0 8rem;
  background: none;
  border: 0;
  color: var(--color-neutral-01);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  cursor: pointer;
}

.c-search-dialog__close-icon {
  position: relative;
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background: var(--color-light-orange-02);
  border-radius: 10rem;
}

.c-search-dialog__close-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8.33rem;
  height: 8.33rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/close.svg") no-repeat center / contain;
          mask: url("/img/common/icons/close.svg") no-repeat center / contain;
}

/* ---- PC 専用（≤1024px は SP 検索に委譲） ------------------------ */
@media (max-width: 1023.98px) {
  .c-search-dialog { display: none !important; }
}