/* ── Results map panel ─────────────────────────────────────────────────────
   Shared by search.html and the four landing-page templates (type/theme,
   brand, model, country). The layout rules below used to be copy-pasted into
   each of those five <style> blocks; they live here so the panel, the markers
   and the popups can only look one way.

   Loaded as its own file rather than added to marketplace.css because that one
   is version-stamped on ~58 pages and a cache bump there is a 58-file edit. */

.search-layout { display: flex; gap: 0; align-items: flex-start; }
/* Only added while the map is open, so a closed map costs the grid no width. */
.search-layout--map { gap: 20px; }
.search-results { flex: 1 1 auto; min-width: 0; }

.map-panel {
  /* Height of the sticky search toolbar (+8px of air). Pages whose toolbar is
     a different height override just this one value. */
  --map-offset: 81px;
  display: none;
  flex: 0 0 46%;
  width: 46%;
  position: sticky;
  top: calc(var(--nav-height) + var(--map-offset));
  height: calc(100vh - var(--nav-height) - var(--map-offset) - 24px);
  border: 1px solid var(--fog-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist-100);
  box-shadow: 0 12px 32px rgba(20, 21, 21, 0.10);
}
.map-panel.open { display: block; }

#search-map { width: 100%; height: 100%; background: var(--mist-100); }
/* Leaflet ships its own font stack; the map is part of the page, not a widget. */
.leaflet-container { font-family: var(--font-base); }

/* ── Panel overlays (injected by map-panel.js) ─────────────────────────────
   Leaflet's own controls top out at z-index 800, so these sit above them. */
.pfmap-chip {
  position: absolute; z-index: 900; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 76px);
  padding: 7px 13px;
  background: var(--white); color: var(--ink-900);
  border: 1px solid var(--fog-200); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 4px 14px rgba(20, 21, 21, 0.12);
  pointer-events: none;
}
.pfmap-chip__sub { color: var(--steel-400); font-weight: 500; }
.pfmap-chip__spin {
  display: none;
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid var(--fog-200); border-top-color: var(--brand-orange);
  animation: pfmap-spin 0.7s linear infinite;
}
.pfmap-chip--busy .pfmap-chip__spin { display: block; }
@keyframes pfmap-spin { to { transform: rotate(360deg); } }

.pfmap-close {
  position: absolute; z-index: 900; right: 12px; top: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--white); color: var(--ink-900);
  border: 1px solid var(--fog-200); border-radius: 50%;
  box-shadow: 0 4px 14px rgba(20, 21, 21, 0.14);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.pfmap-close:hover { background: var(--ink-900); color: var(--white); }

/* ── Markers ───────────────────────────────────────────────────────────────
   L.divIcon is created with iconSize:null, so Leaflet only positions the
   wrapper and the pill/bubble sizes itself off its own content. Both are
   pulled onto the coordinate with a transform rather than an iconAnchor,
   which is what lets the price pill be as wide as its price. */
.pfmap-icon { background: none; border: 0; }

.pfmap-pin {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; white-space: nowrap;
  background: var(--ink-900); color: var(--white);
  border: 1.5px solid var(--white); border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 3px 10px rgba(20, 21, 21, 0.28);
  transition: background 0.15s, transform 0.15s;
}
.pfmap-pin::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin-top: -2px;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top: 6px solid var(--ink-900);
  transition: border-top-color 0.15s;
}
.pfmap-pin__dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--brand-orange);
}
.pfmap-icon:hover { z-index: 650 !important; }
.pfmap-icon:hover .pfmap-pin,
.pfmap-icon--active .pfmap-pin { background: var(--brand-orange); }
.pfmap-icon:hover .pfmap-pin::after,
.pfmap-icon--active .pfmap-pin::after { border-top-color: var(--brand-orange); }
.pfmap-icon:hover .pfmap-pin { transform: translate(-50%, -100%) scale(1.06); }
.pfmap-icon--active .pfmap-pin .pfmap-pin__dot { background: var(--white); }

.pfmap-cluster {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-orange); color: var(--white);
  border: 2px solid var(--white); border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 5px rgba(255, 80, 0, 0.16), 0 3px 10px rgba(20, 21, 21, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pfmap-cluster--s { width: 34px; height: 34px; font-size: 12.5px; }
.pfmap-cluster--m { width: 42px; height: 42px; font-size: 13.5px; }
.pfmap-cluster--l { width: 52px; height: 52px; font-size: 15px; }
.pfmap-icon:hover .pfmap-cluster {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 7px rgba(255, 80, 0, 0.22), 0 4px 14px rgba(20, 21, 21, 0.3);
}

/* ── Popups ────────────────────────────────────────────────────────────────
   Leaflet's default popup chrome (rounded 12px white box, blue link close) is
   replaced wholesale so a popup reads as a PlaneFox card. */
.leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden;
  border: 1px solid var(--fog-200); border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(20, 21, 21, 0.22);
}
.leaflet-popup-content { margin: 0; width: 260px !important; line-height: 1.45; }
.leaflet-popup-tip { box-shadow: none; border: 1px solid var(--fog-200); }
.leaflet-container a.leaflet-popup-close-button {
  top: 7px; right: 7px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.94); color: var(--ink-900);
  border-radius: 50%; font: 700 18px/1 var(--font-base);
  box-shadow: 0 1px 5px rgba(20, 21, 21, 0.25);
}
.leaflet-container a.leaflet-popup-close-button:hover {
  background: var(--ink-900); color: var(--white);
}

