/**
 * Confluent Map Stylesheet.
 *
 * @package ConfluentMap
 */

/* Wrapper and general styles */
.confluent-map-wrapper {
	width: 100%;
	margin-bottom: 20px;
}

.confluent-map-title {
	margin: 0 0 20px 0;
	font-size: 28px;
	font-weight: 600;
	color: #333;
	text-align: left;
}

.confluent-map-error {
	padding: 20px;
	background-color: #fdeaea;
	color: #c53030;
	border-radius: 4px;
	border-left: 4px solid #c53030;
	margin-bottom: 20px;
}

/* Controls section */
.confluent-map-wrapper .confluent-map-controls {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px auto;
}

.confluent-map-wrapper .confluent-map-search-box {
	width: 100%;
    max-width: 400px;
    height: 72px;
    padding: 0 68px 0 68px;
    border: none;
    border-radius: 999px;
    background: #e8e6e6;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #666;
    outline: none;
    border: 1px solid #0010401A;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_110_8888" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_110_8888)"><path d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="%23575757"/></g></svg>');
    background-repeat: no-repeat;
    background-position: 28px center;
}
.confluent-map-wrapper .confluent-map-search-box.active {
    border: 2px solid #001040;
    color: #001040;

}
.confluent-map-wrapper .confluent-map-search-box::placeholder {
    color: #666;
}
.confluent-map-wrapper .confluent-map-search-box::focus {
    border: 2px solid #001040;
}
.confluent-map-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.confluent-map-search-wrapper .confluent-map-search-clear {
	display: none;
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	background-color: #0010401A;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath d='M8.4 16.9999L7 15.5999L10.6 11.9999L7 8.4249L8.4 7.0249L12 10.6249L15.575 7.0249L16.975 8.4249L13.375 11.9999L16.975 15.5999L15.575 16.9999L12 13.3999L8.4 16.9999Z' fill='%23001040'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
}

.confluent-map-search-wrapper .confluent-map-search-clear:hover {
    background-color: #00104033;

}

/* Show when input contains active class */
.confluent-map-search-box.active ~ .confluent-map-search-clear {
	display: block;
}

.confluent-map-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #00000040;
    max-height: 232px;
    overflow-y: auto;
    z-index: 20;
    display: none;
    scrollbar-width: none;
}

.confluent-map-search-suggestions.visible {
    display: block;
}

.confluent-map-search-suggestions li {
    padding: 8px 16px;
    cursor: pointer;
    color: #001040;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    transition: background 0.2s ease;
}

.confluent-map-search-suggestions li span{
    color: #575757;
    font-size: 12px;
    line-height: 24px;
}

.confluent-map-search-suggestions li:hover,
.confluent-map-search-suggestions li:focus {
    background: #5454DF0D;
    border-radius: 5px;
}

.confluent-map-filter-wrapper, .confluent-map-category-filter-wrapper{
    position: relative;
}

.confluent-map-wrapper .confluent-map-filter,
.confluent-map-wrapper .confluent-map-category-filter {
	position: relative;
    min-width: max-content;
    height: 48px;
    padding: 12px 48px 12px 20px;
    border: 1px solid #00104033;
    border-radius: 59px;
    background-color: #fff;
    color: #001040;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background-image: none;
    transition: border-color 0.3s ease;
}

.confluent-map-wrapper .confluent-map-filter.active,
.confluent-map-wrapper .confluent-map-category-filter.active {
	border: 2px solid #001040 !important;
}
.confluent-map-filter-wrapper .confluent-map-filter-clear,
.confluent-map-category-filter-wrapper .confluent-map-category-filter-clear {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    display: none;
}

.confluent-map-filter.selected + .confluent-map-filter-clear {
    display: block;
}
.confluent-map-filter.selected + .confluent-map-filter-clear:hover {
    background-color: transparent;
}
.confluent-map-filter-wrapper .confluent-map-filter-clear::before,
.confluent-map-category-filter-wrapper .confluent-map-category-filter-clear::before{
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    right: 0;
    top: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    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'%3E%3Cpath d='M8.4 17L7 15.6L10.6 12L7 8.4L8.4 7L12 10.6L15.6 7L17 8.4L13.4 12L17 15.6L15.6 17L12 13.4L8.4 17Z' fill='%23001040'/%3E%3C/svg%3E");
    background-color: #0010401A;
    border-radius: 1000px;
}
.confluent-map-wrapper .confluent-map-filter:not(.selected)::after,
.confluent-map-wrapper .confluent-map-category-filter:not(.selected)::after {
    content: '';
    position: absolute;
    top: 55%;
    right: 20px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath d='M12 15L7 10H17L12 15Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    pointer-events: none;
}

