/* ==========================================================================
   WCM Partner Hub – map-OpenStreetMap-Leaflet.css
   Wspólny plik CSS dla mapy Leaflet / CartoDB
   Używany w: [wcm_partner_hub] shortcode ORAZ na podstronach partnera
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ── Globalne design tokens (dostępne w obu kontekstach) ─────── */
:root {
    --wcm-ph-pu1: #411D76;
    --wcm-ph-pu2: #7236ba;
    --wcm-ph-pu3: #9152df;
    --wcm-ph-pu4: #c084fc;
    --wcm-ph-pu-l: rgba(114,54,186,.2);
    --wcm-ph-glow-pu: rgba(114,54,186,.45);

    --wcm-ph-gold-1: #ffca28;
    --wcm-ph-gold-2: #ff9a00;
    --wcm-ph-gold-dim: rgba(255,202,40,.25);
    --wcm-ph-glow-gold: rgba(255,202,40,.35);
    --wcm-ph-gold-bg1: rgba(255,202,40,.1);

    --wcm-ph-bg-deep: #040408;
    --wcm-ph-bg-space: #070710;
    --wcm-ph-bg-surface: #0e0620;
    --wcm-ph-bg-card: rgba(14,8,38,.96);
    --wcm-ph-bg-card-hi: rgba(40,14,90,.8);
    --wcm-ph-bg-card-inner: rgba(255,255,255,.03);

    --wcm-ph-text-main: #ffffff;
    --wcm-ph-text-muted: rgba(255,255,255,.7);
    --wcm-ph-text-dim: rgba(255,255,255,.35);

    --wcm-ph-border: rgba(138,72,220,.3);
    --wcm-ph-border-hi: rgba(138,72,220,.6);
    --wcm-ph-border-gold: rgba(255,202,40,.35);
    --wcm-ph-border-gold-lo: rgba(255,202,40,.25);
    --wcm-ph-border-light: rgba(255,255,255,.12);

    --wcm-ph-input-bg: rgba(255,255,255,.06);
    --wcm-ph-input-bg-hover: rgba(255,255,255,.1);

    --wcm-ph-success: #10B981;
    --wcm-ph-error: #f87171;

    --wcm-ph-radius: 14px;
    --wcm-ph-radius-sm: 10px;

    --wcm-ph-font: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   WARSTWY KAFELKÓW – FILTRY CSS
   CartoDB light_nolabels (baza) + dark_only_labels (etykiety)
   Selektor podwójny: .wcm-ph-map (hub) + .wcm-pp-map (podstrona partnera)
   ========================================================================== */

/*
 * Warstwa bazowa – light_nolabels
 * brightness(0.91)   → delikatnie ściemnione
 * saturate(0.38)     → mocno odbarwione → szarości zamiast brązów/zieleni
 * hue-rotate(215deg) → reszta nasycenia przesuwa się w stronę fioletu
 * contrast(1.07)     → ostre krawędzie ulic
 */
.wcm-ph-map .leaflet-tile-pane .wcm-map-base,
.wcm-pp-map .leaflet-tile-pane .wcm-map-base {
    filter: brightness(0.91) saturate(0.38) hue-rotate(215deg) contrast(1.07);
}

/* Warstwa etykiet – dark_only_labels (przezroczyste tło + białe napisy) */
.wcm-ph-map .leaflet-tile-pane .wcm-map-labels,
.wcm-pp-map .leaflet-tile-pane .wcm-map-labels {
    filter: brightness(1.08) contrast(1.05);
}

/* ==========================================================================
   LEAFLET KONTROLKI – Zoom
   ========================================================================== */

.wcm-ph-map .leaflet-control-zoom,
.wcm-pp-map .leaflet-control-zoom {
    border: 1px solid rgba(114,54,186,.25) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
}
.wcm-ph-map .leaflet-control-zoom a,
.wcm-pp-map .leaflet-control-zoom a {
    background: rgba(255,255,255,.88) !important;
    color: rgba(65,29,118,.75) !important;
    border-color: rgba(114,54,186,.18) !important;
    font-weight: 700 !important;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s !important;
}
.wcm-ph-map .leaflet-control-zoom a:hover,
.wcm-pp-map .leaflet-control-zoom a:hover {
    background: rgba(255,202,40,.15) !important;
    color: #7236ba !important;
    border-color: rgba(255,202,40,.35) !important;
    box-shadow: 0 0 12px rgba(255,202,40,.25) !important;
}

/* ==========================================================================
   LEAFLET KONTROLKI – Attribution
   ========================================================================== */

.wcm-ph-map .leaflet-control-attribution,
.wcm-pp-map .leaflet-control-attribution {
    background: rgba(255,255,255,.82) !important;
    color: rgba(65,29,118,.55) !important;
    font-size: 9px !important;
    letter-spacing: .3px !important;
    padding: 3px 8px !important;
    backdrop-filter: blur(6px) !important;
    border-top: 1px solid rgba(114,54,186,.12) !important;
    border-left: 1px solid rgba(114,54,186,.12) !important;
    border-radius: 6px 0 0 0 !important;
}
.wcm-ph-map .leaflet-control-attribution a,
.wcm-pp-map .leaflet-control-attribution a {
    color: rgba(114,54,186,.65) !important;
    text-decoration: none !important;
    transition: color .2s !important;
}
.wcm-ph-map .leaflet-control-attribution a:hover,
.wcm-pp-map .leaflet-control-attribution a:hover {
    color: #7236ba !important;
}

/* ==========================================================================
   LEAFLET POPUP – ciemny dark-glass na jasnym tle mapy (oba konteksty)
   ========================================================================== */

.wcm-ph-map .leaflet-popup-content-wrapper,
.wcm-pp-map .leaflet-popup-content-wrapper {
    background: rgba(7,4,18,.97) !important;
    border: 1px solid rgba(114,54,186,.38) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,.65),
        0 0 30px rgba(114,54,186,.18),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(16px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--wcm-ph-text-main) !important;
    font-family: var(--wcm-ph-font) !important;
}

