.waysoft-map { width: 100%; height: 440px; min-height: 280px; border-radius: 8px; overflow: hidden; }
.waysoft-map-failed { display: none; }

.waysoft-map-loading{visibility:hidden;}

.waysoft-map-frame { position: relative; }
/* Overlay area: the whole map height minus the attribution strip; the layer selection uses all of it (scrolls only on overflow) and is as wide as its longest label. */
.waysoft-map-controls { position: absolute; top: 10px; right: 10px; bottom: 32px; left: 10px; z-index: 2; pointer-events: none; }
.waysoft-map-controls > * { pointer-events: auto; }
.waysoft-map-fullscreen-toggle { position: absolute; top: 102px; right: 0; }
.waysoft-map-layers-toggle { top: 136px; }
.waysoft-map-panels { position: absolute; top: 0; right: 40px; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: max-content; max-width: calc(100% - 40px); min-height: 0; pointer-events: none; }
.waysoft-map-panels > * { pointer-events: auto; }
.waysoft-map-fullscreen-toggle { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 29px; height: 29px; padding: 0; background: #fff; color: #333; border: 0; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 2px rgba(0,0,0,.1); }
.waysoft-map-fullscreen-toggle:hover { background: #f2f2f2; }
.waysoft-map-fullscreen-toggle[aria-pressed="true"] { background: #e3edfb; }
.waysoft-map-fullscreen-icon { display: block; width: 20px; height: 20px; pointer-events: none; }
.waysoft-map-fullscreen-toggle:focus-visible, .waysoft-map-layers input:focus-visible { outline: 2px solid #1769e0; outline-offset: 2px; }
.waysoft-map-layers { margin: 0; padding: 6px 10px; background: rgba(255,255,255,.95); border: 1px solid #b0b8c4; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); box-sizing: border-box; flex: 0 1 auto; min-height: 0; min-width: 0; max-width: 100%; width: max-content; overflow-y: auto; overflow-x: auto; white-space: nowrap; }
.waysoft-map-layers legend { font-weight: 600; padding: 0 4px; float: none; width: auto; font-size: 1em; }
.waysoft-map-layer-line { display: flex; align-items: center; gap: 4px; }
.waysoft-map-layer label { display: flex; align-items: center; gap: 6px; cursor: pointer; flex: 1 1 auto; }
.waysoft-map-layer[data-out-of-zoom="true"] .waysoft-map-layer-name, .waysoft-map-layer[data-out-of-zoom="true"] .waysoft-map-layer-symbols { opacity: .5; }
.waysoft-map-layer[data-out-of-zoom="true"] { color: #6b7280; }
.waysoft-map-layer-symbols { display: inline-flex; align-items: center; gap: 2px; flex: none; }
/* Legend symbols: colour from the layer style; fill = area, line, dashed line, dot. */
.waysoft-map-symbol { display: inline-block; flex: none; box-sizing: border-box; width: 18px; height: 12px; margin-right: 4px; vertical-align: middle; }
.waysoft-map-symbol-fill { background: var(--symbol-color); border: 1px solid rgba(0,0,0,.35); }
.waysoft-map-symbol-line { height: 0; border-top: 4px solid var(--symbol-color); border-radius: 2px; }
.waysoft-map-symbol-dashedline { height: 0; border-top: 4px dashed var(--symbol-color); }
.waysoft-map-symbol-dot { width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; background: var(--symbol-color); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.waysoft-map-symbol-mini { width: 9px; height: 9px; margin-right: 0; }
.waysoft-map-symbol-mini.waysoft-map-symbol-line, .waysoft-map-symbol-mini.waysoft-map-symbol-dashedline { height: 0; border-top-width: 3px; }
.waysoft-map-symbol-mini.waysoft-map-symbol-dot { width: 9px; height: 9px; margin: 0; }
.waysoft-map-legend-expand { width: 20px; height: 20px; flex: none; }
.waysoft-map-legend .waysoft-map-symbol { width: 18px; margin-right: 6px; }
.waysoft-map-layers .waysoft-map-legend { margin-left: 4px; }
.waysoft-map-layer-note { color: #5b6470; font-size: .85em; }
.waysoft-map-legend { list-style: none; margin: 2px 0 6px 22px; padding: 0; font-size: .85em; }
.waysoft-map-swatch { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border: 1px solid rgba(0,0,0,.3); vertical-align: middle; }

/* In-app fullscreen: fills the nearest positioned ancestor (the host's content area, which needs position: relative). */
.waysoft-map-fullscreen { position: absolute; inset: 0; z-index: 10; background: #fff; }
.waysoft-map-fullscreen .waysoft-map-frame, .waysoft-map-fullscreen .waysoft-map { height: 100%; }
.waysoft-map-fullscreen .waysoft-map { border-radius: 0; }
.waysoft-map-marker { width: 16px; height: 16px; border-radius: 50%; background: #d6336c; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }

/* Categories: header with tri-state checkbox and an icon button that opens one category at a time. */
.waysoft-map-category { border-top: 1px solid #dde2e8; padding-top: 2px; }
.waysoft-map-category:first-of-type { border-top: 0; }
.waysoft-map-category-header { display: flex; align-items: center; gap: 6px; }
.waysoft-map-category-name { flex: 1; font-weight: 600; }
.waysoft-map-category-expand { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; color: #333; border: 0; border-radius: 4px; cursor: pointer; }
.waysoft-map-category-expand:hover { background: #eef1f5; }
.waysoft-map-category-expand:focus-visible, .waysoft-map-category-toggle:focus-visible { outline: 2px solid #1769e0; outline-offset: 2px; }
.waysoft-map-category-layers { margin-left: 18px; }
.waysoft-map-category-layers[hidden] { display: none; }
.waysoft-map-restrictions { flex: none; margin: 0; padding: 6px 10px; white-space: nowrap; background: rgba(255,255,255,.95); border: 1px solid #b0b8c4; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.waysoft-map-restrictions legend { font-weight: 600; padding: 0 4px; float: none; width: auto; font-size: 1em; }
.waysoft-map-restrictions .waysoft-map-legend { margin-left: 4px; }
.waysoft-map-restrictions .waysoft-map-layer-note { margin: 0; }
.waysoft-map-popup { max-width: 280px; overflow-wrap: anywhere; }
.waysoft-map-popup dl { margin: 4px 0 0; }
.waysoft-map-popup dt { font-size: .8em; color: #5b6470; }
.waysoft-map-popup dd { margin: 0 0 4px; }
/* Zoom level display: small, unobtrusive, bottom left of the map (also in fullscreen); not part of the layer panels on the right. */
.waysoft-map-zoom { margin: 0 0 4px 4px; padding: 0 6px; background: rgba(255,255,255,.75); border-radius: 3px; font-size: 11px; line-height: 18px; color: #333; font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; }
.waysoft-map-zoom:empty { display: none; }

/* Waypoint markers: kinds differ by shape and colour; the accessible name is the aria-label. Pointer events pass through to the map. */
.waysoft-map-pin { width: 28px; height: 28px; pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.waysoft-map-pin-shape { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; font: 700 13px/1 system-ui, sans-serif; color: #fff; background: #1769e0; }
.waysoft-map-pin-start .waysoft-map-pin-shape { background: #1a7f37; border-radius: 50%; }
.waysoft-map-pin-end .waysoft-map-pin-shape { background: #1f2937; border-radius: 3px; }
.waysoft-map-pin-via .waysoft-map-pin-shape { background: #1769e0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: 12px; }
.waysoft-map-pin-search .waysoft-map-pin-shape { background: #fff; color: #6f42c1; border: 5px solid #6f42c1; border-radius: 50%; }
.waysoft-map-pin-warning { width: 30px; height: 28px; }
.waysoft-map-pin-warning .waysoft-map-pin-shape { background: #f5b800; color: #1f2937; clip-path: polygon(50% 0, 100% 100%, 0 100%); align-items: flex-end; padding-bottom: 2px; font-size: 12px; }

/* Click menu inside the popup. */
.waysoft-map-click-info { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #dde2e8; }
.waysoft-map-click-actions { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.waysoft-map-click-action { display: block; width: 100%; box-sizing: border-box; padding: 6px 10px; text-align: left; font: inherit; color: #1f2937; background: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.waysoft-map-click-action:hover:not(:disabled), .waysoft-map-click-action:focus-visible { background: #e3edfb; }
.waysoft-map-click-action:focus-visible { outline: 2px solid #1769e0; outline-offset: -2px; }
.waysoft-map-click-action:disabled { color: #6b7280; cursor: not-allowed; }

/* Search overlay: top left (layer buttons sit on the right, the zoom display bottom left); on narrow maps the layer panel moves below it. */
.waysoft-map-search { position: absolute; top: 10px; left: 10px; z-index: 3; width: min(360px, calc(100% - 70px)); }
.waysoft-map-search-field { display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 0 6px 0 9px; height: 34px; background: #fff; color: #333; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,.1); }
.waysoft-map-search-field:focus-within { box-shadow: 0 0 0 2px #1769e0; }
.waysoft-map-search-icon { flex: none; }
.waysoft-map-search-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: #1f2937; }
.waysoft-map-search-clear { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; padding: 0; background: transparent; color: #333; border: 0; border-radius: 4px; cursor: pointer; }
.waysoft-map-search-clear:hover { background: #eef1f5; }
.waysoft-map-search-clear:focus-visible { outline: 2px solid #1769e0; outline-offset: 1px; }
.waysoft-map-search-dropdown { margin-top: 4px; background: #fff; border-radius: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.3); overflow: hidden; }
.waysoft-map-search-list { list-style: none; margin: 0; padding: 0; max-height: min(320px, 50vh); overflow-y: auto; }
.waysoft-map-search-option { display: flex; flex-direction: column; padding: 6px 10px; cursor: pointer; border-top: 1px solid #eef1f5; }
.waysoft-map-search-option:first-child { border-top: 0; }
.waysoft-map-search-option:hover, .waysoft-map-search-option[data-active="true"] { background: #e3edfb; }
.waysoft-map-search-title { font-weight: 600; color: #1f2937; overflow-wrap: anywhere; }
.waysoft-map-search-subtitle { font-size: .85em; color: #5b6470; overflow-wrap: anywhere; }
.waysoft-map-search-status { padding: 8px 10px; color: #5b6470; font-size: .9em; }
.waysoft-map-search-attribution { padding: 4px 10px; border-top: 1px solid #eef1f5; font-size: .75em; color: #5b6470; }
.waysoft-map-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .waysoft-map-has-search .waysoft-map-panels { top: 44px; }
}
@media (min-width: 721px) {
  .waysoft-map-has-search .waysoft-map-panels { max-width: calc(100% - 40px - 380px); }
}

/* Interactive markers keep native keyboard activation and never start a map gesture. */
button.waysoft-map-pin { pointer-events: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
button.waysoft-map-pin:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

/* Dragging (ADR GIS-0004): draggable markers take pointer input themselves; the handle on the draggable track is decoration (aria-hidden). */
.waysoft-map-pin-draggable { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.waysoft-map-pin-draggable.waysoft-map-dragging, .waysoft-map-grip.waysoft-map-dragging { cursor: grabbing; }
.waysoft-map-grip { width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid #1769e0; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }

.waysoft-map-popup-point { width: 16px; height: 16px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; background: #1769e0; box-shadow: 0 0 0 2px #1769e0, 0 1px 5px #3338; pointer-events: none; }