/* ======================================
   MEASURE HUD (BOTTOM CENTER)
====================================== */

.ll-measure-hud {
  position: absolute;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);

  padding: 10px 16px;
  border-radius: 14px;

  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;

  color: #ffffff;

  display: none;
  z-index: 1000000; /* ?? above overlay */

  white-space: nowrap;

  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.6),
    0 0 2px rgba(255, 255, 255, 0.1) inset;
}

.ll-measure-hud .ll-measure-distance {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.ll-measure-hud .ll-measure-help {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}

.ll-measure-hud.completed {
  opacity: 0.9;
}

/* ======================================
   HUD ACTION BUTTONS
====================================== */

.ll-measure-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.ll-measure-btn {
  background: #ff9800;
  color: #000;

  border: none;
  padding: 4px 10px;

  font-size: 11px;
  font-weight: 600;

  border-radius: 6px;
  cursor: pointer;

  transition: all 0.15s ease;
}

.ll-measure-btn:hover {
  background: #ffb74d;
}

.ll-measure-btn:active {
  transform: scale(0.96);
}

/* ======================================
   MEASURE OVERLAY (TOP LAYER)
====================================== */

.ll-measure-overlay {
  position: absolute;
  inset: 0;
  z-index: 999999;        /* ?? above Navionics */
  pointer-events: none;   /* allow map interaction */
}

/* ======================================
   MEASURE LINES (SOLID)
====================================== */

.ll-measure-line-overlay {
  position: absolute;
  height: 3px;

  background: #ff9800;

  transform-origin: 0 50%;

  box-shadow:
    0 0 4px rgba(255, 152, 0, 0.7),
    0 0 10px rgba(255, 152, 0, 0.4);
}

/* ======================================
   PREVIEW LINE (DOTTED BEFORE CLICK)
====================================== */

.ll-measure-line-overlay--preview {
  position: absolute;
  height: 0;

  border-top: 3px dashed #ff9800;

  transform-origin: 0 50%;

  background: transparent !important;

  box-shadow: none;
}

/* ======================================
   SEGMENT LABELS (OVERLAY VERSION)
====================================== */

.ll-measure-label-overlay {
  position: absolute;
  transform: translate(-50%, -50%);

  background: rgba(0, 0, 0, 0.95);
  color: #ffffff;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;

  padding: 4px 8px;

  border-radius: 6px;

  border: 1px solid rgba(255, 152, 0, 0.45);

  white-space: nowrap;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(255, 152, 0, 0.25);
}

.ll-measure-point {
  position: absolute;
  width: 8px;
  height: 8px;

  background: #ff9800;
  border: 4px solid #fff;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  box-shadow:
    0 0 4px rgba(255, 152, 0, 0.8),
    0 0 8px rgba(255, 152, 0, 0.4);
}

/* Measure mode cursor */
.ll-measure-active {
    cursor: crosshair;
}

/* Optional: make everything inside map follow it */
.ll-measure-active * {
    cursor: crosshair !important;
}