/**
 * Google Maps Control Positioning Fix
 * Fixes overlapping buttons and improves map UI/UX
 * Supports both #trek-map and #interactive-map
 */

/* Map container improvements */
#trek-map,
#interactive-map {
    height: 500px !important; /* Increase height to give more room */
    margin: 30px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Responsive map height */
@media (max-width: 768px) {
    #trek-map,
    #interactive-map {
        height: 400px !important;
    }
}

@media (max-width: 480px) {
    #trek-map,
    #interactive-map {
        height: 350px !important;
    }
}

/* Google Maps control positioning fixes */
/* Move map type control to top left */
#trek-map .gm-style .gmnoprint.gm-style-mtc,
#interactive-map .gm-style .gmnoprint.gm-style-mtc {
    margin: 10px 0 0 10px !important;
}

/* Street View control positioning */
#trek-map .gm-svpc,
#interactive-map .gm-svpc {
    right: 60px !important; /* Move left to avoid overlap with fullscreen */
    bottom: 30px !important; /* Move up from bottom */
}

/* Fullscreen control positioning */
#trek-map button[title="Toggle fullscreen view"],
#interactive-map button[title="Toggle fullscreen view"] {
    right: 10px !important;
    top: 10px !important;
}

/* Zoom controls styling */
#trek-map .gm-bundled-control.gm-bundled-control-on-bottom,
#interactive-map .gm-bundled-control.gm-bundled-control-on-bottom {
    bottom: 40px !important; /* Move up to avoid cutoff */
    right: 10px !important;
}

/* Fix zoom control buttons */
#trek-map .gm-bundled-control button,
#interactive-map .gm-bundled-control button {
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Keyboard shortcuts - hide by default to avoid overlap */
#trek-map .gm-style .gm-style-cc,
#interactive-map .gm-style .gm-style-cc {
    display: none !important;
}

/* Show keyboard shortcuts on hover/focus */
#trek-map:hover .gm-style .gm-style-cc,
#trek-map:focus-within .gm-style .gm-style-cc,
#interactive-map:hover .gm-style .gm-style-cc,
#interactive-map:focus-within .gm-style .gm-style-cc {
    display: block !important;
    bottom: 5px !important;
    right: 5px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
}

/* Improve button visibility */
#trek-map .gm-control-active,
#interactive-map .gm-control-active {
    background-color: #fff !important;
    border: 2px solid #666 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    color: #666 !important;
    cursor: pointer !important;
    margin: 5px !important;
    padding: 0 !important;
    height: 40px !important;
    width: 40px !important;
    transition: all 0.2s ease !important;
}

#trek-map .gm-control-active:hover,
#interactive-map .gm-control-active:hover {
    background-color: #ebebeb !important;
    transform: scale(1.05) !important;
}

/* Fix pegman (Street View) control */
#trek-map .gm-svpc img,
#interactive-map .gm-svpc img {
    width: 100% !important;
    height: 100% !important;
}

/* Custom map styles for better visual hierarchy */
#trek-map .gm-style-iw-d,
#interactive-map .gm-style-iw-d {
    overflow: auto !important;
}

/* Info window improvements */
#trek-map .gm-style-iw,
#interactive-map .gm-style-iw {
    padding: 10px !important;
}

/* Add loading state */
#trek-map.loading,
#interactive-map.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

#trek-map.loading::after,
#interactive-map.loading::after {
    content: "Loading map...";
    color: #666;
    font-size: 16px;
}

/* Improve map attribution positioning */
#trek-map .gmnoprint:not(.gm-bundled-control) .gm-style-cc,
#interactive-map .gmnoprint:not(.gm-bundled-control) .gm-style-cc {
    bottom: 10px !important;
}

/* Fix for map type control dropdown */
#trek-map .gm-style-mtc > div,
#interactive-map .gm-style-mtc > div {
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Ensure controls don't overlap on smaller screens */
@media (max-width: 600px) {
    /* Stack controls vertically on mobile */
    #trek-map button[title="Toggle fullscreen view"],
    #interactive-map button[title="Toggle fullscreen view"] {
        top: 60px !important;
    }
    
    #trek-map .gm-svpc,
    #interactive-map .gm-svpc {
        right: 10px !important;
        bottom: 100px !important;
    }
    
    #trek-map .gm-bundled-control.gm-bundled-control-on-bottom,
    #interactive-map .gm-bundled-control.gm-bundled-control-on-bottom {
        bottom: 150px !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    #trek-map .gm-control-active,
    #interactive-map .gm-control-active {
        background-color: #333 !important;
        border-color: #fff !important;
        color: #fff !important;
    }
    
    #trek-map .gm-control-active:hover,
    #interactive-map .gm-control-active:hover {
        background-color: #444 !important;
    }
}