.content-12f:has(.service-map) {
	padding-top:0 !important;
	
	> .container-fluid > .row > .col-md-12 {
		padding:0;
	}
	
	#service-map {
		height:100vh;
		
		.marker-icon {
			width: 0 !important;
			height: 0 !important;
			margin-left: 0 !important;
			margin-top: 0 !important;
		}
		.marker-icon::after {
			content: "";
			position:absolute;
			top:-16px; left: -16px;
			width:32px; height:32px;
			background-color:var(--marker-color);
			border-radius:100%;
			z-index:0;
			transition:transform 0.3s ease-in, border-width 0.3s ease-in;
			border: 0px solid #005ba5;
		}
		.marker-icon::before {
			content: "";
			position:absolute;
			top:-16px; left: -16px;
			width:32px; height:32px;
			background-size: 28px 29px;
			background-image: var(--marker-icon);
			background-repeat: no-repeat;
			background-position: center;
			z-index:1;
		}
		.marker-icon:hover::after { transform:scale(1.25); border-width:2px; }
	}
	
	.service-map-search {
		position: absolute;
		top: 100px;
		left: 12px;
		width: 500px;
		max-width: calc(100% - 24px);
		padding: 25px;
		background-color: #fff;
		z-index: 500;
		border-radius: 25px !important;
		box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
		
		> .map-search > input {
			width: 100%;
			border-radius: 8px;
			border: 1px solid #000;
			padding: 4px 8px;
		}
		
		> .map-search > input:hover,> .map-search > input:focus {
			border-color: #005ba5;
			outline: 0;
		}
		
		.service-map-categories {
			height: 0;
			visibility: hidden;
			overflow: hidden;
			transition: height 0.3s ease-in, visibility 0.3s ease-in 0.3s;
			
			#map-categories {
				width: 100%;
				padding-top: 25px;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 20px;
				max-height: calc(100vh - 100px - 50px - 35px); /* position, search padding, input height */
				overflow-y: auto;
				
				> .map-category.visible > button {
					> .image {
						background-color: #005ba5;
						> .icon {
							background-color: #fff;
						}
					}
				}
				
				> .map-category > button {
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: transparent;
					border: 0;
					margin: 0 auto;
					
					> .image {
						width: 37px;
						height: 37px;
						padding: 3px;
						border-radius: 100%;
						
						> .icon {
							width: 31px;
							height: 31px;
							background-color: #000;
							mask-position: center;
							mask-size: cover;
						}
					}
				}
			}
		}
	}
	
	.service-map-search:where(:has(.map-search > input:focus),:has(.map-category > button:focus)) .service-map-categories {
		transition: height 0.3s ease-in, visibility 0.3s ease-in;
		visibility: visible;
		height: var(--list-height);
	}
}

.content-12:has(.single-service-map) {
	padding-top:0 !important;
	
	> .container > .row > .col-md-12 {
		padding:0;
	}
	
	.single-service-map {
		padding-bottom: 60px;
	}
	
	#service-map {
		height:500px;
		
		.marker-icon {
			width: 0 !important;
			height: 0 !important;
			margin-left: 0 !important;
			margin-top: 0 !important;
		}
		.marker-icon::after {
			content: "";
			position:absolute;
			top:-16px; left: -16px;
			width:32px; height:32px;
			background-color: var(--marker-color);
			border-radius:100%;
			z-index:0;
			transition:transform 0.3s ease-in, border-width 0.3s ease-in;
			border: 0px solid #005ba5;
		}
		.marker-icon::before {
			content: "";
			position:absolute;
			top:-16px; left: -16px;
			width:32px; height:32px;
			background-size: 28px 29px;
			background-image: var(--marker-icon);
			background-repeat: no-repeat;
			background-position: center;
			z-index:1;
		}
		.marker-icon:hover::after { transform:scale(1.25); border-width:2px; }
	}
}

.service-modal {
	position: fixed;
	z-index: 600;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	height: 0;
	visibility: hidden;
	transition: height 0.3s ease-in, visibility 0.3s ease-in 0.3s;
	
	> .container {
		max-width: 550px;
		position: relative;
		padding:35px 25px;
		
		> .service-modal-content {
			display: flex;
			column-gap: 35px;
			
			> .modal-image > img {
				display:block;
				height: 115px;
				max-width: none;
			}
			> .modal-info {
				align-self: center;
				
				> h2 {
					font-size: 20px;
				}
			}
		}
		
		> .service-modal-close {
			position: absolute;
			right: 0;
			border: 0;
			width: 25px;
			height: 25px;
			padding: 0;
			background: transparent;
		}
		
		> .service-modal-close::after, .service-modal-close::before {
			content: "";
			display: block;
			width: 16px;
			height: 3px;
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: #005ba5;
			transform-origin: 50% 50%;
		}
		> .service-modal-close::after {
			transform: translateX(-50%) translateY(-50%) rotate(45deg);
		}
		
		> .service-modal-close::before {
			transform: translateX(-50%) translateY(-50%) rotate(-45deg);
		}
	}
}
.service-modal.visible {
	transition: height 0.3s ease-in, visibility 0.3s ease-in;
	visibility: visible;
	height: var(--modal-content-height);
}