/**
 * VenueKonnex VEM — area map overlay styles.
 *
 * The map slot sits directly under the search form. Hidden by default,
 * revealed when the user submits a search. Styled to match the rest of
 * VEM's card aesthetic without depending on its CSS variables (so it
 * works whether or not the page imports vem-public.css alongside).
 */

.vem-area-map[hidden] { display: none !important; }

.vem-area-map {
  margin: 12px 0 18px;
  background: #ffffff;
  border: 1px solid rgba(11, 31, 58, 0.08);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(11, 31, 58, 0.06);
  overflow: hidden;
  animation: vem-area-map-in 200ms ease-out;
}

@keyframes vem-area-map-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vem-area-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(11, 31, 58, 0.06);
  background: linear-gradient(180deg, #f7faf8 0%, #ffffff 100%);
}

.vem-area-map-title {
  font-weight: 700;
  font-size: 13px;
  color: #0b1f3a;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vem-area-map-status {
  font-size: 13px;
  color: #46566b;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.vem-area-map-status.is-error {
  color: #8a3a2a;
}

.vem-area-map-canvas {
  width: 100%;
  height: 320px;
  min-height: 320px;
  background: #eef2ee;
}

@media (max-width: 640px) {
  .vem-area-map-canvas {
    height: 240px;
    min-height: 240px;
  }
  .vem-area-map-status {
    max-width: 55%;
  }
}

/* Leaflet's default attribution looks fine — just nudge its font size
   down a touch to match our smaller card chrome. */
.vem-area-map .leaflet-control-attribution {
  font-size: 11px;
}