/* ======================================
   REMOVE OLD TRANSFORM SCALING (IMPORTANT)
====================================== */

/* ? REMOVE ALL ll-z12 / ll-z14 / ll-z16 RULES */
/* JS now controls size — this prevents distortion */


/* ======================================
   BASE WRAPPER
====================================== */

.ll-marker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ======================================
   MARKER CIRCLE (MAIN UI)
====================================== */

.marker-circle {
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #ffffff;

  /* ?? better shadow */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 6px rgba(0, 0, 0, 0.15);

  /* ?? smoother rendering */
  will-change: transform;

  /* ?? subtle polish */
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


/* ======================================
   MARKER COLORS
====================================== */

.marker-circle.lake-marker {
  background: #276394;
  color: #ffffff;
}

.marker-circle.launch-marker {
  background: #496d28;
  color: #ffffff;
}

.marker-circle.gauge-marker {
  background: #a90101;
  color: #ffffff;
}


/* ======================================
   ICON CONTAINER
====================================== */

.marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  /* ?? prevents weird scaling artifacts */
  line-height: 0;
}


/* ======================================
   SVG FIXES (CRITICAL)
====================================== */

.marker-icon svg {
  width: 100%;
  height: 100%;

  fill: currentColor;

  /* ?? keeps icons crisp */
  shape-rendering: geometricPrecision;

  /* ?? prevents blur during scaling */
  transform: translateZ(0);
}


/* ======================================
   HOVER EFFECT (SUBTLE BUT NICE)
====================================== */

.marker-circle:hover {
  transform: scale(1.08);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(0, 0, 0, 0.2);
}