/* Darwesh Marker System — the one marker/pin visual language for every
 * map surface (public Explore, My Properties, Admin). Extracted verbatim
 * from map.html's original inline styles (dark #17150F + gold #B89A63
 * pill, inline-SVG property-type glyph, red/green verification ring,
 * active-state halo/scale) so every consumer renders the identical
 * marker instead of each page inventing its own -- map.html's own pin
 * was already the on-brand one; this file just gives it a shared home
 * so admin.html's Map Management tab (and any future consumer) draws
 * from the same source instead of a fourth competing pin style.
 *
 * New in this file (not extracted, genuinely new): `.pin-private` (a
 * composable ring modifier, not a competing pin family, replacing
 * admin's old solid red/green `.req-pin` marker), `.darwesh-edit-pin`
 * (the distinctive draggable location-edit-mode pin), and
 * `.darwesh-locate-dot` (live-user current-location blue/cyan dot with
 * a one-shot confirmation pulse — never listing pins or Sell edit pins).
 */

/* Smoked-glass surface -- a gradient wash over a translucent obsidian
 * base plus backdrop-blur, matching the same "dark glass, not flat
 * navy" recipe used across the toolbar/navbar/hero (Leaflet markers are
 * real DOM elements, so backdrop-filter works on them exactly like any
 * other panel). Border/shadow/verified-ring colors are unchanged -- this
 * is a surface refinement, not a new marker language. */
