/* ชั้นน้ำท่วมบนแผนที่ + รายการพื้นที่เสี่ยง */
.wm{--fl1:#0ea5e9;--fl2:#1d4ed8}
.wm-fltoggle{padding:6px 11px;border:1px solid var(--w-line,#e3e8ef);border-radius:10px;background:#fffffff0;color:var(--w-mute,#64748b);font:500 12px "Kanit",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.wm-fltoggle .ic{width:13px;height:13px}
.wm-fltoggle[aria-pressed=true]{background:var(--fl2);border-color:var(--fl2);color:#fff}
.wm-fltoggle:focus-visible{outline:2px solid var(--w-acc,#0284c7);outline-offset:2px}

/* ป้ายหยดน้ำที่มุมจุดจังหวัด */
.wm-flb{position:absolute;right:1px;top:1px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid #fff;background:var(--fl1);pointer-events:none}
.wm-flb.f2{background:var(--fl2);width:18px;height:18px}
.wm-flb .ic{width:9px;height:9px;fill:currentColor;stroke:none}
.wm-flb.f2 .ic{width:11px;height:11px}
.wm-flb.in{position:static;flex:none;width:18px;height:18px}
.wm-ic{position:absolute}   /* ต้อง absolute ตาม Leaflet — ถ้าเป็น relative หมุดจะเลื่อนหลุดตำแหน่งเมื่อย่อแผนที่ */

.fl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--fl1);vertical-align:-1px;margin:0 3px 0 6px}
.fl-dot.f2{background:var(--fl2)}
.wm-legend2 .fl-dot{width:10px;height:10px}

.wm-flrow .lvt{background:#e0f2fe;color:#0369a1}
.wm-flrow.f2 .lvt{background:#dbeafe;color:#1d4ed8}
.wm-flrow:hover{border-color:#7dd3fc}
.wm-fl-list{max-height:min(320px,40vh)}

@media(max-width:760px){
  .wm-fltoggle{padding:5px 9px;font-size:11.5px}
}

/* วางแผนเส้นทาง */
.wm-routebar{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px 4px;border-top:1px solid var(--w-line2,#eef2f7)}
.wm-route-out{flex:1 1 260px;font-size:12.5px;line-height:1.6;color:var(--w-ink2,#334155)}
.wm-route-out[hidden]{display:none}
.wm-route-out b{color:var(--w-ink,#0f172a)}
#wm-route-btn[aria-pressed=true]{background:#16a34a;border-color:#16a34a}
.leaflet-popup-content{font-family:"Sarabun",sans-serif;font-size:13px;line-height:1.55}

.wm-fl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.wm-fl-head .wm-h{margin:0}
.wm-fl-head .wm-fltoggle{padding:4px 10px;font-size:11.5px;flex:none}
#wm-fl-fc[aria-pressed=true]{background:#7c3aed;border-color:#7c3aed}

/* ชั้นดาวเทียม GISTDA */
.wm-gdbar{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px 4px;border-top:1px solid var(--w-line2,#eef2f7)}
.wm-gdl{font-size:12px;font-weight:600;color:var(--w-mute,#64748b);margin-right:2px}
.wm-gd[data-gd=flood][aria-pressed=true]{background:#0369a1;border-color:#0369a1}
.wm-gd[data-gd=burn][aria-pressed=true]{background:#c2410c;border-color:#c2410c}
.wm-gd[data-gd=flood_rec][aria-pressed=true]{background:#0e7490;border-color:#0e7490}
.wm-gd[data-gd=drought_rec][aria-pressed=true]{background:#a16207;border-color:#a16207}
.wm-gdbar .wm-route-out{flex-basis:100%}
.wm-gd[data-gd=eonet][aria-pressed=true]{background:#6d28d9;border-color:#6d28d9}
#wm-gd-probe[aria-pressed=true]{background:#be123c;border-color:#be123c}

/* เครดิตแผนที่ให้เล็กและไม่เด่น */
.wm .leaflet-control-attribution{font-size:10px;padding:1px 6px;background:#ffffffb3;color:#64748b;border-radius:6px 0 0 0}
.wm .leaflet-control-attribution a{color:#64748b}

/* แผนที่เต็มจอ */
.wm-noscroll,.wm-noscroll body{overflow:hidden}
.wm-fs-close{position:absolute;top:10px;right:10px;z-index:900;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--w-line,#e3e8ef);border-radius:12px;background:#fff;color:#0f172a;cursor:pointer;box-shadow:0 2px 10px #0003}
.wm-fs-close:hover{background:#f1f5f9}
.wm-fs-close:focus-visible{outline:2px solid var(--w-acc,#0284c7);outline-offset:2px}
.wm-fs-close[hidden]{display:none}
.wm-map-wrap.is-full{position:fixed;inset:0;z-index:3000;border-radius:0;border:0;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;background:#fff}
.wm-map-wrap.is-full #wm-map{flex:1 1 auto;height:auto!important;min-height:0;cursor:grab}
.wm-map-wrap.is-full .wm-layers{right:62px}
.wm-map-wrap.is-full .wm-legend,.wm-map-wrap.is-full .wm-legend2,.wm-map-wrap.is-full .wm-gdbar,.wm-map-wrap.is-full .wm-routebar{flex:0 0 auto}
.wm-map-wrap.is-full .wm-gdbar,.wm-map-wrap.is-full .wm-routebar{max-height:30vh;overflow-y:auto}
.wm-map-wrap:not(.is-full) #wm-map{cursor:zoom-in}
@media(max-width:760px){.wm-map-wrap.is-full .wm-layers{left:10px;right:62px}}
/* แก้: แผนที่หายตอนเต็มจอ (align-items:center เดิมทำให้ความกว้างยุบเป็น 0 เมื่อจัดเรียงแนวตั้ง) */
.wm-map-wrap.is-full{align-items:stretch;height:100vh;height:100dvh}
.wm-map-wrap.is-full #wm-map{width:100%;min-height:200px}

/* มือถือ: ปุ่มย่อ/ขยายอยู่ล่างซ้ายของแผนที่ */
@media(max-width:760px){
  .wm .leaflet-top.leaflet-left{top:auto;bottom:6px}
  .wm .leaflet-left .leaflet-control{margin-left:8px;margin-bottom:4px}
  .wm .leaflet-control-zoom a{width:36px;height:36px;line-height:36px;font-size:20px}
  .wm .wm-layers{left:10px}
}

/* ===== โหมดมือถือแบบแอป ===== */
@media(max-width:1000px){
  .wm-list,.wm-fl-list{max-height:none!important;overflow:visible!important}   /* กันรายการล้นไปซ้อนหัวข้อถัดไป */
}
@media(max-width:760px){
  .wm{background:var(--w-bg,#f4f6fa)}
  .wm-hero{padding:10px 0 8px}
  .wm-hero p{display:none}
  .wm-body{gap:16px;padding-top:10px}
  .wm>.wrap,.wm .wrap{padding-left:14px;padding-right:14px}

  /* แถบเลือกวัน: เลื่อนแนวนอน ชิดขอบจอ */
  .wm-days{margin:0 -14px;padding:2px 14px 6px;gap:8px;scroll-snap-type:x proximity}
  .wm-day{flex:0 0 78px;border-radius:14px;scroll-snap-align:start}

  /* แผนที่: สูงพอดีจอ ปุ่มชั้นข้อมูลเลื่อนแนวนอนแถวเดียว ไม่ซ้อนกัน */
  .wm-map-wrap{border-radius:18px}
  #wm-map{height:min(52vh,460px);min-height:300px}
  .wm-layers{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;left:8px!important;right:8px!important;top:8px;justify-content:flex-start;padding-bottom:2px}
  .wm-layers::-webkit-scrollbar{display:none}
  .wm-layer,.wm-layers .wm-fltoggle{flex:0 0 auto;white-space:nowrap}

  /* แถบเครื่องมือใต้แผนที่: แถวชิปเลื่อนแนวนอน */
  .wm-gdbar,.wm-routebar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 12px;gap:8px}
  .wm-gdbar::-webkit-scrollbar,.wm-routebar::-webkit-scrollbar{display:none}
  .wm-gdbar>*,.wm-routebar>.wm-fltoggle{flex:0 0 auto;white-space:nowrap}
  .wm-gdbar .wm-route-out,.wm-routebar .wm-route-out{flex:0 0 100%;white-space:normal}
  .wm-gdbar:has(.wm-route-out:not([hidden])),.wm-routebar:has(.wm-route-out:not([hidden])){flex-wrap:wrap}
  .wm-fltoggle,.wm-gd{padding:7px 12px;font-size:12.5px;border-radius:999px}
  .wm-legend,.wm-legend2{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:6px 12px;font-size:11.5px;gap:14px}
  .wm-legend::-webkit-scrollbar,.wm-legend2::-webkit-scrollbar{display:none}
  .wm-legend2{display:flex}
  .wm-legend2 span{flex:0 0 auto}

  /* การ์ดสรุป + รายการ: กระชับ อ่านง่ายด้วยนิ้ว */
  .wm-side{gap:12px}
  .wm-side .wm-h{margin-top:8px}
  .wm-list{gap:8px}
  .wm-row{padding:10px 12px;border-radius:14px;grid-template-columns:auto 1fr auto}
  .wm-row .nm small{font-size:11px}
  .wm-row .dt{font-size:11.5px;line-height:1.5}
  .wm-fl-head{margin-top:10px}
  .wm-pick{margin-top:2px;padding:14px 12px 16px}
  .wm-pick-h label{width:100%}
  .wm-over .wm-scroll{margin:0 -2px}
  .wm-note summary{padding:13px 14px}

  /* เว้นที่ให้แถบเมนูล่างของเว็บไม่บังเนื้อหาท้ายหน้า */
  .wm{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:760px){
  /* รายการน้ำท่วมยาวมาก: แสดง 6 แถวแรก (ที่เหลือดูบนแผนที่) และย่อแถวให้บรรทัดเดียวน้อยลง */
  #wm-fl-list li:nth-child(n+7){display:none}
  .wm-flrow .nm small{display:none}
  .wm-flrow{padding:9px 12px}
}

/* หมุดน้ำท่วมบนแผนที่ (ไอคอนหยดน้ำ) */
.wm-fp-wrap{background:none;border:0}
.wm-fp{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(15,23,42,.45))}
.wm-fp b{position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#38bdf8,var(--fl1));border:2px solid #fff;color:#fff}
.wm-fp.f2 b{background:linear-gradient(135deg,#3b82f6,var(--fl2))}
.wm-fp.big b{width:34px;height:34px;border-width:2.5px}
.wm-fp b .ic{width:13px;height:13px;fill:currentColor;stroke:none;transform:rotate(45deg)}
.wm-fp.big b .ic{width:17px;height:17px}
.wm-fp .pulse{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:rgba(29,78,216,.45);animation:wm-fp-pulse 1.8s ease-out infinite;transform-origin:center}
.wm-fp.big .pulse{width:34px;height:34px}
@keyframes wm-fp-pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.wm-fp .pulse{animation:none;opacity:.25}}

/* ไอคอนคลื่นน้ำ (น้ำท่วม) */
.wm-fp b .ic.wave,.wm-flb .ic.wave{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wm-flb .ic.wave{width:11px;height:11px}
.wm-flb.f2 .ic.wave{width:13px;height:13px}
.wm-fp b .ic.wave{width:15px;height:15px}
.wm-fp.big b .ic.wave{width:20px;height:20px}
.wm-fs-fold{display:none}
.wm-map-wrap.is-full .wm-fs-fold{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;border:0;border-top:1px solid var(--w-line,#e3e8ef);border-bottom:1px solid var(--w-line,#e3e8ef);background:#fff;color:#0f172a;font:inherit;font-size:13px;cursor:pointer}
.wm-map-wrap.is-full .wm-fs-fold:hover{background:#f1f5f9}
.wm-map-wrap.is-full .wm-fs-fold:focus-visible{outline:2px solid var(--w-acc,#0284c7);outline-offset:-2px}
.wm-fs-fold svg{transition:transform .2s}
.wm-fs-fold.up svg{transform:rotate(180deg)}
.wm-fs-fold[hidden]{display:none!important}
.wm-map-wrap.is-full.is-collapsed .wm-legend,.wm-map-wrap.is-full.is-collapsed .wm-legend2,.wm-map-wrap.is-full.is-collapsed .wm-gdbar,.wm-map-wrap.is-full.is-collapsed .wm-routebar{display:none}