.leaflet-control-container {
  color: #dce8f8;
}

.leaflet-control-zoom a {
  background: #152235 !important;
  color: #e9f3ff !important;
  border-color: #334a6b !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus {
  background: #20314a !important;
  color: #ffffff !important;
}

.leaflet-control-layers,
.leaflet-control-layers-expanded {
  background: rgba(17, 27, 43, 0.96) !important;
  color: #e7f1ff !important;
  border: 1px solid #385377 !important;
  box-shadow: 0 10px 24px rgba(3, 11, 20, 0.4) !important;
}

.leaflet-control-layers-toggle {
  filter: brightness(1.2) contrast(0.9);
}

.leaflet-control-layers label {
  color: #d8e9ff;
}

.leaflet-control-scale-line {
  background: rgba(15, 24, 38, 0.88) !important;
  border-color: #45648b !important;
  color: #d3e6ff !important;
}

.leaflet-popup.leaflet-zoom-animated {
}

.leaflet-container a {
  color: black;
}

.leaflet-popup-content-wrapper {
  background-color: #1f2633;
  color: #f6f9ff;
  border-radius: 16px;
  box-shadow: 0 18px 35px rgba(6, 16, 30, .42);
}

.leaflet-popup-tip {
  background: #1f2633 !important;
}

.leaflet-popup-content {
  margin: 0;
  padding: .65rem;
  background: linear-gradient(180deg, #273246, #1e2738);
  border: 1px solid #35435c;
  width: min(360px, calc(100vw - 2.5rem)) !important;
  border-radius: 16px;
}

a.leaflet-popup-close-button {
  color: #d5e7ff !important;
  font-weight: bold !important;
  font-size: 18px !important;
  margin: 4px;
  background-color: transparent !important;
  border-radius: 50%;
}

a.leaflet-popup-close-button:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, .14) !important;
}

.leaflet-marker-icon:not(.marker-cluster) {
  border-radius: 4px;
}

.leaflet-marker-icon.locator-custom-marker-icon {
  transform-origin: 50% 100%;
  transition: filter 160ms cubic-bezier(0.25, 1, 0.5, 1);
}

