/* map + overlay wrapper */
.map-wrapper {
  position: relative;
}

/* Map  */
.map {
  width: 100%;
  height: 70vh;       /* adjust as you like */
  border-radius: 10px !important;    /* ← rounded corners */

  margin-top: 1rem;
  padding: 1rem;
}

/* removing watermark */
.mapboxgl-ctrl-logo { display: none !important; }

/* Company list */
.company-list {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
  z-index: 1;
  color: var(--fg-one);

  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(4px);
  border-radius: 10px !important;    /* ← rounded corners */
  filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
}

/* company list button*/
.company-list button {
  display: block;
  width: 100%;
  padding: 0.5rem;
  text-align: left;
  cursor: pointer;

  background: none;
  border-radius: 10px;    /* ← rounded corners */
  border-width: 0px;
}

.company-list button:hover {
  background: rgb(255, 255, 255, 0.2);
}

.company-list button + button {
  margin-top: 0.5rem; /* Only applies if there's a previous button */
}

/* pressed company list button */

.company-list button.active {
  background: rgb(255, 255, 255, 0.2);
  filter: drop-shadow(0 0 2px gray) !important; /* <- gives a border */
  color: var(--fg-one);
}

/* popup */
.mapboxgl-popup {
  position: absolute     !important;
  transform: none     !important;  /* cancel out Mapbox’s translate() */

  overflow-y: auto;
  z-index: 1;

  top: 1rem     !important;
  left: auto    !important;
  right: 1rem   !important;
}

/* popup bg */
.mapboxgl-popup-content {
  background: rgba(0, 0, 0, 0.1) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 10px !important;    /* ← rounded corners */
  filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
  
  color: var(--bg-one);
  padding-bottom: 5px; /* or else its too big */
}

/* popup image */
.mapboxgl-popup-content img {
  border-radius: 5px !important;    /* ← rounded corners */
  filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */

  width: 100%;       /* fill the popup’s width */
  max-width: none;   /* ignore any mapbox defaults */
  height: auto;      /* maintain aspect ratio */

}

/* hide the popup tip/arrow */
.mapboxgl-popup-tip {
  display: none;
}

/* Caption */
.blurb {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;

  background: var(--bg-two);
  color: var(--fg-one);

  border-radius: 10px;
  min-height: 8rem;   /* optional */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

  font-size: 1rem;
}

/* blurb title */
.blurb h2 {
  font-size: 1.5rem;
}

/* fixed popup that won’t move with the map */
.fixed-popup {
  position: absolute     !important;
  transform: none     !important;  /* cancel out Mapbox’s translate() */

  z-index: 1;

  top: 1rem     !important;
  right: -1rem   !important;

  background: rgba(0, 0, 0, 0.1) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 10px !important;    /* ← rounded corners */
  filter: drop-shadow(0 0 1px gray) !important; /* <- gives a border */
  
  color: var(--bg-one);
  
  padding: 0.75rem;
  border-radius: 6px;
  max-width: 200px;
  pointer-events: none;
}

.fixed-popup img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}