.directory-map-page { width:var(--content-width); margin:0 auto; padding:clamp(18px,3vw,32px); border-radius:18px; background:var(--cream); box-shadow:0 12px 30px rgba(28,39,47,.1); }
.directory-map-heading { display:flex; align-items:center; justify-content:center; margin-bottom:18px; text-align:center; }
.directory-map-heading h1 { margin:0; color:var(--ink); font:700 clamp(26px,4vw,42px)/1 Manrope,sans-serif; letter-spacing:-.05em; }
.directory-map-heading h1 strong { font-weight:900; }
.directory-map-filters { display:grid; grid-template-columns:minmax(190px,1.4fr) repeat(3,minmax(130px,1fr)); gap:10px; padding:12px; border-radius:13px; background:#d0d0d0; }
.directory-map-filters label { display:grid; min-width:0; gap:5px; }
.directory-map-filters span { color:#26343e; font-size:11px; font-weight:800; text-transform:uppercase; }
.directory-map-filters input,.directory-map-filters select { width:100%; min-width:0; min-height:42px; padding:9px 11px; border:1px solid #aeb7bd; border-radius:9px; background:#fff; color:#18242d; font:700 14px/1.2 'DM Sans',sans-serif; }
.directory-map-filters :is(input,select):focus { outline:3px solid rgba(38,95,158,.24); border-color:#265f9e; }
.directory-map-filters select:disabled { background:#e8eaeb; color:#7b858b; }
.directory-map-count { margin:11px 2px; color:#55636d; font-size:12px; font-weight:700; }
.directory-map-layout { display:grid; grid-template-columns:minmax(245px,310px) minmax(0,1fr); min-height:min(68vh,680px); overflow:hidden; border:1px solid #cbd2d6; border-radius:15px; background:#e8ebed; }
.directory-map-results { min-width:0; overflow:auto; border-right:1px solid #cbd2d6; background:#f5f5f4; scrollbar-width:thin; }
.directory-map-results > div { display:grid; gap:8px; padding:10px; }
.directory-map-result { display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; width:100%; padding:9px; border:1px solid #d3d8db; border-radius:11px; background:#fff; color:#18242d; text-align:left; cursor:pointer; }
.directory-map-result:hover { border-color:#8fa6b5; box-shadow:0 4px 12px rgba(31,48,60,.1); }
.directory-map-result:focus-visible { outline:3px solid rgba(38,95,158,.35); outline-offset:1px; }
.directory-map-result-media { display:grid; width:54px; aspect-ratio:1; place-items:center; overflow:hidden; border-radius:9px; color:#fff; font:800 24px/1 Manrope,sans-serif; }
.directory-map-result-media img { width:100%; height:100%; object-fit:cover; }
.directory-map-result-info { display:grid; min-width:0; align-content:center; gap:4px; }
.directory-map-result-info strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.directory-map-result-info small { display:-webkit-box; overflow:hidden; color:#65727b; font-size:10px; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.directory-map-empty { margin:0; padding:28px 15px; color:#65727b; font-size:13px; line-height:1.5; text-align:center; }
.directory-map-canvas-wrap { position:relative; min-width:0; min-height:440px; }
.directory-map-canvas { position:absolute; inset:0; background:#dce3e6; }
.directory-map-canvas .leaflet-grab { cursor:grab; }
.directory-map-canvas .leaflet-dragging .leaflet-grab { cursor:grabbing; }
.directory-map-loading,.directory-map-error { position:absolute; inset:0; z-index:500; display:grid; place-items:center; align-content:center; gap:12px; padding:20px; background:#eef1f2; color:#34434d; text-align:center; }
.directory-map-loading span { width:34px; aspect-ratio:1; border:4px solid #ccd3d7; border-top-color:#ff3131; border-radius:50%; animation:directory-map-spin .8s linear infinite; }
.directory-map-loading p { margin:0; font-size:13px; font-weight:700; }
.directory-map-loading[hidden],.directory-map-error[hidden] { display:none; }
.directory-map-error button { padding:9px 13px; border:0; border-radius:8px; background:#ff3131; color:#fff; font-weight:800; cursor:pointer; }
@keyframes directory-map-spin { to { transform:rotate(1turn); } }
.directory-map-pin { display:grid; width:36px; height:36px; place-items:center; border:3px solid #fff; border-radius:50% 50% 50% 8px; background:#ff3131; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.28); font:800 13px/1 Manrope,sans-serif; transform:rotate(-45deg); }
.directory-map-pin span { transform:rotate(45deg); }
.directory-map-user-pin { width:18px; height:18px; border:4px solid #fff; border-radius:50%; background:#265f9e; box-shadow:0 2px 9px rgba(0,0,0,.3); }
.directory-map-popup { display:grid; width:210px; gap:8px; }
.directory-map-popup-head { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:9px; }
.directory-map-popup-media { display:grid; width:44px; aspect-ratio:1; place-items:center; overflow:hidden; border-radius:8px; color:#fff; font:800 20px/1 Manrope,sans-serif; }
.directory-map-popup-media img { width:100%; height:100%; object-fit:cover; }
.directory-map-popup strong { overflow-wrap:anywhere; font-size:13px; }
.directory-map-popup p { margin:0; color:#596871; font-size:11px; line-height:1.4; }
.directory-map-popup-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.directory-map-popup-actions a { display:grid; min-height:34px; place-items:center; padding:6px; border-radius:7px; background:#265f9e; color:#fff; font-size:10px; font-weight:800; text-align:center; }
.directory-map-popup-actions a:last-child { background:#ff3131; }
.leaflet-popup-content { margin:12px; }
.leaflet-popup-content-wrapper { border-radius:12px; }
.leaflet-control-attribution { font-size:10px; }
@media(max-width:800px) {
  .directory-map-filters { grid-template-columns:1fr 1fr; }
  .directory-map-search { grid-column:1/-1; }
  .directory-map-layout { grid-template-columns:1fr; min-height:0; overflow:visible; }
  .directory-map-canvas-wrap { grid-row:1; min-height:56vh; border-radius:14px 14px 0 0; overflow:hidden; }
  .directory-map-results { grid-row:2; max-height:340px; border-top:1px solid #cbd2d6; border-right:0; }
}
@media(max-width:480px) {
  .directory-map-page { padding:14px; border-radius:13px; }
  .directory-map-heading h1 { font-size:28px; }
  .directory-map-filters { grid-template-columns:1fr; padding:10px; }
  .directory-map-search { grid-column:auto; }
  .directory-map-canvas-wrap { min-height:52vh; }
}
@media(prefers-reduced-motion:reduce) { .directory-map-loading span { animation:none; } }
