/* ================== 版面變數 ================== */
:root{
  --slm-map-h-desktop: 560px;
  --slm-map-h-mobile: 420px;
  --slm-gap: 14px;
  --slm-btn-h: 46px;
  --slm-blue: #006497;
  --slm-blue-dark: #005480;
  --slm-blue-light: #003f7d;
}

/* ===== 篩選器：兩列兩欄、max-width:800 + 置中 ===== */
#slm-filters{
  max-width: 1000px;
  margin: 0 auto 16px;
  display: grid;
  grid-auto-flow: column; 
  grid-auto-columns: minmax(180px, 1fr);
  gap: 12px;
}

/* 四個控件外觀一致（深藍底＋白字） */
#slm-filters select,
#slm-filters button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--slm-btn-h);
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  width: 100%;
  /* background: var(--slm-blue); */
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

#slm-filters button#slm-use-location {
  background: var(--slm-blue);
}

#slm-filters select {
  background: var(--slm-blue-light);
}


/* 下拉箭頭（深色背景也清楚） */
#slm-filters select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.95) 50%),
    linear-gradient(135deg, rgba(255,255,255,.95) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 12px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

#slm-filters select:hover,
#slm-filters button:hover{ filter: brightness(1.05); }

#slm-filters select:focus,
#slm-filters button:focus{
  outline: 2px solid var(--slm-blue-dark);
  outline-offset: 2px;
}

/* —— 如果想改成「白底＋黑字＋黑邊框」，把上面背景/顏色拿掉，改成下面這段 —— */
/*
#slm-filters select,
#slm-filters button{
  background:#fff; color:#000; border:1px solid #000;
}
#slm-filters select{
  background-image:
    linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%);
}
*/
@media (max-width: 768px) {
  #slm-filters {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    padding: 0px 20px !important;
  }
}
/* 手機：單欄 */
/* @media (max-width:600px){
  #slm-filters select,
  #slm-filters button{
    font-size: 14px;
    min-height:44px;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px;
  }
} */
/* @media (max-width:360px){
  #slm-filters{
    grid-template-columns: 1fr;
  }
} */

/* ===== 主版面：列表 25% / 地圖 75%，等高 ===== */
#slm-wrapper{
  display: grid;
  grid-template-columns: 25% 75%;
  gap: var(--slm-gap);
  align-items: start;
}

/* 地圖固定高；列表超出可滾動 */
#slm-map-container{
  height: var(--slm-map-h-desktop);
  position: relative; /* 讓遮罩與提示能絕對定位 */
  z-index: auto; 
}

/* === Ctrl 滾輪提示：全幅灰色遮罩 + 置中文字 === */
/* 全幅遮罩（整張地圖變暗） */
#slm-map-container .slm-ctrl-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);  /* 想更暗調到 .55 ~ .65 */
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;          /* 不阻擋滑鼠事件 */
  z-index: 1800 !important;
}
/* 保險：把 Leaflet 控制列壓低一點（可選） */
#slm-map-container .leaflet-top,
#slm-map-container .leaflet-bottom { z-index: 1200 !important; }


/* 中央提示文字（透明底，疊在遮罩上） */
#slm-map-container .slm-ctrl-hint{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  padding:12px 16px; border-radius:10px;
  background:transparent; color:#fff;
  font-size:16px; line-height:1.4;
  pointer-events:none; user-select:none;
  opacity:0; transition:opacity .2s ease;
  z-index: 1810 !important; text-align:center;
}
#slm-map-container .slm-ctrl-hint .kbd{
  display:inline-block; padding:2px 6px; border-radius:6px;
  background:rgba(255,255,255,.18); font-weight:700;
}
/* 顯示狀態 */
#slm-map-container .slm-ctrl-mask.show,
#slm-map-container .slm-ctrl-hint.show{ opacity:1; }

/* ===== 清單樣式 ===== */
#slm-list{
  max-height: var(--slm-map-h-desktop);
  overflow: auto;
  scroll-behavior: smooth;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.slm-branch{
  position: relative;
  padding: 12px 12px 36px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background .2s ease;
}
.slm-branch:hover{ background:#fafafa; }
.slm-branch.active{ background:#ffeec2; font-weight:600; }
.slm-branch h4{ font-size:18px; margin:0 0 6px; }
.slm-meta{ font-size:15px; color:#444; }
.slm-icons{ margin-top:8px; }
.slm-icon{ font-size:18px; text-decoration:none; margin-right:10px; }

.slm-type-label{
  position:absolute; right:12px; bottom:10px;
  background-color:#006497; color:#fff;
  padding:4px 8px; font-size:13px; border-radius:4px;
  z-index:10; white-space:nowrap;
}

/* ===== 地圖 popup ===== */
.slm-popup{ font-size:16px; line-height:1.6; }

/* ===== 手機側滑清單（沿用你的行為） ===== */
#slm-wrapper.mobile #slm-list{
  position: fixed; top:0; left:-100%;
  width:80%; max-width:320px; height:100%;
  background:#fff; z-index:20001 !important;
  transition:left .3s ease; overflow-y:auto;
  box-shadow:2px 0 8px rgba(0,0,0,.2);
}
#slm-wrapper.mobile.show-list #slm-list{ left:0; }

#slm-toggle-btn{
  position:absolute; top:20px; right:20px; z-index:1300;
  background:#333; color:#fff; padding:10px 15px;
  border-radius:6px; font-size:14px; cursor:pointer;
}
#slm-toggle-btn:hover{ background:#555; }

/* ===== RWD：平板/手機 ===== */
@media (max-width:768px){
  #slm-wrapper{ grid-template-columns: 1fr; }
  #slm-map-container{ height: var(--slm-map-h-mobile); }
  #slm-list{ max-height: 100vh; }
  #slm-toggle-btn{ top:15px; right:15px; }
}

/* 桌機：卷軸微調（可選） */
@media (min-width:1024px){
  #slm-list::-webkit-scrollbar{ width:10px; }
  #slm-list::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }
}

/* 針對header調整 */
.elementor-location-header,
.elementor-sticky--active.elementor-sticky--effects,
header.site-header,
#site-header,
#masthead {
  z-index: 10000 !important;   /* 高於 Leaflet 控制鈕(1000) 與 popup(700) */
}