.confluent-map-wrapper .confluent-map-filter:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.confluent-map-filter-options,
.confluent-map-category-filter-options {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    display: none;
    z-index: 9;
    width: 270px;
    scrollbar-width: none;
    padding: 8px;
}

.confluent-map-filter-option,
.confluent-map-category-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    margin: 4px;
}

.confluent-map-filter-option:hover,
.confluent-map-category-filter-option:hover {
    background: #5454DF0D;
    border-radius: 5px;
}

.confluent-map-filter-checkbox,
.confluent-map-category-filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #0010401A;
    border-radius: 4px;
    background-color: #0010400D;
    cursor: pointer;
    position: relative;
    min-width: 20px;
}

.confluent-map-filter-checkbox:checked,
.confluent-map-category-filter-checkbox:checked {
    background-color: #5454DF;
    border-color: #5454DF;
}

.confluent-map-filter-checkbox:checked::after,
.confluent-map-category-filter-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Container layout */
.confluent-map-container {
	display: flex;
	gap: 0;
	height: 100%;
	background-color: #FFFFFF;
	border-radius: 4px;
	overflow: hidden;
    position: relative;
    border-radius: 32px;
}

/* Sidebar with location list */
.confluent-map-sidebar {
    width: 100%;
	max-width: 440px;
	overflow-y: auto;
	background-color: #fff;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
    bottom: 20px;
    border-radius: 24px;
    scrollbar-width: none;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.confluent-map-distance-notice{
    align-items: center;
    display: flex;
    padding: 20px 24px;
    color: #575757;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    border-bottom: 1px solid #0010401A;
}

.confluent-map-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 32px 24px;
}

.confluent-map-pagination .confluent-map-page {
    background: transparent;
    border: none;
    color: #001040;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confluent-map-pagination .confluent-map-page:hover {
    background-color: transparent;
    color: inherit;
}

.confluent-map-pagination .confluent-map-page.active {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #5751e8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confluent-map-pagination .confluent-map-pagination-dots {
    font-size: 16px;
    font-weight: 700;
    color: #001040;
}

/* Prev / Next Buttons */
.confluent-map-pagination .confluent-map-page-prev,
.confluent-map-pagination .confluent-map-page-next {
    position: relative;
    font-size: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
}

/* Previous Arrow */
.confluent-map-pagination .confluent-map-page-prev::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../image/left_icon.png') center center no-repeat;
    transform: rotate(180deg);
}

/* Next Arrow */
.confluent-map-pagination .confluent-map-page-next::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../image/left_icon.png') center center no-repeat;
    
}

.confluent-map-pagination button{
    border: unset;
}

.confluent-map-no-results {
	padding: 20px;
	text-align: center;
	color: #666;
	font-size: 14px;
	margin: 0;
}

/* Map container */
.confluent-map-map-container {
	flex: 1;
	position: relative;
	background-color: #e0e0e0;
}

#confluent-map-container {
	width: 100%;
	height: 100%;
	min-height: 400px;
}

/* Location card styles */
.confluent-map-location-card {
	display: flex;
	flex-direction: row;
    gap: 20px;
	padding: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
    border-bottom: 1px solid #0010401A;
}
.confluent-map-location-card .confluent-map-location-distances{
    position: absolute;
    right: 20px;
}
.confluent-map-location-card:hover, .confluent-map-location-card.active {
    background-color: #FAFAFA !important;
}
.confluent-map-location-card.active {
    border: 1px solid #5454DF;
}

.confluent-map-location-card-number{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 24px;
    min-width: fit-content;
    max-height: fit-content;
    aspect-ratio: 1;
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1;
}

.confluent-map-location-logo-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    max-width: 120px;
    max-height: 60px;
    background: #F9F9F9;
    border-radius: 10px;
}

