/**
 * OSM Provider Styles
 * Styles for OpenStreetMap provider integration with Voxel
 */

/* Hide Voxel's native search buttons when using OSM provider (we use our own buttons) */
/* This prevents the brief flash of the native button on page load */
.ts-map-drag {
    display: none !important;
}

/* Show our floating search buttons in Elementor editor for styling preview */
/* Override the display: none for our custom container */
.ts-map-drag.vem-floating-search-buttons {
    display: flex !important;
}

/* Image marker styling - ensure image fills container */
/* Elementor CSS handles width, height, border-radius, box-shadow via {{WRAPPER}} .marker-type-image */
.map-marker.marker-type-image {
    overflow: hidden;
    display: inline-block;
}

.map-marker.marker-type-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Marker-cat overlay positioning - must be sibling of marker-type-image, not child */
/* This allows it to extend outside the image marker's overflow: hidden boundary */
.marker-cat {
    position: absolute;
    top: 4px;
    right: -10px;
    z-index: 10;
}

/* Image marker wrapper - ensures overlay positioning stays relative to marker size */
/* Wrapper must match marker size so overlay positioning (right: -10px) stays on edge */
.vem-image-marker-wrapper {
    display: inline-block;
    /* Make wrapper match marker size - Elementor CSS sets size on .marker-type-image */
    /* Use CSS to ensure wrapper sizes to its content (the marker) */
    width: fit-content;
    height: fit-content;
    /* Ensure no padding/margin affects sizing */
    padding: 0;
    margin: 0;
}

/* Ensure wrapper matches marker size when Elementor CSS sets marker size */
/* The wrapper should automatically match since it's inline-block and contains the marker */
.vem-image-marker-wrapper > .map-marker.marker-type-image {
    /* Marker size is set by Elementor CSS - wrapper will match */
}

/* Image marker hover effect - enlarge on hover (matches icon marker behavior) */
.leaflet-marker-icon:hover .vem-image-marker-wrapper .map-marker.marker-type-image,
.leaflet-div-icon:hover .vem-image-marker-wrapper .map-marker.marker-type-image {
    transform: scale(1.25) !important;
    transition: transform 0.2s ease !important;
    z-index: 1000 !important;
}

/* Enlarge image marker when highlighted from post feed hover (marker-focused class) */
.vem-image-marker-wrapper.marker-focused .map-marker.marker-type-image {
    transform: scale(1.25) !important;
    transition: transform 0.2s ease !important;
    z-index: 1000 !important;
}

/* Image marker wrapper - ensures overlay positioning stays relative to marker size */
.vem-image-marker-wrapper {
    display: inline-block;
}

/* Image marker hover effect - enlarge on hover (matches icon marker behavior) */
.vem-image-marker-wrapper.marker-focused .map-marker.marker-type-image {
    transform: scale(1.25);
    transform-origin: center center;
    transition: transform 0.2s ease;
    will-change: transform;
}

/* Geolocation marker with pulse effect (matching Google Maps style) */
.vem-geolocation-marker {
    position: relative;
    overflow: visible !important; /* Allow pulse ring to expand beyond container */
    width: 10px !important;
    height: 10px !important;
}

.vem-map-circle-center {
    --circle-color: #4285f4;
    width: 12px;
    height: 12px;
    background: var(--circle-color);
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
}

.vem-map-circle-center::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--circle-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    box-sizing: border-box;
    animation: vem-pulsate 1.25s ease-out infinite;
    opacity: 0.6;
}

/* Pulse animation (matching Google Maps) */
@keyframes vem-pulsate {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.67);
        opacity: 0;
    }
}

