/* Small styles for the Map Picker modal and pick-on-map button.
   Keep these minimal and scoped so they don't interfere with the rest of the UI.
*/

/* Modal backdrop */
.lumora-map-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

/* Modal window */
.lumora-map-modal {
  width: 90%;
  max-width: 900px;
  height: 80vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Map container fills available space */
.lumora-map-canvas {
  flex: 1 1 auto;
}

/* Topbar in modal */
.lumora-map-topbar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.lumora-map-topbar .lumora-search {
  flex: 1 1 auto;
}

/* Footer actions */
.lumora-map-actions {
  padding: 10px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Pick on map button (inline near address input) */
.button-pick-on-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #2b6cb0;
  background: #3182ce;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}
.button-pick-on-map.secondary {
  background: transparent;
  color: #2b6cb0;
  border-color: #cfe8ff;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .lumora-map-modal { width: 98%; height: 85vh; }
  .button-pick-on-map { font-size: 0.9rem; padding: 6px 8px }
}