.members-locator-wrapper {
    color: #ffffff;
    font-family: inherit;
    padding-top: 50px;

    .member-locator-filters {
        display: flex;
        gap: 15px;
        margin-bottom: 25px;
        flex-wrap: wrap;
        align-items: center;

		.filter-count {
			display: none !important;
/*
			background: #f26522;
			color: #ffffff;
			font-size: 11px;
			border-radius: 50%;
			width: 22px;
			height: 22px;
			display: none;
			align-items: center;
			justify-content: center;
			margin-left: 8px;
			box-sizing: border-box;
*/
		}

        .search-input-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			width: 441px;
			max-width: 100%;

			@media (max-width: 992px) {
				width: 100%;
			}

			.filter-search-input {
				width: 100%;
				display: flex;
				padding: 8px 70px 8px 20px;
				align-items: center;
				border-radius: 39px;
				border: 2px solid #003451;
				background: #ffffff;
				color: #003451;
				font-size: 15px;
				outline: none;
				box-sizing: border-box;
				height: 40px;

				/* Placeholder Typography Styles */
				&::placeholder {
					color: #7D7D7D;
					leading-trim: both;
					text-edge: cap;
					font-family: 'Lexend', sans-serif;
					font-size: 16px;
					font-style: normal;
					font-weight: 300;
					line-height: 70px; /* 437.5% */
					opacity: 1; /* Standardizes visibility across Firefox/Safari */
				}

				&:focus {
					border-color: #f26522;
				}
			}

			/* Magnifying Glass Pill Container */
			.search-icon-btn {
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				width: 49px;
				height: 31.85px;
				padding: 4.029px 18.13px;
				justify-content: center;
				align-items: center;
				gap: 10.072px;
				flex-shrink: 0;
				border-radius: 30px;
				background: #003451;
				cursor: pointer;
				transition: background-color 0.25s ease, border-color 0.25s ease;

				i {
					color: #F6AE2D;
					font-size: 14px;
					transition: color 0.25s ease;
				}

				/* Swap colors on icon pill hover */
				&:hover {
					background: #F6AE2D;

					i {
						color: #003451;
					}
				}
			}

			/* Optional: triggers the icon color flip whenever hovering anywhere over the search box */
			&:hover .search-icon-btn {
				background: #F6AE2D;

				i {
					color: #003451;
				}
			}
		}
    }

    .locator-main-grid {
		display: grid;
		grid-template-columns: 35% 65%;
		gap: 30px;
		margin-top: 25px;
		align-items: start;

		.members-map-column {
			position: sticky;
			top: 30px;
			top: calc(50vh - 250px);

			@media (max-width: 992px) {
				position: static;
			}
		}

		@media (max-width: 992px) {
			grid-template-columns: 1fr;
		}
	}

    .members-list-column {
	display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 10px;
    background: #003451;
    border-radius: 30px;
    background-image: url("../img/member-wrapper-side.png");
    background-repeat: no-repeat;
    padding: 30px;
    }

    .member-card {
        position: relative;
        background: #ffffff;
        color: #0b1c2c;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
        overflow: hidden;
        min-height: 100px;
		
		&.is-selected {
			border-color: #F26419;
			box-shadow: 0 4px 20px rgba(242, 100, 25, 0.25);
			border-left: 8px solid #F26419; 
		}

        &:hover, 
        &.is-hovered {
			cursor: pointer;
            box-shadow: 0 4px 15px rgba(242, 101, 34, 0.2);
			
			.member-info {
				h3 {
					color: #F26419;
				}
			}
        }

        .member-info {
            padding-right: 90px;

            h3 {
                margin: 0 0 5px 0;
                font-size: 20px;
                font-weight: 500;
                color: #003451;
            }

            p {
                margin: 0 0 15px 0;
                font-size: 14px;
                color: #003451;
            }

            .Button.member-profile-btn {
				color: #F26419;
				text-decoration: none;
				background: #FFFFFF;
				border-radius: 33px;
				border: 1.5px solid #003451;
				font-size: 16px;
				font-weight: 400;
				mix-blend-mode: normal;
				isolation: isolate;

				i {
					color: #F26419;
				}

				&:hover {
					background: #F26419;
					border: 1.5px solid #F26419;
					color: #FFFFFF;
					mix-blend-mode: normal;

					i {
						color: #FFFFFF;
					}
				}
			}
        }

        .member-photo {
            position: absolute;
            right: 0;
            bottom: 0;
			width: 160px;
            height: 150px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top center;
                display: block;
            }
        }
    }
    
    .gm-style-iw-c {
        background: #F26419 !important;
        border-radius: 12px !important;
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    
    .gm-style-iw-chr {
        display: none !important;
    }

    .gm-style-iw-d {
        background: transparent !important;
        overflow: hidden !important;
        padding: 20px !important;
        color: white;
        border-radius: 12px;
        
        h4, p {
            color: #FFFFFF;
            text-align: center;
        }
        
        h4 {
            font-size: 16px;
        }
        
        p {
            font-size: 15px;
        }
        
        .googleButtons {
            display: flex;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            width: 100%;
            
            .Button {
                background: transparent;
                color: #FFFFFF;
				border: 2px solid #FFFFFF;
				
				i {
					color: #FFFFFF;
				}
                
                &:hover {
                    background: #F5844E;
                    border: 2px solid #F5844E;
                }
				
				&:focus-visible {
					outline: none;
        			box-shadow: none
				}
            }
        }
    }

    .gm-ui-hover-effect {
        display: none !important;
    }

    .gm-style-iw-tc,
    .gm-style-iw-tc::after {
        display: none !important;
    }

    .gm-style-iw-c::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #F26419;
        z-index: 10;
    }
}

.filter-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    &.is-active {
        opacity: 1;
        visibility: visible;
    }
}

.filter-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    &.is-active {
        right: 0;
    }

    .drawer-header {
        padding: 20px 25px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
            margin: 0;
            font-size: 20px;
            color: #0b1c2c;
        }

        .drawer-close-btn {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #666;
        }
    }

    .drawer-content {
        padding: 25px;
        overflow-y: auto;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;

        .filter-checkbox-label {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            cursor: pointer;
            color: #0b1c2c;

            input {
                width: 18px;
                height: 18px;
                accent-color: #f26522;
            }
        }
    }

    .drawer-footer {
        padding: 20px 25px;
        border-top: 1px solid #eee;
        background: #fafafa;

        .drawer-done-btn {
            width: 100%;
            background: #f26522;
            color: #ffffff;
            border: none;
            padding: 14px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;

            &:hover {
                background: #d85416;
            }
        }
    }
}