/* =========================
   World Map (WM) – CSS
   ========================= */

/* ===== Scope ===== */
.wm-wrap { position: relative; width: 100%; }
.wm-wrap .wm-stage{
  width: 100%;
  aspect-ratio: calc(var(--wm-vb-w, 2000) / var(--wm-vb-h, 857));
  position: relative;
  overflow: hidden;
}

/* SVG wypełnia kontener (nie height:auto!) */
.wm-wrap svg{ width:100%; height:100%; display:block; }

/* ===== Land & borders (bazowe kolory lądów) =====
   Uwaga: NIE stylujemy <g>, żeby dziedziczenie z grupy nie kolidowało z hover/active. */
.wm-wrap path,
.wm-wrap polygon,
.wm-wrap rect,
.wm-wrap circle,
.wm-wrap ellipse,
.wm-wrap polyline,
.wm-wrap line{
  fill: var(--wm-land, #e5e7eb);
  stroke: var(--wm-stroke, #0f172a);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
  transition: fill .15s ease, opacity .15s ease;
}

/* ===== Interactivity (kraje) ===== */
.wm-wrap .wm-hit{
  cursor: pointer;
  touch-action: manipulation;
}

/* --- Active (stan normalny) --- */
/* Obsługujemy zarówno .is-active (nowe) jak i .wm-active (stare) */
.wm-wrap .wm-hit.is-active,
.wm-wrap .wm-hit.is-active path,
.wm-wrap .wm-hit.is-active polygon,
.wm-wrap .wm-hit.is-active rect,
.wm-wrap .wm-hit.is-active circle,
.wm-wrap .wm-hit.is-active ellipse,
.wm-wrap .wm-hit.is-active polyline,
.wm-wrap .wm-hit.is-active line,
.wm-wrap .wm-hit.wm-active,
.wm-wrap .wm-hit.wm-active path,
.wm-wrap .wm-hit.wm-active polygon,
.wm-wrap .wm-hit.wm-active rect,
.wm-wrap .wm-hit.wm-active circle,
.wm-wrap .wm-hit.wm-active ellipse,
.wm-wrap .wm-hit.wm-active polyline,
.wm-wrap .wm-hit.wm-active line{
  fill: var(--wm-active, #f43f5e) !important;
}

/* --- Hover (miękki podgląd) --- */
.wm-wrap .wm-hit:hover,
.wm-wrap .wm-hit:hover path,
.wm-wrap .wm-hit:hover polygon,
.wm-wrap .wm-hit:hover rect,
.wm-wrap .wm-hit:hover circle,
.wm-wrap .wm-hit:hover ellipse,
.wm-wrap .wm-hit:hover polyline,
.wm-wrap .wm-hit:hover line{
  fill: var(--wm-hover, #38bdf8) !important;
}

/* --- Hover ma działać także dla aktywnego kraju (nadpisuje kolor active tylko na czas hovera) --- */
.wm-wrap .wm-hit.is-active:hover,
.wm-wrap .wm-hit.is-active:hover path,
.wm-wrap .wm-hit.is-active:hover polygon,
.wm-wrap .wm-hit.is-active:hover rect,
.wm-wrap .wm-hit.is-active:hover circle,
.wm-wrap .wm-hit.is-active:hover ellipse,
.wm-wrap .wm-hit.is-active:hover polyline,
.wm-wrap .wm-hit.is-active:hover line,
.wm-wrap .wm-hit.wm-active:hover,
.wm-wrap .wm-hit.wm-active:hover path,
.wm-wrap .wm-hit.wm-active:hover polygon,
.wm-wrap .wm-hit.wm-active:hover rect,
.wm-wrap .wm-hit.wm-active:hover circle,
.wm-wrap .wm-hit.wm-active:hover ellipse,
.wm-wrap .wm-hit.wm-active:hover polyline,
.wm-wrap .wm-hit.wm-active:hover line{
  fill: var(--wm-hover, #38bdf8) !important;
}

/* Klawiatura – widoczny focus */
.wm-wrap .wm-hit:focus-visible{
  outline: 2px solid var(--wm-focus, #22d3ee);
  outline-offset: 2px;
}

/* ===== Ukryte dane ===== */
.wm-wrap .wm-data{ display:none; }

/* ===== Tooltip ===== */
.wm-wrap .wm-tooltip{
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: var(--wm-tooltip-bg, rgba(15,23,42,.96));
  color: var(--wm-tooltip-color, #fff);
  font-size: var(--wm-tooltip-size, 12px);
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: var(--wm-tooltip-radius, 6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transform: translate(-50%, -6px);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  will-change: transform, opacity, left, top;
}
.wm-wrap .wm-tooltip.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== Modal (animated) ===== */
.wm-wrap .wm-modal{ position: fixed; inset: 0; z-index: 9999; display: block; pointer-events: none; }
.wm-wrap .wm-modal[hidden]{ display: none !important; }

.wm-wrap .wm-modal__backdrop{
  position:absolute; inset:0;
  background: var(--wm-overlay, rgba(15,23,42,.6));
  opacity: 0;
  transition: opacity .22s ease;
}

.wm-wrap .wm-modal__board{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) translateY(10px) scale(.98);
  width:min(720px, 92vw); max-height: min(80vh, 760px);
  background: var(--wm-modal-bg, #fff);
  border-radius: var(--wm-modal-radius, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow:auto; padding: 20px 22px; outline: none;
  opacity: 0;
  transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .20s ease;
}

.wm-wrap .wm-modal__close{
  position:absolute; top:8px; right:10px; border:0; background:transparent;
  color: var(--wm-modal-title, #0f172a);
  font-size: 24px; line-height:1; cursor:pointer;
}

.wm-wrap .wm-modal__title{
  margin:0 0 10px;
  font-size: var(--wm-title-size, 20px);
  line-height:1.3;
  color: var(--wm-modal-title, #0f172a);
}

.wm-wrap .wm-modal__content{
  color: var(--wm-modal-text, #475569);
  font-size: var(--wm-body-size, 15px);
  line-height:1.6;
}

.wm-wrap .wm-modal.is-open{ pointer-events: auto; }
.wm-wrap .wm-modal.is-open .wm-modal__backdrop{ opacity: 1; }
.wm-wrap .wm-modal.is-open .wm-modal__board{
  opacity: 1;
  transform: translate(-50%,-50%) translateY(0) scale(1);
}

/* Closing phase */
.wm-wrap .wm-modal.is-closing .wm-modal__backdrop{ opacity: 0; }
.wm-wrap .wm-modal.is-closing .wm-modal__board{
  opacity: 0;
  transform: translate(-50%,-50%) translateY(8px) scale(.985);
}

/* ===== Footprints (satellite coverage) ===== */
.wm-wrap .wm-fp-layer{ pointer-events: none; }
.wm-wrap .wm-fp-shape{
  pointer-events: auto;
  fill: var(--wm-fp-fill, rgba(56,189,248,.45));
  opacity: var(--wm-fp-opacity, .45);
  stroke: var(--wm-fp-stroke, #ffffff);
  stroke-width: var(--wm-fp-stroke-w, 1.5);
  vector-effect: non-scaling-stroke;
  transition: opacity .15s ease, fill .15s ease;
  cursor: pointer;
}
.wm-wrap .wm-fp-shape:hover,
.wm-wrap .wm-fp-shape.is-hover{
  fill: var(--wm-fp-hover, rgba(56,189,248,.65));
  opacity: 1;
}

/* ===== Soft hover (globalne wygaszanie) ===== */
.wm-wrap.wm-soft-hover .wm-hit,
.wm-wrap.wm-soft-hover .wm-fp-shape{
  transition: fill .25s ease, opacity .25s ease, filter .25s ease;
}
.wm-wrap.wm-soft-hover:hover .wm-hit,
.wm-wrap.wm-soft-hover:hover .wm-fp-shape{
  opacity: var(--wm-dim, .55);
  filter: saturate(.85);
}
/* Element pod kursorem / aktywny wraca do pełnej ekspozycji */
.wm-wrap.wm-soft-hover .wm-hit:hover,
.wm-wrap.wm-soft-hover .wm-hit.is-active,
.wm-wrap.wm-soft-hover .wm-hit.wm-active,
.wm-wrap.wm-soft-hover .wm-fp-shape:hover{
  opacity: 1 !important;
  filter: none !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .wm-wrap .wm-modal__backdrop,
  .wm-wrap .wm-modal__board{
    transition: none !important;
  }
}