/* ========================================
   Kwiatomat Map v2 – Styles
   ======================================== */

.kwiatomat-map-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.kwiatomat-map-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a2e;
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
}

.kwiatomat-dot {
    width: 10px; height: 10px;
    background: #4ade80;
    border-radius: 50%;
    animation: km-dot-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes km-dot-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.8); }
}

.kwiatomat-count {
    margin-left: auto;
    background: rgba(255,255,255,.12);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.kwiatomat-map-canvas {
    width: 100%;
    z-index: 1;
}

/* ============================================
   PULSUJĄCE IKONY na mapie
   Google Maps: animacja na elemencie .gm-style img[src*="kwiatomat"]
   Leaflet: animacja na .km-leaflet-icon
   ============================================ */

/* Pulsowanie ikony – efekt "oddychania" */
@keyframes km-breathe {
    0%,100% { transform: scale(1) translateY(0); filter: drop-shadow(0 4px 8px rgba(196,77,255,.4)); }
    50%      { transform: scale(1.12) translateY(-3px); filter: drop-shadow(0 8px 16px rgba(196,77,255,.7)); }
}

@keyframes km-breathe-mobile {
    0%,100% { transform: scale(1) translateY(0); filter: drop-shadow(0 4px 8px rgba(249,115,22,.4)); }
    50%      { transform: scale(1.12) translateY(-3px); filter: drop-shadow(0 8px 16px rgba(249,115,22,.7)); }
}

/* Leaflet ikona */
.km-leaflet-icon {
    animation: km-breathe 3s ease-in-out infinite;
}

.km-leaflet-icon.km-mobile {
    animation: km-breathe-mobile 2.5s ease-in-out infinite;
}

/* Google Maps – ikony to <img> z klasą, animacja przez globalny selector */
.gm-style img[src*="kwiatomat-icon."] {
    animation: km-breathe 3s ease-in-out infinite;
}

.gm-style img[src*="kwiatomat-icon-mobile."] {
    animation: km-breathe-mobile 2.5s ease-in-out infinite;
}

/* Default DIV ikona (Leaflet fallback bez pliku ikony) */
.kwiatomat-default-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #ff6b9d, #c44dff);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px rgba(196,77,255,.5);
    border: 3px solid #fff;
    animation: km-breathe 3s ease-in-out infinite;
}

.kwiatomat-default-icon span {
    transform: rotate(45deg);
    font-size: 20px;
    display: block; line-height: 1;
}

.kwiatomat-default-icon.mobile {
    background: linear-gradient(135deg, #f97316, #ef4444);
    box-shadow: 0 3px 12px rgba(239,68,68,.5);
    animation: km-breathe-mobile 2.5s ease-in-out infinite;
}

/* ============================================
   POPUP – Google Maps InfoWindow
   ============================================ */
.gm-style .gm-style-iw-c {
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.2) !important;
    max-width: 300px !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
}

.gm-style .gm-style-iw-t::after {
    display: none;
}

/* Popup – Leaflet */
.kwiatomat-popup .leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    min-width: 260px;
}

.kwiatomat-popup .leaflet-popup-content {
    margin: 0;
    width: 270px !important;
}

/* Popup treść (wspólna) */
.km-popup {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    width: 270px;
}

.km-img {
    width: 100%; height: 140px;
    overflow: hidden;
    background: linear-gradient(135deg, #f0e6ff, #ffe0f0);
}

.km-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.km-noimg {
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
}

.km-body {
    padding: 12px 14px 14px;
}

.km-badge {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 6px;
}

.km-static  { background:#e0f7e9; color:#1b7a3f; }
.km-mobile  { background:#fff3e0; color:#c45100; }

.km-title {
    margin: 0 0 6px !important;
    font-size: 15px !important; font-weight: 700 !important;
    color: #1a1a2e !important; line-height: 1.3 !important;
}

.km-addr {
    margin: 0 0 6px !important;
    font-size: 12px !important; color: #666 !important;
}

.km-desc {
    margin: 0 0 10px !important;
    font-size: 12px !important; color: #555 !important; line-height: 1.5 !important;
}

.km-nav {
    display: block;
    text-align: center;
    text-decoration: none !important;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, #ff6b9d, #c44dff);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(196,77,255,.35);
    transition: transform .15s, box-shadow .15s;
    margin-top: 10px;
}

.km-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(196,77,255,.5);
}

@media (max-width: 480px) {
    .km-popup { width: 230px; }
    .km-img   { height: 110px; }
}