/* ======================
   HAVENLYTICS MAP STYLES - FIXED VERSION
======================= */

/* Base Map Container Styles - KEEP THESE EXACTLY */
.hvnly-map-view {
    width: 100%;
    height: 600px;
    position: relative;
    background: #f5f5f5;
}

.hvnly-map-container {
    width: 100%;
    height: 100%;
    position: relative;
}

#hvnly-properties-map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Override any conflicting styles - KEEP THESE */
.hvnly-map-view .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.hvnly-map-view .leaflet-pane {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.hvnly-map-view .leaflet-control-container {
    position: absolute !important;
    z-index: 1000 !important;
}

/* ENHANCED MARKER STYLES */
.custom-leaflet-marker {
    background: transparent !important;
    border: none !important;
}

.custom-marker-pin {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-pin {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #6C60FE; /* Fallback color */
    background: var(--hvnly-brand-primary, #6C60FE);
    border-radius: 50% 50% 50% 0;
    border: 3px solid var(--hvnly-color-white);
    border: 3px solid var(--hvnly-color-bg-white, var(--hvnly-color-white));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--hvnly-card-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.marker-pin::before {
    content: '\f3c5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--hvnly-color-white);
    color: var(--hvnly-color-bg-white, var(--hvnly-color-white));
    font-size: 14px;
    transform: rotate(45deg);
    z-index: 2;
    position: relative;
}

.marker-pin:hover {
    transform: rotate(-45deg) scale(1.1);
    background: #5944f0;
    background: var(--hvnly-button-bg-hover, #5944f0);
}

.marker-shadow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    filter: blur(4px);
}

/* FIX: Pulse animation for cluster groups - Updated to target actual Leaflet clusters */
.hvnly-map-view .marker-cluster {
    background: #6C60FE !important;
    background: var(--hvnly-brand-primary, #6C60FE) !important;
    border: 3px solid var(--hvnly-color-white) !important;
    border: 3px solid var(--hvnly-color-bg-white, var(--hvnly-color-white)) !important;
    border-radius: 50% !important;
    color: var(--hvnly-color-white) !important;
    color: var(--hvnly-color-bg-white, var(--hvnly-color-white)) !important;
    font-weight: 700 !important;
    font-weight: var(--hvnly-font-weight-bold, 700) !important;
    text-align: center !important;
    position: relative !important;
    animation: pulse 2s infinite !important;
}

.hvnly-map-view .marker-cluster div {
    background: #6C60FE !important;
    background: var(--hvnly-brand-primary, #6C60FE) !important;
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hvnly-map-view .marker-cluster span {
    position: relative !important;
    z-index: 2 !important;
}

/* FIX: Add pulse animation to cluster markers */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 96, 254, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(108, 96, 254, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(108, 96, 254, 0);
    }
}

/* Enhanced popup styles */
.hvnly-property-popup .leaflet-popup-content-wrapper {
    background: var(--hvnly-color-white);
    background: var(--hvnly-card-bg, var(--hvnly-color-white));
    border-radius: 8px;
    border-radius: var(--hvnly-card-radius, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--hvnly-card-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    border: 1px solid #E4E4ED;
    border: var(--hvnly-card-border, 1px solid #E4E4ED);
    overflow: hidden;
}

.hvnly-property-popup .leaflet-popup-content {
    margin: 0;
    padding: 0;
    width: 300px !important;
    line-height: 1.4;
}

.hvnly-property-popup-content {
    padding: 1.5rem !important;
    padding: var(--hvnly-card-padding, 1.5rem) !important;
}

.hvnly-popup-image {
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    border-radius: 8px 8px 0 0;
    border-radius: var(--hvnly-card-radius, 8px) var(--hvnly-card-radius, 8px) 0 0;
    overflow: hidden;
    height: 160px;
}

.hvnly-popup-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hvnly-popup-image:hover img {
    transform: scale(1.05);
}

.hvnly-popup-no-image {
    height: 100%;
    background: linear-gradient(135deg, #6C60FE, #764ba2);
    background: linear-gradient(135deg, var(--hvnly-brand-primary, #6C60FE), var(--hvnly-brand-secondary, #764ba2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hvnly-color-white);
    color: var(--hvnly-color-bg-white, var(--hvnly-color-white));
    font-size: 2rem;
}

.hvnly-popup-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-weight: var(--hvnly-font-weight-bold, 700) !important;
    color: #1E1E2F !important;
    color: var(--hvnly-text-primary, #1E1E2F) !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.3;
}

.hvnly-popup-price {
    font-size: 1.2rem !important;
    font-size: var(--hvnly-font-size-price, 1.2rem) !important;
    font-weight: 700 !important;
    font-weight: var(--hvnly-font-weight-bold, 700) !important;
    color: #6C60FE !important;
    color: var(--hvnly-brand-primary, #6C60FE) !important;
    margin: 0 0 0.75rem 0 !important;
}

.hvnly-popup-address {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem !important;
    font-size: var(--hvnly-font-size-meta, 0.875rem) !important;
    color: #555 !important;
    color: var(--hvnly-text-secondary, #555) !important;
    margin: 0 0 0.75rem 0 !important;
    line-height: 1.4;
}

.hvnly-popup-address i {
    color: #6C60FE;
    color: var(--hvnly-brand-primary, #6C60FE);
    margin-top: 0.1rem;
}

.hvnly-popup-features {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem 0 !important;
    font-size: 0.875rem !important;
    font-size: var(--hvnly-font-size-meta, 0.875rem) !important;
    flex-wrap: wrap;
}

.hvnly-popup-feature {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #555;
    color: var(--hvnly-text-secondary, #555);
}

.hvnly-popup-feature i {
    color: #6C60FE;
    color: var(--hvnly-brand-primary, #6C60FE);
    font-size: 0.8rem;
}

.hvnly-popup-actions {
    margin-top: 1rem !important;
    text-align: center !important;
}

.hvnly-popup-view-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem !important;
    padding: var(--hvnly-button-padding, 0.75rem 1.5rem) !important;
    background: #6C60FE !important;
    background: var(--hvnly-button-bg, #6C60FE) !important;
    color: var(--hvnly-color-white) !important;
    color: var(--hvnly-button-color, var(--hvnly-color-white)) !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border-radius: var(--hvnly-button-radius, 4px) !important;
    font-size: 0.9rem !important;
    font-size: var(--hvnly-font-size-label, 0.9rem) !important;
    font-weight: 500;
    font-weight: var(--hvnly-font-weight-medium, 500);
    transition: all 0.3s ease !important;
    transition: all var(--hvnly-transition-time, 0.3s ease) !important;
    border: none;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.hvnly-popup-view-btn:hover {
    background: #5944f0 !important;
    background: var(--hvnly-button-bg-hover, #5944f0) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 96, 254, 0.3);
}

/* Loading styles - KEEP THESE */
.hvnly-map-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.hvnly-map-loader {
    text-align: center;
}

.hvnly-map-loader i {
    font-size: 48px;
    color: #6C60FE;
    color: var(--hvnly-brand-primary, #6C60FE);
    margin-bottom: 15px;
    display: block;
    animation: spin 1.5s linear infinite;
}

.hvnly-map-loader span {
    font-size: 16px;
    color: #666;
}

/* Error styles - KEEP THESE */
.hvnly-map-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px;
    background: var(--hvnly-color-white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 400px;
}

.hvnly-map-error-icon {
    font-size: 48px;
    color: #ff4757;
    margin-bottom: 15px;
}

.hvnly-map-error h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 20px;
}

.hvnly-map-error p {
    margin: 0 0 20px 0;
    color: #666;
    font-size: 14px;
}

.hvnly-retry-map-btn {
    padding: 10px 20px;
    background: #6C60FE;
    background: var(--hvnly-brand-primary, #6C60FE);
    color: var(--hvnly-color-white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.hvnly-retry-map-btn:hover {
    background: #5944f0;
    background: var(--hvnly-button-bg-hover, #5944f0);
}

/* Layout adjustments */
.hvnly-property--grid--listings {
    display: flex;
    flex-direction: column;
}

.hvnly-map-view {
    order: 1;
}

#hvnly-property-pagination,
#hvnly-load-more {
     order: 2; 
    /* margin-top: 2rem; */
}

/* Fullscreen control - ENHANCED */
.hvnly-map-view .leaflet-control-fullscreen {
    display: block !important;
}

.hvnly-map-view .leaflet-control-fullscreen a {
    background-color: var(--hvnly-color-white) !important;
    background-color: var(--hvnly-color-bg-white, var(--hvnly-color-white)) !important;
    border: 1px solid #E4E4ED !important;
    border: 1px solid var(--hvnly-border-color, #E4E4ED) !important;
    border-radius: 4px !important;
    border-radius: var(--hvnly-button-radius, 4px) !important;
    color: #1E1E2F !important;
    color: var(--hvnly-text-primary, #1E1E2F) !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
}

.hvnly-map-view .leaflet-control-fullscreen a:hover {
    background-color: #6C60FE !important;
    background-color: var(--hvnly-brand-primary, #6C60FE) !important;
    color: var(--hvnly-color-white) !important;
    color: var(--hvnly-button-color, var(--hvnly-color-white)) !important;
}

/* Custom fullscreen button - ENHANCED */
.leaflet-control-custom {
    background: var(--hvnly-color-white) !important;
    border-radius: 4px !important;
    border: 1px solid #E4E4ED !important;
    margin-top: 10px !important;
}

.custom-fullscreen-button {
    display: block !important;
    background-color: var(--hvnly-color-white) !important;
    border: none !important;
    border-radius: 4px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    color: #1E1E2F !important;
    color: var(--hvnly-text-primary, #1E1E2F) !important;
    text-decoration: none !important;
}

.custom-fullscreen-button:hover {
    background-color: #6C60FE !important;
    background-color: var(--hvnly-brand-primary, #6C60FE) !important;
    color: var(--hvnly-color-white) !important;
    color: var(--hvnly-button-color, var(--hvnly-color-white)) !important;
}

/* Animation for loading */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hvnly-map-view {
        height: 400px;
    }
    
    .hvnly-property-popup .leaflet-popup-content {
        width: 280px !important;
    }
    
    .hvnly-popup-features {
        gap: 0.5rem;
    }
}

/* Fullscreen Button Styles */
.hvnly-map-fullscreen-btn {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1000 !important;
    background: var(--hvnly-color-white) !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: 50px !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.hvnly-map-fullscreen-btn:hover {
    background: #6C60FE !important;
    color: var(--hvnly-color-white) !important;
    border-color: #6C60FE !important;
}

.hvnly-map-fullscreen-btn:active {
    transform: scale(0.95) !important;
}

.hvnly-map-fullscreen-btn i {
    font-size: 22px !important;
    color: #333;
    transition: color 0.3s ease;
}

.hvnly-map-fullscreen-btn:hover i {
    color: var(--hvnly-color-white);
}

/* Position below zoom control */
.leaflet-control-zoom {
    margin-top: 10px !important;
}

.hvnly-map-fullscreen-btn {
    top: 10px !important;
}
/* Leaflet Custom Zoom Controls */
.hvnly-leaflet-zoom-controls-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: var(--hvnly-color-white);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    overflow: hidden;
}

.hvnly-leaflet-zoom-control {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    background-color: var(--hvnly-color-white);
    border-bottom: 1px solid #ddd;
    transition: all 0.2s ease;
}

.hvnly-leaflet-zoom-control:last-child {
    border-bottom: none;
}

.hvnly-leaflet-zoom-control:hover {
    background-color: #f2f2f2;
}

.hvnly-leaflet-zoom-control i {
    font-size: 14px;
}

/* Adjust fullscreen control position to be below zoom controls */
.hvnly-leaflet-fullscreen-control {
    margin-top: 76px; /* Position below the custom zoom controls */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hvnly-leaflet-zoom-control {
        width: 28px;
        height: 28px;
    }
    
    .hvnly-leaflet-zoom-control i {
        font-size: 12px;
    }
    
    .hvnly-leaflet-fullscreen-control {
        margin-top: 70px; /* Adjust for smaller zoom controls */
    }
}

/* Google Maps fullscreen button styles */
.hvnly_google_map_property_search .hvnly-google-map-fullscreen-btn {
 left: 10px !important;
}


.hvnly-google-map-fullscreen-control {
    /* Google Maps control specific styles */
}

/* Leaflet fullscreen button styles */
.hvnly_leaflet_map_property_search .hvnly-leaflet-map-fullscreen-btn {
    /* Your Leaflet specific styles */
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.hvnly_leaflet_map_property_search .hvnly-leaflet-map-fullscreen-btn:hover {
    background-color: #388E3C;
    border-color: #388E3C;
}

/* Ensure Font Awesome is loaded for pseudo-elements */
.marker-pin::before {
    content: '\f3c5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--hvnly-color-white);
    color: var(--hvnly-color-bg-white, var(--hvnly-color-white));
    font-size: 14px;
    transform: rotate(45deg);
    z-index: 2;
    position: relative;
}

/* Fix for Leaflet cluster animations */
.hvnly-map-view .marker-cluster {
    animation: pulse 2s infinite !important;
}

/* Ensure custom controls are properly positioned */
.leaflet-control-custom {
    margin-top: 10px !important;
    margin-right: 10px !important;
}

/* Fix for Google Maps fullscreen button positioning */
.hvnly_google_map_property_search .hvnly-map-fullscreen-btn {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1000 !important;
}

/* Fix for Leaflet fullscreen button positioning */
.hvnly_leaflet_map_property_search .leaflet-control-custom {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1000 !important;
}

/* Ensure map container has proper dimensions */
.hvnly-properties-map.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}