/* --- FORCE HIT DETECTION ON TRANSPARENT SHAPES --- */
/* This ensures that even empty/transparent shapes catch the mouse hover */
.vm-map-view path,
.vm-map-view rect,
.vm-map-view polygon,
.vm-map-view circle,
.vm-map-view g {
    pointer-events: all !important;
}

/* Optional: Add a subtle hover effect to confirm it's working */
.vm-map-view g[id^="Store"]:hover path,
.vm-map-view g[id^="Store"]:hover rect,
.vm-map-view g[id^="Store"]:hover polygon {
    fill: rgba(155, 44, 140 0.5) !important; /* Slight purple tint on hover */
    cursor: pointer;
}

.vm-map-view {
    border: 2px solid #F1E7D6;
    max-width: 820px;
    margin: 0 auto;
}

.site-main-map-tool {
    background-color: #FFF9EE
}

.csvm-map-wrapper {
    padding: 2rem;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .csvm-map-wrapper {
         padding: 10rem .5rem 8rem;
    }
}

.vm-header {
    display:flex; 
    flex-direction:column; 
    gap:10px; 
    margin-bottom:10px; 
    padding:10px;
    top: 10px;
    position: absolute;
    z-index: 10;
}

@media only screen and (max-width: 768px) {
    .vm-header {
         top: -10px;
         width: 95%
    }
}

.vm-floor-switcher {
    display: block;
    position: absolute;
    right: 25px;
    top: 43px;
    z-index: 9;
}

@media only screen and (max-width: 768px) {
    .vm-floor-switcher {
        left: 1.2em;
        right: unset;
        top: 5.75rem;
    }
}



/* --- 1. SEARCH BAR --- */
.vm-search-container input {
    width: 100%;
    padding: 12px 20px 12px 45px !important; /* Left padding for icon */
    border: 1px solid #004D46 !important; /* Rundle Purple */
    border-radius: 50px !important;
    font-size: 18px;
    font-family: Attila Sans,Roobert,Manrope,Inter,system-ui,sans-serif;
    color: #004D46;
    outline: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23004D46' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 20px;
}

.vm-search-container input::placeholder {
    color: #004D46;
}

