/* Service SVG Map styles */
.service-svg-map-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-48);

}

@media (max-width: 577px) {
}

.service-svg-map svg {
    width: 100%;
    height: auto;
    display: block;
}

.service-svg-map__sidebar {
    width: clamp(320px, 30%, 480px);
}

.service-svg-map__sidebar .service-svg-map__toggle {
    display: none;
    margin-bottom: 8px;
}

.service-svg-map__sidebar.open .service-svg-map__content {
    display: block;
}

/* Ensure sidebar content visible by default (desktop) so full list shows at load */
.service-svg-map__sidebar .service-svg-map__content {
    display: block !important;
}

/* Default: non-active states should be white */
.service-svg-map svg [id^="US-"] {
    fill: #ffffff;
    stroke: var(--e-global-color-secondary);
    stroke-width:0.5;
}

/* States that have locations get a subtle accent fill */
.service-svg-map svg .ssm-has-locations {
    fill: var(--e-global-color-accent, #ffd54f) !important;
    opacity: 0.95;
     stroke-width:0.5;
}

.service-svg-map svg .ssm-active {
    fill: var(--e-global-color-accent) !important;
     stroke-width:0.5;
}

/* Hover state: use secondary color for hovered states (only on states that have locations) */
.service-svg-map svg [id^="US-"].ssm-has-locations:hover,
.service-svg-map svg [id^="US-"].ssm-has-locations:focus {
    fill: var(--e-global-color-secondary) !important;
}

.service-svg-map svg [id^="US-"]:focus {
    outline: none !important;
}

/* Removed marker & tooltip styles (no longer used) */

.ssm-markets {
    list-style: none;
    padding-left: 0;
    margin-top: 8px
}

.ssm-markets li {
    margin-bottom: 6px
}
.ssm-product-filter {
    display:flex;
    flex-direction: column;
}

.ssm-product-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ssm-product-filter button {
    width: fit-content;
    padding: unset;
    color: var(--e-global-color-primary);
    border: none;
    background: transparent;
}
/* Product checkbox list styles */
.ssm-product-checkboxes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* allow items to wrap on wide screens */
    margin-bottom: 8px;
    width: 100%;
    justify-content: flex-start;
    text-align: center;
    overflow: visible;
}

.ssm-product-checkbox-label {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: fit-content;
    width: 100%;
    cursor: pointer;
    font-weight: 500 !important;
    color: var(--e-global-color-text) !important;
}

.ssm-product-checkbox-label img {
    border-radius: 0px!important;
    width: 32px;
    height: 32px;
}
.ssm-product-checkbox-label:after {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: #cccccc;
}

.ssm-product-checkbox-label:first-of-type:after {
    display: none;
}
.ssm-product-checkbox-label::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: var(--e-global-color-secondary);
    transform: scaleX(0) scaleY(0.03);
    transform-origin: bottom left;
    transition: transform 0.3s ease-in-out;
    z-index: 0;
    border-radius: var(--radius-4)!important;
}
.ssm-product-checkbox-label:hover::before {
    transform: scaleX(1) scaleY(0.04);
}

.ssm-product-checkbox-label.active::before {
    transform: scaleY(1);
    z-index: -1;
}

.ssm-product-checkbox-label.active {
    color: white!important;
}

.ssm-product-checkbox {
    width: 18px;
    height: 18px;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0
}

.ssm-product-reset {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer
}

.ssm-product-reset:hover {
    background: #f2f2f2
}


.ssm-product-checkbox-label .ssm-product-icon--light {
    /* Ensure light icon is visible by default */
    display: inline-block !important;
    vertical-align: middle;
}

.ssm-product-checkbox-label .ssm-product-icon--dark {
    /* Hide dark icon by default — only show on active */
    display: none !important;
    vertical-align: middle;
}

/* When the label is active, swap icons: hide light, show dark */
.ssm-product-checkbox-label.active .ssm-product-icon--dark {
    display: inline-block !important;
}

.ssm-product-checkbox-label.active .ssm-product-icon--light {
    display: none !important;
}

/* Font icon styling for "All Products" and similar font icons */
i.ssm-product-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--e-global-color-accent);
}
.ssm-product-icon--fa { font-size: 16px; line-height: 1; }
.ssm-product-checkbox-label.active .ssm-product-icon--fa { color: #fff; }



.ssm-state-details .service-area-archive-wrapper {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    flex-direction: column;
    padding:0px;
  
}

.ssm-state-details .service-area-group__list {
    gap: 0px;
}
.service-svg-map__content {
    background-color: #f2f2f2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.ssm-state-details .service-area-group__header {
    background-color: white;
    border-bottom: 1px solid rgba(000, 000, 000, 0.15  );
    background-image:none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.ssm-state-details .service-area-group__title, .ssm-state-details .service-area-group__title a {
    color: var(--e-global-color-secondary)!important;
    margin-bottom: 0!important;
    font-size: 20px;
    letter-spacing:-.5px!important;
}
.ssm-state-details .service-area-link {
    padding: var(--spacing-8) var(--spacing-16);
    border-color: rgba(255, 255, 255, 0.05);
}
.ssm-state-details .service-area-group__header .fa-kit {
    font-size: 1.25em;
}
.ssm-state-details .service-area-group:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: unset;
}
.ssm-state-details {
    overflow-x: visible!important;
}

select#ssm-product-filter {
    padding: 0;
    background: transparent;
    border: none;
}

