/* Custom Map Markers Styling */

.marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Specific marker types */
.marker-entrance {
    background-color: #28a745; /* Green for entrance */
    background-image: url('https://cdn.mapmarker.io/api/v1/pin?size=50&background=%2328a745&icon=fa-door-open&color=%23FFFFFF');
}

.marker-playground {
    background-color: #ffc107; /* Yellow for playground */
    background-image: url('https://cdn.mapmarker.io/api/v1/pin?size=50&background=%23ffc107&icon=fa-child&color=%23FFFFFF');
}

.marker-toilets {
    background-color: #17a2b8; /* Teal for toilets */
    background-image: url('https://cdn.mapmarker.io/api/v1/pin?size=50&background=%2317a2b8&icon=fa-restroom&color=%23FFFFFF');
}

.marker-café {
    background-color: #dc3545; /* Red for café */
    background-image: url('https://cdn.mapmarker.io/api/v1/pin?size=50&background=%23dc3545&icon=fa-coffee&color=%23FFFFFF');
}

.marker-parkinglot {
    background-color: #6c757d; /* Gray for parking */
    background-image: url('https://cdn.mapmarker.io/api/v1/pin?size=50&background=%236c757d&icon=fa-parking&color=%23FFFFFF');
}

/* Walking Gate markers */
.marker-walkinggate {
    width: 25px;
    height: 21px; /* Match the image aspect ratio */
    background-color: transparent; /* No background color needed */
    background-image: url('../assets/small-gate.png');
    background-size: contain; /* Ensure the image fits properly */
    background-repeat: no-repeat;
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the shadow */
    transform: scale(1); /* No need for scaling */
}

/* Large Gate markers */
.marker-largegate {
    width: 45px;
    height: 34px; /* Match the image aspect ratio */
    background-color: transparent; /* No background color needed */
    background-image: url('../assets/large-gate.png');
    background-size: contain; /* Ensure the image fits properly */
    background-repeat: no-repeat;
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the shadow */
    transform: scale(1); /* No need for scaling */
}

/* Parking markers */
.marker-parking {
    width: 20px;
    height: 20px; /* Match the requested size */
    background-color: transparent; /* No background color needed */
    background-image: url('../assets/parking.png');
    background-size: contain; /* Ensure the image fits properly */
    background-repeat: no-repeat;
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the shadow */
    transform: scale(1); /* No need for scaling */
}

/* Jamboree Stone marker */
.marker-jamboreestone {
    width: 30px;
    height: 30px; /* Match the requested size */
    background-color: transparent; /* No background color needed */
    background-image: url('../assets/jamboree_stone.png');
    background-size: contain; /* Ensure the image fits properly */
    background-repeat: no-repeat;
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the shadow */
    transform: scale(1); /* No need for scaling */
}

/* Aero Club marker */
.marker-aeroclub {
    width: 35px;
    height: 35px; /* Slightly larger for visibility */
    background-color: transparent; /* No background color needed */
    background-image: url('../assets/sutton-park-model-aero-club.png');
    background-size: contain; /* Ensure the image fits properly */
    background-repeat: no-repeat;
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the shadow */
    transform: scale(1); /* No need for scaling */
}

/* Park Run marker */
.marker-parkrun {
    width: 45px;
    height: 45px; /* Increased from 35px to 45px for better visibility */
    background-color: transparent; /* No background color needed */
    background-image: url('../assets/sutton-park-run-start.png');
    background-size: contain; /* Ensure the image fits properly */
    background-repeat: no-repeat;
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the shadow */
    transform: scale(1); /* No need for scaling */
}

/* Hover effect */
.marker:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.marker-walkinggate:hover {
    transform: scale(1.1); /* Consistent hover scaling */
    transition: transform 0.2s ease;
}

.marker-largegate:hover {
    transform: scale(1.1); /* Consistent hover scaling */
    transition: transform 0.2s ease;
}

.marker-parking:hover {
    transform: scale(1.1); /* Consistent hover scaling */
    transition: transform 0.2s ease;
}

.marker-jamboreestone:hover {
    transform: scale(1.1); /* Consistent hover scaling */
    transition: transform 0.2s ease;
}

.marker-aeroclub:hover {
    transform: scale(1.1); /* Consistent hover scaling */
    transition: transform 0.2s ease;
}

.marker-parkrun:hover {
    transform: scale(1.1); /* Consistent hover scaling */
    transition: transform 0.2s ease;
}

/* MapboxGL popup customization */
.mapboxgl-popup {
    max-width: 200px;
}

.mapboxgl-popup-content {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.mapboxgl-popup-content h3 {
    margin: 0;
    font-size: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.mapboxgl-popup-content p {
    margin: 5px 0 0;
    font-size: 14px;
}