.confluent-map-location-logo-wrapper .confluent-map-location-logo{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.confluent-map-location-image {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 12px;
}

.confluent-map-location-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
    width: 100%;
}
.confluent-map-location-info > *{
    width: fit-content;
}

/* First element (logo wrapper) */
.confluent-map-location-info > :first-child {
    margin-bottom: 8px;
}

/* Last element (View Clinic button) */
.confluent-map-location-info > :last-child {
    margin-top: 8px;
}
.confluent-map-location-distance{
    width: max-content;
    font-family: Inter;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #575757;
}
.confluent-map-location-name {
	margin: 0;
    font-family: var(--e-global-typography-secondary-font-family, "Proxima Nova"), sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #001040;
	line-height: 24px;
    letter-spacing: 0;
    max-width: 85%;
}

.confluent-map-location-address{
    font-family: var(--e-global-typography-secondary-font-family, "Proxima Nova"), sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #575757;
    margin: 0;
}

.confluent-map-directions-button{
    font-family: GT Walsheim Regular;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #5454DF;
}

.confluent-map-location-zip {
	margin: 0;
	font-size: 13px;
	color: #666;
	line-height: 1.4;
}

.confluent-map-location-phone {
	margin: 0;
    font-family: GT Walsheim Regular;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #5454DF;
}

.confluent-map-location-phone:hover {
	color: #005a87;
	text-decoration: underline;
}

/* Clinic button */
.confluent-map-clinic-button {
	display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 8px 20px;
    background: transparent;
    border: 2px solid #5454DF;
    border-radius: 59px;
    color: #5750E5;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
	transition: background-color 0.2s;
}

.confluent-map-clinic-button:hover {
    background: #5750E5;
    color: #fff;
}

.confluent-map-skeleton-card {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
}

.skeleton-image,
.skeleton-line,
.skeleton-button {
    background: linear-gradient(
        90deg,
        #f2f2f2 25%,
        #e6e6e6 37%,
        #f2f2f2 63%
    );
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}

.skeleton-image {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.skeleton-line {
    height: 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.skeleton-line.large {
    width: 90%;
}

.skeleton-button {
    width: 120px;
    height: 36px;
    border-radius: 999px;
    margin-top: 15px;
}

.confluent-map-cluster-skeleton {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid #5454DF;
    box-sizing: border-box;
}

.confluent-map-cluster-skeleton::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ececec;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#confluent-map-container .mapboxgl-marker {
    pointer-events: none;
}
#confluent-map-container .mapboxgl-marker.active-marker {
    animation: confluent-marker-bounce 0.6s ease-in-out infinite;
    z-index: 999;
}