label[for="ssm-product-filter"] {
    display: none;
}

/* Hide the filter UI when the shortcode is used with hide_filter="1" */
.ssm-hide-filter #service-svg-map-filters,
.ssm-hide-filter .service-svg-map__filters {
    display: none !important;
}

/* Subtle visible scrollbar for sidebar content when it overflows
   - Visible on desktop and mobile as requested
   - Non-intrusive thumb with transparent track and slightly darker on hover
   - Uses WebKit and Firefox properties
*/
.service-svg-map__content, .ssm-state-details {
    overflow-y: auto; /* allow vertical scrolling when content overflows */
}

.service-svg-map__content::-webkit-scrollbar, .ssm-state-details::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.service-svg-map__content::-webkit-scrollbar-track, .ssm-state-details::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.02);
}
.service-svg-map__content::-webkit-scrollbar-thumb, .ssm-state-details::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.14); /* more visible by default */
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.92);
}
.service-svg-map__content::-webkit-scrollbar-thumb:hover, .ssm-state-details::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.24);
}

/* Firefox */
.service-svg-map__content, .ssm-state-details {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.14) rgba(0,0,0,0.02);
}

/* Accessibility: ensure focusable container shows a hint when keyboard-focused */
.service-svg-map__content:focus, .ssm-state-details:focus {
    outline: none;
}

/* -------------------------------------------------------------------------
   Responsive behaviors
   - <=1024px: make the product filter horizontally scrollable (fit-content items)
   - <=767px: sidebar wraps under map (both 100%), increase sidebar min-height
   - <=577 / <=480: small-screen tweaks
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Make the product checkbox row horizontally scrollable with fit-content items */
    .ssm-product-checkboxes {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    
    }

    .ssm-state-details .service-area-link {
        font-size: 14px;
    }

    .ssm-state-details .service-area-group__title, .ssm-state-details .service-area-group__title a {
        font-size: 16px;
        letter-spacing: -0.25px;
    }

    .service-svg-map__sidebar {
        width: clamp(240px, 25%, 320px) !important;
    }
    .ssm-product-checkbox-label img { width: 24px !important; height: 24px !important; }



    .ssm-product-checkboxes::-webkit-scrollbar { height: 8px; }
    .ssm-product-checkboxes::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 6px; }

    .ssm-product-checkbox-label {
        padding: var(--spacing-8);
        margin-bottom: var(--spacing-16);
    }

    /* hide the vertical separators between items when scrolling */
    .ssm-product-checkbox-label:after { display: none; }
}

@media (max-width: 767px) {
    .service-svg-map-and-sidebar {
        flex-direction: column;
    }

    .ssm-state-details .service-area-link {
        padding: var(--spacing-16) var(--spacing-24);
    }

        .ssm-product-checkbox-label {
        max-width: fit-content!important; 
        }
    
         .service-svg-map-and-sidebar {
        flex-direction: column
    }

    .ssm-product-checkbox-label {
        
        margin-bottom: var(--spacing-24);

    }
    
    .service-svg-map__content {
        padding: var(--spacing-32);
        min-height: unset!important;
    }
    .ssm-state-details {
        min-height: 50vh!important;
    }
    .service-svg-map {
        width: 100%;
        min-height: 100%!important; /* allow map to shrink on small devices */
        order: 1;
    }

    .service-svg-map__sidebar  {
        width: 100%!important;
        order: 2;
    }

    /* Make filters left-aligned and scrollable area visible */
    .ssm-product-checkboxes {
        justify-content: flex-start;
        padding-bottom: var(--spacing-24);
    }

}

@media (max-width: 577px) {
    /* tighter layout for small phones */
    .ssm-product-checkbox-label img { width: 24px; }
    .service-svg-map { min-height: 100%; }
    .service-svg-map__sidebar { min-height: unset; }
    .ssm-product-checkbox-label {
        font-size: 14px!important;
    }
}

@media (max-width: 480px) {
    .ssm-state-details .service-area-group__title { font-size: 16px; }
    .ssm-product-filter-header { gap: 8px; }
}

/* Immediate hide (before JS) until .ssm-loaded appears */
.service-svg-map-wrapper:not(.ssm-loaded) {
    position: relative;
   height: 475px;
}
.service-svg-map-wrapper:not(.ssm-loaded) *:not(.ssm-loading-overlay):not(.ssm-loading-overlay *) {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Overlay + spinner (visible while loading) */
.ssm-loading-overlay {
    position: absolute;
    inset: 0;
    height: 475px;
    max-height: 475px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 100;
}
.ssm-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 5px solid rgba(0,0,0,0.12);
    border-top-color: var(--e-global-color-primary,#0051ff);
    animation: ssm-spin .9s linear infinite;
}
@keyframes ssm-spin { to { transform: rotate(360deg); } }

/* Legacy loading class kept (optional) */
.service-svg-map-wrapper.ssm-loading { min-height:675px; }