/* Skiathos Homes — self-hosted vector location dossier. */

.sh-map-body #propertyMap.sh-local-map {
  position: relative;
  overflow: hidden;
  background: #09111b;
  isolation: isolate;
}

.sh-local-map__stage,
.sh-local-map__canvas,
.sh-local-map__canvas > svg {
  width: 100%;
  height: 100%;
}

.sh-local-map__stage {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.sh-local-map__stage.is-dragging,
.sh-local-map__stage.is-pinching { cursor: grabbing; }
.sh-local-map__stage:focus-visible::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 12;
  border: 1px solid rgba(201,174,120,.72);
  pointer-events: none;
}

.sh-local-map__canvas {
  position: absolute;
  inset: 0;
  background: var(--sh-map-sea);
}
.sh-local-map__canvas > svg {
  display: block;
  contain: strict;
}

.sh-local-map.sh-map--dark {
  --sh-map-sea: #09111b;
  --sh-map-grid: rgba(201,174,120,.055);
  --sh-map-land: #111b25;
  --sh-map-residential: rgba(201,174,120,.055);
  --sh-map-forest: rgba(63,91,74,.20);
  --sh-map-beach: rgba(201,174,120,.25);
  --sh-map-water: #263b4d;
  --sh-map-road-path: rgba(255,255,255,.10);
  --sh-map-road-minor: rgba(255,255,255,.15);
  --sh-map-road-local: rgba(255,255,255,.25);
  --sh-map-road-major: rgba(201,174,120,.48);
  --sh-map-taxiway: rgba(255,255,255,.18);
  --sh-map-runway: rgba(255,255,255,.32);
  --sh-map-coast: rgba(201,174,120,.42);
  --sh-map-label: rgba(255,255,255,.45);
  --sh-map-label-town: rgba(255,255,255,.72);
  --sh-map-label-muted: rgba(255,255,255,.34);
  --sh-map-label-halo: #0b141e;
}

.sh-local-map.sh-map--light {
  --sh-map-sea: #dfe8e8;
  --sh-map-grid: rgba(50,68,73,.10);
  --sh-map-land: #f1ede1;
  --sh-map-residential: rgba(156,126,77,.11);
  --sh-map-forest: rgba(83,117,91,.24);
  --sh-map-beach: rgba(195,161,101,.36);
  --sh-map-water: #9bbbc2;
  --sh-map-road-path: rgba(45,56,61,.22);
  --sh-map-road-minor: rgba(45,56,61,.30);
  --sh-map-road-local: rgba(42,51,55,.43);
  --sh-map-road-major: rgba(128,93,45,.70);
  --sh-map-taxiway: rgba(55,61,63,.28);
  --sh-map-runway: rgba(45,51,53,.48);
  --sh-map-coast: rgba(116,84,42,.66);
  --sh-map-label: rgba(38,47,50,.60);
  --sh-map-label-town: rgba(24,31,34,.82);
  --sh-map-label-muted: rgba(40,49,52,.50);
  --sh-map-label-halo: #f1ede1;
}

.sh-local-map__location {
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sh-local-map__pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 3px solid #07101a;
  border-radius: 50%;
  background: #c9ae78;
  box-shadow: 0 0 0 1px rgba(201,174,120,.42), 0 7px 24px rgba(2,8,14,.55);
  pointer-events: none;
}
.sh-map--light .sh-local-map__pin {
  background: #0b1622;
  border-color: #c9ae78;
}
.sh-local-map__pin::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(201,174,120,.58);
  border-radius: inherit;
}
@keyframes sh-local-pin-pulse {
  0% { transform: scale(.72); opacity: .72; }
  72%, 100% { transform: scale(2.9); opacity: 0; }
}

.sh-local-map__approx-field {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sh-approx-size, 130px);
  height: var(--sh-approx-size, 130px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 1.5px solid rgba(201,174,120,.72);
  border-radius: 50%;
  background: rgba(201,174,120,.055);
  box-shadow: inset 0 0 42px rgba(201,174,120,.07), 0 0 26px rgba(201,174,120,.10);
}
.sh-local-map__approx-field::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(201,174,120,.16);
  opacity: .28;
  pointer-events: none;
}
.sh-map--light .sh-local-map__approx-field {
  border-color: rgba(112,80,39,.64);
  background: rgba(128,93,45,.06);
  box-shadow: inset 0 0 42px rgba(128,93,45,.08), 0 0 22px rgba(50,58,54,.12);
}
.sh-map--light .sh-local-map__approx-field::before { background: rgba(128,93,45,.17); }
.sh-local-map__location.is-approx .sh-local-map__approx-field { display: block; }
.sh-local-map__location.is-approx .sh-local-map__pin { display: none; }

