/*
TEMPLATE FOR MEDIA QUERIES
	@media screen and (min-width:1180px) {}
	@media screen and (min-width:880px) and (max-width:1179px) {}
	@media screen and (max-width:879px) {}

INDEX
	- GOOGLE MAP
	- MAP BUBBLE
	- ROUTE
	- RELICS

/*-----------------------------------------------------------  GOOGLE MAP ----------------------*/
@media screen and (min-width:700px) { #google_maps_CS { height: 900px; } }
@media screen and (min-width:400px) and (max-width:699px) { #google_maps_CS { height: 400px; } }
@media screen and (max-width:399px) { #google_maps_CS { height: 300px; } }

#google_maps_CS {

}

#google_maps_CS > iframe {
	width: 100%;
	height: 100%;
}

.hide_in_maps { display: none; }

/*-----------------------------------------------------------  MAP BUBBLE ----------------------*/
.gm-style-iw.gm-style-iw-c { padding: 0; }

.gm-style .gm-style-iw-c { border-radius: 0; }

.bubble p.date {
	background-color: var(--color_p);
	font-size: 13px;
	padding: 8px 25px;
	/* border-top-left-radius: 4px; */
	/* border-top-right-radius: 4px; */
	color: white;
	font-weight: bold;
	text-align: center;
	margin: 0;
	border-bottom: 1px solid var(--color_c);
}

.bubble h1 {
	margin: 5px 10px 4px;
	font-size: 14px;
}

.bubble p { 
	margin: 0 10px 3px; 
	font-size: 13px; 
}

.bubble p.phone { padding-left: 15px; }

.bubble p.phone::before {
	left: 0;
	top: 0;
}


.bubble p.moreinfo a {
	text-align: center;
	margin: 14px auto 15px;
	color: var(--color_c);
	padding: 1px 0;
	display: block;
	width: 72px;
	/* border-radius: 6px; */
	border-bottom: 1px solid var(--color_c);
}


/*-----------------------------------------------------------  ROUTE ---------------------------*/
#route { 
	margin: 35px 0;
	font-size: 14px;
}

#route dl {
	/*! overflow: hidden; */
	max-width: 250px;
	margin: 0 auto 20px;
	cursor: pointer;
	border: 1px solid white;
	background-color: var(--gray1);
	/* border-bottom: 1px solid var(--gray2); */
	position: relative;
}

#route dl::after {
	content: " ";
	height: 1px;
	width: 100%;
	background-color: var(--gray2);
	position: absolute;
	z-index: 10;
	bottom: 0;
	transition: all 0.2s ease-in-out;
}

#route dl:hover::after {
	height: 2px;
	background-color: var(--color_a);
	transition: all 0.2s ease-in-out;
}

/* #route dl:hover { 
	border-bottom-color: var(--color_cl3);
	background-color: var(--color_cl5);
} */

#route dl dt {
	border-bottom: 1px solid var(--color_c);
	background-color: var(--color_p);
	color: white;
	padding: 6px 10px;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	/*! box-shadow: 0 5px 0 0 var(--color_p); */
	margin-bottom: 8px;
}

#route dl dd { padding: 4px 10px; }

#route dl dd.name {
	font-weight: bold;
	font-size: 16px;
	height: 40px;
	display: table-cell;
	vertical-align: middle;
}

#route dl dd.address::before { display: none; }

#route dl dd.phone { padding-left: 26px; padding-bottom: 15px;}

.phone::before {
	left: 10px;
	top: 6px;
}

#route dl dd.moreinfo { font-size: 12px; }

/*----------------------------------------------------------- RELICS  ----------------------*/


#map-filters select, #map-filters input[type="text"] {
	padding: 5px 10px;
	border: 1px solid #ccc;
	font-size: 0.95rem;
}

#map-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

#map-filters select,
#map-filters input[type="text"] {
  padding: 5px 10px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
}

#map-filters button {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

#map-filters button:hover {
  background: #0056b3;
}

h1 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #222;
}

.content {
  max-width: 960px;
  margin: auto;
  padding: 1rem;
}

@media (max-width: 600px) {
  #map-filters {
	flex-direction: column;
	align-items: stretch;
  }

  #map-filters select,
  #map-filters button {
	width: 100%;
  }
}