/* ========================================
   Custom Marker Icons Styling
   ======================================== */

/* Apply category-specific filters to marker icons */
.custom-marker-icon {
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover effect */
.custom-marker-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Category-specific colors using CSS filters */
.marker-taiwanese img {
    filter: hue-rotate(0deg) saturate(1.2) brightness(1.0);
    /* 磚紅色 - 台式料理 */
}

.marker-japanese img {
    filter: hue-rotate(200deg) saturate(1.5) brightness(0.9);
    /* 深藍色 - 日式料理 */
}

.marker-western img {
    filter: hue-rotate(120deg) saturate(0.8) brightness(1.0);
    /* 綠色 - 西式料理 */
}

.marker-cafe img {
    filter: hue-rotate(40deg) saturate(0.9) brightness(1.1);
    /* 黃色 - 咖啡廳 */
}

.marker-dessert img {
    filter: hue-rotate(330deg) saturate(0.8) brightness(1.0);
    /* 粉紅色 - 甜點 */
}

.marker-other img {
    filter: grayscale(0.3) brightness(0.9);
    /* 灰褐色 - 其他 */
}

/* Active/Selected marker */
.custom-marker-icon.active {
    transform: scale(1.2);
    filter: brightness(1.2) drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    z-index: 1000 !important;
}

/* Custom cluster styling */
.marker-cluster-custom-wrapper {
    background: transparent !important;
}

.marker-cluster-custom {
    background: rgba(139, 126, 116, 0.8);
    border: 3px solid rgba(139, 126, 116, 1);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.marker-cluster-custom span {
    line-height: 1;
}

/* ========================================
   Alternative: Using background images
   ======================================== */

/* If using divIcon with background images */
.custom-marker-div {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.custom-marker-div:hover {
    transform: scale(1.1);
}

/* Category-specific backgrounds with filters */
.marker-div-taiwanese {
    background-image: url('/images/markers/push-pin.png');
    filter: hue-rotate(0deg) saturate(1.2);
}

.marker-div-japanese {
    background-image: url('/images/markers/marker.png');
    filter: hue-rotate(200deg) saturate(1.5);
}

.marker-div-western {
    background-image: url('/images/markers/push-pin.png');
    filter: hue-rotate(120deg) saturate(0.8);
}

.marker-div-cafe {
    background-image: url('/images/markers/push-pin.png');
    filter: hue-rotate(40deg) saturate(0.9);
}

.marker-div-dessert {
    background-image: url('/images/markers/push-pin.png');
    filter: hue-rotate(330deg) saturate(0.8);
}

.marker-div-other {
    background-image: url('/images/markers/push-pin.png');
    filter: grayscale(0.3) brightness(0.9);
}

/* ========================================
   Marker Animation
   ======================================== */

/* Pulse animation for newly added markers */
@keyframes marker-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.marker-new {
    animation: marker-pulse 1s ease-in-out 3;
}

/* Drop-in animation when markers first appear */
@keyframes marker-drop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    60% {
        transform: translateY(10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.marker-drop-in {
    animation: marker-drop 0.6s ease-out;
}

/* ========================================
   Mobile Optimizations
   ======================================== */

@media (max-width: 768px) {
    /* Slightly larger markers on mobile for easier tapping */
    .custom-marker-icon {
        width: 44px !important;
        height: 44px !important;
    }
    
    .marker-cluster-custom {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
}