/* finnting hero map styles — single Leaflet map (tiles + listing pins) plus an
   ambient easter-egg creature overlay shown only at country zoom. */

/* Leaflet fills the hero column. */
.hero-right .ft-leaflet{position:absolute;inset:0;z-index:1;background:#adc6d3}

/* The "N annonser" pill, bottom-left. */
.hero-right .map-float{left:18px;right:auto;bottom:14px;z-index:20}

/* ===== Geo-accurate ambient creatures =====
   hero-creatures.js appends this SVG over the map and positions each creature in
   container pixels (projected from real lat/lng every frame), so they pan/zoom with
   the map. Clicks pass through; it fades out during zoom / above the country frame. */
.hero-right .ft-creatures{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;transition:opacity .35s ease}

/* Leaflet divIcon resets — no white box behind our custom pins / weather chips. */
.leaflet-div-icon.ad-pin,.leaflet-div-icon.wx-chip{background:none;border:none}

/* ===== Weather city chips (MET/Yr icon + temperature) ===== */
.wx-chip{pointer-events:none;text-align:center;line-height:1}
.wx-chip .wx-ico{width:38px;height:38px;display:block;margin:0 auto;filter:drop-shadow(0 1px 2px rgba(20,30,25,.4))}
.wx-chip .wx-temp{display:inline-block;margin-top:-3px;background:rgba(255,255,255,.88);color:#2f5566;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:12px;padding:1px 7px;border-radius:999px;box-shadow:0 1px 3px rgba(20,30,25,.22)}
@media (prefers-reduced-motion: reduce){ .hero-right .ft-creatures{display:none} }

/* ===== Test panel (only present with ?maptest=1) — step through creature types ===== */
.ft-maptest{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:30;display:flex;gap:6px;align-items:center;background:rgba(28,43,33,.92);padding:6px 8px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.32)}
.ft-maptest button{border:none;cursor:pointer;background:#e5a93c;color:#1c2b21;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:12px;padding:6px 10px;border-radius:7px}
.ft-maptest button:hover{background:#f0b94a}
.ft-maptest .ft-maptest-label{color:#cfe9dd;font-size:11px;font-family:'Hanken Grotesk',sans-serif;min-width:64px;text-align:center}

/* ===== Bold animated listing pins ("louder" = prominent + pulse, "faster" = snappy pop) ===== */
.ad-pin .ad-pin-dot,.ad-pin .ad-pin-ring{position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%}
.ad-pin .ad-pin-dot{background:#234b38;border:2.5px solid #fff;box-shadow:0 1px 3px rgba(20,30,25,.5);transform:scale(0);animation:adPop .42s cubic-bezier(.34,1.56,.64,1) forwards}
.ad-pin.feat .ad-pin-dot{background:#e5a93c}
.ad-pin .ad-pin-ring{border:2px solid #234b38;opacity:.55;animation:adPulse 1.8s ease-out infinite}
.ad-pin.feat .ad-pin-ring{border-color:#e5a93c}
@keyframes adPop{0%{transform:scale(0)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes adPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .ad-pin .ad-pin-dot{animation:none;transform:scale(1)}
  .ad-pin .ad-pin-ring{animation:none;opacity:0}
  .hero-right .ft-eggs{display:none}
}