/* "Show my location" button for the Leaflet maps (js/locate.js). */

.dotm-locate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--va-white, #fff);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dotm-locate svg {
  width: 24px;
  height: 24px;
  fill: var(--va-hover, #be0000);
}
.dotm-locate:hover {
  opacity: 0.85;
}
.dotm-locate:focus-visible {
  outline: 2px solid var(--va-hover, #be0000);
  outline-offset: 2px;
}
.dotm-locate.is-loading svg {
  animation: dotm-locate-blink 1s ease-in-out infinite;
}

@keyframes dotm-locate-blink {
  50% {
    opacity: 0.25;
  }
}

/* Front page: shown in map view only — in the search bar next to the filters button,
   in the bottom-right corner of the screen on phones. */
.va-hero .dotm-locate {
  display: none;
}
body.va-map-mode .va-hero .dotm-locate {
  display: flex;
}
@media (max-width: 768px) {
  body.va-map-mode .va-hero .dotm-locate {
    position: fixed;
    right: 12px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  body.va-map-mode .va-hero .dotm-locate svg {
    width: 26px;
    height: 26px;
  }
}

/* Category pages: shown in map view only — next to the "show list" button (same size and
   offset), in the bottom-right corner of the screen on phones. */
.category-header__top .dotm-locate {
  display: none;
  width: 38px;
  height: 38px;
  margin: 10px 0 0 -14px; /* the row's gap is 24px; sit 10px from the toggle */
  border-radius: 8px;
}
.category-header__top .dotm-locate svg {
  width: 22px;
  height: 22px;
}
body.va-map-mode .category-header__top .dotm-locate {
  display: flex;
}

/* Post and topic pages: hidden until js/locate.js moves it into the map as a control. */
#map + .dotm-locate,
#dotm-tp-leaflet + .dotm-locate {
  display: none;
}
.dotm-locate-ctl .dotm-locate {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.dotm-locate-ctl .dotm-locate svg {
  width: 22px;
  height: 22px;
}

/* Phones: fixed bottom-right corner of the screen in map view (category pages). */
@media (max-width: 768px) {
  body.va-map-mode .category-header__top .dotm-locate {
    position: fixed;
    right: 12px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 12px;
  }
  body.va-map-mode .category-header__top .dotm-locate svg {
    width: 26px;
    height: 26px;
  }
}

/* The visitor's position on the map: blue dot with a soft pulse. */
.dotm-locate-dot {
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1a73e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.dotm-locate-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: dotm-locate-pulse 2s ease-out infinite;
}

@keyframes dotm-locate-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(26, 115, 232, 0);
  }
}

/* Message when the position is not available (blocked, location services off, ...). */
.dotm-locate-toast {
  position: fixed;
  left: 50%;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  z-index: 10001;
  box-sizing: border-box;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 10px;
  background: #21294a;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dotm-locate-toast.is-shown {
  opacity: 1;
  pointer-events: auto;
}