.leaflet-marker-icon.locator-custom-marker-icon.locator-marker-pulse {
  animation: locator-marker-pulse 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.leaflet-marker-icon.shelter-marker-container {
  width: 36px !important;
  height: 36px !important;
}

.shelter-marker {
  all: unset;
  box-sizing: border-box;
  display: block;
  cursor: pointer;
  height: 36px;
  width: 36px;
  border-radius: 50%;
}

.shelter-icon {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: 36px;
  width: 36px;
  border-radius: 999px;
  color: white;
  background: radial-gradient(circle at 30% 25%, #ffffff66 0, #ffffff00 45%), var(--marker-color, #0d6efd);
  border: 2px solid #f7fbff;
  box-shadow: 0 8px 20px rgba(0, 32, 78, .35);
}

.shelter-icon > i {
  font-size: 1.05rem;
  line-height: 1;
}

.shelter-marker-container {
  position: relative;
  width: 36px;
  height: 36px;
}

.shelter-icon i {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.shelter-marker:hover .shelter-icon {
  transform: translateY(-1px);
}

.custom-popup {
  padding: 10px 24px 8px 8px;
}

.custom-popup div.header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.custom-popup div.content {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: .6rem 0;
}

.custom-popup div.footer {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-wrap: nowrap;
  align-self: flex-start;
}

.custom-popup div.footer div {
  display: flex;
  gap: 1rem;
  align-items: center;
  text-wrap: nowrap;
}

.custom-popup ul {
  margin: 0;
  padding-left: .25rem;
}

.custom-popup .specialization li,
.custom-popup .specialization li,
.custom-popup .services li {
  list-style: none;
  font-size: .65rem;
}

.popupAddress {
  font-size: .86rem;
  color: #daebff;
}

.popupDescription {
  font-size: .78rem;
  color: #b7cbe5;
}

.popupColumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.popupLabel {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
  color: #93c2ff;
}

.popupTags {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
}

.popupTag {
  font-size: .68rem;
  line-height: 1;
  color: #dcecff;
  background: rgba(142, 188, 255, .18);
  border: 1px solid rgba(153, 202, 255, .3);
  border-radius: 999px;
  padding: .28rem .45rem;
}

.emptyTag {
  font-size: .72rem;
  opacity: .8;
}

.px-cluster-wrap {
  background: transparent;
}

.px-cluster {
  height: 40px;
  width: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #f6fbff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.34);
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), filter 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.px-cluster-wrap:hover .px-cluster {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.03);
}

.px-cluster-wrap.locator-cluster-pulse .px-cluster {
  animation: locator-cluster-pulse 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.px-cluster--sm {
  background: linear-gradient(145deg, #4bb3ff, #1f72d3);
}

.px-cluster--md {
  background: linear-gradient(145deg, #6f8dff, #4a4fdc);
}

.px-cluster--lg {
  background: linear-gradient(145deg, #ff9554, #df5f2f);
}

.px-cluster--xl {
  background: linear-gradient(145deg, #ff6d6d, #cf3737);
}

.locator-user-pin-wrap {
  background: transparent !important;
  border: 0 !important;
}

.locator-user-pin {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ff6b6b, #d93030);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid #ffd6d6;
  box-shadow: 0 7px 16px rgba(128, 20, 20, 0.45);
}

.locator-user-pin i {
  font-size: 14px;
  line-height: 1;
}

.locator-actions-control {
  background: rgba(14, 22, 35, 0.94);
  border: 1px solid #3b567b;
  padding: 4px;
  display: grid;
  gap: 4px;
  border-radius: 8px;
}

.locator-actions-btn {
  background: #1a2a41;
  color: #d8e9ff;
  border: 1px solid #45648b;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}

.locator-actions-btn:hover,
.locator-actions-btn:focus {
  background: #244064;
  color: #ffffff;
  outline: none;
}

.locator-view-control {
  margin-top: 6px;
  background: rgba(54, 45, 8, 0.96);
  border: 1px solid #b89a2c;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
}

.locator-view-control-toggle {
  background: #d7b637;
  color: #2a2206;
  border: 1px solid #f0d872;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.locator-view-control-toggle:hover,
.locator-view-control-toggle:focus {
  background: #e2c85b;
  color: #1c1604;
  outline: none;
}

.locator-view-control-panel {
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  max-width: 295px;
}

.locator-view-control.is-open .locator-view-control-panel {
  display: flex;
}

.locator-view-control-value {
  color: #f7e6a3;
  font-size: 11px;
  line-height: 1.15;
  font-family: "Geist-Mono", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.locator-view-control-btn {
  background: #d7b637;
  color: #2a2206;
  border: 1px solid #f0d872;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  text-transform: uppercase;
}

.locator-view-control-btn:hover,
.locator-view-control-btn:focus {
  background: #e2c85b;
  color: #1c1604;
  outline: none;
}

@keyframes locator-marker-pulse {
  0% {
    filter: brightness(1) saturate(1);
  }
  45% {
    filter: brightness(1.16) saturate(1.18);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}

@keyframes locator-cluster-pulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.11);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-marker-icon.locator-custom-marker-icon,
  .leaflet-marker-icon.locator-custom-marker-icon.locator-marker-pulse,
  .px-cluster-wrap.locator-cluster-pulse .px-cluster {
    animation: none !important;
  }

  .leaflet-marker-icon.locator-custom-marker-icon,
  .px-cluster {
    transition: none !important;
  }

  .leaflet-marker-icon.locator-custom-marker-icon:hover,
  .px-cluster-wrap:hover .px-cluster {
    transform: none !important;
    filter: none !important;
  }
}
