/* In-page Mapbox drawing tool (wm.drawtool.js). The host element gets class
   "wmdt-root" and JS builds the map + controls inside it. Global (not scoped)
   because the elements are created in JS. */
.wmdt-root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e9eef3; }
.wmdt-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Mapbox adds .mapboxgl-map to the container and builds the canvas inside; pin both
   to fill so the map is visible even before the first map.resize() corrects the buffer. */
.wmdt-map.mapboxgl-map { width: 100%; height: 100%; }
.wmdt-map .mapboxgl-canvas-container,
.wmdt-map canvas.mapboxgl-canvas { width: 100% !important; height: 100% !important; }

.wmdt-tools { position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
    background: rgba(255,255,255,.95); padding: 8px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.18); max-width: 70%; }
.wmdt-tool { display: flex; align-items: center; padding: 8px 14px; font-size: 14px; border: 2px solid #eee; background: #fff;
    border-radius: 8px; cursor: pointer; transition: all .15s; }
.wmdt-tool:hover { background: #f5f5f5; border-color: #ddd; }
.wmdt-tool.active { background: #1976d2; color: #fff; border-color: #1565c0; }
.wmdt-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(0,0,0,.15); }

.wmdt-zoom { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; flex-direction: column; gap: 8px;
    background: rgba(255,255,255,.95); padding: 8px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.wmdt-zoom button { width: 34px; height: 34px; font-size: 20px; font-weight: 700; border: 2px solid #eee; background: #fff; border-radius: 8px; cursor: pointer; }
.wmdt-zoom button:hover { background: #f5f5f5; }
.wmdt-zoom button[data-z=sat] { font-size: 16px; }
.wmdt-zoom button[data-z=sat].active { background: #2563EB; border-color: #2563EB; color: #fff; }

.wmdt-stats { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.95); padding: 10px 16px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.wmdt-stat { display: flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.wmdt-btn { padding: 9px 22px; font-size: 15px; border: none; border-radius: 8px; cursor: pointer; }
.wmdt-save { background: #0074d9; color: #fff; }
.wmdt-save:hover { background: #0056b3; }
.wmdt-cancel { background: #eef0f2; color: #475569; }

.wmdt-overlay { position: absolute; inset: 0; background: rgba(255,255,255,.7); display: none; align-items: center; justify-content: center; z-index: 10; }
.wmdt-overlay.on { display: flex; }
.wmdt-spinner { width: 46px; height: 46px; border: 5px solid #f0f0f0; border-top-color: #0074d9; border-radius: 50%; animation: wmdt-spin 1s linear infinite; }
@keyframes wmdt-spin { to { transform: rotate(360deg); } }

.wmdt-msg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
    padding: 28px; text-align: center; color: #334155; font-size: 15px; line-height: 1.55; }
.wmdt-msg span { max-width: 440px; }