/**
 * Advanced Google Maps Markers Styling
 * Ensures proper display of HTML-based markers
 */

/* Ensure markers are always visible above other map elements */
.gm-style .advanced-marker {
    z-index: 100 !important;
}

/* Smooth animations for hover effects */
.advanced-marker {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhanced shadow for better visibility */
.advanced-marker:hover {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4)) !important;
}

/* Ensure text is always centered in emoji markers */
.advanced-marker {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Map info window styling to match honey theme */
.gm-style .gm-style-iw-d {
    color: #2C5530 !important;
}

.gm-style .gm-style-iw-d h3 {
    color: #D2691E !important;
    margin-top: 0 !important;
    font-size: 1.2rem !important;
}

.gm-style .gm-style-iw-d a {
    color: #D2691E !important;
    text-decoration: none !important;
}

.gm-style .gm-style-iw-d a:hover {
    text-decoration: underline !important;
}

/* Responsive marker sizing for mobile */
@media (max-width: 768px) {
    .advanced-marker {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .advanced-marker {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}