.nam-freight-wrap {
  position: relative;
  width: 100%;
}

.nam-map {
  width: 100%;
  aspect-ratio: 5 / 3;
  background: #e7ebef;
}

/* Legend container */
.nam-freight-legend{
  position: absolute;
  right: 6rem;
  left: auto !important;
  top: -5rem;
  z-index: 10;
}

.legend-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.legend-bar {
  display: flex;
  height: 10px;
  margin-bottom: 4px;
}

.legend-bar span {
  flex: 1;
}
.legend-img {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 8px;
}

.legend-nodes div {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot.rail { background:#6684C6; }
.dot.inland { background:#43b02a; }
.dot.sea { background:#00a9e0; }
.dot.intermodal { background:#0032a0; }

.star::before {
  content: "?";
  color: #da291c;
  font-size: 12px;
}

/* Address search */
.nam-search {
  position: relative;
  margin: 0 0 12px 0;
  max-width: 520px;
  z-index: 5;
}

.nam-search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.nam-address-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  border: 1px solid #cfd3d8;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nam-address-search:focus {
  border-color: #0032a0;
  box-shadow: 0 0 0 3px rgba(0, 50, 160, 0.15);
}

/* The modern Google Places web component <gmp-place-autocomplete> manages
   its own internal input + shadow DOM. We only need to size it. */
gmp-place-autocomplete.nam-address-search {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.nam-search-go,
.nam-search-clear {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  background: #f3f4f6;
  border: 1px solid #cfd3d8;
  border-radius: 6px;
  cursor: pointer;
}

.nam-search-go {
  color: #ffffff;
  background: #0032a0;
  border-color: #0032a0;
}

.nam-search-go:hover { background: #002a86; border-color: #002a86; }
.nam-search-clear:hover { background: #e6e8ec; }

.nam-search-msg {
  margin-top: 6px;
  min-height: 1em;
  font-size: 12px;
  color: #555;
}

/* Big bold popup for the address-search results */
.nam-popup .mapboxgl-popup-content {
  padding: 18px 22px 18px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  min-width: 360px;
}

.nam-popup .mapboxgl-popup-close-button {
  font-size: 26px;
  line-height: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #1a1a1a;
}

.nam-popup .nam-dialog__header {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #da291c;
  margin-bottom: 10px;
}

/* Combined "Bottlenecks nearby" popup */
.nam-dialog--list {
  max-height: 440px;
  overflow-y: auto;
  padding-right: 6px;
}

.nam-dialog--list .nam-dialog__list {
  margin: 8px 0 0 0;
  padding-left: 28px;
  font-size: 16px;
}

.nam-dialog--list .nam-dialog__item {
  margin: 0 0 14px 0;
  line-height: 1.4;
}

.nam-dialog--list .nam-dialog__item:last-child {
  margin-bottom: 0;
}

.nam-dialog--list .nam-dialog__title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}

.nam-dialog--list .nam-dialog__sub {
  font-size: 14px;
  font-weight: 500;
  color: #3a3a3a;
  margin-top: 2px;
}

/* =========================================================================
   Splash / kiosk shortcode [freight_map_splash]
   Full-viewport hook -> fades into the map.
   ========================================================================= */
.nam-splash-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  background: #0a1530;
  color: #ffffff;
}

.nam-splash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(ellipse at top, rgba(255, 162, 74, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(0, 50, 160, 0.45), transparent 60%),
    linear-gradient(180deg, #0a1530 0%, #061026 100%);
  will-change: opacity;
}

.nam-splash:focus { outline: none; }
.nam-splash:focus-visible {
  outline: 3px solid #FFA24A;
  outline-offset: -8px;
}

.nam-splash__inner {
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nam-splash__number {
  font-size: clamp(120px, 22vw, 360px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #FFA24A;
  text-shadow: 0 12px 48px rgba(255, 162, 74, 0.35);
  margin-bottom: clamp(16px, 2.5vh, 36px);
}

.nam-splash__sub {
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.35;
  max-width: 28ch;
  margin: 0 auto clamp(20px, 3vh, 40px);
  opacity: 0.92;
}

.nam-splash__cta {
  font-size: clamp(13px, 1.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFD9B8;
  animation: namSplashPulse 2.2s ease-in-out infinite;
}

@keyframes namSplashPulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

.nam-mapstage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1a1a1a;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

.nam-mapstage.is-visible { pointer-events: auto; }

.nam-mapstage__heading {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  background: #fff;
  margin: 0;
  padding: clamp(14px, 2vh, 26px) clamp(20px, 3vw, 40px) clamp(10px, 1.5vh, 18px);
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0032a0;
}

/* "Back to welcome" button in the upper-right of the kiosk mapstage. */
.nam-back-btn {
  position: absolute;
  top: clamp(14px, 2vh, 26px);
  right: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: #0032a0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 50, 160, 0.25);
}
.nam-back-btn:hover { background: #002a86; }
.nam-back-btn:focus-visible { outline: 3px solid #FFA24A; outline-offset: 2px; }
.nam-back-btn .nam-back-btn__arrow {
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
}

.nam-mapstage__body {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  padding: 0 clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
}

.nam-mapstage__body .nam-freight-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Legend: small overlay panel in the bottom-left corner of the map. */
.nam-mapstage__body .nam-freight-legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  top: auto;
  right: auto !important;
  z-index: 5;
  width: 260px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #1a1a1a;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  font-size: 12px;
}

.nam-mapstage__body .nam-freight-legend .legend-title {
  font-size: 13px;
  margin-bottom: 8px;
  color: #1a1a1a;
}

.nam-mapstage__body .nam-freight-legend .legend-bar {
  height: 12px;
  margin-bottom: 6px;
}

.nam-mapstage__body .nam-freight-legend .legend-labels {
  font-size: 11px;
  color: #4a4a4a;
}

.nam-mapstage__body .nam-freight-legend .legend-nodes div {
  color: #1a1a1a;
}

/* Search bar: tighter and pushed to the top-left, room for the home button. */
.nam-mapstage__body .nam-search {
  margin: 8px 0 12px 0;
  max-width: 460px;
}

.nam-mapstage__body .nam-map-wrapper {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.nam-mapstage__body .nam-map {
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  aspect-ratio: auto !important;
}

/* Home / reset map control */
.nam-home-ctrl .nam-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  background: #fff;
  border: 0;
  cursor: pointer;
  color: #2c3e50;
}

.nam-home-ctrl .nam-home-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Keep the Google Places dropdown above Mapbox controls/popups */
.pac-container {
  z-index: 10000 !important;
}

@media (max-width: 640px) {
  .nam-search-row {
    flex-wrap: wrap;
  }
  .nam-search-clear {
    flex: 1 0 auto;
  }
}