/* ============================================================
   地图收集（guides/index.html）
   只写本页专属样式：
     顶部 LOGO 行 / 面包屑 / 页标题 / 提示条 -> page-shell.css
     筛选栏（.filter-bar / .filter-row / .filter-label / .fbtn / .search-box / .filter-count）
        -> filter-bar.css（与角色图鉴「定位」那一行同规格）
     页脚 -> footer.css
   布局：筛选区在上、地图在下，宽度与其它二级页面同为 .container。
   ============================================================ */

/* ---------- 筛选栏内的本页控件 ---------- */
/* 搜索框挪到「区域」那一行右侧；共享 CSS 里 .filter-count 也是 margin-left:auto，
   两个 auto 会把空隙对半分，所以这里把计数的自动外边距收掉，让它紧贴搜索框。 */
#map-filters .filter-count{margin-left:0}

.search-box button{
  border:0;background:none;color:var(--text-dim);font-size:15px;line-height:1;padding: 0 2px;
}
.search-box button:hover{color:var(--brand-ink)}

.region-list{display:flex;gap: 8px;flex-wrap:wrap}

/* 分类：组名单独一行、具体分类另起一行（2026-10-08 用户要求）。
   原来是「组名 104px + 分类同行，放不下就只把分类折下去」，会出现有的组两行、
   有的组一行，看着不齐；现在统一成两行，分类从最左边开始排。 */
.type-groups{flex:1 1 100%;display:flex;flex-direction:column;gap: 10px}
.type-group{display:flex;flex-direction:column;align-items:flex-start;gap: 6px}
.type-group-head{flex:none;font-size:12px;color:var(--text-dim);line-height:18px;cursor:pointer}
.type-group-head b{color:var(--text);font-size:12px}
.type-list{display:flex;flex-wrap:wrap;gap: 8px;width:100%}
.type-list .fbtn{display:inline-flex;align-items:center;gap: 4px}
.type-list .fbtn i{font-style:normal;font-size:10px;opacity:.7;margin-left: 2px}

/* 分类图标：图片本身带一层底。深色底只给纯白剪影图标（DarkIcon），不作用于整个按钮。
   2026-09-23：底色由主题深色 #0d1020 改为中性墨色 —— 这是「图标可见性」需要，
   不是主题深色残留；若将来换成深色剪影图标，这里可以改成浅色底。 */
.type-list .fbtn .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:var(--r-sm);flex:none;
}
.type-list .fbtn .ico.ico-dark{background:rgba(24,34,56,.86)}
.type-list .fbtn .ico img{width:15px;height:15px;object-fit:contain;display:block}
.type-list .fbtn.on .ico.ico-dark{background:rgba(24,34,56,.75)}

.popup-types .ico{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;flex:none}
.popup-types .ico.ico-dark{background:rgba(24,34,56,.86)}
.popup-types .ico img{width:12px;height:12px;object-fit:contain;display:block}

.filter-check{display:flex;align-items:center;gap: 8px;font-size:12px;color:var(--text-dim);cursor:pointer;white-space:nowrap}
.filter-check input{width:16px;height:16px;accent-color:var(--brand-ink)}

.progress{flex:1 1 260px;display:flex;align-items:center;gap: 12px;min-width:200px}
.progress-track{flex:1 1 auto;height:8px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}
.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s}
.progress-text{flex:none;font-size:12px;color:var(--text-dim);white-space:nowrap}

/* ---------- 地图 ---------- */
.map-stage{position:relative;margin-bottom: 32px}
#map{
  width:100%;height:620px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#e9eef7;z-index:0;
}
.leaflet-container{font-family:inherit;background:#e9eef7}
.leaflet-control-zoom a{color:var(--text)!important;background:var(--card)!important;border-color:var(--line)!important}
.leaflet-popup-content-wrapper{background:var(--card);color:var(--text);border-radius:12px;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--card);border:1px solid var(--line)}
.leaflet-popup-content{margin: 12px 16px;font-size:13px;line-height:1.6;min-width:180px}
.popup-title{font-weight:700;font-size:14px;margin-bottom: 4px}
.popup-meta{font-size:12px;color:var(--text-dim)}
.popup-types{display:flex;align-items:center;gap: 4px;flex-wrap:wrap;margin-top: 8px}
.popup-types span{
  display:inline-flex;align-items:center;gap: 4px;font-size:11px;
  border:1px solid var(--line);border-radius:999px;padding: 1px 8px;color:var(--text-dim);
}
.popup-btn{
  margin-top: var(--sp-2);width:100%;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink-muted);
  font-size:var(--fs-12);padding: var(--sp-1);border-radius:var(--r-md);font-weight:600;cursor:pointer;
}
.popup-btn:hover{border-color:var(--brand);color:var(--brand-ink)}
/* 选中：描边式，不填充（与全局筛选按钮同一语言） */
.popup-btn.on{background:var(--surface-raised);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand-ink);font-weight:700}

.map-hint{
  position:absolute;left:12px;bottom:12px;z-index:400;pointer-events:none;
  background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:999px;
  padding: 4px 12px;font-size:12px;color:var(--text-dim);
}

/* 点位图标 */
.map-pin{display:block;width:26px;height:26px;position:relative}
.map-pin img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.map-pin::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;border:2px solid var(--accent);opacity:0;transition:.18s;
}
.map-pin.on::after{opacity:.85}
.map-pin.done img{opacity:.45;filter:grayscale(1)}
.map-pin.done::before{
  content:"✓";position:absolute;right:-3px;top:-4px;z-index:2;
  background:var(--green,#2f9c6c);color:#fff;font-size:10px;line-height:16px;
  width:16px;height:16px;text-align:center;border-radius:50%;
}

@media (max-width:900px){
  .type-group-head{width:100%}
  #map{height:70vh}
  .map-hint{left:auto;right:10px}
}