/* ==========================================================================
   Southern Map Annotation — Frontend Render Styles
   Ported from crmbds.com map-studio CSS & Enhanced
   ========================================================================== */

/* --- Text Label --- */
.sg-map-text-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.sg-map-text-marker > div {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--sg-label-rotation, 0deg));
  transform-origin: center center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--sg-render-font-size, 18px);
  font-weight: var(--sg-label-font-weight, 800);
  line-height: 1.25;
  color: var(--sg-label-color, #fff);
  text-shadow: 0 2px var(--sg-label-shadow, 12px) rgba(0,0,0,.95),
               0 0  var(--sg-label-shadow, 12px) rgba(0,0,0,.8);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  width: max-content !important;
  max-width: var(--sg-label-max-width, 1600px) !important;
  white-space: var(--sg-label-white-space, nowrap) !important;
  letter-spacing: var(--sg-label-letter-spacing, normal);
  text-transform: var(--sg-label-transform, none);
  pointer-events: auto;
  user-select: none;
}

/* --- Callout Bubble --- */
.sg-map-callout-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.sg-map-callout-marker > div {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--sg-callout-rotation, 0deg));
  transform-origin: center center;
  width: max-content !important;
  max-width: none !important;
  padding: var(--sg-render-padding, 6px 12px);
  border-radius: var(--sg-callout-radius, 8px);
  background: var(--sg-callout-bg, rgba(15,23,42,.92));
  color: var(--sg-callout-text, #fff);
  border: var(--sg-render-border-width, 2px) solid var(--sg-callout-border, #fff);
  box-shadow: 0 6px 18px rgba(15,23,42,.6);
  font-size: var(--sg-render-font-size, 14px);
  font-weight: var(--sg-callout-weight, 800);
  line-height: 1.3;
  white-space: pre-wrap;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  box-sizing: border-box;
}
.sg-map-callout-anchor { background: transparent !important; border: 0 !important; }
.sg-map-callout-anchor > i {
  display: block;
  width: 12px; height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sg-anchor-color, #fff);
  box-shadow: 0 2px 8px rgba(15,23,42,.45);
}

/* --- Badge Marker (Pill Tag) --- */
.sg-map-badge-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.sg-map-badge-marker > div {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--sg-badge-rotation, 0deg));
  transform-origin: center center;
  display: inline-flex;
  align-items: center;
  gap: var(--sg-badge-gap, 6px);
  width: max-content !important;
  max-width: none !important;
  padding: var(--sg-badge-padding, 5px 12px);
  border-radius: var(--sg-badge-radius, 999px);
  background: var(--sg-badge-bg, linear-gradient(135deg, #f59e0b, #d97706));
  color: var(--sg-badge-color, #fff);
  border: var(--sg-badge-border, 1.5px solid rgba(255,255,255,0.7));
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 10px var(--sg-badge-glow, rgba(245,158,11,0.5));
  font-size: var(--sg-render-font-size, 12px);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap !important;
  user-select: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

/* --- Arrow Label --- */
.sg-map-arrow-label { width: 0 !important; height: 0 !important; overflow: visible; }
.sg-map-arrow-label > div {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--sg-label-rotation, 0deg));
  transform-origin: center center;
  width: max-content !important;
  max-width: none !important;
  padding: var(--sg-arrow-pad-y, 4px) var(--sg-arrow-pad-x, 10px);
  border: var(--sg-arrow-border, 1px) solid rgba(255,255,255,.6);
  border-radius: var(--sg-arrow-radius, 6px);
  background: rgba(15,23,42,.92);
  color: var(--sg-label-color, #fff);
  font-size: var(--sg-arrow-font-size, 13px);
  font-weight: var(--sg-label-font-weight, 700);
  text-transform: var(--sg-label-transform, none);
  letter-spacing: var(--sg-label-letter-spacing, normal);
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  box-shadow: 0 4px var(--sg-arrow-shadow, 12px) rgba(0,0,0,0.45);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  white-space: var(--sg-label-white-space, nowrap) !important;
  box-sizing: border-box;
}

/* --- Arrow Head (CSS triangle) --- */
.sg-map-arrow-head { background: transparent !important; border: 0 !important; pointer-events: none !important; }
.sg-map-arrow-head > i {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-top:    calc(var(--sg-arrow-head-size, 16px) * .48) solid transparent;
  border-bottom: calc(var(--sg-arrow-head-size, 16px) * .48) solid transparent;
  border-left:   var(--sg-arrow-head-size, 16px) solid var(--sg-arrow-color, #fff);
  filter: drop-shadow(0 0 3px var(--sg-arrow-color, #fff));
  transform: translate(-42%, -50%) rotate(var(--sg-arrow-angle, 0deg));
  transform-origin: 42% 50%;
}

/* --- Marker (location pin) --- */
.sg-map-location-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.sg-map-location-marker > div {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -100%) rotate(var(--sg-marker-rotation, 0deg));
  transform-origin: bottom center;
  display: flex; align-items: center; gap: var(--sg-marker-gap, 6px);
  width: max-content !important; max-width: none !important;
  padding: var(--sg-marker-pady, 5px) var(--sg-marker-padx, 10px) var(--sg-marker-pady, 5px) var(--sg-marker-padx, 6px);
  border: var(--sg-marker-border, 2px) solid #fff;
  border-radius: 999px;
  background: var(--sg-marker-color, #2563eb);
  color: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.4);
  font-size: var(--sg-render-caption-size, 12px); font-weight: 800;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}
.sg-map-location-marker i {
  display: grid; place-items: center;
  width: calc(var(--sg-render-font-size, 16px) + 8px);
  height: calc(var(--sg-render-font-size, 16px) + 8px);
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: var(--sg-render-font-size, 16px);
  font-style: normal;
}
.sg-map-location-marker span {
  overflow: hidden;
  max-width: none !important;
  font-size: var(--sg-render-caption-size, 12px);
  white-space: nowrap;
}

/* --- Circle Label --- */
.sg-map-circle-label { width: 0 !important; height: 0 !important; overflow: visible; }
.sg-map-circle-label > div {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--sg-label-rotation, 0deg));
  transform-origin: center center;
  width: max-content !important;
  max-width: none !important;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(15,23,42,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap !important;
  box-sizing: border-box;
}

/* --- Neon Line --- */
.sg-map-neon-glow { filter: blur(2px); stroke-linecap: round; stroke-linejoin: round; }
.sg-map-neon-line { stroke-linecap: round; stroke-linejoin: round; }
.sg-map-neon-line.is-animated {
  stroke-dasharray: 4 20;
  stroke-dashoffset: var(--sg-neon-offset, 0);
  filter: drop-shadow(0 0 3px currentColor);
}

/* --- Polygon Streak Animation --- */
.sg-map-polygon-streak {
  stroke-dasharray: 20 60;
  animation: sg-polygon-streak 2s linear infinite;
  filter: drop-shadow(0 0 5px #fff);
  pointer-events: none !important;
}
@keyframes sg-polygon-streak {
  from { stroke-dashoffset: 80; }
  to   { stroke-dashoffset: 0; }
}

/* --- Arrow & Line Streak Animation --- */
.sg-map-arrow-streak {
  stroke-dasharray: 8 24;
  animation: sg-arrow-streak 1.2s linear infinite;
  pointer-events: none !important;
}
@keyframes sg-arrow-streak {
  from { stroke-dashoffset: 32; }
  to   { stroke-dashoffset: 0; }
}

/* --- Presentation show/hide --- */
.sg-present-wait { opacity: 0 !important; transition: none !important; }
.sg-present-in {
  opacity: 1 !important;
  transition-property: opacity !important;
  transition-timing-function: ease !important;
}

/* --- SVG rendering optimizations --- */
.sg-annotation-canvas .leaflet-overlay-pane svg { shape-rendering: geometricPrecision; }
.sg-annotation-canvas .leaflet-overlay-pane path { vector-effect: non-scaling-stroke; }