/* Geolocation marker popup */
.vem-geolocation-popup {
    padding: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.vem-geolocation-popup h4 {
    margin: 0 0 8px 0 !important;
    color: #4285f4 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.vem-geolocation-popup p {
    margin: 4px 0 !important;
    font-size: 12px !important;
    color: #333 !important;
}

/* ==========================================================================
   Map Controls (Geolocate, Fullscreen, Zoom) - Matching Google Maps
   ========================================================================== */

.vem-map-control {
    background: white;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 10px;
}

/* Unified map controls styling - matches Leaflet zoom controls (30px) */
.vem-control-btn {
    width: 30px;
    height: 30px;
    background: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.vem-control-btn:hover {
    background-color: #f5f5f5;
}

.vem-control-btn:active {
    background-color: #e0e0e0;
}

.vem-control-btn svg {
    width: 18px;
    height: 18px;
    fill: #333;
}

/* Geolocate button specific */
.vem-geolocate-control {
    margin-top: 10px;
    margin-left: 10px;
}

.vem-geolocate-btn svg,
.vem-geolocate-btn.active svg,
.vem-geolocate-btn.active:hover svg,
.vem-geolocate-btn:hover svg {
    fill: #333 !important; /* Grey, matching other controls - always grey */
    transition: fill 0.2s;
}

/* Fullscreen button specific */
.vem-fullscreen-control {
    margin-top: 10px;
    margin-left: 10px;
}

/* Position controls in top left (stacked) */
.leaflet-top.leaflet-left .vem-map-control {
    margin: 10px 0 0 10px;
}

.leaflet-top.leaflet-left .vem-map-control:first-child {
    margin-top: 10px;
}

.leaflet-top.leaflet-left .vem-map-control:not(:first-child) {
    margin-top: 10px;
}

/* Zoom controls in bottom left */
.leaflet-bottom.leaflet-left .leaflet-control-zoom {
    margin: 10px;
}

/* ==========================================================================
   Floating Search Buttons (Search as I move, Search here)
   ========================================================================== */

.vem-floating-search-buttons {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: row; /* Side by side by default */
    flex-wrap: wrap; /* Allow wrapping when needed */
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    pointer-events: none; /* Allow clicks to pass through container */
}

/* Stack buttons vertically on small screens to prevent squishing */
@media (max-width: 480px) {
    .vem-floating-search-buttons {
        flex-direction: column;
        align-items: center;
    }
}

.vem-floating-search-buttons button {
    pointer-events: auto; /* Re-enable clicks on buttons */
}

.vem-drag-toggle-btn,
.vem-search-area-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-family: inherit;
    white-space: nowrap;
    min-width: 0; /* Allow buttons to shrink if needed */
    flex-shrink: 1; /* Allow buttons to shrink on small screens */
}

/* On small screens, ensure buttons don't get too narrow and stack properly */
@media (max-width: 480px) {
    .vem-drag-toggle-btn,
    .vem-search-area-btn {
        width: 100%;
        justify-content: center;
        white-space: normal; /* Allow text to wrap if needed */
    }
}

.vem-drag-toggle-btn:hover,
.vem-search-area-btn:hover {
    background: #f8f9fa;
    border-color: #007cba;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.vem-drag-toggle-btn:active,
.vem-search-area-btn:active {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vem-drag-toggle-btn[data-drag-search-active="true"] {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

.vem-drag-toggle-btn[data-drag-search-active="true"]:hover {
    background: #005a8b;
    border-color: #005a8b;
}

.vem-drag-toggle-btn svg,
.vem-search-area-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ==========================================================================
   Leaflet Attribution Flag Colors - Preserve Original Colors
   ========================================================================== */

/* Ensure Leaflet attribution flag SVG colors are preserved */
/* The flag SVG has inline fill colors (#4C7BE1, #FFD500, #E0BC00) that must not be overridden */
.leaflet-control-attribution svg.leaflet-attribution-flag,
.leaflet-control-attribution svg.leaflet-attribution-flag path {
    /* Don't override inline fill attributes - preserve original colors from Leaflet */
    fill: unset !important;
}

/* Explicitly preserve Leaflet attribution flag colors by targeting inline fill attributes */
.leaflet-control-attribution svg.leaflet-attribution-flag path[fill="#4C7BE1"] {
    fill: #4C7BE1 !important; /* Blue */
}

.leaflet-control-attribution svg.leaflet-attribution-flag path[fill="#FFD500"] {
    fill: #FFD500 !important; /* Yellow */
}

.leaflet-control-attribution svg.leaflet-attribution-flag path[fill="#E0BC00"] {
    fill: #E0BC00 !important; /* Darker yellow */
}

/* ==========================================================================
   Marker Popup Styles
   ========================================================================== */

/* Popup loading state - use Voxel's native classes */
/* Elementor CSS handles styling via {{WRAPPER}} .ts-loading-popup .ts-loader */
.ts-loading-popup {
    padding: 20px;
    text-align: center;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* Voxel's native ts-loader spinner */
/* Elementor widget settings control:
   - Color 1: border-color (all borders)
   - Color 2: border-bottom-color (animated part) */
.ts-loading-popup .ts-loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-bottom-color: currentColor;
    border-radius: 50%;
    animation: ts-loader-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes ts-loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Popup content styling */
.vem-popup-content {
    padding: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vem-popup-title {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.vem-popup-excerpt {
    margin: 8px 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.vem-popup-image {
    margin: 8px 0;
}

.vem-popup-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.vem-popup-link {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    background: #007cba;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.vem-popup-link:hover {
    background: #005a8b;
    color: white;
}

/* Voxel popup container */
.vem-voxel-popup {
    padding: 0;
}

.vem-voxel-popup .ts-preview-popup {
    padding: 0;
}

/* Leaflet popup customization for Voxel popups */
/* Remove all default Leaflet popup wrapper styling when using Voxel Elementor templates */
/* Use class-based selectors for better browser compatibility */
.leaflet-popup-content-wrapper.vem-voxel-popup-wrapper,
.leaflet-popup-content-wrapper:has(.vem-voxel-popup),
.leaflet-popup-content-wrapper:has(.ts-preview-popup) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Remove default Leaflet popup content styling */
.leaflet-popup-content.vem-voxel-popup-content,
.leaflet-popup-content:has(.vem-voxel-popup),
.leaflet-popup-content:has(.ts-preview-popup) {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Ensure Elementor template controls all styling */
.vem-voxel-popup .ts-preview-popup,
.vem-voxel-popup .elementor {
    margin: 0;
    padding: 0;
}

/* Remove Leaflet popup tip to match Voxel native Google Maps styling */
.leaflet-popup .leaflet-popup-tip-container {
    display: none !important;
}
    /* Keep tip but make it transparent if desired */
    /* display: none; */
}

/* Ensure close button is still visible and functional */
.leaflet-popup:has(.vem-voxel-popup) .leaflet-popup-close-button {
    z-index: 1000;
    color: #333;
}

/* ==========================================================================
   Cluster Marker Hover Effects - Matching Standard Marker Highlighting
   ========================================================================== */

/* Cluster marker base styles */
/* Apply transform to inner element to avoid conflict with Leaflet's positioning transform */
.vem-cluster-icon .ts-marker-cluster,
.leaflet-marker-icon.vem-cluster-icon .ts-marker-cluster,
.leaflet-div-icon.vem-cluster-icon .ts-marker-cluster {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Ensure transform origin is center for scaling */
    transform-origin: center center !important;
    /* Initial state - no scale (explicitly set to override any Elementor transforms) */
    transform: scale(1) !important;
    /* Ensure the element can be transformed */
    will-change: transform;
}

/* Hover effect on cluster marker - matches standard marker highlighting */
/* Scale the inner element, not the wrapper (Leaflet uses transform on wrapper for positioning) */
.leaflet-marker-icon.vem-cluster-icon:hover .ts-marker-cluster,
.vem-cluster-icon:hover .ts-marker-cluster,
.leaflet-div-icon.vem-cluster-icon:hover .ts-marker-cluster,
/* Also apply when cluster is highlighted from post feed hover */
.vem-cluster-icon .ts-marker-cluster.vem-cluster-highlighted {
    transform: scale(1.25) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
    z-index: 1000 !important;
}

/* Ensure cluster icon wrapper allows hover and doesn't interfere */
.leaflet-marker-icon.vem-cluster-icon,
.leaflet-div-icon.vem-cluster-icon {
    cursor: pointer;
    /* Preserve Leaflet's positioning transform on wrapper */
    /* Don't apply transform to wrapper - only to inner element */
}

/* ==========================================================================
   Icon Marker Styles - Using Voxel CSS Variables
   ========================================================================== */

/* Ensure icon markers use Voxel's CSS variables for sizing and coloring */
/* Elementor CSS sets --ts-icon-size on .marker-type-icon and --ts-icon-color on .mi-static */
.marker-type-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Ensure transform origin is center for scaling */
    transform-origin: center center !important;
    /* Smooth transition for hover effects */
    transition: transform 0.2s ease !important;
    will-change: transform;
}

/* Dynamic markers (taxonomy): Use Voxel's native approach for background */
/* This matches Voxel's native Google Maps implementation */
.marker-type-icon.mi-dynamic {
    --ts-icon-shadow: var(--ts-icon-bg);
    background: var(--ts-icon-bg);
}

.marker-type-icon .mi-static,
.marker-type-icon .mi-dynamic {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Static markers: Use CSS variable for background color (non-taxonomy markers) */
/* For non-taxonomy markers: defaults to white (#ffffff) */
/* Elementor widget settings will override this via {{WRAPPER}} .mi-static (more specific selector) */
.marker-type-icon .mi-static {
    background-color: var(--ts-icon-bg, #ffffff);
}

/* Non-taxonomy markers: explicitly set white background as default */
/* Use :not(.mi-dynamic) to target only static markers (Voxel's native class) */
.marker-type-icon:not(.mi-dynamic) .mi-static {
    background-color: #ffffff;
}

/* Non-taxonomy markers: active state also defaults to white background */
.marker-type-icon:not(.mi-dynamic).marker-active .mi-static,
.marker-type-icon:not(.mi-dynamic) .marker-active .mi-static {
    background-color: #ffffff;
}

/* Prevent Elementor widget color settings from overriding taxonomy term colors */
/* Dynamic markers use Voxel's native CSS (.marker-type-icon.mi-dynamic) which has higher specificity */
/* But we still need protection for Elementor's very specific selectors */
/* Elementor's selectors are like: .elementor-element-{id} .mi-static { background-color: ... } */
.elementor-element .marker-type-icon.mi-dynamic,
.elementor-element .marker-type-icon.mi-dynamic.marker-active,
.elementor-widget-ts-map .marker-type-icon.mi-dynamic,
.elementor-widget-ts-map .marker-type-icon.mi-dynamic.marker-active {
    /* Force taxonomy background color - Elementor settings should NOT override */
    /* Use !important to ensure it takes precedence over Elementor's injected CSS */
    background: var(--ts-icon-bg) !important;
    --ts-icon-shadow: var(--ts-icon-bg) !important;
}

/* Taxonomy icon color protection: Inline styles set in createStyledMarker have highest specificity */
/* No additional CSS rules needed - inline style on marker wrapper prevents Elementor override */

/* Use CSS variable for icon size (SVG and font icons) */
.marker-type-icon .mi-static svg,
.marker-type-icon .mi-static i {
    width: var(--ts-icon-size, 18px) !important;
    height: var(--ts-icon-size, 18px) !important;
    font-size: var(--ts-icon-size, 18px) !important;
}

/* Dynamic markers (taxonomy): Use Voxel's native approach - direct white fill */
/* This matches Voxel's native Google Maps implementation */
.marker-type-icon.mi-dynamic svg {
    fill: #fff;
}

/* Dynamic markers active state: also white (Voxel's approach) */
.marker-type-icon.mi-dynamic.marker-active svg,
.marker-type-icon.marker-active .mi-dynamic svg {
    fill: #fff;
}

/* Static markers: Use CSS variable for icon color */
.marker-type-icon .mi-static svg,
.marker-type-icon .mi-static svg path,
.marker-type-icon .mi-static i {
    color: var(--ts-icon-color, #ffffff) !important;
    fill: var(--ts-icon-color, #ffffff) !important;
}

/* Font icons use ::before pseudo-element - ensure color is applied there too */
.marker-type-icon .mi-static i::before {
    color: var(--ts-icon-color, #ffffff) !important;
}

/* Default icon color - set on .marker-type-icon for inheritance */
/* For taxonomy markers: Voxel's CSS handles it via .marker-type-icon.mi-dynamic svg */
/* For non-taxonomy markers: var(--ts-shade-2) - set via CSS rule below */
/* Elementor will override if user sets a value via {{WRAPPER}} .marker-type-icon */
.marker-type-icon {
    --ts-icon-color: #ffffff; /* Default fallback (for static markers only) */
}

/* Non-taxonomy markers: default icon color to var(--ts-shade-2) */
/* Use :not(.mi-dynamic) to target only static markers (Voxel's native class) */
/* Set on both wrapper and .mi-static to ensure it works in Elementor editor */
.marker-type-icon:not(.mi-dynamic) {
    --ts-icon-color: var(--ts-shade-2);
}

.marker-type-icon:not(.mi-dynamic) .mi-static {
    --ts-icon-color: var(--ts-shade-2);
}

/* Active state icon color - default varies by marker type */
/* For taxonomy markers: Voxel's CSS handles it via .marker-type-icon.mi-dynamic.marker-active svg */
/* For non-taxonomy markers: var(--ts-shade-2) */
/* Use :not(.mi-dynamic) to target only static markers (Voxel's native class) */
/* Set on both wrapper and .mi-static to ensure it works in Elementor editor */
.marker-type-icon:not(.mi-dynamic).marker-active,
.map-marker:not(.mi-dynamic).marker-active.marker-type-icon,
.marker-type-icon:not(.mi-dynamic) .marker-active .mi-static {
    --ts-icon-color: var(--ts-shade-2);
}

.marker-type-icon:not(.mi-dynamic).marker-active .mi-static,
.marker-type-icon:not(.mi-dynamic) .marker-active .mi-static {
    --ts-icon-color: var(--ts-shade-2);
}

/* Use the variable for the icon color (Elementor's setting will override the variable above) */
/* Ensure this rule has high specificity to override any Voxel default blue colors */
.marker-type-icon.marker-active .mi-static svg,
.marker-type-icon.marker-active .mi-static svg path,
.marker-type-icon.marker-active .mi-static i,
.map-marker.marker-active.marker-type-icon .mi-static svg,
.map-marker.marker-active.marker-type-icon .mi-static svg path,
.map-marker.marker-active.marker-type-icon .mi-static i {
    color: var(--ts-icon-color, #ffffff) !important;
    fill: var(--ts-icon-color, #ffffff) !important;
}

/* Font icons active state - ensure ::before pseudo-element gets the color */
.marker-type-icon.marker-active .mi-static i::before,
.map-marker.marker-active.marker-type-icon .mi-static i::before {
    color: var(--ts-icon-color, #ffffff) !important;
}

/* For static markers: CSS variable is already set above, no need for currentColor override */
/* For dynamic markers: Voxel's CSS handles it directly with fill: #fff */
/* Only apply currentColor as fallback for edge cases */
.marker-type-icon:not(.mi-dynamic) .mi-static svg {
    /* CSS variable is set on .mi-static above, use it */
    fill: var(--ts-icon-color, var(--ts-shade-2)) !important;
}

.marker-type-icon:not(.mi-dynamic) .mi-static svg path {
    fill: var(--ts-icon-color, var(--ts-shade-2)) !important;
}

/* Hover effect on individual icon markers - enlarge on hover (matches cluster behavior) */
/* Scale the marker wrapper, similar to cluster markers */
.leaflet-marker-icon:hover .marker-type-icon,
.leaflet-div-icon:hover .marker-type-icon {
    transform: scale(1.25) !important;
    transition: transform 0.2s ease !important;
    z-index: 1000 !important;
}

/* Text markers - use Voxel's native class structure */
/* Elementor CSS handles all styling via {{WRAPPER}} .marker-type-text */
/* We just need to ensure proper display and positioning for Leaflet */
/* Text markers are wrapped in .vem-text-marker-wrapper so .marker-active can be added as parent */
/* This allows Elementor CSS selector {{WRAPPER}} .marker-active .marker-type-text to work */
.vem-text-marker-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.marker-type-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    /* Ensure transform origin is center for scaling */
    transform-origin: center center !important;
    /* Smooth transition for hover effects */
    transition: transform 0.2s ease !important;
    will-change: transform;
    /* Box sizing for proper padding calculation */
    box-sizing: border-box !important;
}

/* Hover effect on individual text markers - enlarge on hover (matches icon markers) */
.leaflet-marker-icon:hover .marker-type-text,
.leaflet-div-icon:hover .marker-type-text {
    transform: scale(1.25) !important;
    transition: transform 0.2s ease !important;
    z-index: 1000 !important;
}

/* Enlarge marker when highlighted from post feed hover (marker-active class) */
/* For text markers, .marker-active is on .vem-text-marker-wrapper (parent of .marker-type-text) */
/* This matches Elementor CSS selector: {{WRAPPER}} .marker-active .marker-type-text */
.leaflet-marker-icon .vem-text-marker-wrapper.marker-active .marker-type-text,
.leaflet-div-icon .vem-text-marker-wrapper.marker-active .marker-type-text,
.leaflet-marker-icon .map-marker.marker-active.marker-type-icon,
.leaflet-div-icon .map-marker.marker-active.marker-type-icon,
.leaflet-marker-icon .map-marker.marker-active.marker-type-icon,
.leaflet-div-icon .map-marker.marker-active.marker-type-icon,
.map-marker.marker-active.marker-type-icon {
    transform: scale(1.25) !important;
    transition: transform 0.2s ease !important;
    z-index: 1000 !important;
}

/* Ensure marker wrapper allows hover and doesn't interfere with Leaflet positioning */
.leaflet-marker-icon,
.leaflet-div-icon {
    cursor: pointer;
    /* Preserve Leaflet's positioning transform on wrapper */
    /* Transform scale is applied to inner .marker-type-icon, not the wrapper */
}

/* ==========================================================================
   Autocomplete Dropdown Styles - Mobile-Friendly Positioning
   ========================================================================== */

/* Ensure input containers can contain absolutely positioned dropdowns */
.ts-input-icon,
.flexify,
.ts-form-group {
    position: relative !important;
    overflow: visible !important;
}

/* Autocomplete dropdown container */
.pac-container.vem-autocomplete-dropdown {
    position: absolute !important;
    background: white !important;
    border: 1px solid #ccc !important;
    border-top: none !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border-radius: 0 0 4px 4px !important;
    margin-top: 0 !important;
    /* Position and width are set dynamically in JavaScript for precise alignment */
}

/* Autocomplete dropdown items */
.pac-container.vem-autocomplete-dropdown .pac-item {
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #eee !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.pac-container.vem-autocomplete-dropdown .pac-item:hover,
.pac-container.vem-autocomplete-dropdown .pac-item.pac-item-selected {
    background-color: #f5f5f5 !important;
}

.pac-container.vem-autocomplete-dropdown .pac-item:last-child {
    border-bottom: none !important;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .pac-container.vem-autocomplete-dropdown {
        max-height: 180px !important;
        /* Ensure dropdown stays visible above keyboard */
        position: absolute !important;
    }
    
    /* Ensure parent containers don't clip dropdown on mobile */
    .ts-input-icon,
    .flexify,
    .ts-form-group,
    .ts-inline-filter {
        overflow: visible !important;
        position: relative !important;
    }
}