/* Single-listing popup card */
.pfmap-card { display: block; color: inherit; }
.pfmap-card__img {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mist-100);
}
.pfmap-card__img img { width: 100%; height: 100%; object-fit: cover; }
.pfmap-card__img .no-img { width: 100%; height: 100%; }
.pfmap-card__img--empty { aspect-ratio: 16 / 5; }
.pfmap-card__img--empty .no-img svg { width: 30px; height: 30px; }
.pfmap-card__body { padding: 12px 14px 14px; }
.pfmap-card__make {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--steel-400);
}
.pfmap-card__title {
  font-size: 15px; font-weight: 700; color: var(--ink-900);
  line-height: 1.3; margin-top: 3px;
}
.pfmap-card__specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pfmap-card__loc {
  display: flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 12px; color: var(--steel-400);
}
.pfmap-card__price-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.pfmap-card__price {
  font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink-900);
}
.pfmap-card__cta {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--brand-orange);
}
.pfmap-card:hover .pfmap-card__cta { text-decoration: underline; }

/* Stacked-location popup: one geocoded place holding several aircraft */
.pfmap-list__head {
  padding: 12px 40px 10px 14px; border-bottom: 1px solid var(--fog-200);
}
.pfmap-list__count {
  font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink-900);
}
.pfmap-list__where {
  display: block; margin-top: 2px; font-size: 12px; color: var(--steel-400);
}
.pfmap-list__scroll { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.pfmap-row {
  display: flex; gap: 10px; padding: 9px 14px; color: inherit;
  border-bottom: 1px solid var(--mist-100);
}
.pfmap-row:last-child { border-bottom: 0; }
.pfmap-row:hover { background: var(--mist-100); }
.pfmap-row__img {
  width: 64px; height: 46px; flex: none; border-radius: var(--r-xs);
  overflow: hidden; background: var(--mist-100);
}
.pfmap-row__img img { width: 100%; height: 100%; object-fit: cover; }
.pfmap-row__img .no-img svg { width: 22px; height: 22px; }
.pfmap-row__text { min-width: 0; }
.pfmap-row__title {
  font-size: 13px; font-weight: 600; color: var(--ink-900); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pfmap-row__price {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800;
  color: var(--ink-900); margin-top: 3px;
}
.pfmap-list__more {
  padding: 9px 14px; border-top: 1px solid var(--fog-200);
  font-size: 12px; color: var(--steel-400); background: var(--mist-100);
}
.pfmap-skeleton { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.pfmap-skeleton div {
  height: 12px; border-radius: 4px; background: var(--mist-100);
  animation: pfmap-pulse 1.4s ease-in-out infinite;
}
.pfmap-skeleton div:first-child { height: 76px; }
.pfmap-skeleton div:nth-child(3) { width: 55%; }
@keyframes pfmap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.pfmap-empty {
  position: absolute; z-index: 880; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 78%; padding: 14px 18px; text-align: center;
  background: var(--white); border: 1px solid var(--fog-200);
  border-radius: var(--r-md); box-shadow: 0 10px 28px rgba(20, 21, 21, 0.14);
  font-size: 13.5px; color: var(--slate-700);
}

/* ── Mobile: full-screen sheet ─────────────────────────────────────────────
   The only way back out is the close button, so it grows and gains a label. */
@media (max-width: 768px) {
  .search-layout--map { gap: 0; }
  .map-panel.open {
    display: block; position: fixed; inset: 0; top: var(--nav-height);
    width: 100%; height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    border: 0; border-radius: 0; box-shadow: none; z-index: 120;
  }
  .pfmap-close { width: auto; height: 40px; padding: 0 14px; gap: 6px; border-radius: var(--r-pill); }
  .pfmap-close__label { font-size: 13.5px; font-weight: 600; }
  .pfmap-chip { max-width: calc(100% - 130px); }
  .leaflet-popup-content { width: 240px !important; }
}
@media (min-width: 769px) {
  .pfmap-close__label { display: none; }
}