/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
.acf-map {
  width: 100%;
  height: 700px;
  margin: 0;
  background: transparent !important;
}
.acf-map img {
  max-width: inherit !important;
}
.acf-map > div {
  height: 100%;
}
.acf-map iframe {
  width: 100% !important;
  height: 100% !important;
}
.acf-map .gm-style {
  width: 100% !important;
  height: 100% !important;
  background: #fff !important;
}
@media (max-width: 767.98px) {
  .acf-map {
    max-height: 580px;
  }
  .acf-map iframe {
    max-height: 580px !important;
    height: 580px !important;
  }
}

#map-legend-mobile-container .map-legend-control {
  overflow: hidden;
}

.map-legend-control {
  background-color: #fff;
  margin: 3.5rem;
  min-width: 246px;
}
.map-legend-control .map-legend-title {
  font-size: var(--snk-fs-body);
  margin: 0;
  padding: 1rem 1.5rem 1rem 1.5rem;
  background-color: #004959;
  color: #fff;
  font-family: var(--snk-font-body);
  cursor: pointer;
}
.map-legend-control .map-legend-title::before {
  content: "";
  background-image: url(/wp-content/themes/snk-child/assets/svgs/icons/arrow_down.svg);
  position: absolute;
  height: 24px;
  width: 24px;
  background-size: 24px;
  right: 1rem;
  transform: rotate(180deg);
}
.map-legend-control .map-legend-title.open::before {
  transform: rotate(0deg);
}
.map-legend-control .map-legend {
  padding: 1.5rem;
}
.map-legend-control .map-legend .map-legend-subtitle {
  font-size: var(--snk-fs-body);
  padding: 0;
  font-weight: 700;
  color: #222;
  font-family: var(--snk-font-body);
  margin-bottom: 1rem;
}
.map-legend-control .map-legend .map-filter-item {
  cursor: pointer;
  padding: 8px 0;
  display: flex;
  align-items: center;
  font-size: var(--snk-fs-body);
  color: #454545;
  font-family: var(--snk-font-body);
}
.map-legend-control .map-legend .map-filter-item:first-child {
  padding-top: 0;
}
.map-legend-control .map-legend .map-filter-item.active {
  text-decoration: underline;
}
.map-legend-control .map-legend .map-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.map-legend-control .map-legend .map-legend-dot.flights {
  background-color: #c00;
}
.map-legend-control .map-legend .map-legend-dot.trucks {
  background-color: #539da6;
}
@media (max-width: 767.98px) {
  .map-legend-control {
    position: relative !important;
    margin: 0;
  }
}

.acf-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f0f0f1;
  border: 1px dashed #a0a5aa;
  padding: 40px 20px;
  min-height: 250px;
  color: #1d2327;
}
.acf-map-placeholder .acf-map-placeholder-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 16px;
}
.acf-map-placeholder .acf-map-placeholder-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}
.acf-map-placeholder .acf-map-placeholder-text {
  margin: 0;
  font-size: 14px;
  color: #50575e;
}

.gm-style .gm-style-iw-c {
  background: rgba(246, 245, 245, 0.9) !important;
  backdrop-filter: blur(27px);
  padding: 12px !important;
  background-color: rgba(246, 245, 245, 0.9) !important;
  border-radius: 12px;
  box-shadow: none !important;
  border: 0 !important;
}
.gm-style .gm-style-iw-c .gm-style-iw-chr {
  display: none !important;
}
.gm-style .gm-style-iw-c .gm-style-iw-d {
  padding: 0 !important;
  margin: 0 !important;
  max-height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}
.gm-style .gm-style-iw-c .custom-infowindow p {
  margin-bottom: 0;
}
.gm-style .gm-style-iw-c .custom-infowindow-link {
  font-size: var(--snk-fs-body);
  color: #222;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.gm-style .gm-style-iw-c .custom-infowindow-arrow img {
  height: 16px;
}
.gm-style .gm-style-iw-c .custom-infowindow-stationTitle {
  font-weight: 700;
}
.gm-style .gm-style-iw-tc {
  display: none !important;
}