/* ═══════════════════════════════════════════════════════════════════════
   Embassy Eden · Location map — the Citadel map language, in Eden's palette
   ───────────────────────────────────────────────────────────────────────
   Client 2026-09-04: "location map also make it same style like citadel map
   but make sure to showcase this particularly for eaden".

   Ported from Embassy Citadel v9 (`sales-suite/embassy-citadel/v9/deploy/
   location.html`). What carries over is the *language*, not the colours —
   Citadel is gold-on-onyx over Bombay, Eden is green-on-paper over the
   Devanahalli belt:

     · POI pins are filled discs on a paper ring with a white glyph inside,
       not bare dots — a legend you can read at a glance
     · the project is a name PLATE on a stem, never a pin: it is the subject
       of the map, so it is labelled like a place, not marked like an amenity
     · distance rings put Eden at the centre of its own catchment
     · a multiply wash pulls the whole surface into the brand's warmth
     · the route runs a paper casing under the stroke with a dot that travels

   Loaded after about-location.css, which it supersedes on pin styling.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the wash · Citadel's .map-wash, as a pseudo so no markup changes ──── */
.map-field{position:relative}
.map-field::after{
  content:"";position:absolute;inset:0;z-index:400;
  pointer-events:none;mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse 34% 52% at 50% 50%,
      transparent 0%, rgba(228,201,176,.07) 68%, rgba(63,89,58,.11) 100%),
    linear-gradient(180deg, rgba(255,242,235,.12), transparent 13%,
      transparent 88%, rgba(255,242,235,.12));
}

/* ── POI pins ──────────────────────────────────────────────────────────── */
.map-pin .pin-dot{
  width:26px!important;height:26px!important;
  border-radius:999px!important;
  background:var(--acc,#3f593a)!important;
  border:2px solid #fff2eb!important;
  display:flex!important;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(31,42,32,.28),0 0 0 .5px rgba(31,42,32,.18)!important;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease!important;
}
.map-pin .pin-dot svg{
  width:13px;height:13px;display:block;
  fill:none;stroke:#fff8f3;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.map-pin:hover .pin-dot{transform:scale(1.16)!important}
.map-pin .pin-dot::before{content:none!important}

/* Embassy's own properties wear a second ring — on this map they are family,
   not amenities, and they should read that way even inside "All". */
.map-pin.cat-embassy .pin-dot{
  width:30px!important;height:30px!important;
  box-shadow:0 0 0 3px rgba(255,242,235,.55),0 5px 14px rgba(31,42,32,.32)!important;
}
.map-pin.cat-embassy .pin-dot svg{width:15px;height:15px}
.map-pin.cat-embassy b{font-weight:600;letter-spacing:.14em}

/* the chosen pin lifts and pulses, Citadel's .poi-marker.is-active */
.map-pin.is-hot .pin-dot{
  transform:scale(1.28)!important;
  animation:poiPulse 1.5s ease-out infinite;
}
@keyframes poiPulse{
  0%,100%{box-shadow:0 6px 14px rgba(31,42,32,.34),0 0 0 0 rgba(255,242,235,.7)}
  50%    {box-shadow:0 6px 14px rgba(31,42,32,.34),0 0 0 9px rgba(255,242,235,0)}
}
.map-pin b{top:50%}

/* ── the project · a name plate on a stem ──────────────────────────────── */
.map-eden .eden-pulse{display:none!important}
/* Leaflet writes an inline transform on every marker icon, so a transform of
   our own here is simply lost — the icon is a ZERO-size box pinned at the true
   coordinate and the plate is stacked upward from it with absolute children.
   Same convention the POI pins and the old pulse marker already used. */
.map-eden{overflow:visible!important}
.map-eden .pm-card{
  position:absolute;left:0;top:-20px;transform:translate(-50%,-100%);
  display:flex;align-items:center;gap:9px;
  padding:6px 14px 6px 9px;
  border-radius:999px;
  background:linear-gradient(155deg,rgba(255,248,243,.96),rgba(254,236,222,.92));
  border:1.5px solid #3f593a;
  box-shadow:0 14px 32px -10px rgba(31,42,32,.34),0 0 0 4px rgba(255,242,235,.5);
  white-space:nowrap;
}
.map-eden .pm-diamond{
  width:12px;height:12px;flex:0 0 auto;transform:rotate(45deg);
  border:1px solid #2c3f28;
  background:linear-gradient(135deg,#6f9464 0%,#3f593a 55%,#2c3f28 100%);
}
.map-eden .pm-text{display:flex;flex-direction:column;gap:2px;line-height:1}
.map-eden .pm-card b{
  position:static!important;transform:none!important;
  font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:#2c3f28;text-shadow:none!important;
}
.map-eden .pm-card i{
  font-style:normal;
  font:500 7.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;
  color:#6f7d5c;
}
.map-eden .pm-stem{
  position:absolute;left:0;top:-20px;transform:translateX(-50%);
  width:1px;height:15px;background:#3f593a;opacity:.65;
}
.map-eden .pm-dot{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:999px;
  background:#3f593a;border:2px solid #fff2eb;
  box-shadow:0 0 0 1.5px #3f593a,0 4px 10px rgba(31,42,32,.42);
}

/* ── distance rings ────────────────────────────────────────────────────── */
.ring-label{
  display:inline-block;transform:translate(-50%,-50%);
  font:500 8.5px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;
  color:#5b6b52;background:rgba(255,248,243,.86);
  padding:3px 8px;border-radius:999px;border:1px solid rgba(63,89,58,.18);
  white-space:nowrap;font-variant-numeric:tabular-nums;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.leaflet-marker-icon.ring-label-wrap{background:none;border:none;overflow:visible!important;pointer-events:none}

/* ── the route ─────────────────────────────────────────────────────────── */
.route-line{filter:drop-shadow(0 1px 2px rgba(60,44,20,.32))}

/* The basemap is graded per pixel in about-location.js now, so the blanket
   CSS filter that used to sit here has to come off — it was the other half of
   why the map read bleached, draining the roads and the type along with the
   land it was aimed at. */
#edenMap .leaflet-tile-pane{filter:none!important}