/**
 * OSM Map Frontend Styles
 * Styles for category OSM maps on the frontend
 */

/* ========================================
   ZMIENNE CSS - tutaj ustawiasz rozmiary
   ======================================== */
/*
 * INSTRUKCJA:
 * Aby zmienić rozmiar czcionki w popup'ach mapy, zmień wartość --osm-popup-font-size
 * Przykłady:
 *   - Mała czcionka: 14px
 *   - Średnia czcionka: 16px
 *   - Duża czcionka: 20px
 *   - Bardzo duża: 24px
 * 
 * Aby zmienić wysokość mapy, zmień wartość --osm-map-height
 * Przykłady:
 *   - Niska mapa: 400px
 *   - Średnia mapa: 500px
 *   - Wysoka mapa: 600px
 */
:root {
    --osm-popup-font-size: 20px;
    /* Rozmiar czcionki w popup'ach (białe chmurki) */
    --osm-popup-line-height: 1.4;
    /* Wysokość linii tekstu */
    --osm-popup-padding: 6px 10px;
    /* Padding wewnętrzny popup'a */
    --osm-map-height: 500px;
    /* Wysokość mapy */
}

/* Category OSM Map Container */
.vlog-category-osm-map {
    margin-bottom: 30px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
}

/* Usuń ramki ze wszystkich elementów wewnątrz mapy */
.vlog-category-osm-map *,
.vlog-category-osm-map .elementor,
.vlog-category-osm-map .elementor-section,
.vlog-category-osm-map .elementor-widget,
.vlog-category-osm-map .elementor-widget-container,
.vlog-category-osm-map .elementor-widget-wrap,
.vlog-category-osm-map .elementor-element-populated {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Specyficznie dla elementor-widget-wrap który ma ramkę */
.vlog-category-osm-map .elementor-widget-wrap.elementor-element-populated {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Elementor Template Wrapper */
.vlog-category-osm-map.elementor-template-wrapper {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
}

/* WSZYSTKIE elementy wewnątrz muszą mieć pełną wysokość */
.vlog-category-osm-map.elementor-template-wrapper>*,
.vlog-category-osm-map.elementor-template-wrapper .elementor,
.vlog-category-osm-map.elementor-template-wrapper .elementor-section-wrap,
.vlog-category-osm-map.elementor-template-wrapper .elementor-section,
.vlog-category-osm-map.elementor-template-wrapper .elementor-column-wrap,
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget-wrap,
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget,
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget-container {
    height: 100% !important;
    flex: 1 !important;
}

/* OSM Map Elementor widget inside wrapper - wszystkie możliwe klasy */
.vlog-category-osm-map.elementor-template-wrapper .osm-map,
.vlog-category-osm-map.elementor-template-wrapper .osm-map-container,
.vlog-category-osm-map.elementor-template-wrapper .ol-viewport,
.vlog-category-osm-map.elementor-template-wrapper .ol-overlaycontainer-stopevent,
.vlog-category-osm-map.elementor-template-wrapper canvas,
.vlog-category-osm-map.elementor-template-wrapper .ol-layer {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
}

/* Główny kontener mapy OpenLayers */
.vlog-category-osm-map.elementor-template-wrapper .ol-overlaycontainer,
.vlog-category-osm-map.elementor-template-wrapper .ol-unselectable {
    height: 100% !important;
}

/* Wymuszenie wysokości na DIV który zawiera mapę - najprawdopodobniej ma ID */
.vlog-category-osm-map.elementor-template-wrapper div[id*="map"],
.vlog-category-osm-map.elementor-template-wrapper div[class*="map"] {
    height: 100% !important;
    min-height: var(--osm-map-height) !important;
}

/* SUPER AGRESYWNE - nadpisanie WSZYSTKICH inline styles z Elementora */
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget-osm-map,
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget-osm-map .elementor-widget-container,
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget-osm-map .osm-map {
    height: var(--osm-map-height) !important;
    min-height: var(--osm-map-height) !important;
}

/* Nadpisanie dla głównego kontenera OpenLayers - ten ma inline style */
.vlog-category-osm-map.elementor-template-wrapper .ol-viewport,
.vlog-category-osm-map.elementor-template-wrapper .ol-viewport canvas {
    height: var(--osm-map-height) !important;
}

/* Wszystkie divs bezpośrednio w widget container */
.vlog-category-osm-map.elementor-template-wrapper .elementor-widget-container>div {
    height: var(--osm-map-height) !important;
    min-height: var(--osm-map-height) !important;
}

/* Basic Leaflet Map */
.vlog-category-osm-map .leaflet-container {
    width: 100%;
    height: 100%;
}

/* ========================================
   TOOLTIPS i POPUPS - białe chmurki
   ======================================== */

/* BARDZO AGRESYWNE style dla WSZYSTKICH typów tooltipów - GLOBALNIE */

/* Leaflet Popup (chmurka po kliknięciu) */
body .leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper {
    font-size: var(--osm-popup-font-size) !important;
    line-height: var(--osm-popup-line-height) !important;
}

body .leaflet-popup-content,
.leaflet-popup-content,
body .leaflet-popup-content p,
.leaflet-popup-content p,
body .leaflet-popup-content span,
.leaflet-popup-content span,
body .leaflet-popup-content div,
.leaflet-popup-content div {
    font-size: var(--osm-popup-font-size) !important;
}

/* Leaflet Tooltip (chmurka po najechaniu) */
body .leaflet-tooltip,
.leaflet-tooltip,
body .leaflet-tooltip-top,
.leaflet-tooltip-top,
body .leaflet-tooltip-bottom,
.leaflet-tooltip-bottom,
body .leaflet-tooltip-left,
.leaflet-tooltip-left,
body .leaflet-tooltip-right,
.leaflet-tooltip-right {
    font-size: var(--osm-popup-font-size) !important;
    line-height: var(--osm-popup-line-height) !important;
    padding: var(--osm-popup-padding) !important;
}

/* OpenLayers Overlay (dla OSM Map Elementor) - GLOBALNIE */
body .ol-overlay-container,
.ol-overlay-container,
body .ol-overlay-container *,
.ol-overlay-container * {
    font-size: var(--osm-popup-font-size) !important;
}

body .ol-popup,
.ol-popup,
body .ol-popup *,
.ol-popup * {
    font-size: var(--osm-popup-font-size) !important;
}

/* Feature info / tooltip dla OpenLayers - GLOBALNIE */
body .ol-popup-content,
.ol-popup-content,
body .ol-popup-content *,
.ol-popup-content *,
body [class*="ol-popup"],
[class*="ol-popup"],
body [class*="ol-popup"] *,
[class*="ol-popup"] * {
    font-size: var(--osm-popup-font-size) !important;
}

/* Overlay dla feature info na najechaniu - GLOBALNIE */
body .ol-overlaycontainer-stopevent,
.ol-overlaycontainer-stopevent,
body .ol-overlaycontainer-stopevent *,
.ol-overlaycontainer-stopevent *,
body .ol-overlay,
.ol-overlay,
body .ol-overlay *,
.ol-overlay * {
    font-size: var(--osm-popup-font-size) !important;
}

/* Ogólne dla WSZYSTKICH elementów które mogą być tooltipem - GLOBALNIE */
body [class*="popup"],
[class*="popup"],
body [class*="popup"] *,
[class*="popup"] *,
body [class*="tooltip"],
[class*="tooltip"],
body [class*="tooltip"] *,
[class*="tooltip"] *,
body [class*="overlay"],
[class*="overlay"],
body [class*="overlay"] *,
[class*="overlay"] * {
    font-size: var(--osm-popup-font-size) !important;
    line-height: var(--osm-popup-line-height) !important;
}

/* Dla SVG text elements (jeśli są używane) - GLOBALNIE */
body svg text,
svg text,
body .ol-viewport svg text,
.ol-viewport svg text {
    font-size: var(--osm-popup-font-size) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vlog-category-osm-map {
        margin-bottom: 20px;
    }
}