/* Map edit handle styles - Vertex points (grip handles) */
.gmnoprint img[src*="vertex"],
.gmnoprint img[src*="drag"],
div[style*="cursor: pointer"] img {
    cursor: pointer !important;
    opacity: 0.9 !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: auto !important;
}

.gmnoprint img[src*="vertex"]:hover,
.gmnoprint img[src*="drag"]:hover,
div[style*="cursor: pointer"] img:hover {
    transform: scale(1.3) !important;
    opacity: 1 !important;
}

/* Make the handles slightly larger and more visible */
.gmnoprint img[src*="vertex"],
.gmnoprint img[src*="drag"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
}

/* Ensure handles container is always visible and interactive */
.gmnoprint {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}

/* Make sure the entire map allows pointer events */
#map {
    pointer-events: auto !important;
    height: 520px;
    width: 100%;
    border-radius: var(--radius-sm);
    margin-top: 0;
}

/* Map container */
.map-container {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px #ccc;
    margin-bottom: 20px;
}

/* Ensure polygon paths are interactive */
#map svg,
#map path,
#map polygon {
    pointer-events: auto !important;
}

/* Style for the polygon edges when hovering */
.gm-style > div:first-child > div:nth-child(3) > div {
    cursor: move !important;
}

/* Ensure midpoint handles are visible */
.gmnoprint div[style*="opacity"] {
    opacity: 0.8 !important;
}

.gmnoprint div[style*="opacity"]:hover {
    opacity: 1 !important;
}

/* Prevent polygon fill from "lighting up" on hover in draw mode */
#map div[style*="fill"],
#map div[style*="stroke"] {
    transition: none !important;
}

/* Disable default hover effects on polygons */
.gm-style > div > div > div:nth-child(1) > div:nth-child(3) > div > div {
    transition: none !important;
}

/* Hide the Google Maps hover overlay that darkens/lightens the map */
.gm-style > div > div > div > div > div > div[style*="background-color"] {
    display: none !important;
}

/* Alternative: target overlay divs that might be causing the lighting */
#map div[style*="background-color: rgb"][style*="opacity"] {
    display: none !important;
}

/* Map Controls - Draw and Edit Buttons */
.map-control-buttons {
    position: absolute;
    top: calc(var(--navbar-height) + 20px) !important; /* Desktop: More spacing from header (navbar + 20px gap) */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1000;
}

/* Desktop: Position relative to map container, not viewport */
/* Map container already has margin-top: 70px, so buttons only need small offset */
@media (min-width: 769px) {
    .map-address-input {
        position: absolute !important; /* Absolute within map container */
        top: 10px !important; /* Small offset from map container top (which is already below header) */
        left: 10px !important;
        z-index: 1001 !important;
    }
    
    .map-control-buttons {
        position: absolute !important; /* Absolute within map container - centers to map */
        top: 20px !important; /* Small offset from map container top (which is already below header) */
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }
}

.map-control-buttons button {
    background: var(--color-primary-dark);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    min-height: 44px;
    touch-action: manipulation;
}

.map-control-buttons #editAreaBtn {
    background: #6c757d;
}

.map-control-buttons button.active {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.map-control-buttons button:hover:not(.active) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Mobile: Stack buttons vertically on left side, below address input */
@media (max-width: 768px) {
    .map-address-input {
        top: 80px !important;
        left: 10px !important;
        width: calc(100% - 120px) !important;
        max-width: 280px !important;
        z-index: 1001 !important;
        padding: 10px 12px !important; /* Ensure consistent padding */
    }
    
    .map-address-input input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 0 !important; /* Remove input padding, container handles it */
        height: auto !important;
        line-height: 1.4 !important;
    }
    
    .map-control-buttons {
        /* Position below address input with clear visible spacing */
        /* Address input: top 80px + height (~50px with padding/border) + gap (24px for clear spacing) = ~154px */
        top: 154px !important;
        left: 10px !important;
        right: auto !important;
        transform: none !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: auto !important;
        z-index: 1000 !important;
    }
    
    .map-control-buttons button {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        min-width: 100px !important;
        width: auto !important;
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .map-address-input {
        left: 8px !important;
        width: calc(100% - 100px) !important;
        max-width: 250px !important;
    }
    
    .map-control-buttons {
        left: 8px !important;
        /* Address input: top 80px + height (~48px with padding) + gap (22px for clear spacing) = ~150px */
        top: 150px !important;
        gap: 10px !important;
    }
    
    .map-control-buttons button {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        min-width: 90px !important;
    }
}