@keyframes confluent-marker-bounce {
    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -6px;
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

.confluent-map-marker {
    width: 48px;
    height: 58px;
    cursor: pointer;
}

.confluent-map-marker.active {
    transform: scale(1.15);
    z-index: 9;
}

.confluent-map-marker svg {
    display: block;
}

.confluent-map-marker .confluent-map-marker-icon {
    position: absolute;
    top: 10px;
    left: 58%;
    width: 28px;
    height: 28px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    pointer-events: none;
    background-image: url('data:image/svg+xml,<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.54545 22.9091C1.84545 22.9091 1.24621 22.6598 0.747727 22.1614C0.249242 21.6629 0 21.0636 0 20.3636V2.54545C0 1.84545 0.249242 1.24621 0.747727 0.747727C1.24621 0.249242 1.84545 0 2.54545 0H20.3636C21.0636 0 21.6629 0.249242 22.1614 0.747727C22.6598 1.24621 22.9091 1.84545 22.9091 2.54545V20.3636C22.9091 21.0636 22.6598 21.6629 22.1614 22.1614C21.6629 22.6598 21.0636 22.9091 20.3636 22.9091H2.54545ZM2.54545 20.3636H20.3636V2.54545H2.54545V20.3636ZM3.81818 17.8182H19.0909L14.3182 11.4545L10.5 16.5455L7.63636 12.7273L3.81818 17.8182ZM8.35227 8.35227C8.72348 7.98106 8.90909 7.5303 8.90909 7C8.90909 6.4697 8.72348 6.01894 8.35227 5.64773C7.98106 5.27652 7.5303 5.09091 7 5.09091C6.4697 5.09091 6.01894 5.27652 5.64773 5.64773C5.27652 6.01894 5.09091 6.4697 5.09091 7C5.09091 7.5303 5.27652 7.98106 5.64773 8.35227C6.01894 8.72348 6.4697 8.90909 7 8.90909C7.5303 8.90909 7.98106 8.72348 8.35227 8.35227Z" fill="%231C1B1F"/></svg>');
}
.confluent-map-marker.is-hovered .confluent-map-marker-icon{
    background-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.09038 25.4545C4.39038 25.4545 3.79113 25.2053 3.29265 24.7068C2.79416 24.2083 2.54492 23.609 2.54492 22.909V5.09086C2.54492 4.39086 2.79416 3.79162 3.29265 3.29314C3.79113 2.79465 4.39038 2.54541 5.09038 2.54541H22.9086C23.6086 2.54541 24.2078 2.79465 24.7063 3.29314C25.2048 3.79162 25.454 4.39086 25.454 5.09086V22.909C25.454 23.609 25.2048 24.2083 24.7063 24.7068C24.2078 25.2053 23.6086 25.4545 22.9086 25.4545H5.09038ZM5.09038 22.909H22.9086V5.09086H5.09038V22.909ZM6.3631 20.3636H21.6358L16.8631 14L13.0449 19.0909L10.1813 15.2727L6.3631 20.3636ZM10.8972 10.8977C11.2684 10.5265 11.454 10.0757 11.454 9.54541C11.454 9.01511 11.2684 8.56435 10.8972 8.19314C10.526 7.82193 10.0752 7.63632 9.54492 7.63632C9.01462 7.63632 8.56386 7.82193 8.19265 8.19314C7.82144 8.56435 7.63583 9.01511 7.63583 9.54541C7.63583 10.0757 7.82144 10.5265 8.19265 10.8977C8.56386 11.2689 9.01462 11.4545 9.54492 11.4545C10.0752 11.4545 10.526 11.2689 10.8972 10.8977Z" fill="white"/></svg>');
}

/* Control container */
.confluent-map-container .mapboxgl-ctrl-group {
    display: flex !important;
    flex-direction: column;
    width: 51px;
    background: #FFFFFF !important;
    border: 1px solid #0010401A !important;
    border-radius: 1000px !important;
    overflow: hidden;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin: 0 20px 20px 0;
}

/* Buttons */
.confluent-map-container .mapboxgl-ctrl-group button {
    width: 51px !important;
    height: 51px !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Divider between + and - */
.confluent-map-container .mapboxgl-ctrl-group button:first-child {
    border-bottom: 1px solid #0010401A !important;
}

/* Hide default icons */
.confluent-map-container .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.confluent-map-container .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
    background-image: none !important;
    width: 24px;
    height: 24px;
    margin: auto;
    position: relative;
}

/* Plus icon */
.confluent-map-container .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0)"><path d="M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z" fill="%231C1B1F"/></g></svg>')
        center center / contain no-repeat;
}

/* Minus icon */
.confluent-map-container .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0)"><path d="M5 13V11H19V13H5Z" fill="%231C1B1F"/></g></svg>')
        center center / contain no-repeat;
}

/* Hide compass */
.confluent-map-container .mapboxgl-ctrl-compass {
    display: none !important;
}

/* Hover */
.confluent-map-container .mapboxgl-ctrl-group button:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Remove default shadows */
.confluent-map-container .mapboxgl-ctrl {
    box-shadow: none !important;
}

