/* ============================================================
   turn_arrow_ui.css
   - Google-ish arrow overlay (original SVG)
   - Big, readable, touch-safe
   ============================================================ */

#turnArrowOverlay {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 99999;
  pointer-events: none; /* never blocks map taps */
  display: none;
}

#turnArrowOverlay.visible {
  display: block;
}

.turnArrowCard {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 12px 16px;
  border-radius: 16px;

  background: rgba(0,0,0,0.78);
  color: #fff;

  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  max-width: min(92vw, 520px);
}

.turnArrowIconWrap {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;

  display: grid;
  place-items: center;

  border-radius: 14px;
  background: rgba(255,255,255,0.08);
}

.turnArrowIcon {
  width: 56px;
  height: 56px;
}

.turnArrowText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.turnArrowPrimary {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-transform: uppercase;
}

.turnArrowSecondary {
  font-size: 16px;
  font-weight: 650;
  opacity: 0.9;
  line-height: 1.15;
}

.turnArrowDistance {
  font-size: 18px;
  font-weight: 800;
  opacity: 0.95;
  line-height: 1.15;
}

/* Arrow rotations */
.arrow-right      { transform: rotate(180deg); transform-origin: 50% 50%; }
.arrow-veer-left  { transform: rotate(-45deg); transform-origin: 50% 50%; }
.arrow-veer-right { transform: rotate(45deg);  transform-origin: 50% 50%; }
.arrow-straight   { transform: rotate(90deg);  transform-origin: 50% 50%; }

/* Mobile tweak */
@media (max-width: 520px) {
  .turnArrowCard { padding: 10px 12px; border-radius: 14px; }
  .turnArrowPrimary { font-size: 20px; }
  .turnArrowDistance { font-size: 17px; }
  .turnArrowIconWrap { width: 58px; height: 58px; flex-basis: 58px; }
  .turnArrowIcon { width: 50px; height: 50px; }
}