/* Jasper Journeys Phase 3 Map + Transit Fixes */

#discoverMap,
#jjMap,
#map {
  min-height: 68vh;
  width: 100%;
  background: #f7f3e8;
}

.jj-map-control-toggle {
  display: none !important;
  margin: 0 0 12px;
}

.jj-map-control-panel {
  background: #fff !important;
  border: 1px solid #DDE2DC !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 6px 18px rgba(0,40,31,.08) !important;
}

.jj-map-control-grid,
.jj-route-control-grid {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.jj-map-control-grid label,
.jj-route-control-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(0,63,50,.12);
  border-radius: 10px;
  background: #FBF7EE;
  font-weight: 800;
  color: #171B18;
}

.jj-map-control-grid input,
.jj-route-control-grid input {
  width: 18px;
  height: 18px;
  accent-color: #003F32;
}

.jj-map-warning,
.jj-popup-warning {
  background: #FFF4D7;
  border-left: 4px solid #D99A2B;
  padding: 10px 12px;
  border-radius: 8px;
}

.jj-popup-note {
  background: #F7FAF6;
  border: 1px solid #DDE2DC;
  padding: 9px 10px;
  border-radius: 8px;
}

.jj-map-popup h3 {
  margin: 4px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  color: #171B18;
  font-size: 1.1rem;
}

.jj-popup-kicker {
  display: inline-flex;
  align-items: center;
  background: #003F32;
  color: #fff !important;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.jj-leaflet-popup .leaflet-popup-content {
  margin: 14px;
  min-width: 220px;
}

.jj-small-map-marker {
  background: transparent !important;
  border: 0 !important;
}

.jj-small-map-marker span {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: #003F32 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

.jj-marker-attraction span { background: #003F32 !important; }
.jj-marker-service span { background: #0B5A43 !important; }
.jj-marker-aurora span { background: #2F4A7A !important; }
.jj-marker-wildlife span { background: #7A4A1D !important; }
.jj-marker-transit.is-verified span {
  background: #0B5A43 !important;
}
.jj-marker-transit.is-unverified span {
  background: #D99A2B !important;
  color: #171B18 !important;
  border: 2px dashed #fff !important;
}

.jj-map-error {
  padding: 24px;
  border: 1px solid #DDE2DC;
  border-radius: 14px;
  background: #fff;
}

.leaflet-control-attribution {
  font-size: 10px !important;
}

@media (max-width: 900px) {
  #discoverMap,
  #jjMap,
  #map {
    min-height: 74vh;
    border-radius: 14px !important;
  }

  .jj-map-control-toggle {
    display: inline-flex !important;
    width: 100%;
    margin: 0 0 10px !important;
  }

  .jj-map-control-panel {
    display: none;
    margin-bottom: 14px;
  }

  .jj-map-control-panel.is-open {
    display: block;
  }

  .jj-map-control-grid,
  .jj-route-control-grid {
    grid-template-columns: 1fr;
  }

  .jj-leaflet-popup .leaflet-popup-content {
    max-width: 250px !important;
    font-size: .92rem;
  }

  .jj-small-map-marker span {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    font-size: 8px !important;
  }
}

@media (min-width: 901px) {
  .jj-map-control-grid,
  .jj-route-control-grid {
    grid-template-columns: 1fr;
  }

  .jj-map-control-panel {
    display: block !important;
  }
}