.confluent-map-popup-card {
    width: 320px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.confluent-map-popup-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

/* Mapbox popup styles */
.mapboxgl-popup.mapboxgl-popup-anchor-top{
    max-width: 320px;
        transform: translate(11%, -22%) translate(698px, 425px);
            transform: translate(-50%, -100%) translate(696px, 375px);
}
.mapboxgl-popup-tip{
    display: none;
}
.mapboxgl-popup-content {
    padding: 0;
    border-radius: 10px;
}
.mapboxgl-popup-content .confluent-map-popup-card .confluent-map-popup-card-image{
    max-height: 151px;
}
.mapboxgl-popup-content .confluent-map-popup-card .confluent-map-popup-card-image .confluent-map-popup-image{
    min-height: 151px;
}

.confluent-map-map-container .mapboxgl-popup{
    max-width: 320px !important;
    border-radius: 10px;
    left: 10px !important;
    top: 15% !important;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.confluent-map-popup-content {
    padding: 24px;
}

.confluent-map-popup-content .confluent-map-popup-content-inner{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
}

.confluent-map-popup-content .confluent-map-popup-content-inner h3.confluent-map-popup-title {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    font-family: 'GT WALSHEIM TRIAL';
    font-weight: 500;
    color: #001040;
}
.confluent-map-popup-content .confluent-map-popup-content-inner .confluent-map-popup-address {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    font-family: 'Inter';
    font-weight: 400;
    color: #575757;
}
.confluent-map-popup-content .confluent-map-popup-content-inner .confluent-map-popup-phone {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    font-family: 'GT WALSHEIM TRIAL';
    font-weight: 700;
    color: #5454DF;
}
.confluent-map-popup-content .confluent-map-popup-content-inner .confluent-map-popup-phone:focus-visible {
    outline: unset;
}
.mapboxgl-popup-content .mapboxgl-popup-close-button{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    background-color: #0010404D;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath d='M8.4 16.9999L7 15.5999L10.6 11.9999L7 8.4249L8.4 7.0249L12 10.6249L15.575 7.0249L16.975 8.4249L13.375 11.9999L16.975 15.5999L15.575 16.9999L12 13.3999L8.4 16.9999Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.confluent-map-view-toggle {
    display: none;
}


/* Responsive design - Tablet */
@media (max-width: 1024px) {
	.confluent-map-sidebar {
		width: 40%;
		min-width: 280px;
	}

	.confluent-map-location-card {
		padding: 12px;
	}

	.confluent-map-location-name {
		font-size: 14px;
	}
}

/* Responsive design - Mobile */
@media (max-width: 768px) {
	.confluent-map-container {
		flex-direction: column;
        border-radius: unset;
        margin: 0 -10px;
        max-height: unset;
        display: flex;
	}
    .confluent-map-map-container{
        aspect-ratio: 1 / 1;
        height: 100%;
        flex: 1;
    }
    /* Map View */
    .confluent-map-container.map-view .confluent-map-map-container {
        width: 100%;
        flex: 0 0 100%;
        display: block;
        height: 110vh;
    }
    .confluent-map-container.map-view #confluent-map-container {
        max-height: 100%;
        aspect-ratio: unset;
        height: 100vh !important;
    }
    .confluent-map-container.map-view #confluent-map-container .mapboxgl-canvas-container .mapboxgl-canvas{
        width: 100vw !important;
        height: 100vh !important;
    }
    .confluent-map-container.map-view .confluent-map-sidebar {
        /* display: none; */
    }

    /* List View */
    .confluent-map-container.list-view .confluent-map-map-container {
        /* display: none; */
    }

    .confluent-map-container.list-view .confluent-map-sidebar {
        display: block;
        width: 100%;
    }
	.confluent-map-sidebar {
		width: 100%;
		max-width: none;
		border-right: none;
        position: static;
        border-radius: unset;
        margin-top: 24px;
	}
    .mapboxgl-control-container{
        display: none;
    }
	.confluent-map-wrapper .confluent-map-controls {
		flex-direction: column;
        padding: 24px 10px;
        gap: 16px;
        z-index: 9;
        margin: 0;
	}
    .confluent-map-wrapper .confluent-map-controls {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
    }
    .mapboxgl-control-container {
        position: fixed;
        top: 0;
        right: 10px;
        z-index: 998;
    }

	.confluent-map-search-box {
		width: 100%;
		min-width: auto;
	}

	.confluent-map-wrapper .confluent-map-filter{
		width: 100%;
		min-width: auto;
        box-shadow: 0px 4px 4px 0px #00000040;
	}
    .confluent-map-wrapper .confluent-map-filter.selected{
        border: 2px solid #001040
    }
    .confluent-map-filter-options,
    .confluent-map-category-filter-options{
        max-height: 188px;
        max-width: 270px;
        left: 50%;
        transform: translateX(-50%);
    }
	.confluent-map-title {
		font-size: 26px !important;
		margin: 0;
	}

	#confluent-map-container {
		max-height: 402px;
        height: 100% !important;
        min-height: unset;
	}
	.confluent-map-location-card {
		padding: 10px;
		flex-direction: row;
		gap: 10px;
	}

	.confluent-map-location-image {
		width: 80px;
		height: 80px;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.confluent-map-location-info {
		gap: 4px;
	}

	.confluent-map-location-name {
		font-size: 13px;
	}

	.confluent-map-location-address,
	.confluent-map-location-zip {
		font-size: 12px;
	}

	.confluent-map-clinic-button {
		padding: 8px 12px;
		font-size: 12px;
		margin-top: 5px;
	}
    .confluent-map-view-toggle {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        bottom: 0;
        position: fixed;
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .confluent-map-view-toggle.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .confluent-map-view-toggle .confluent-map-view-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 98px;
        height: 40px;
        padding: 16px 8px;
        border: 1px solid #0010401A;
        border-radius: 1000px;
        background: #fff;
        box-shadow: 0px 4px 4px 0px #00000040;
        font-family: GT Walsheim Trial;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        color: #001040;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .confluent-map-view-toggle .confluent-map-view-btn.active {
        display: none;
    }

    .confluent-map-view-toggle .confluent-map-view-btn::after {
        content: '';
        width: 24px;
        height: 24px;
        flex-shrink: 0;

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .confluent-map-view-toggle .confluent-map-view-btn[data-view="map"]::after {
        background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_498_83" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_498_83)"><path d="M15 21L9 18.9L4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3792 3 20.1 3 19.75V5.75C3 5.53333 3.0625 5.34167 3.1875 5.175C3.3125 5.00833 3.48333 4.88333 3.7 4.8L9 3L15 5.1L19.65 3.3C19.9833 3.16667 20.2917 3.20417 20.575 3.4125C20.8583 3.62083 21 3.9 21 4.25V18.25C21 18.4667 20.9375 18.6583 20.8125 18.825C20.6875 18.9917 20.5167 19.1167 20.3 19.2L15 21ZM14 18.55V6.85L10 5.45V17.15L14 18.55ZM16 18.55L19 17.55V5.7L16 6.85V18.55ZM5 18.3L8 17.15V5.45L5 6.45V18.3Z" fill="%23001040"/></g></svg>');
    }

    .confluent-map-view-toggle .confluent-map-view-btn[data-view="list"]::after {
        background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_498_947" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_498_947)"><path d="M9 19V17H21V19H9ZM9 13V11H21V13H9ZM9 7V5H21V7H9ZM5 20C4.45 20 3.97917 19.8042 3.5875 19.4125C3.19583 19.0208 3 18.55 3 18C3 17.45 3.19583 16.9792 3.5875 16.5875C3.97917 16.1958 4.45 16 5 16C5.55 16 6.02083 16.1958 6.4125 16.5875C6.80417 16.9792 7 17.45 7 18C7 18.55 6.80417 19.0208 6.4125 19.4125C6.02083 19.8042 5.55 20 5 20ZM5 14C4.45 14 3.97917 13.8042 3.5875 13.4125C3.19583 13.0208 3 12.55 3 12C3 11.45 3.19583 10.9792 3.5875 10.5875C3.97917 10.1958 4.45 10 5 10C5.55 10 6.02083 10.1958 6.4125 10.5875C6.80417 10.9792 7 11.45 7 12C7 12.55 6.80417 13.0208 6.4125 13.4125C6.02083 13.8042 5.55 14 5 14ZM3.5875 7.4125C3.19583 7.02083 3 6.55 3 6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4C5.55 4 6.02083 4.19583 6.4125 4.5875C6.80417 4.97917 7 5.45 7 6C7 6.55 6.80417 7.02083 6.4125 7.4125C6.02083 7.80417 5.55 8 5 8C4.45 8 3.97917 7.80417 3.5875 7.4125Z" fill="%231C1B1F"/></g></svg>');
    }
    
}

/* Print styles */
@media print {
	.confluent-map-controls,
	.confluent-map-sidebar {
		display: none;
	}

	.confluent-map-container {
		flex-direction: column;
	}

	#confluent-map-container {
		height: 600px;
	}
}

/* Accessibility - Focus visible */
.confluent-map-clinic-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Animation for card transitions */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.confluent-map-location-card {
	animation: slideIn 0.3s ease;
}