/* Linia gradient u góry popupu (purple→gold) */
.wcm-ph-map .leaflet-popup-content-wrapper::before,
.wcm-pp-map .leaflet-popup-content-wrapper::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7236ba 30%, #ffca28 70%, transparent);
}

.wcm-ph-map .leaflet-popup-content,
.wcm-pp-map .leaflet-popup-content {
    color: rgba(255,255,255,.9) !important;
    font-size: 13px !important;
    font-family: var(--wcm-ph-font) !important;
    margin: 14px 18px 16px !important;
    line-height: 1.6 !important;
}
.wcm-ph-map .leaflet-popup-content a,
.wcm-pp-map .leaflet-popup-content a {
    color: var(--wcm-ph-pu4) !important;
    text-decoration: none;
}
.wcm-ph-map .leaflet-popup-content a:hover,
.wcm-pp-map .leaflet-popup-content a:hover {
    color: var(--wcm-ph-gold-1) !important;
}

/* Przycisk zamknięcia */
.wcm-ph-map .leaflet-popup-close-button,
.wcm-pp-map .leaflet-popup-close-button {
    color: rgba(255,255,255,.30) !important;
    font-size: 20px !important;
    padding: 6px 10px !important;
    top: 4px !important;
    right: 4px !important;
    transition: color .2s !important;
}
.wcm-ph-map .leaflet-popup-close-button:hover,
.wcm-pp-map .leaflet-popup-close-button:hover {
    color: #ffca28 !important;
    background: transparent !important;
}

