/* ===========================================================================
   物件マップ表示（map-view.js 用）
   - 「地図で見る」ボタン / 全画面オーバーレイ / 価格ピン / スマホ用下部カード
   ========================================================================== */

/* --- 検索結果上の「地図で見る」ボタン --- */
.map-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.25rem 0 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.map-view-btn:hover { background: #111827; color: #fff; border-color: #111827; }
.map-view-btn[hidden] { display: none; }

/* --- 全画面オーバーレイ --- */
.bhm-overlay {
  position: fixed;
  inset: 0;
  /* ヘッダー(50)より上・物件詳細モーダル(100)より下 → ピンから開いた詳細は地図の上に重なる */
  z-index: 90;
  background: #e5e7eb;
  display: none;
}
.bhm-overlay.open { display: block; }
/* 地図ライブラリ付属CSS(.maplibregl-map{position:relative})に上書きされないよう
   セレクタを2段にして優先度を上げる。ここが負けると地図の高さが0になる。 */
.bhm-overlay .bhm-map {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- 上部の操作ボタン（参考デザイン準拠: 左に一覧へ戻る / 右に閉じる） --- */
.bhm-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem;
  pointer-events: none;
}
.bhm-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 9999px;
  background: #fff;
  color: #111827;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.bhm-btn:hover { transform: scale(1.04); }

/* アイコンだけのボタン（視点リセット等）: 3Dボタンと同じ丸型 */
.bhm-btn-icon {
  padding: 0.55rem;
}
.bhm-btn-icon svg { display: block; }

/* --- ズームボタン（＋/−）: 視点リセットボタンの下に縦並び ---
   （全画面地図では上部バーの下・右端） */
.bhm-zoom {
  position: absolute;
  top: 4.4rem;
  right: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 16;
  pointer-events: none; /* 隙間は地図操作を邪魔しない */
}
.bhm-zoom .bhm-btn {
  pointer-events: auto;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}

/* --- 価格ピン --- */
.bhm-pin {
  position: relative;
  background: #fff;
  color: #111827;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease;
}
/* 吹き出しの足（下向き三角） */
.bhm-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
/* ホバー/タップで拡大＋最前面（重なり許容の代わりの救済策） */
.bhm-marker { z-index: 1; }
.bhm-marker:hover, .bhm-marker.front { z-index: 100 !important; }

/* 一覧カードのホバー/クリックに連動した強調（赤い吹き出し） */
.bhm-marker.active { z-index: 110 !important; }
.bhm-marker.active .bhm-pin {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  transform: scale(1.08);
}
.bhm-marker.active .bhm-pin::after { border-top-color: #dc2626; }
.bhm-marker:hover .bhm-pin, .bhm-marker.front .bhm-pin { transform: scale(1.12); }
/* ※「閲覧済みグレー」表示は廃止（赤の強調表示を上書きしてしまうバグの原因だったため） */

/* --- ランドマーク（主要駅・観光地）---
   控えめな「小さな丸アイコン＋白フチ文字」。吹き出しにはしない。
   広域表示（ズーム10未満）ではJS側で非表示になる。 */
.bhm-landmark {
  z-index: 0; /* 価格ピンより背面 */
  pointer-events: none; /* クリックを妨げない */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'Noto Sans JP', sans-serif;
}
.bhm-landmark-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #4a6fa5; /* 地図のPOIアイコンと同系の青 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 地図の線の上でも見えるように白フチ（POIアイコンと同じ手法） */
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}
.bhm-landmark-icon svg { width: 100%; height: 100%; }
.bhm-landmark-name {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: #33475b; /* 地図のPOIラベルと同系の紺 */
  white-space: nowrap;
  /* 地図の上でも読めるように白フチ（通常の地名ラベルと同じ手法） */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* --- 位置情報なしメッセージ --- */
.bhm-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: #fff;
  padding: 1.1rem 1.6rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  color: #374151;
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 85%;
  text-align: center;
}

/* --- スマホ用: ピンをタップしたとき下部に出る物件カード --- */
.bhm-card {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.9rem;
  z-index: 20;
  display: none;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
}
.bhm-card.show { display: flex; }
.bhm-card-img { width: 7.5rem; height: 6rem; object-fit: cover; flex: 0 0 auto; background: #f3f4f6; }
.bhm-card-body { padding: 0.6rem 0.8rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bhm-card-title {
  font-size: 0.9rem; font-weight: 700; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
}
.bhm-card-meta { font-size: 0.75rem; color: #6b7280; font-family: 'Noto Sans JP', sans-serif; }
.bhm-card-price { font-size: 0.95rem; font-weight: 700; color: #111827; margin-top: auto; font-family: 'Noto Sans JP', sans-serif; }
.bhm-card-close {
  position: absolute; top: 0.3rem; right: 0.3rem;
  width: 1.7rem; height: 1.7rem; border: none; border-radius: 50%;
  background: rgba(17, 24, 39, 0.55); color: #fff; font-size: 1rem; line-height: 1;
  cursor: pointer;
}

/* 地図上のカーソル: 既定の白い手のひらが見にくいため標準の矢印にする
   （ドラッグ中はつかんでいることが分かるよう grabbing を維持） */
.bhm-map .maplibregl-canvas-container.maplibregl-interactive {
  cursor: default;
}
.bhm-map .maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: grabbing;
}

/* 3Dトグルの押下状態 */
.bhm-btn[aria-pressed="true"] {
  background: #111827;
  color: #fff;
}

/* --- 検索結果ページ: 右側の常時表示地図パネル（PCのみ） --- */
.results-map-panel { display: none; }

@media (min-width: 1024px) {
  .results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
    gap: 1.5rem;
    align-items: start;
  }
  .results-map-panel {
    display: block;
    position: sticky;
    top: 5.5rem; /* 固定ヘッダーの下に留まる */
    height: calc(100vh - 7rem);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }
  .results-map-panel[hidden] { display: none; }
  /* 地図コンテナをパネルいっぱいに（ライブラリ付属CSSより優先） */
  .results-map-panel .bhm-map {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* パネル右上の操作ボタン列（3D→リセット→＋→−）。
     一体感を出すため、全ボタンを同じ大きさの正円にして中心軸を揃える */
  .bhm-panel-max,
  .bhm-panel-reset {
    position: absolute;
    right: 0.75rem;
    z-index: 16;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    justify-content: center;
  }
  .bhm-panel-max { top: 0.75rem; }
  .bhm-panel-reset { top: 3.35rem; }
  /* リセットの下: ズーム（＋/−） */
  .results-map-panel .bhm-zoom {
    top: 5.95rem;
    right: 0.75rem;
  }
  /* 右に常時表示するので「地図で見る」ボタンは不要 */
  .results-layout #mapViewBtn { display: none !important; }
}

/* --- 画面下部の小さなお知らせ（診断・補足表示） --- */
.bhm-note {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  font-size: 0.78rem;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 90%;
  text-align: center;
  display: none;
}

/* MapLibre 既定UIの微調整 */
.bhm-overlay .maplibregl-ctrl-bottom-right { z-index: 5; }

/* --- K-2: 地図の白黒表示（検討中・map-view.js の MAP_GRAYSCALE で切替） -----
   背景タイルのcanvasだけをグレースケール化する。ピン・ランドマーク・
   下部カードはDOM要素のためカラーのまま残り、白黒地図の上で際立つ */
.bhm-grayscale .maplibregl-canvas {
  filter: grayscale(1) contrast(1.03);
}

/* --- 地図の最大化⇔復帰 (2026-09-08) ---
   PCのパネルから最大化した場合（.from-panel）は、上部バーの「一覧に戻る」「地図を閉じる」
   を隠し、最大化ボタンと同じ位置の ✕（元のサイズに戻す）だけを出す。
   スマホ（パネル無し）では従来どおり「一覧に戻る」「地図を閉じる」を使うので ✕ は隠す */
.bhm-overlay.from-panel #bhmList,
.bhm-overlay.from-panel #bhmClose { display: none; }
.bhm-overlay:not(.from-panel) #bhmMin { display: none; }
.bhm-overlay.from-panel .bhm-topbar { justify-content: flex-end; }

/* 最大化時（.from-panel）の ✕・リセット・ズームを、最大化前のパネルと同じ縦1列（右上）に揃える（2026-10-02） */
.bhm-overlay.from-panel .bhm-topbar { padding: 0; }
.bhm-overlay.from-panel #bhmMin,
.bhm-overlay.from-panel #bhmReset {
  position: absolute;
  right: 0.75rem;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  justify-content: center;
}
.bhm-overlay.from-panel #bhmMin { top: 0.75rem; }
.bhm-overlay.from-panel #bhmReset { top: 3.35rem; }
.bhm-overlay.from-panel .bhm-zoom { top: 5.95rem; right: 0.75rem; }

/* S10（2026-10-02）: 広域では料金ピンを点にして重なりを防ぐ。ホバー・強調中は料金を表示 */
.bhm-dots .bhm-marker:not(:hover):not(.active):not(.front) .bhm-pin {
  width: 14px; height: 14px; padding: 0; font-size: 0; border-radius: 50%;
  background: #1a2233; border-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.bhm-dots .bhm-marker:not(:hover):not(.active):not(.front) .bhm-pin::after { display: none; }

/* テスト用: ピン表示の切替ボタン（左上）。全画面・パネル共通 (2026-10-06) */
.bhm-pinmode {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 16;
  min-width: 3.4rem;
  height: 2.15rem;
  padding: 0 0.7rem;
  justify-content: center;
  font-size: 0.8rem;
}
.bhm-overlay .bhm-pinmode { top: 0.9rem; left: 0.9rem; z-index: 12; }
.bhm-overlay:not(.from-panel) .bhm-pinmode { left: auto; right: 0.9rem; top: 3.7rem; } /* 一覧から開いた全画面では左上が「一覧に戻る」なので右側に */