.customer-map-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.customer-map-heading > div { display:grid; gap:4px; }
.customer-map-heading b { color:#203f48; font-size:22px; }
.customer-map-heading span { color:#6d848b; font-size:13px; font-weight:650; }
.customer-map-form { margin-bottom:16px; padding:20px; border-left:4px solid #11b9ad; }
.customer-map-form[hidden] { display:none; }
.customer-map-guide { display:grid; gap:4px; margin-bottom:16px; color:#148b57; }
.customer-map-guide span { color:#60787f; font-size:13px; }
.customer-map-form-grid { display:grid; grid-template-columns:1.35fr 1.35fr .8fr .8fr; gap:14px; }
.customer-map-form-grid label { display:grid; align-content:start; gap:7px; color:#38535b; font-size:12px; font-weight:850; }
.customer-map-form-grid select,
.customer-map-form-grid input { width:100%; min-height:46px; box-sizing:border-box; padding:10px 12px; border:1px solid #c5d6da; border-radius:5px; background:#fff; color:#253d44; font:inherit; }
.customer-map-form-actions { display:flex; gap:8px; margin-top:16px; }
.customer-map-card { padding:18px; }
.customer-map-filters { display:grid; grid-template-columns:.8fr 1.25fr 1fr; gap:14px; margin-bottom:16px; }
.customer-map-filters label { display:grid; gap:7px; color:#38535b; font-size:12px; font-weight:850; }
.customer-map-filters select,
.customer-map-filters input { width:100%; min-height:46px; box-sizing:border-box; padding:10px 12px; border:1px solid #c5d6da; border-radius:5px; background:#fff; color:#253d44; font:inherit; }
.customer-map-canvas { position:relative; min-height:590px; overflow:hidden; border:1px solid #abcbd0; border-radius:6px; cursor:crosshair; background:linear-gradient(145deg,#d5e6dc,#b8d5db); }
.customer-map-canvas::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 78% 27%,#4fa0932b 0 9%,transparent 10%),radial-gradient(circle at 31% 66%,#6a9c5f31 0 13%,transparent 14%),linear-gradient(27deg,transparent 48%,#84a9a733 49% 51%,transparent 52%); }
.customer-map-canvas .map-grid { opacity:.62; }
.customer-map-pins { position:absolute; inset:0; z-index:3; }
.customer-map-pin { position:absolute; display:grid; place-items:center; width:34px; height:34px; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 7px #168ab433,0 4px 12px #173f4a66; color:#fff; cursor:pointer; transform:translate(-50%,-50%); }
.customer-map-pin.hotspot { background:#168ab4; }
.customer-map-pin.ppp { background:#e4433f; box-shadow:0 0 0 7px #e4433f33,0 4px 12px #173f4a66; }
.customer-map-pin.mixed { background:#7556c8; box-shadow:0 0 0 7px #7556c833,0 4px 12px #173f4a66; }
.customer-map-pin > span { font-size:11px; font-weight:900; }
.customer-map-pin > b { display:none; position:absolute; z-index:8; left:25px; top:28px; min-width:240px; max-width:320px; padding:10px; border-radius:6px; background:#fff; box-shadow:0 7px 20px #173f4a45; color:#24434c; text-align:left; font-size:12px; }
.customer-map-pin > b small { display:block; margin-top:4px; color:#6f858c; font-weight:650; }
.customer-map-pin:hover > b,
.customer-map-pin:focus > b { display:block; }
.customer-map-legend { position:absolute; z-index:4; left:16px; right:16px; bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 13px; border:1px solid #c9d9dc; border-radius:4px; background:#ffffffed; color:#466068; }
.customer-map-legend i { display:inline-block; width:10px; height:10px; margin:0 4px 0 9px; border-radius:50%; vertical-align:-1px; }
.customer-map-legend i.hotspot { background:#168ab4; }
.customer-map-legend i.ppp { background:#e4433f; }
@media (max-width:1000px) {
  .customer-map-form-grid { grid-template-columns:1fr 1fr; }
  .customer-map-filters { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .customer-map-heading { align-items:stretch; flex-direction:column; }
  .customer-map-form-grid { grid-template-columns:1fr; }
  .customer-map-canvas { min-height:500px; }
  .customer-map-legend { align-items:flex-start; flex-direction:column; }
}