/* Ogon popupu */
.wcm-ph-map .leaflet-popup-tip-container .leaflet-popup-tip,
.wcm-pp-map .leaflet-popup-tip-container .leaflet-popup-tip {
    background: rgba(7,4,18,.97) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   CUSTOM MARKERS – animacja pulsująca (wspólny @keyframes)
   ========================================================================== */

@keyframes wcm-map-marker-pulse {
    0%   { transform: translate(-50%,-50%) scale(1);   opacity: .8; }
    100% { transform: translate(-50%,-50%) scale(3.5); opacity: 0;  }
}

/* ── Hub marker (.wcm-ph-map) – tworzony przez mapSyncMarkersLeaflet ─── */
.wcm-ph-map-marker {
    position: relative;
    width: 22px;
    height: 22px;
    overflow: visible;
    background: transparent;
    border: none;
}
.wcm-ph-map-marker-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wcm-ph-gold-1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 24px rgba(255,202,40,.35);
    z-index: 2;
}
.wcm-ph-map-marker-ring {
    position: absolute;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--wcm-ph-gold-2);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: wcm-map-marker-pulse 2.2s ease-out infinite;
    z-index: 1;
}
.wcm-ph-map-marker-ring:nth-child(3) {
    animation-delay: .85s;
}

/* ── Partner Single marker (.wcm-pp-map) – tworzony przez initSingle ─── */
.wcm-pp-marker {
    width: 22px; height: 22px;
    overflow: visible;
    background: transparent;
    border: none;
}
.wcm-pp-marker-dot {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--wcm-ph-gold-1);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 60px rgba(255,202,40,.5);
    z-index: 2;
}
.wcm-pp-marker-ring {
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--wcm-ph-gold-2);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(1);
    animation: wcm-map-marker-pulse 2.2s ease-out infinite;
    z-index: 1;
}
.wcm-pp-marker-ring:nth-child(3) { animation-delay: .85s; }

/* ==========================================================================
   POPUP CONTENT CLASSES – budowane przez WCM_Map.buildPopupHTML() (Leaflet)
   oraz WCM_buildGmapsPopupHTML() (Google Maps).
   Identyczne klasy w obu kontekstach — single source of truth tutaj.
   v2.1.0: minimalistyczny widok — logo + nazwa + lokalizacja + CTA.
   Tier strip, tier badge i tagi celowo usunięte (popup ma być subtelny).
   ========================================================================== */

.wcm-ph-popup {
    display: flex;
    position: relative;
    max-width: 240px;
    min-width: 180px;
    padding: 0;
}

/* === Close button (v2.1.8) — SVG ikon X w okrągłej kapsule ====================
   Czarno-białe tematycznie spasowane: szare tło + jasny X, hover → złoty akcent.
   SVG zamiast unicode ✖ — spójny stylistycznie z resztą ikon Lucide w projekcie. */
.wcm-ph-popup-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(7, 4, 18, .92);
    border: 1px solid rgba(255, 202, 40, .35);
    border-radius: 50%;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
    transition: color .2s, background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.wcm-ph-popup-close-btn svg {
    width: 12px;
    height: 12px;
}
.wcm-ph-popup-close-btn:hover {
    color: #ffca28;
    background: rgba(255, 202, 40, .15);
    border-color: rgba(255, 202, 40, .65);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(255, 202, 40, .35);
}
.wcm-ph-popup-close-btn:focus-visible {
    outline: 2px solid #ffca28;
    outline-offset: 2px;
}

.wcm-ph-popup-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.wcm-ph-popup-logo-wrap {
    flex-shrink: 0 !important;
    flex-basis: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
}
.wcm-ph-popup-logo {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    border: 1px solid var(--wcm-ph-border-light) !important;
    background: rgba(255, 255, 255, .05) !important;
    display: block !important;
}
.wcm-ph-popup-logo-ph {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    border: 1px solid var(--wcm-ph-border-light) !important;
    background: linear-gradient(135deg, rgba(114, 54, 186, .35), rgba(65, 29, 118, .5)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--wcm-ph-pu4) !important;
    font-family: var(--wcm-ph-font) !important;
}

