/* 通路地圖頁：沿用主網站 head.jspf 的字體、色彩、頁首、按鈕與內容寬度。 */
.channel-map-page {
  position:relative;
  z-index:0;
  isolation:isolate;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.channel-map-hero { min-height:210px; }
.channel-map-hero .in { padding:28px 0; }
.channel-map-section { padding-top:38px; }
.map-toolbar { align-items:center; }
.map-toolbar > div { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.map-search {
  width:min(620px,55%);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.map-search label { flex:1; }
.map-search input {
  width:100%;
  height:34px;
  padding:0 13px;
  color:var(--ink);
  background:#fff;
  border:1px solid #dde3e6;
  border-radius:12px;
  outline:0;
  font:inherit;
}
.map-search input:focus {
  border-color:#1bb;
  box-shadow:0 0 0 3px rgba(17,187,187,.12);
}
.map-search .btn.primary { background:#111; }
.map-search .btn.ghost { border-color:#e7ebed; }
.map-search .list-toggle { white-space:nowrap; }

.live-map-shell {
  position:relative;
  z-index:0;
  min-height:620px;
}
.live-map-shell.list-open {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:12px;
}
.live-map-wrap {
  overflow:hidden;
  background:#fff;
  border:1px solid #e9edef;
  border-radius:var(--r);
}
.live-map-wrap {
  position:relative;
  z-index:0;
  min-height:620px;
  isolation:isolate;
  contain:layout paint;
  backface-visibility:hidden;
}
#marketMap {
  position:relative;
  z-index:0;
  transform:translateZ(0);
  backface-visibility:hidden;
  width:100%;
  height:100%;
  min-height:620px;
  background:#eef3f2;
}
.live-map-status {
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:500;
  max-width:calc(100% - 24px);
  padding:7px 10px;
  color:#4f5f61;
  background:rgba(255,255,255,.94);
  border:1px solid #e1e7e8;
  border-radius:9px;
  box-shadow:0 5px 16px rgba(17,18,23,.08);
  backdrop-filter:blur(8px);
  font-size:11px;
}
.live-map-status.error { color:#943f4c; border-color:#f0cbd2; }

.location-panel[hidden] { display:none; }
.location-panel {
  min-width:0;
  height:620px;
  display:grid;
  grid-template-rows:42px minmax(0,1fr);
  overflow:hidden;
  background:#fff;
  border:1px solid #e9edef;
  border-radius:var(--r);
}
.location-list-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border-bottom:1px solid #e9edef;
}
.location-list-head span { color:var(--muted); font-size:10px; }
.location-list {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.location-row {
  width:100%;
  display:grid;
  grid-template-columns:11px minmax(0,1fr);
  gap:9px;
  padding:11px 12px;
  color:inherit;
  background:#fff;
  border:0;
  border-bottom:1px solid #f0f2f3;
  text-align:left;
  cursor:pointer;
}
.location-row:hover,
.location-row:focus-visible { background:var(--hover); outline:0; }
.location-dot {
  width:8px;
  height:8px;
  margin-top:5px;
  background:#c7d3d1;
  border-radius:50%;
}
.location-row.located .location-dot {
  background:#f05c96;
  box-shadow:0 0 0 3px rgba(240,92,150,.14);
}
.location-row.failed .location-dot { background:#d8a137; }
.location-name,
.location-address { display:block; overflow-wrap:anywhere; }
.location-name { font-size:12px; line-height:1.45; }
.location-address { margin-top:2px; color:var(--muted); font-size:10px; line-height:1.5; }

.notice {
  margin:14px 0 0;
  padding:10px 12px;
  color:var(--muted);
  background:var(--hover);
  border-radius:10px;
  font-size:11px;
}
.channel-map-marker { background:transparent; border:0; }
.channel-map-marker span {
  width:16px;
  height:16px;
  display:block;
  background:#f05c96;
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 3px 10px rgba(137,42,69,.35);
}
.map-popup strong,
.map-popup span {
  display:block;
  font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;
}
.map-popup strong { margin-bottom:3px; font-size:12px; }
.map-popup span { color:#5d656c; font-size:10px; line-height:1.5; }
.leaflet-popup-content-wrapper { border-radius:10px; }

@media (max-width:980px) {
  .channel-map-hero { min-height:180px; }
  .channel-map-hero .in { padding:24px 0; }
  .map-toolbar { align-items:stretch; flex-direction:column; }
  .map-search { width:100%; }
  .live-map-wrap,
  #marketMap { min-height:540px; }
  .live-map-shell.list-open { grid-template-columns:1fr; }
  .location-panel { height:380px; }
}

@media (max-width:560px) {
  .channel-map-hero { min-height:150px; }
  .channel-map-hero .in { padding:20px 0; }
  .channel-map-section { padding-top:28px; }
  .map-search { flex-wrap:wrap; }
  .map-search label { flex:1 0 100%; }
  .map-search .btn { width:auto; flex:1; }
  .live-map-wrap,
  #marketMap { min-height:460px; }
  .live-map-status { left:8px; bottom:8px; max-width:calc(100% - 16px); }
}