/* Mapa portów — kolory i fonty strony, na której stoi (motyw WordPress): skrypt mierzy tło, tekst, nagłówki, link i fonty
   (--mp-t-*, themeProbe w skrypcie), reszta liczona z nich; po przecinku wartości sprzed pomiaru (ciemny styl Rejsy).
   Na stronie z Blocksy morze = kolor 6 palety, kraje z portami = kolor ramek (5). Tryb jasny/ciemny — skrypt mierzy ponownie. */
.mapa-portow,.mapa-portow-pop{
  --mp-page:var(--mp-t-page,#06121D);--mp-text:var(--mp-t-text,#EEE8DA);--mp-acc:var(--mp-t-acc,#FF6A2A);--mp-on-acc:var(--mp-t-on-acc,#06121D);
  --mp-sea:var(--theme-palette-color-6,color-mix(in srgb,var(--mp-text) 5%,var(--mp-page)));
  --mp-land:color-mix(in srgb,var(--mp-text) 7%,var(--mp-sea));
  --mp-has:color-mix(in srgb,var(--theme-border-color,color-mix(in srgb,var(--mp-text) 18%,var(--mp-sea))) 86%,var(--mp-text));
  --mp-pick:color-mix(in srgb,var(--mp-text) 20%,var(--mp-has));--mp-border:var(--mp-page);
  --mp-grat:color-mix(in srgb,var(--mp-text) 7%,transparent);
  --mp-hot:color-mix(in srgb,var(--mp-acc) 85%,#fff);--mp-on:var(--mp-acc);--mp-dot:color-mix(in srgb,var(--mp-acc) 8%,#fff);--mp-dot-ring:var(--mp-acc);
  --mp-muted:color-mix(in srgb,var(--mp-text) 62%,var(--mp-page));
  --mp-panel:color-mix(in srgb,var(--mp-page) 94%,transparent);--mp-line:color-mix(in srgb,var(--mp-text) 16%,transparent);
  --mp-link:var(--mp-acc);--mp-halo:var(--mp-page);
  --mp-bub:color-mix(in srgb,var(--mp-acc) 90%,transparent);--mp-bub-ring:color-mix(in srgb,var(--mp-text) 90%,transparent);--mp-bub-text:var(--mp-on-acc);
  --mp-font-head:var(--mp-t-font-head,inherit)
}
.mapa-portow{margin:0 0 32px;color:var(--mp-text)}
/* szerokość jak reszta treści strony (motyw), nie 1200 px kontenera Cruise Hub — bez dodatkowych marginesów po bokach */
.hub-cs-weather:has(> [data-mapa-portow]){max-width:var(--wp--style--global--content-size,none)}
.mapa-portow .mp-head{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;margin:0 0 10px;font-size:14px}
.mapa-portow .mp-count{margin:0}   /* 0.4.2: nagłówek H2 (styl H2 motywu, jak „Popularne porty”) */
.mapa-portow .mp-head{row-gap:8px}
.mapa-portow:empty{display:none}
.mapa-portow .mp-hint{color:var(--mp-muted)}
.mapa-portow .mp-world{margin-left:auto;color:var(--mp-link);font-size:13px}
.mapa-portow .mp-wrap{position:relative}
.mapa-portow .mp-stage{position:relative;width:100%;aspect-ratio:var(--mp-ar,2/1);overflow:hidden;contain:paint;border:1px solid var(--mp-line);border-radius:10px;background:var(--mp-sea);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.mapa-portow .mp-svg{display:block;width:100%;height:100%;overflow:hidden}
.mapa-portow .mp-sea{fill:var(--mp-sea)}
.mapa-portow .mp-grat{fill:none;stroke:var(--mp-grat);stroke-width:1;vector-effect:non-scaling-stroke}
.mapa-portow .mp-c{fill:var(--mp-land);stroke:var(--mp-border);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .18s}
.mapa-portow .mp-has{fill:var(--mp-has);cursor:pointer}
.mapa-portow .mp-has.mp-hot{fill:var(--mp-hot)}
.mapa-portow .mp-has.mp-on{fill:var(--mp-on)}
.mapa-portow.mp-zoomed .mp-has:not(.mp-on):not(.mp-hot){fill-opacity:.75}
.mapa-portow .mp-dot{fill:var(--mp-dot);stroke:var(--mp-dot-ring);stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:none}
.mapa-portow .mp-dot-hot{fill:#FFFFFF;stroke:var(--mp-page);stroke-width:1.6}
.mapa-portow .mp-dot-hl{fill:var(--mp-on);stroke:#FFFFFF;stroke-width:2.4}
.mapa-portow .mp-hit{fill:transparent;cursor:pointer}
.mapa-portow .mp-lab{fill:var(--mp-text);stroke:var(--mp-halo);paint-order:stroke;stroke-linejoin:round;font-weight:600;pointer-events:none}
.mapa-portow.mp-noland .mp-svg{background:var(--mp-sea)}
.mapa-portow.mp-wait .mp-svg{visibility:hidden}

.mapa-portow .mp-tip{position:absolute;left:0;top:0;z-index:3;max-width:280px;padding:8px 11px;border-radius:8px;background:var(--mp-panel);
  border:1px solid var(--mp-line);box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:13px;line-height:1.4;pointer-events:none}
.mapa-portow .mp-tip span{color:var(--mp-muted)}
.mapa-portow .mp-tip em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--mp-link)}
.mapa-portow .mp-tip[hidden],.mapa-portow .mp-panel[hidden]{display:none}

/* /porty/ (0.3.0): świat → region → kraj. Kropki portów tylko w przybliżonym kraju, kraje klikalne tylko w regionie. */
.mapa-portow.mp-idx .mp-dot,.mapa-portow.mp-idx .mp-hit{display:none}
.mapa-portow.mp-idx .mp-dot.mp-in,.mapa-portow.mp-idx .mp-hit.mp-in{display:inline}
.mapa-portow.mp-idx .mp-has{cursor:default}
.mapa-portow.mp-idx .mp-has.mp-hot:not(.mp-pick){fill:var(--mp-has)}
.mapa-portow.mp-idx .mp-has.mp-pick{fill:var(--mp-pick);cursor:pointer}
.mapa-portow.mp-idx .mp-has.mp-pick.mp-hot{fill:var(--mp-hot)}
.mapa-portow.mp-idx.mp-zoomed .mp-has:not(.mp-on):not(.mp-hot):not(.mp-pick){fill-opacity:.6}
.mapa-portow .mp-bub{cursor:pointer}
.mapa-portow .mp-bub-c{fill:var(--mp-bub);stroke:var(--mp-halo);transition:fill .2s}
.mapa-portow .mp-bub.mp-bub-on .mp-bub-c{fill:var(--mp-hot);stroke:var(--mp-bub-ring)}
.mapa-portow .mp-bub-n{fill:var(--mp-bub-text);font-weight:800;pointer-events:none}
.mapa-portow .mp-bub-l{stroke:var(--mp-hot);stroke-opacity:.7;pointer-events:none}
.mapa-portow .mp-lab-r{font-weight:700}
.mapa-portow .mp-crumbs{position:absolute;left:12px;top:10px;z-index:2;display:flex;align-items:center;gap:6px;padding:5px 14px;border:1px solid var(--mp-line);border-radius:999px;
  background:var(--mp-panel);font-size:13.5px;line-height:1.3}
.mapa-portow .mp-crumbs button{padding:0;border:0;background:none;color:var(--mp-link);font:inherit;cursor:pointer}
.mapa-portow .mp-crumbs button:hover{text-decoration:underline}
.mapa-portow .mp-crumbs b{color:var(--mp-text)}.mapa-portow .mp-crumbs i{font-style:normal;color:var(--mp-muted)}

.mapa-portow .mp-panel{position:absolute;top:12px;right:12px;max-height:calc(100% - 24px);box-sizing:border-box;z-index:2;width:260px;overflow:auto;padding:14px 16px;border-radius:10px;
  background:var(--mp-panel);border:1px solid var(--mp-line);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px}
.mapa-portow .mp-ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px}
.mapa-portow .mp-pc{font-family:var(--mp-font-head);font-size:17px;font-weight:700;color:var(--mp-text);text-decoration:none}
.mapa-portow a.mp-pc:hover{color:var(--mp-link)}
.mapa-portow .mp-pn{color:var(--mp-muted);font-size:12px;white-space:nowrap}
.mapa-portow .mp-pl{list-style:none;margin:0 0 10px;padding:0;columns:1}
.mapa-portow .mp-pl li{margin:0;padding:3px 0;border-top:1px solid var(--mp-line)}
.mapa-portow .mp-pl a{color:var(--mp-link);text-decoration:none}
.mapa-portow .mp-pl a:hover{text-decoration:underline}
.mapa-portow .mp-pl span{color:var(--mp-muted)}
.mapa-portow .mp-pl li{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mapa-portow .mp-pl small{flex:none;color:var(--mp-muted);font-size:11.5px}
.mapa-portow .mp-all{display:block;margin:0;color:var(--mp-link);font-size:13px}

/* 0.4.0: kafelki Cruise Hub pod mapą ukryte (porty są w panelu mapy) */
.mp-hub-off{display:none!important}

/* wyszukiwarka kraju / portu w linii podpowiedzi */
.mapa-portow .mp-hint{flex:1 1 100%;order:3}   /* 0.4.1: podpowiedź z wyszukiwarką w osobnej linijce pod liczbą portów */
.mapa-portow .mp-find{position:relative;display:inline-block;vertical-align:middle;margin-left:4px}
/* input.mp-q: motyw (Blocksy) ma własne tło, wysokość i kolor pól — także po kliknięciu */
.mapa-portow input.mp-q,.mapa-portow input.mp-q:focus{width:260px;max-width:100%;height:36px;min-height:0;box-sizing:border-box;margin:0;padding:0 14px;
  border:1px solid var(--mp-line);border-radius:999px;background:var(--mp-panel);color:var(--mp-text);font:inherit;font-size:14px;line-height:34px;outline:none}
.mapa-portow .mp-q::placeholder{color:var(--mp-muted)}
.mapa-portow input.mp-q:focus{border-color:var(--mp-link);box-shadow:0 0 0 3px rgba(255,90,31,.18)}
.mapa-portow .mp-sug{position:absolute;left:0;top:calc(100% + 4px);z-index:5;min-width:100%;width:340px;max-width:86vw;margin:0;padding:4px;list-style:none;box-sizing:border-box;
  background:var(--mp-panel);border:1px solid var(--mp-line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);backdrop-filter:blur(6px)}
.mapa-portow .mp-sug[hidden]{display:none}
.mapa-portow .mp-sug li b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-portow .mp-sug li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--mp-text)}
.mapa-portow .mp-sug li span{flex:none;color:var(--mp-muted);font-size:12px}
.mapa-portow .mp-sug li.mp-sel{background:var(--mp-on);color:var(--mp-on-acc)}
.mapa-portow .mp-sug li.mp-sel span{color:rgba(255,255,255,.85)}
.mapa-portow .mp-sug li.mp-none{cursor:default;color:var(--mp-muted)}

/* „Popularne porty” nad mapą /porty/: 2 × 5 kafelków, na telefonie jeden przewijany rząd */
.mapa-portow-pop{margin:0 0 28px}
.mapa-portow-pop .mpp-h{margin:0 0 14px}
.mapa-portow-pop .mpp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mapa-portow-pop .mpp-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#16293A,#2A4A66);
  color:#fff;text-decoration:none;isolation:isolate}
.mapa-portow-pop .mpp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.mapa-portow-pop .mpp-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,29,0) 40%,rgba(6,18,29,.82))}
.mapa-portow-pop a.mpp-tile:hover img{transform:scale(1.05)}
.mapa-portow-pop a.mpp-tile:focus-visible{outline:3px solid var(--mp-acc);outline-offset:2px}
.mapa-portow-pop .mpp-t{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;display:flex;flex-direction:column;gap:2px}
.mapa-portow-pop .mpp-n{font-family:var(--mp-font-head);font-weight:700;font-size:16px;line-height:1.2;color:#fff}
.mapa-portow-pop .mpp-c{font-size:12.5px;color:rgba(255,255,255,.82)}
html[data-mp-light] .mapa-portow-pop .mpp-tile.mpp-noimg{background:linear-gradient(135deg,#C9DAE6,#6F8FA8)}
@media (max-width:760px){
  .mapa-portow-pop .mpp-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mapa-portow-pop .mpp-grid::-webkit-scrollbar{display:none}
  .mapa-portow-pop .mpp-tile{flex:0 0 72%;scroll-snap-align:start}
  .mapa-portow .mp-find{display:block;margin:8px 0 0}
  .mapa-portow input.mp-q,.mapa-portow input.mp-q:focus{width:100%;height:42px;font-size:16px;line-height:40px}
  .mapa-portow .mp-sug{width:100%;max-width:none}
}

/* telefon i ekrany dotykowe: lista portów pod mapą, nie na niej */
@media (max-width:760px),(hover:none){
  .mapa-portow .mp-panel{position:static;width:auto;max-height:none;margin-top:10px;box-shadow:none}
  .mapa-portow .mp-pl{columns:2;column-gap:18px}
  .mapa-portow .mp-pl li{break-inside:avoid}
    .mapa-portow .mp-tip{display:none}
}
@media (max-width:760px){
  .mapa-portow .mp-stage{aspect-ratio:3/2;border-radius:8px}
  .mapa-portow .mp-head{font-size:13px}
}