/* map & sidebar sizing */
.map-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#map {
  width:100%;
  height:60vh;
  max-height:600px;
  min-height:300px;
}

#sidebar {
  max-height:40vh;
  overflow-y:auto;
  padding: 1rem;
}

@media (max-width:767.98px) {             /* phones */
  #map {
    max-height:65vh;
  }

  #sidebar {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1rem 2rem 1rem;
  } /* bottom panel */
}

@media (min-width:768px){                /* tablets & up */
  #map {
    height:600px;
  }

  #sidebar {
    max-height:600px;
  }
}

/* sidebar items */
.place-item{cursor:pointer;padding:.30rem .25rem;border-radius:.25rem;}
.place-item:hover{background:#f1f3f5;}
.place-item.active{background:#0d6efd1a;font-weight:600;}

#mapCol { background: transparent !important; }

.rounded-popup .maplibregl-popup-content {
  border-radius: 14px;          /* <-- round the box */
  padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* arrow that sticks out of the box  (four orientations⇣) */
.rounded-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.rounded-popup.maplibregl-popup-anchor-top    .maplibregl-popup-tip,
.rounded-popup.maplibregl-popup-anchor-left   .maplibregl-popup-tip,
.rounded-popup.maplibregl-popup-anchor-right  .maplibregl-popup-tip {
  width:   14px;
  height:  14px;
  border-radius: 2px;           /* tiny rounding on the arrow base */
  /* inherit background so the arrow matches the bubble */
  background: inherit;
  box-shadow: inherit;
}

.rounded-popup a:focus { outline: none; }

.maplibregl-popup-close-button,
.mapboxgl-popup-close-button {      /* keep this line if you still have Mapbox GL on the page */
  margin-left: 1rem;
  width: 2.25rem;                   /* ⇐ hit-area size */
  height: 2.25rem;
  line-height: 2.0rem;              /* keeps the glyph centred */
  font-size: 1.5rem;                /* ⇐ visual size of the “×” */
  cursor: pointer;                  /* shows a pointer on hover */
}

/* Optional: soften the look on hover */
.maplibregl-popup-close-button:hover {
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
}

.place-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #e5e5e5;
}
.place-item:hover { background: #fafafa; }

.place-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.place-info h3   { margin: 0 0 0.25rem; font-size: 1rem; }
.place-info p    { margin: 0; white-space: pre-line; color: #666; font-size: 0.875rem; }
.place-hours { font-size: 14px }

.place-hours-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr;   /* first column wide enough for "Thursday" */
  column-gap: .5rem;
  line-height: 1.4;                    /* keeps rows tight but readable */
}

/* Optional niceties */
.place-hours-line .day   { text-transform: capitalize; }
.place-hours-line .hours { white-space: nowrap; }