/**
 * Custom Map Marker Styles
 * Styles for the custom HTML markers used in Google Maps
 */

.custom-map-marker {
    cursor: pointer;
    transform-origin: center bottom;
}

.marker-content {
    position: relative;
    background: #F7F8F9; /* neutral-50 */
    border: 1px solid #E7E8E9; /* neutral-100 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* 8px */
    width: fit-content;
    border-radius: 9999px; /* fully rounded */
    padding: 0.125rem 1rem 0.125rem 0.125rem; /* 2px 16px 2px 2px */
    transition: all 0.2s ease-in-out;
}

.marker-content:hover,
.marker-content.highlighted {
    background: #FBF4EC; /* primary-100 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.marker-icon {
    width: 2.25rem; /* 36px (9 * 4) */
    height: 2.25rem; /* 36px */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F8F2EA; /* primary-75 */
    padding: 0.5rem; /* 8px */
    border-radius: 9999px;
    transition: all 0.2s ease-in-out;
    color: #B98A59; /* primary-400 */
}

.marker-content:hover .marker-icon,
.marker-content.highlighted .marker-icon {
    background: #F4E9DB; /* primary-50 */
}

.marker-price {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    color: #0F1520; /* secondary-500 */
    margin: 0;
    white-space: nowrap;
}

.marker-pointer {
    position: absolute;
    bottom: -1rem; /* -16px */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    transition: color 0.2s ease-in-out;
}

.marker-content:hover .marker-pointer,
.marker-content.highlighted .marker-pointer {
    color: #FBF4EC; /* primary-100 */
}

/* Bounce Animation - triggers on hover */
@keyframes markerBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-12px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-6px);
    }
}

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

/* Hover state for group */
.group:hover .marker-content {
    background: #FBF4EC; /* primary-100 */
}

.group:hover .marker-icon {
    background: #F4E9DB; /* primary-50 */
}

.group:hover .marker-pointer {
    color: #FBF4EC; /* primary-100 */
}