/* Search Dropdown Results */
.vm-search-container ul {
    margin-top: 10px !important;
    border-radius: 15px !important;
    border: 1px solid #eee !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}
.vm-search-container li {
    padding: 12px 20px !important;
    color: #004D46;
    border-bottom: 1px solid #f0f0f0 !important;
}
.vm-search-container li:hover {
    background-color: #fceefb !important; /* Light pink hover */
    color: #A31A7E !important;
}

/* --- 2. BUILDING BUTTONS (Left Side Pills) --- */
.vm-building-nav {
    display: flex;
    flex-direction: column !important; /* Stack them vertically */
    gap: 8px;
    align-items: flex-start; /* Align to left */
    margin-top: 10px;
}

.vm-building-btn {
    background-color: #A31A7E !important;
    color: #FEA6FF !important;
    border: none !important;
    padding: 4px 20px !important;
    border-radius: 50px !important; 
    font-family: Attila Sans,Roobert,Manrope,Inter,system-ui,sans-serif
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.vm-building-btn:hover {
    background-color: #7a1e6e !important;
}

/* Active State (Lighter pink/purple in screenshot) */
.vm-building-btn.active {
    background-color: #e6ace0 !important; /* Light Purple */
    color: #A31A7E !important;
}

/* --- 3. DROPDOWN (Floor Switcher) --- */
.vm-floor-switcher select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #FFF;
    border: 1px solid #A31A7E !important;
    color: #A31A7E;
    padding: 10px 20px;
    border-radius: 50px;
    font-family: Attila Sans,Roobert,Manrope,Inter,system-ui,sans-serif
    cursor: pointer;
    height: 50px;
    width: auto !important;
    min-width: 150px;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b2c8c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

@media only screen and (max-width: 768px) { 
    .vm-floor-switcher select {
          min-width: 200px;
    }
}

/* --- 4. ZOOM & RESET CONTROLS (Right Side) --- */
/* Wrapper for the floating controls */
.vm-controls-wrapper {
    display: flex;
    flex-direction: row; /* Horizontal alignment */
    align-items: flex-start; /* Align bottom */
    gap: 0;
    position: absolute;
    right: -5px;
    top: 75px;
    z-index: 9;
    pointer-events: none; /* Let clicks pass through empty areas */
}



/* --- CLICKABLE ZONES (Fix for buttons not working) --- */
.vm-legend-card,
.vm-buttons-stack, /* <--- THIS WAS MISSING */
.vm-zoom-group,
.vm-control-btn,
.vm-back-btn,
.vm-reset-btn {
    pointer-events: auto !important; /* Force clicks to work */
}


/* The Vertical Pill for Zoom */
.vm-zoom-group {
    display: flex;
    flex-direction: column;
    background:#FFF9EE;
    overflow: hidden;
    width: 50px;
}

.vm-control-btn {
    background: white;
    border: 1px solid #A31A7E;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #A31A7E;
    margin-bottom: 5px;
    padding-bottom: 5px;
    transition: background 0.2s;
}

.vm-control-btn:hover {
    background-color: #fceefb;
}

/* The Reset Circle Button */
.vm-reset-btn {
    width: 50px;
    height: 50px;
    background-color: rgba(216,180,216,.5);
    border-radius: 50%;
    border: 1px solid #A31A7E;
    color: #7a1e6e;
    font-family: Attila Sans,Roobert,Manrope,Inter,system-ui,sans-serif
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
}

.vm-reset-btn:hover {
    background-color: #e6ace0;
}

/* --- BACK BUTTON --- */
.vm-back-btn {
    width: 50px;
    height: 50px;
    background-color: #d8b4d8; /* Match Reset Button */
    border-radius: 50%;
    border: 1px solid #A31A7E;
    color: #7a1e6e;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    padding-bottom: 5px;
    display: none; 
}

.vm-back-btn:hover {
    background-color: #e6ace0;
}


.tippy-box {
    background-color: #e6ace0!important;   
    border: 1px solid #7a1e6e!important;     
    border-radius: 50px !important;     
    color: #7a1e6e!important;      
    margin-bottom: -15px!important;
}

.tippy-content {
    padding: .5rem 1.5rem!important; 
}

.tippy-arrow { 
    color: #e6ace0!important; 
}

.tippy-box[data-placement^='top'] > .tippy-arrow {
    filter: drop-shadow(0 1px 0 #7a1e6e); 
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow {
    filter: drop-shadow(0 -1px 0 #7a1e6e);
}


/* --- LEGEND BOX STYLING --- */
.vm-legend-card {
    background-color: #FFF9EE;
    border: 1px solid #9b2c8c; /* Rundle Purple */
    border-radius: 25px;
    padding: 20px;
    width: 200px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-right: 15px; /* Space between legend and zoom buttons */
    pointer-events: auto; /* Ensure text/icons are crisp */
}

@media (max-width: 768px) { 
    .vm-legend-card {
        display: none
    }
}

.vm-legend-title {
    color: #9b2c8c;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.vm-legend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vm-legend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #9b2c8c; /* Purple text */
    font-weight: 400;
}

/* --- ICONS --- */
.vm-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}

/* 1. Store: Purple Outline Circle */
.vm-icon-store {
    border: 2px solid #9b2c8c;
    border-radius: 50%;
    background: transparent;
    width: 18px; height: 18px; /* Adjust for border width */
}

/* 2. Arcade: Solid Purple Square */
.vm-icon-arcade {
    background-color: #9b2c8c;
    border-radius: 2px;
}

/* 3. Laneway: Orange Square with Purple Border */
.vm-icon-laneway {
    background-color: #e85e25; /* Orange */
    border: 2px solid #9b2c8c;
    width: 18px; height: 18px;
    border-radius: 2px;
}

/* 4. Bathrooms: Blue Icon */
.vm-icon-bathrooms {
    
    background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3218_3931)"><path d="M14 6.70459C14 3.00175 10.866 0 7 0C3.13401 0 0 3.00175 0 6.70459V7.29541C0 10.9983 3.13401 14 7 14C10.866 14 14 10.9983 14 7.29541V6.70459Z" fill="%2300ABE0"/><path d="M6.44833 11.0202H6.85141V2.97981H6.44833V11.0202ZM11.8495 7.11559L11.2583 5.1633C11.1777 4.85504 10.8552 4.64954 10.5328 4.64954H9.05486C8.7324 4.64954 8.40995 4.85504 8.32933 5.1633L7.76503 7.11559C7.76503 7.11559 7.81878 7.37247 7.95313 7.39816C8.08749 7.42385 8.22185 7.37247 8.24872 7.24403L8.78615 5.42018C8.78615 5.42018 8.89363 5.29174 8.97425 5.31743C9.05486 5.31743 9.1086 5.42018 9.08173 5.49724L8.22185 8.4H8.94737V10.7119C8.94737 10.8917 9.1086 11.0202 9.26983 11.0202C9.43106 11.0202 9.59229 10.8917 9.59229 10.7119V8.52844C9.59229 8.52844 9.6729 8.37431 9.75352 8.37431C9.75352 8.37431 9.91475 8.45137 9.91475 8.52844V10.7119C9.91475 10.8917 10.076 11.0202 10.2372 11.0202C10.3984 11.0202 10.5597 10.8917 10.5597 10.7119V8.4H11.2852L10.4253 5.49724C10.4253 5.42018 10.4522 5.34312 10.5328 5.31743C10.6134 5.31743 10.7209 5.34312 10.7209 5.42018L11.2583 7.24403C11.2583 7.24403 11.4464 7.42385 11.5539 7.39816C11.6883 7.37247 11.7689 7.24403 11.742 7.11559M9.80726 4.34128C10.2103 4.34128 10.5059 4.03302 10.5059 3.6477C10.5059 3.26238 10.1835 2.97981 9.80726 2.97981C9.43106 2.97981 9.08173 3.28807 9.08173 3.6477C9.08173 4.00734 9.40419 4.34128 9.80726 4.34128ZM4.72856 4.67523H2.92818C2.52511 4.67523 2.17578 4.95779 2.17578 5.34312V7.37247C2.17578 7.50091 2.31014 7.60367 2.41762 7.60367C2.52511 7.60367 2.65947 7.50091 2.65947 7.37247V5.75412C2.65947 5.75412 2.74008 5.6 2.82069 5.6C2.90131 5.6 2.98192 5.67706 2.98192 5.75412V10.7376C2.98192 10.9174 3.14315 11.0459 3.30438 11.0459C3.46561 11.0459 3.62684 10.9174 3.62684 10.7376V7.91192C3.62684 7.91192 3.70745 7.75779 3.78807 7.75779C3.86868 7.75779 3.94929 7.83486 3.94929 7.91192V10.7376C3.94929 10.9174 4.11052 11.0459 4.27175 11.0459C4.43298 11.0459 4.59421 10.9174 4.59421 10.7376V5.75412C4.59421 5.75412 4.67482 5.6 4.75544 5.6C4.83605 5.6 4.91666 5.67706 4.91666 5.75412V7.37247C4.91666 7.50091 5.05102 7.60367 5.15851 7.60367C5.26599 7.60367 5.40035 7.50091 5.40035 7.37247V5.34312C5.40035 4.95779 5.02415 4.67523 4.64795 4.67523M3.81494 4.34128C4.21801 4.34128 4.51359 4.03302 4.51359 3.6477C4.51359 3.26238 4.19114 2.97981 3.81494 2.97981C3.43874 2.97981 3.11628 3.28807 3.11628 3.6477C3.11628 4.00734 3.43874 4.34128 3.81494 4.34128Z" fill="white"/></g><defs><clipPath id="clip0_3218_3931"><rect width="14" height="14" fill="white"/></clipPath></defs></svg>');
    background-size: cover;
    border-radius: 50%;
}

/* 5. Parking: Blue 'P' Icon */
.vm-icon-parking {
    background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3218_3935)"><path d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="%232860C5"/><path d="M7.81052 8.44566H6.03516V11.4638H4.28516V3.06885H7.96269C8.79965 3.06885 9.48443 3.29711 9.99168 3.72827C10.4989 4.15943 10.7525 4.84421 10.7525 5.73189C10.7525 6.72102 10.4989 7.43117 9.99168 7.83696C9.48443 8.24276 8.77429 8.44566 7.83588 8.44566H7.81052ZM8.62211 6.69566C8.85037 6.49276 8.97718 6.16305 8.97718 5.73189C8.97718 5.30073 8.85037 4.97102 8.62211 4.79349C8.39385 4.61595 8.06414 4.5145 7.65834 4.5145H6.00979V7.00001H7.65834C8.06414 7.00001 8.39385 6.89856 8.62211 6.69566Z" fill="white"/></g><defs><clipPath id="clip0_3218_3935"><rect width="14" height="14" fill="white"/></clipPath></defs></svg>');
    background-size: cover;
    border-radius: 50%;
}

/* 6. Rundle Mall: Dotted Texture */
.vm-icon-rundle {
    background-image: radial-gradient(#e85e25 1.5px, transparent 1.5px);
    background-size: 5px 5px;
    border: 1px dotted #e85e25;
}

/* Allow clicks on the children */
.vm-legend-card, 
.vm-zoom-group, 
.vm-back-btn, 
.vm-reset-btn {
    pointer-events: auto;
}

/* Container for the buttons to keep them vertical */
.vm-buttons-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* --- BUILDING NAVIGATION (RESPONSIVE) --- */

/* 1. Desktop: Show Buttons, Hide Select */
.vm-desktop-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.vm-mobile-nav {
    display: none; /* Hidden by default */
}

/* 2. Mobile: Hide Buttons, Show Select */
@media only screen and (max-width: 768px) {
    .vm-desktop-nav {
        display: none;
    }

    .vm-mobile-nav {
        display: block;
        width: 100%;
        margin-top: 10px;
        position: relative;
    }

    /* Style the Mobile Dropdown to match the floor switcher */
    .vm-mobile-nav select {
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        background-color: #A31A7E; /* Purple background */
        color: #FEA6FF; /* Pink text */
        border: none;
        padding: 12px 20px;
        border-radius: 50px;
        font-family: Attila Sans, Roobert, Manrope, Inter, sans-serif;
        font-size: 16px;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FEA6FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 20px center;
    }
}


/* --- MOBILE RESPONSIVENESS --- */

/* On Mobile/Tablets (screens smaller than 768px) */
@media only screen and (max-width: 768px) {
    
    /* 1. Adjust Map Height */
    .vm-container {
        height: 60vh !important; /* Use 60% of screen height */
        min-height: 400px;       /* Never get smaller than this */
    }

    /* 2. Move Zoom Controls to Bottom-Right (Easier for thumbs) */
    .vm-controls-wrapper {
        top: auto !important;
        bottom: -90px !important;
        left: 50%!important;
        right: unset!important;
        transform: translateX(-50%);
    }

    /* 3. Stack the Building Buttons vertically if they get too crowded */
    .vm-building-nav {
        justify-content: center;
    }
    
    /* 4. Make Search Bar full width and touch-friendly */
    .vm-search-container input {
        font-size: 16px !important; /* Prevents iOS zooming on focus */
        padding: 15px 20px 15px 45px !important;
    }

    .vm-buttons-stack {
        flex-direction: row
    }

    .vm-zoom-group {
        flex-direction: row;
        width: 110px;
    }

    .vm-control-btn {
        margin-bottom: 0;
        margin-right: 5px
    }
}

.st0, 
.st2 {
    stroke-width: 1px;
    stroke: #b40081;
}

.st0 {
    fill: transparent !important; 
    stroke: none; /* Hide default stroke if necessary */
    pointer-events: auto !important;
    cursor: pointer;
}

/* 
.st0 {
    fill: rgba(163, 26,126,.2)!important
} */

.st0:hover {
    fill: rgba(255,166,255,.2)!important
}

g:hover > circle.st2 {
    fill: #FF4E14!important
}

/* --- ACTIVE HIGHLIGHT CLASS (For Search/Click) --- */
.vm-active-store,
.vm-active-store path,
.vm-active-store rect,
.vm-active-store polygon,
.vm-active-store circle {
    fill: rgba(255,166,255,1)!important; /* Rundle Purple */
    transition: all 0.3s ease;
}