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

/* --- Text Label --- */
.gmp-map-text-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.gmp-map-text-marker > div {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--gmp-label-rotation, 0deg));
  transform-origin: center center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--gmp-render-font-size, 18px);
  font-weight: var(--gmp-label-font-weight, 800);
  line-height: 1.25;
  color: var(--gmp-label-color, #fff);
  text-shadow: 0 2px var(--gmp-label-shadow, 12px) rgba(0,0,0,.95),
               0 0  var(--gmp-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(--gmp-label-max-width, 1600px) !important;
  white-space: var(--gmp-label-white-space, nowrap) !important;
  letter-spacing: var(--gmp-label-letter-spacing, normal);
  text-transform: var(--gmp-label-transform, none);
  pointer-events: auto;
  user-select: none;
}

/* --- Callout Bubble --- */
.gmp-map-callout-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.gmp-map-callout-marker > div {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--gmp-callout-rotation, 0deg));
  transform-origin: center;
  width: max-content !important;
  max-width: none !important;
  padding: var(--gmp-render-padding, 6px 12px);
  border-radius: var(--gmp-callout-radius, 8px);
  background: var(--gmp-callout-bg, rgba(15,23,42,.92));
  color: var(--gmp-callout-text, #fff);
  border: var(--gmp-render-border-width, 2px) solid var(--gmp-callout-border, #fff);
  box-shadow: 0 6px 18px rgba(15,23,42,.6);
  font-size: var(--gmp-render-font-size, 14px);
  font-weight: var(--gmp-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;
}
.gmp-map-callout-anchor { background: transparent !important; border: 0 !important; }
.gmp-map-callout-anchor > i {
  display: block;
  width: 12px; height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gmp-anchor-color, #fff);
  box-shadow: 0 2px 8px rgba(15,23,42,.45);
}

/* --- Badge Marker (Pill Tag) --- */
.gmp-map-badge-marker { width: 0 !important; height: 0 !important; overflow: visible; }
.gmp-map-badge-marker > div {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--gmp-badge-rotation, 0deg));
  display: inline-flex;
  align-items: center;
  gap: var(--gmp-badge-gap, 6px);
  width: max-content !important;
  max-width: none !important;
  padding: var(--gmp-badge-padding, 5px 12px);
  border-radius: var(--gmp-badge-radius, 999px);
  background: var(--gmp-badge-bg, linear-gradient(135deg, #f59e0b, #d97706));
  color: var(--gmp-badge-color, #fff);
  border: var(--gmp-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(--gmp-badge-glow, rgba(245,158,11,0.5));
  font-size: var(--gmp-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 --- */
.gmp-map-arrow-label { width: 0 !important; height: 0 !important; overflow: visible; }
.gmp-map-arrow-label > div {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--gmp-label-rotation, 0deg));
  transform-origin: center center;
  width: max-content !important;
  max-width: none !important;
  padding: var(--gmp-arrow-pad-y, 4px) var(--gmp-arrow-pad-x, 10px);
  border: var(--gmp-arrow-border, 1px) solid rgba(255,255,255,.6);
  border-radius: var(--gmp-arrow-radius, 6px);
  background: rgba(15,23,42,.92);
  color: var(--gmp-label-color, #fff);
  font-size: var(--gmp-arrow-font-size, 13px);
  font-weight: var(--gmp-label-font-weight, 700);
  text-transform: var(--gmp-label-transform, none);
  letter-spacing: var(--gmp-label-letter-spacing, normal);
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  box-shadow: 0 4px var(--gmp-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(--gmp-label-white-space, nowrap) !important;
  box-sizing: border-box;
}

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

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

/* --- Circle Label --- */
.gmp-map-circle-label { width: 0 !important; height: 0 !important; overflow: visible; }
.gmp-map-circle-label > div {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--gmp-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 --- */
.gmp-map-neon-glow { filter: blur(2px); stroke-linecap: round; stroke-linejoin: round; }
.gmp-map-neon-line { stroke-linecap: round; stroke-linejoin: round; }
.gmp-map-neon-line.is-animated {
  stroke-dasharray: 4 20;
  stroke-dashoffset: var(--gmp-neon-offset, 0);
  filter: drop-shadow(0 0 3px currentColor);
}

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

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

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

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