.hidden {
	display: none !important;
}

.mapblock {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 100%;

	.loadingshadow {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, .5);
		z-index: 1000;

		&.active {
			display: block;
		}
	}

	#map {
		display: block;
		width: 100%;
		height: 1000px;
		max-height: 100%;
		max-width: 100%;
		border: 1px solid #000;

		.gmp-advanced-marker {
			cursor: pointer;
		}

		.cluster-marker {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background-color: #d32f2f;
			border: 2px solid #fff;
			box-shadow: 0 0 4px rgba(0, 0, 0, .5);
			color: #fff;
			font-weight: bold;
			font-size: 15px;
			cursor: pointer;
		}

		.gm-style-iw-c {
			padding-left: 12px !important;
			padding-right: 12px !important;
		}

		.gm-style-iw-d {
			overflow: hidden !important;
		}

		.info-content {
			display: flex;
			align-items: flex-start;
			gap: 1em;
			padding: 0 1em 1em 1em;
			width: 500px;
			max-width: 90%;

			.info-left {
				flex: 1 1 auto;
				min-width: 0;
			}

			.info-name {
				font-weight: bold;
				font-size: 1.5em;
				margin-bottom: .5em;
			}

			.info-description {
				margin-bottom: 1em;
				font-size: 1.1em;
			}

			.info-link-btn {
				display: inline-block;
				padding: .5em 1em;
				border-radius: 8px;
				background-color: #3c7bc9;
				color: #fff;
				text-decoration: none;

				&:hover {
					background-color: #558dd1;
				}
			}

			.info-right {
				display: flex;
				flex: 0 0 auto;
				align-items: flex-start;
				justify-content: center;
				max-width: 200px;

				img {
					display: block;
					width: auto;
					max-width: 200px;
					max-height: 250px;
					height: auto;
					object-fit: contain;
				}
			}
		}
	}

	> :not(#map) * {
		font-family: 'Manrope', Arial, sans-serif;
		font-size: 18px;
		line-height: 1.5;
	}

	.searchblock {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-gap: 10px;
		margin: 2em 0;

		input, button {
			padding: .5em 1em;
			border: 1px solid #000;
			border-radius: 8px;
		}

		input {
			&::placeholder {
				font-style: italic;
				font-weight: normal;
				opacity: .5;
			}
		}

		button {
			cursor: pointer;
			color: #fff;
			background-color: #3c7bc9;

			&:hover {
				background-color: #558dd1;
			}
		}
	}

	.searchinfo {
		display: block;
		margin: 1em 0;

		.noresults {
			border: 1px solid #ccc;
			background-color: #ffc;
			border-radius: 8px;
			padding: .5em 1em;
			color: #000;
			font-style: italic;
			font-weight: normal;
		}
	}

	.searchresults {
		display: block;
		border: 1px solid #ccc;
		border-radius: 8px;
		padding: .5em 1em;
		color: #000;

		.resultsheader {
			font-weight: bold;
			margin-bottom: 1em;
			padding-bottom: .5em;
			border-bottom: 1px solid #000;
		}

		.resultscontainer {
			max-height: 300px;
			overflow-y: scroll;
			-ms-overflow-style: -ms-autohiding-scrollbar;

			.result {
				padding: .5em;
				border-bottom: 1px solid #000;

				&:hover {
					background-color: #ffc;
				}

				&:last-child {
					border-bottom: 0 none;
				}

				.result-name {
					font-weight: bold;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.mapblock {
		#map {
			.gm-style-iw {
				max-height: 40vh;
				overflow: auto;
			}
			
			.info-content {
				display: grid;
				
				.info-left {
					grid-row: 2;
				}
				
				.info-right {
					grid-row: 1;
					margin-bottom: 10px;
				}
				
				.info-name, h1, h2, h3, h4, h5, h6 {
					font-size: 1.1em;
				}
				
				.info-description {
					font-size .9em;
				}
			}
		}
	}
}