/*
   Leaflet 地図の見た目。

   gogolf.co.id（WordPress）のエリアLPと同じデザイン。移植元は
   go-golf-media テーマの css/minisite.min.css の .gg-map 系で、
   クラス名も向こうに揃えてある。片方を直したらもう片方も見ること。

   ピンは画像ではなく CSS で描く（JS 側は L.divIcon）。Leaflet 標準の
   marker-icon.png / marker-shadow.png を vendor に置いていないのは
   このため。leaflet.css が参照する画像は layers コントロール用で、
   そのコントロールを使っていないので 404 は出ない。
*/

.gg-map {
  position: relative;
  height: var(--gg-map-h, 380px);
  margin: 0 0 2.2em;
  border: 1px solid #E3E3E3;
  border-radius: 8px;
  overflow: hidden;
  background: #EDF2EA;
}

/*
   予約ページの #viewMap は昔から画面幅いっぱいの帯で、上下の
   セクションと隙間なく続いている。角丸と枠と下マージンはその文脈だと
   浮くので、帯として置くときはこの修飾子で外す。
*/
.gg-map--band {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.gg-map-canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/*
   地図が出る前と、JS が動かない環境で見えるもの。
   タイルの読み込みを待つあいだ灰色の穴が空くのを防ぐ意味もある。
*/
.gg-map-facade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(160deg, #F4F7F5 0%, #E4EDE1 100%);
}

.gg-map.is-open .gg-map-facade { display: none; }

.gg-map-list { list-style: none; margin: 0; padding: 0; max-width: 560px; width: 100%; }

.gg-map-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  padding: 7px 0 7px 20px;
  position: relative;
  border-bottom: 1px dashed #CFDCCB;
  font-size: 14px;
  line-height: 1.6;
}

.gg-map-list li:last-child { border-bottom: 0; }

.gg-map-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ED321;
  box-shadow: 0 0 0 2px #fff;
}

.gg-map-name { font-weight: 600; color: #2C2C2C; }
.gg-map-spec { color: #6B6B6B; font-size: 13px; }

/* ピンは CSS で描く。Leaflet の画像ファイルに依存しない */
.gg-pin span {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: #7ED321;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.gg-pop { min-width: 190px; }
.gg-pop strong { display: block; font-size: 15px; line-height: 1.45; margin-bottom: 2px; }
.gg-pop .gg-pop-spec { display: block; font-size: 12px; color: #6B6B6B; margin-bottom: 8px; }
.gg-pop .gg-pop-link {
  display: block;
  margin-top: 5px;
  padding: 7px 10px;
  border: 1px solid #7ED321;
  border-radius: 3px;
  color: #4E9C0F;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}
.gg-pop .gg-pop-link--book { background: #7ED321; color: #fff; }

/*
   このページは Bootstrap を読み込む「レガシー版」に入っている。
   Bootstrap の `img { max-width: 100% }` が Leaflet のタイル img にも効くと
   タイルが縮んで継ぎ目が出るので、地図の中だけ打ち消す。
*/
.gg-map img { max-width: none; }

@media (max-width: 767px) {
  .gg-map { height: 300px; }
  .gg-map-list li { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
  .gg-map-spec { display: block; width: 100%; }
}