.elementor-6362 .elementor-element.elementor-element-9c175f2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 30px;--row-gap:0px;--column-gap:30px;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-6362 .elementor-element.elementor-element-a8bb6b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6362 .elementor-element.elementor-element-0e4abeb.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-6362 .elementor-element.elementor-element-f7fd82c.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-6362 .elementor-element.elementor-element-e4a1e16{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6362 .elementor-element.elementor-element-9e5af81.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-6362 .elementor-element.elementor-element-9e13efa{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6362 .elementor-element.elementor-element-df79580{--display:flex;}.elementor-6362 .elementor-element.elementor-element-ffebbe3.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-6362 .elementor-element.elementor-element-db81c6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-6362 .elementor-element.elementor-element-9c175f2{--content-width:1326px;}.elementor-6362 .elementor-element.elementor-element-a8bb6b7{--width:20%;}.elementor-6362 .elementor-element.elementor-element-e4a1e16{--width:80%;}.elementor-6362 .elementor-element.elementor-element-df79580{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-0e4abeb *//* --- Default Button Colors (Always Visible) --- */

/* 1. Dark Green */
.filter-btn[data-filter="dark-green"] {
    background-color: #1e8b43 !important;
    color: #ffffff !important;
    border: 2px solid transparent;
}

/* 2. Light Green */
.filter-btn[data-filter="light-green"] {
    background-color: #a9d885 !important;
    color: #000000 !important;
    border: 2px solid transparent;
}

/* 3. Yellow */
.filter-btn[data-filter="yellow"] {
    background-color: #ffeb3b !important;
    color: #000000 !important;
    border: 2px solid transparent;
}

/* 4. Pink */
.filter-btn[data-filter="pink"] {
    background-color: #f285c1 !important;
    color: #ffffff !important;
    border: 2px solid transparent;
}

/* 5. Orange */
.filter-btn[data-filter="orange"] {
    background-color: #f58800 !important;
    color: #ffffff !important;
    border: 2px solid transparent;
}

/* 6. Red */
.filter-btn[data-filter="red"] {
    background-color: #e02221 !important;
    color: #ffffff !important;
    border: 2px solid transparent;
}

/* 7. Gray */
.filter-btn[data-filter="gray"] {
    background-color: #8e908f !important;
    color: #ffffff !important;
    border: 2px solid transparent;
}

/* Show All Button */
.filter-btn[data-filter="all"] {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 2px solid transparent;
}

/* --- Active State Styling --- */
/* This highlights the button that is currently filtering the map */
.filter-btn.active {
    border-color: #000000 !important; /* Thick black border */
    transform: scale(1.05); /* Slightly larger */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 2;
}
.filter-btn {
    /* Make all buttons the same width */
    width: 100%; 
    
    /* Ensure padding doesn't add to the width */
    box-sizing: border-box; 
    
    /* Optional: Center the text if it looks off */
    text-align: center;
    
    /* Optional: Ensure they stay on their own lines */
    display: block;
    margin-bottom: 5px; 
}
/* --- Enhanced Button Hover Effects --- */

.filter-btn {
    /* Ensure a smooth transition for all properties */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.filter-btn:hover {
    /* 1. Lift effect */
    transform: translateY(-3px);
    
    /* 2. Professional Shadow */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    
    /* 3. Subtle Brightness boost */
    filter: brightness(1.08);
}

/* 4. Glossy Shine Overlay */
/* This adds a very subtle "light reflection" when hovering */
.filter-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: 0.5s;
    z-index: -1;
}

.filter-btn:hover::after {
    left: 100%;
}

/* 5. Click Effect */
/* Makes the button feel like it's being pressed down */
.filter-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    filter: brightness(0.95);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9e5af81 *//* --- 1. BASE MAP STYLES & TEXT --- */
#usmapbase svg { width: 100%; height: auto; }
#usmapbase .washington-dc { visibility: visible !important; fill-opacity: 1 !important; cursor: pointer !important; }
#usmapbase #usvisns text { fill: #dddddd !important; font-weight: 500; pointer-events: none; }

/* --- 2. BUTTON STYLING --- */
.map-filters { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
.map-filters .filter-btn { 
    padding: 10px 20px; cursor: pointer; background-color: #ffffff; 
    border-radius: 4px; font-weight: bold; border: 2px solid #ddd; transition: all 0.2s ease; 
}

/* Inactive Borders/Text */
.map-filters .filter-btn[data-filter="all"] { border-color: #333; color: #333; }
.map-filters .filter-btn[data-filter="green"] { border-color: #1e8b43; color: #1e8b43; }
.map-filters .filter-btn[data-filter="purple"] { border-color: #351E75; color: #351E75; }
.map-filters .filter-btn[data-filter="gray"] { border-color: #8e908f; color: #8e908f; }

/* Active & Hover States */
.map-filters .filter-btn.active[data-filter="all"], 
.map-filters .filter-btn:hover[data-filter="all"] { background-color: #333 !important; color: #fff !important; }

/* Dual-Color Gradient for the "Available" (Purple) Button */
.map-filters .filter-btn.active[data-filter="purple"], 
.map-filters .filter-btn:hover[data-filter="purple"] { 
    background: linear-gradient(90deg, #1e8b43 0%, #351E75 100%) !important; 
    color: #fff !important; border-color: transparent;
}

.map-filters .filter-btn.active[data-filter="green"], 
.map-filters .filter-btn:hover[data-filter="green"] { background-color: #1e8b43 !important; color: #fff !important; }

.map-filters .filter-btn.active[data-filter="gray"], 
.map-filters .filter-btn:hover[data-filter="gray"] { background-color: #8e908f !important; color: #fff !important; }

/* --- 3. CATEGORY BASE COLORS --- */
#usmapbase .green { fill: #1e8b43 !important; }
#usmapbase .purple { fill: #351E75 !important; }
#usmapbase .gray { fill: #8e908f !important; }

/* --- 4. FILTER ACTIVATION LOGIC (DIMMING & HIGHLIGHTING) --- */
#usmapbase.filtering path { fill: #f0f0f0 !important; opacity: 0.4; }

/* Dual Highlight Logic (Now triggered by the 'purple' button) */
#usmapbase.filter-active-purple path.green,
#usmapbase.filter-active-purple path.purple { opacity: 1 !important; }
#usmapbase.filter-active-purple path.green { fill: #1e8b43 !important; }
#usmapbase.filter-active-purple path.purple { fill: #351E75 !important; }

/* Single Highlight Logic */
#usmapbase.filter-active-green path.green { opacity: 1 !important; fill: #1e8b43 !important; }
#usmapbase.filter-active-gray path.gray { opacity: 1 !important; fill: #8e908f !important; }

/* --- 5. INTERACTIVE HOVER EFFECTS --- */
#usmapbase path { transition: all 0.2s ease-in-out; cursor: pointer; outline: none; }
#usmapbase path:hover {
    filter: brightness(1.1) drop-shadow(0px 4px 6px rgba(0,0,0,0.3));
    transform: scale(1.02); transform-origin: center; position: relative; z-index: 10;
}
#usmapbase:has(path:hover) path:not(:hover) { opacity: 0.8; }

/* --- MAP PINS STYLING --- */
#usmapbase path.map-pin {
    fill: #2c3e50 !important; /* Dark color for contrast */
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.4));
    pointer-events: none; /* Prevents the pin from blocking hover effects */
}

/* Force the pins to keep their dark color when filtered */
#usmapbase[class*="filter-active-"] path.map-pin {
    fill: #2c3e50 !important;
}/* End custom CSS */