.sh-local-map__label {
  position: absolute;
  left: 0;
  bottom: 24px;
  transform: translateX(-50%);
  min-width: 154px;
  max-width: min(250px, 70vw);
  padding: 12px 16px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(201,174,120,.20);
  border-radius: 5px;
  background: rgba(8,15,24,.86);
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(2,8,14,.38);
  text-align: center;
  pointer-events: none;
}

.sh-local-map__location:not(.is-approx) .sh-local-map__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(201,174,120,.20);
  border-bottom: 1px solid rgba(201,174,120,.20);
  background: #081018;
}

.sh-local-map__label .sh-map-pop__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-head, serif);
  font-size: .92rem;
  line-height: 1.25;
  color: rgba(255,255,255,.94);
}

.sh-local-map__label .sh-map-pop__sub {
  position: relative;
  z-index: 1;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(201,174,120,.76);
}

.sh-local-map__location.is-approx .sh-local-map__label {
  display: none;
}

.sh-local-map__zoom {
  position: absolute;
  z-index: 9;
  left: 14px;
  top: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 5px;
  background: rgba(7,14,23,.78);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(2,8,14,.30);
}
.sh-local-map__zoom button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font: 400 1.25rem/1 var(--font-body, sans-serif);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, transform .1s ease-out;
}
.sh-local-map__zoom button:last-child { border-bottom: 0; font-size: .76rem; }
.sh-local-map__zoom button:hover,
.sh-local-map__zoom button:focus-visible {
  background: rgba(201,174,120,.16);
  color: #c9ae78;
  outline: none;
}
.sh-local-map__zoom button:active { transform: scale(.90); }

.sh-local-map .sh-map-skin {
  position: absolute;
  z-index: 9;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  background: rgba(7,14,23,.80);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(2,8,14,.30);
  font-family: var(--font-body, sans-serif);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .1s ease-out;
}
.sh-local-map .sh-map-skin i { color: #c9ae78; font-size: .82rem; }
.sh-local-map .sh-map-skin:hover,
.sh-local-map .sh-map-skin:focus-visible {
  border-color: #c9ae78;
  background: #171710;
  color: #c9ae78;
  outline: none;
}
.sh-local-map .sh-map-skin:active { transform: scale(.96); }

.sh-local-map__scale {
  position: absolute;
  z-index: 8;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: rgba(255,255,255,.70);
  font-size: .58rem;
  pointer-events: none;
}
.sh-local-map__scale span {
  display: block;
  min-width: 12px;
  max-width: 110px;
  height: 7px;
  border: 1px solid rgba(201,174,120,.52);
  border-top: 0;
}
.sh-local-map__scale b { font-weight: 600; }
.sh-map--light .sh-local-map__scale { color: rgba(24,31,34,.72); }

.sh-local-map__credit {
  position: absolute;
  z-index: 8;
  right: 10px;
  bottom: 7px;
  padding: 3px 5px;
  border-radius: 2px;
  background: rgba(8,13,22,.66);
  color: rgba(255,255,255,.42) !important;
  font-size: .52rem;
  text-decoration: none !important;
}
.sh-local-map__credit:hover,
.sh-local-map__credit:focus-visible { color: #c9ae78 !important; }

.sh-local-map__status {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 30px;
  background: #09111b;
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  letter-spacing: .08em;
  text-align: center;
}
.sh-local-map__status a { color: #c9ae78; }

@media (max-width: 600px) {
  .sh-local-map__zoom { left: 10px; top: 10px; }
  .sh-local-map__zoom button { width: 34px; height: 34px; }
  .sh-local-map .sh-map-skin { right: 10px; top: 10px; height: 30px; padding: 0 10px; }
  .sh-local-map__label { min-width: 140px; padding: 10px 13px 9px; }
  .sh-local-map__scale { left: 10px; bottom: 9px; }
  .sh-local-map__credit { right: 7px; bottom: 5px; font-size: .46rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .sh-local-map__pin::before { animation: sh-local-pin-pulse 2.9s ease-out infinite; }
  .sh-local-map__location.is-approx .sh-local-map__approx-field::before {
    animation: sh-local-area-breathe 4.5s cubic-bezier(.77, 0, .175, 1) infinite;
  }
}

@keyframes sh-local-area-breathe {
  0%, 100% { opacity: .24; }
  50% { opacity: .72; }
}

@media (prefers-reduced-transparency: reduce) {
  .sh-local-map__label,
  .sh-local-map__zoom,
  .sh-local-map .sh-map-skin {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7,14,23,.96);
  }
}