.wcm-ph-popup-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 3px;
    padding-right: 14px; /* space for close btn */
}

/* ── Nazwa partnera ──────────────── */
.wcm-ph-popup-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    color: var(--wcm-ph-gold-1);
    line-height: 1.25;
    letter-spacing: -.2px;
    text-align: left;
    font-family: var(--wcm-ph-font);
}

/* Lokalizacja */
.wcm-ph-popup-location {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1px;
    overflow: hidden;
    width: 100%;
    margin-top: 1px;
    font-family: var(--wcm-ph-font);
}
.wcm-ph-popup-city {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 500;
    color: #b3a1d9;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.wcm-ph-popup-city::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9882C2;
    flex-shrink: 0;
}
.wcm-ph-popup-voiv {
    font-size: 8px;
    font-weight: 500;
    color: #6a5796;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding-left: 12px;
}

/* CTA „Szczegóły →" */
.wcm-ph-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 7px;
    font-weight: 600;
    color: var(--wcm-ph-pu2);
    text-decoration: none;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: color .2s, gap .2s;
    font-family: var(--wcm-ph-font);
}
.wcm-ph-popup-link::after {
    content: '→';
    font-size: 14px;
    line-height: 1;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.wcm-ph-popup-link:hover {
    color: #fff !important;
    gap: 7px;
}
.wcm-ph-popup-link:hover::after {
    transform: translateX(2px);
}

/* ==========================================================================
   GOOGLE MAPS — popup wrapper i kontrolki obsługiwane w map-GoogleMaps.css
   (single source of truth dla overridów Google'a). Tutaj zostaje tylko
   blokada zbędnych kontrolek wspólna z Leaflet (lustro w Leaflet CSS).
   ========================================================================== */

/* ==========================================================================
   BLOKADA ZBĘDNYCH KONTROLEK I POI (oba konteksty)
   ========================================================================== */

/* Google Maps: pełnoekranowy */
.wcm-ph-map .gm-fullscreen-control,
.wcm-pp-map .gm-fullscreen-control,
.wcm-ph-map button[title="Włącz widok pełnoekranowy"],
.wcm-pp-map button[title="Włącz widok pełnoekranowy"],
.wcm-ph-map button[title="Wyłącz widok pełnoekranowy"],
.wcm-pp-map button[title="Wyłącz widok pełnoekranowy"],
.wcm-ph-map button[aria-label="Toggle fullscreen view"],
.wcm-pp-map button[aria-label="Toggle fullscreen view"] {
    display: none !important;
}

/* Google Maps: kamera / obrót 3D / Street View */
.wcm-ph-map .gm-tilt,  .wcm-pp-map .gm-tilt,
.wcm-ph-map .gm-compass,.wcm-pp-map .gm-compass,
.wcm-ph-map .gm-svpc,  .wcm-pp-map .gm-svpc,
.wcm-ph-map button[title="Obróć mapę"],
.wcm-pp-map button[title="Obróć mapę"],
.wcm-ph-map button[aria-label="Sterowanie kamerą na mapie"],
.wcm-pp-map button[aria-label="Sterowanie kamerą na mapie"] {
    display: none !important;
}

/* Leaflet: fullscreen plugin */
.wcm-ph-map .leaflet-control-fullscreen,
.wcm-pp-map .leaflet-control-fullscreen {
    display: none !important;
}

/* Leaflet: kursor domyślny na kafelkach (poza markerami) */
.wcm-ph-map .leaflet-tile-pane,
.wcm-pp-map .leaflet-tile-pane {
    cursor: default !important;
}

/* ==========================================================================
   REDUCE MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .wcm-ph-map .leaflet-tile-pane .wcm-map-base,
    .wcm-pp-map .leaflet-tile-pane .wcm-map-base {
        filter: brightness(0.93) saturate(0.3);
    }
    .wcm-ph-map-marker-ring,
    .wcm-pp-marker-ring {
        animation: none !important;
    }
}