/* 物件地圖周邊生活機能（POI）marker 與圖例
   搭配 assets/js/poi_map.js；桌機與手機版共用 */

/* ---- 地圖層級 ---- */
/* Leaflet 內部的 z-index 很大（圖磚層 400、控制項 1000、popup 700）。地圖容器預設是
   position:relative + z-index:auto，不會建立堆疊脈絡，那些數字就直接跟頁面元素比大小，
   把 mo 版漢堡選單（.nav 的 z-index 只有 4）壓在底下。
   給容器 z-index:0 建立堆疊脈絡，Leaflet 的層級只在地圖內部有效，整塊地圖對外就只是 0。 */
.leaflet-container {
    z-index: 0;
}

/* ---- marker ---- */
/* Leaflet divIcon 的外框不要有底色／邊框 */
.leaflet-marker-icon.poi-marker {
    background: transparent;
    border: 0;
}

.poi-pin {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease-out;
    transform-origin: 50% 100%;
}

/* 圓形下方的小尖角，指向實際座標 */
.poi-pin:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #fff;
}

.poi-pin svg {
    width: 17px;
    height: 17px;
    fill: #fff;
    display: block;
}

.poi-pin:hover {
    transform: scale(1.18);
    z-index: 1000;
}

/* 類別配色：交通藍／學校咖啡／醫療紅／公園青綠／運動場館葡萄紫。
   綠色留給公園；學校用暗咖啡棕，靠明度與醫療的亮紅拉開（色相相近，只靠色相會混）。
   場館不用紫羅蘭（#7048e8）——那在 32px 圓點上會與交通藍糊在一起，色相得再拉遠。 */
.poi-pin--transit {
    background: #1c7ed6;
}

.poi-pin--school {
    background: #8a5a2b;
}

.poi-pin--hospital {
    background: #e03131;
}

.poi-pin--park {
    background: #0ca678;
}

.poi-pin--stadium {
    background: #ae3ec9;
}

/* 物件本身：水滴形（POI 是圓形），尺寸更大、色彩最重。
   刻意用「形狀」而非只用顏色跟 POI 區隔——醫療也是紅色系，只靠顏色會混淆。 */
.poi-pin--self {
    width: 42px;
    height: 42px;
    background: #c92a2a;
    border-width: 3px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}

/* 水滴自帶尖端，不需要另外的三角形 */
.poi-pin--self:after {
    display: none;
}

.poi-pin--self svg {
    width: 23px;
    height: 23px;
    transform: rotate(45deg);
}

.poi-pin--self:hover {
    transform: rotate(-45deg);
}

/* ---- popup ---- */
/* 桌機（hover 開啟）的 popup 讓滑鼠穿透：popup 內只有文字、沒有可點的東西，
   若攔截 pointer events，它會蓋住底下的 marker，讓那些 marker 滑不到也點不到 */
.leaflet-popup.poi-popup-wrap {
    pointer-events: none;
}

.poi-popup {
    min-width: 120px;
    line-height: 1.5;
}

.poi-popup .poi-popup__name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.poi-popup .poi-popup__meta {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

.poi-popup .poi-popup__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* ---- 圖例（可切換類別顯示）---- */
/* 由 JS 動態產生：POI 要不到資料時整塊不會出現，版面維持原樣 */
.poi-legend {
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.poi-legend__label {
    font-size: 13px;
    color: #666;
    margin-right: 2px;
}

.poi-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    background: #fff;
    color: #888;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s, border-color .12s, color .12s;
}

.poi-legend__chip:hover {
    border-color: #b5b5b5;
}

.poi-legend__chip .poi-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c9c9c9;
    flex: none;
}

/* 開啟中的類別：以該類別色標示 */
.poi-legend__chip.is-on {
    color: #fff;
    border-color: transparent;
}

.poi-legend__chip.is-on .poi-legend__dot {
    background: #fff;
}

.poi-legend__chip.is-on[data-group="transit"] {
    background: #1c7ed6;
}

.poi-legend__chip.is-on[data-group="school"] {
    background: #8a5a2b;
}

.poi-legend__chip.is-on[data-group="hospital"] {
    background: #e03131;
}

.poi-legend__chip.is-on[data-group="park"] {
    background: #0ca678;
}

.poi-legend__chip.is-on[data-group="stadium"] {
    background: #ae3ec9;
}

@media screen and (max-width: 640px) {
    .poi-legend {
        gap: 6px;
    }

    .poi-legend__chip {
        padding: 4px 10px;
        font-size: 12px;
    }
}