.ux-user-location {
  position: relative;
  width: 64px;
  height: 64px;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.ux-user-location[hidden] {
  display: none;
}

.ux-user-location-accuracy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.13);
  border: 1px solid rgba(66, 133, 244, 0.18);
  transition: width 180ms ease, height 180ms ease;
}

.ux-user-location-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #4285f4;
  border: 3px solid #fff;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(37, 99, 235, 0.18);
  z-index: 3;
}

.ux-user-location-beam {
  position: absolute;
  left: 50%;
  top: -24px;
  width: 74px;
  height: 58px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 56px;
  clip-path: polygon(50% 100%, 25% 0%, 75% 0%);
  background: linear-gradient(
    to top,
    rgba(66, 133, 244, 0.38),
    rgba(66, 133, 244, 0.04)
  );
  filter: drop-shadow(0 2px 2px rgba(66, 133, 244, 0.08));
  z-index: 1;
  transition:
    transform 110ms linear,
    width 160ms ease;
}

.ux-user-location-beam[hidden] {
  display: none;
}

#btnRecenter {
  color: #64748b;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#btnRecenter.is-following {
  color: #4285f4;
  border-color: rgba(66, 133, 244, 0.42);
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.13),
    0 0 0 2px rgba(66, 133, 244, 0.10);
}

#btnRecenter.is-heading-up .ux-location-control-icon {
  transform: scale(1.04);
}

.ux-location-control-icon {
  display: block;
  transition: transform 160ms ease;
}

.ux-compass-rose {
  position: fixed;
  left: 16px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 1000;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.90);
  color: #0f766e;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.ux-compass-rose-face {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform 140ms linear;
}

.ux-compass-north {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  z-index: 2;
}

.ux-compass-rose.is-north-up {
  border-color: rgba(15, 118, 110, 0.26);
}

@media (max-width: 700px) {
  .ux-compass-rose {
    left: 14px;
    bottom: calc(54px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }

  .ux-compass-rose-face {
    width: 46px;
    height: 46px;
  }
}