/* Editor & modal styles moved from inline to external CSS */
.maria-editor-controls { position: relative; margin-top: 16px; }
#pointsPanel { margin-top: 12px; display: none; }
.point-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #ffffff; padding: 16px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; }
.modal-input { width: 100%; margin-top: 8px; box-sizing: border-box; }
.modal-section { margin-top: 8px; }
.add-descriptor-btn { margin-top: 8px; }
.modal-actions { margin-top: 12px; text-align: right; }
.btn-spacing { margin-left: 8px; }
.cartography-description-wrapper { margin-top: 12px; }
#cartographyDescription { width: 100%; min-height: 80px; box-sizing: border-box; }
/* Small responsive adjustments */
@media (max-width: 768px) {
  .point-modal { width: 90%; left: 50%; }
}
/* Utility to hide elements (used by JS via class 'hidden') */
.hidden { display: none !important; }

/* Ensure form controls are readable (avoid white text) */
.point-modal input,
.point-modal select,
.point-modal textarea,
.modal-input,
#cartographyDescription,
#pointsPanel input,
#pointsPanel select,
#pointsPanel textarea {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #dcdcdc !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.point-modal input::placeholder,
.modal-input::placeholder,
#cartographyDescription::placeholder {
  color: #888 !important;
}

/* Make points panel hidden by default; editor toggles it */
#pointsPanel { display: none; }

/* Hide entire editor UI for pages that disable the editor */
.maria-editor-hidden .maria-editor-controls,
.maria-editor-hidden #pointsPanel,
.maria-editor-hidden #pointModal,
.maria-editor-hidden .cartography-description-wrapper,
.maria-editor-hidden .floating-controls {
  display: none !important;
  visibility: hidden !important;
}