/* Map facade (inc/map_facade.php): a drawn sketch until the visitor loads Google Maps.
   Same palette as the mega menu. */
.mf-map {
  position: relative;
  height: 100%;
  min-height: 300px;
  border-radius: 20px;
  overflow: clip;
  background: #e3f3f6;
  font-family: "Cabin", sans-serif;
}
.mf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mf-map[data-state="loaded"] > :not(iframe) { display: none; }
.mf-sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.mf-land { fill: #e8f0f1; }
.mf-green { fill: #d9ead8; }
.mf-runway rect { fill: #d3dcdf; }
.mf-road path { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.mf-road--main path { stroke-width: 15; }
.mf-block rect { fill: #dbe3e5; }
.mf-pin {
  position: absolute;
  left: 50%;
  top: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.mf-pin svg { display: block; filter: drop-shadow(0 4px 6px rgba(20, 39, 44, 0.25)); }
.mf-pin path { fill: #f37720; }
.mf-pin circle { fill: #fff; }
.mf-pin-label {
  order: -1;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 39, 44, 0.12);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: #14272c;
  white-space: nowrap;
}
.mf-cta {
  position: absolute;
  left: 50%;
  bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}
.mf-load {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: #14272c;
  font: 700 15px/20px "Cabin", sans-serif;
  color: #fff;
  box-shadow: 0 6px 16px rgba(20, 39, 44, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mf-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #206c83;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(20, 39, 44, 0.04);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mf-open svg { transition: transform 0.2s ease; }
.mf-load:focus-visible,
.mf-open:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b5530b; }
@media (hover: hover) {
  .mf-load:hover { background: #f37720; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 39, 44, 0.28); }
  .mf-open:hover { background: #fff; color: #b5530b; text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 39, 44, 0.16); }
  .mf-open:hover svg { transform: translate(2px, -2px); }
}
.mf-load:active, .mf-open:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(20, 39, 44, 0.2); transition-duration: 0.08s; }