.price-pin {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background-image: linear-gradient(180deg, rgba(224,190,130,.1), rgba(224,190,130,.02));
  background-color: rgba(15,14,11,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid #5D482B;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 14px -6px rgba(184,154,99,0.55);
  white-space: nowrap;
  transition: all .15s ease;
  cursor: pointer;
  color: #F2EEE5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Default marker language: a small champagne dot, not a property-type
 * glyph -- "● $285K", never an oversized house icon. Verified/unverified
 * read as a thin ring around the dot (tiny accent only, never a
 * whole-marker color change); unverified is the ordinary, common state
 * for most pins on this map, so it gets a neutral ring, not red (red
 * reads as "something's wrong" in UI convention) -- verified stays
 * green, the one state actually worth calling out. */
.price-pin .price-pin-icon {
  width: 9px; height: 9px; flex-shrink: 0; border-radius: 999px;
  background: #E0BE82;
  box-shadow: 0 0 0 2px rgba(143,136,124,.4);
}
.price-pin .price-pin-label { line-height: 1; }
.price-pin.pin-unverified .price-pin-icon { box-shadow: 0 0 0 2px rgba(143,136,124,.4); }
.price-pin.pin-verified .price-pin-icon { box-shadow: 0 0 0 2px rgba(111,203,127,.65); }
.price-pin:hover { transform: scale(1.08); z-index: 1000 !important; border-color: #B89A63; }

/* Compact (zoomed-out) mode — dot only, no price text. */
.price-pin.price-pin-compact {
  width: 16px; height: 16px; padding: 0; justify-content: center; align-items: center;
}
.price-pin.price-pin-compact .price-pin-icon { width: 10px; height: 10px; }

.price-pin.active {
  transform: scale(1.16);
  border-color: #B89A63;
  box-shadow: 0 0 0 3px rgba(184,154,99,0.35), 0 0 22px -2px rgba(184,154,99,0.85), 0 4px 12px rgba(0,0,0,0.5);
  z-index: 1000 !important;
}

/* Private / full-access ring — a composable modifier (stacks with
 * .pin-verified/.pin-unverified), not a separate pin family. Folds in
 * the one useful idea from admin.html's old solid red/green/violet
 * `.req-pin` marker (the "full access" violet ring) as a modifier on
 * THIS marker instead of a competing visual language. */
.price-pin.pin-private {
  box-shadow: 0 0 0 2.5px #9c6ade, 0 2px 8px rgba(0,0,0,0.4), 0 0 14px -6px rgba(184,154,99,0.55);
}
.price-pin.pin-private.active {
  box-shadow: 0 0 0 2.5px #9c6ade, 0 0 0 5.5px rgba(184,154,99,0.35), 0 0 22px -2px rgba(184,154,99,0.85), 0 4px 12px rgba(0,0,0,0.5);
}

/* Neighborhood markers — blue, distinct shape from price pins. */
.neighborhood-pin {
  width: 16px; height: 16px; border-radius: 999px;
  background: #1565c0; border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(4,22,39,0.35);
}
.neighborhood-label {
  background: rgba(16,17,17,0.92);
  color: #F2EEE5;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #5D482B;
  white-space: nowrap;
  pointer-events: none;
}

/* Administrative area boundaries — dark red outline label. */
.admin-boundary-label {
  background: rgba(139,0,0,0.92);
  color: #ffffff;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Marker clusters — lightweight, on-brand grid-cluster badge. */
.price-cluster {
  width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #17150F; border: 2px solid #B89A63; color: #F2EEE5; font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); cursor: pointer;
  transition: transform .12s ease;
}
.price-cluster:hover { transform: scale(1.08); }

/* Private-listing city-rollup badge (Explore mode only). */
.private-city-badge {
  background: #17150F;
  color: #F2EEE5;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #8E7448;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease;
}
.private-city-badge:hover { transform: scale(1.06); }

/* ---- New: draggable precise-location-edit pin -----------------------
 * Deliberately a different silhouette (a downward teardrop, not the
 * pill) so it reads as "a pin being placed" rather than "a listing" --
 * used only in location-edit mode (map.html My Properties, admin Map
 * Management), never as a regular listing marker. */
.darwesh-edit-pin {
  width: 36px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.darwesh-edit-pin:active { cursor: grabbing; }
.darwesh-edit-pin-body {
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #C69A4B;
  border: 2px solid #8E7448;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 3px rgba(198,154,75,0.25);
  display: flex; align-items: center; justify-content: center;
  animation: darwesh-edit-pin-drop 220ms cubic-bezier(.34,1.56,.64,1);
}
.darwesh-edit-pin-crosshair {
  transform: rotate(45deg);
  width: 12px; height: 12px;
  color: #221807;
}
@keyframes darwesh-edit-pin-drop {
  from { transform: rotate(-45deg) translateY(-10px) scale(0.6); opacity: 0; }
  to { transform: rotate(-45deg) translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .darwesh-edit-pin-body { animation: none; }
}

/* ---- Current-location indicator (user live position ONLY) -----------
 * Compact Google-Maps-inspired clarity, original Darwesh treatment:
 * blue/cyan core, crisp platinum ring, soft shadow. One confirmation
 * pulse on first place (200–280ms), then quiet. Never used for listing
 * pins, Sell edit pins, or clusters. Geographic accuracy halo (if any)
 * is drawn separately as an L.circle by the map page. */
.darwesh-locate-icon {
  background: transparent !important;
  border: none !important;
}
.darwesh-locate-dot {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.darwesh-locate-core {
  position: relative;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #1A9BFF;
  border: 3.5px solid #F5F7FA;
  box-sizing: content-box;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .36),
    0 0 0 1px rgba(13, 15, 18, .12);
}
/* Moon: same blue core, brighter platinum ring */
html[data-dg-theme="dark"] .darwesh-locate-core,
html:not([data-dg-theme="light"]) .darwesh-locate-core {
  border-color: #F1F3F5;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(241, 243, 245, .24);
}
/* Sun: clear blue + clean white/platinum ring */
html[data-dg-theme="light"] .darwesh-locate-core,
html.light .darwesh-locate-core {
  border-color: #FFFFFF;
  box-shadow:
    0 1px 3px rgba(47, 42, 38, .24),
    0 0 0 1px rgba(47, 42, 38, .08);
}
/* Soft decorative halo under the core (not the meters-based accuracy circle). */
.darwesh-locate-dot::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 999px;
  background: rgba(26, 155, 255, .12);
}
/* One-shot confirmation pulse when the marker is first placed — then stop. */
.darwesh-locate-dot::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 999px;
  background: rgba(26, 155, 255, .30);
  animation: darwesh-locate-confirm 240ms cubic-bezier(.2, .8, .2, 1) 1 forwards;
}
@keyframes darwesh-locate-confirm {
  0% { transform: scale(1); opacity: .42; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .darwesh-locate-dot::after { animation: none; opacity: 0; }
}
/* Optional heading cone — only rendered when the browser supplies heading. */
.darwesh-locate-heading {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  justify-content: center;
  transform: rotate(var(--dg-heading, 0deg));
  pointer-events: none;
}
.darwesh-locate-heading::before {
  content: '';
  width: 14px;
  height: 16px;
  margin-top: -10px;
  background: linear-gradient(180deg, rgba(26, 155, 255, .42), rgba(26, 155, 255, 0));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .7;
}