/* ✅ Full height modal (close to fullscreen) */
#bookmarksModal .modal-dialog {
  height: 100vh; /* full screen height */
  margin: 0; /* remove bootstrap margins */
  max-width: 100%; /* optional if you want it edge-to-edge */
}

/* ✅ Make content fill the dialog */
#bookmarksModal .modal-content {
  height: 100%;
  border-radius: 0; /* optional: full-screen look */
  display: flex;
  flex-direction: column;
}

/* ✅ Header/Footer fixed, body scrolls */
#bookmarksModal .modal-header,
#bookmarksModal .modal-footer {
  flex: 0 0 auto;
}

/* ✅ Body takes remaining height and scrolls */
#bookmarksModal .map-cards-modal-body {
  flex: 1 1 auto; /* take remaining space */
  overflow-y: auto; /* scroll only inside body */
  overflow-x: hidden;
  max-height: none !important; /* remove previous max-height */
}

/* optional: nicer scrollbar */
#bookmarksModal .map-cards-modal-body::-webkit-scrollbar {
  width: 10px;
}
#bookmarksModal .map-cards-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}




/* ✅ Force ALL Bootstrap modal backdrops to rgba(0,0,0,0.5) */
.modal-backdrop.show{
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* (optional) also cover non-.show state just in case */
.modal-backdrop{
  background-color: rgba(0, 0, 0, 0.5) !important;
}