/*
 * LiveMap Core: Public Stylesheet
 *
 * @package LiveMapCore
 * @subpackage Public/Assets
 */

/* Basic styling for the map container */
#livemap-container {
    border: 1px solid #ddd;
    border-radius: 5px;
    /* You can adjust width and height here if not set inline in the shortcode */
    /* width: 100%; */
    /* height: 500px; */
    margin-bottom: 20px; /* Space below the map */
}

/* Optional: Styling for popups (if you want custom look beyond Leaflet defaults) */
.leaflet-popup-content-wrapper {
    border-radius: 4px;
    font-size: 14px;
}

.leaflet-popup-content {
    padding: 10px 15px;
}

.leaflet-popup-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}

.leaflet-popup-content p {
    margin-bottom: 10px;
    line-height: 1.5;
    color: #666;
}

.leaflet-popup-content a {
    color: #0073aa; /* WordPress default link color */
    text-decoration: none;
}

.leaflet-popup-content a:hover {
    text-decoration: underline;
}

/* Ensure images within popups are responsive */
.leaflet-popup-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
    border-radius: 3px;
}

/* Add some padding for the content of the map info box */
.livemap-info-box-content {
    padding: 10px;
}

/* Make sure Leaflet attribution text is readable */
.leaflet-control-attribution {
    font-size: 11px;
}

/* Style for custom icons if you implement them later */
.leaflet-marker-icon.custom-marker-icon {
    /* Example: width: 32px; height: 32px; */
    /* background-image: url('path/to/your/icon.png'); */
    /* background-size: contain; */
}

/* Example for specific icon types */
.leaflet-marker-icon.icon-danger {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="red"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    background-size: cover; /* or contain, as needed */
}

.leaflet-marker-icon.icon-info {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="blue"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
    background-size: cover;
}

.leaflet-marker-icon.icon-default {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="green"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>');
    background-size: cover;
}

/* Adjust marker icon size */
.leaflet-marker-icon {
    width: 32px !important;
    height: 32px !important;
    margin-left: -16px !important; /* Half of width */
    margin-top: -32px !important; /* Full height to position base at coordinates */
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Shadow for marker (Leaflet default) */
.leaflet-shadow-pane .leaflet-marker-shadow {
    display: none; /* Hide default shadow if using SVG icons */
}