body{
  margin-top: 100px;
}
.builder-section {
  border: 1px dashed #ccc;
  padding: 15px;
  min-height: 100px;
}
.builder-section-container {
  position: relative;
}
.builder-section {
  border: 1px dashed #ccc;
  padding: 1rem;
  min-height: 5rem;
}

/* Section Controls */
.section-controls {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
  z-index: 5;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;      
}
.builder-section-container:hover .section-controls {
  opacity: 1;
  visibility: visible;
}


.builder-section-container:hover .add-section-btn {
  display: block;              /* block so it centers under the section */
}

.editor-panel {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 30vh;
  background: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  resize: vertical;
  overflow: hidden;
  z-index: 1000;
}


.editor-header {
  flex: 0 0 auto;
  padding: .5rem .75rem;
  border-bottom: 1px solid #eee;
}

.resize-handle {
  flex: 0 0 6px;
  cursor: ns-resize;
  background: #e0e0e0;
}

.split-handle {
  width: 6px;
  cursor: ew-resize;
  background: #e0e0e0;
  flex: 0 0 6px;
}

/* Optional hover effect so it’s obvious you can drag it */
.split-handle:hover {
  background: #c0c0c0;
}

.editor-header {
  padding: .5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  text-align: right;
  flex-shrink: 0;
}

.editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  
}

.editor-instance {
  flex: none;  
  border-right: 1px solid #ddd;
  height: 100%;
}

.editor-instance:last-child {
  border-right: none;
}

/* ensure CodeMirror fills its container */
.editor-instance .CodeMirror {
  height: 100%;
}
    

/* Backdrop stays the same */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1050;
}

/* Slide-in panel from the right now */
.section-options-drawer {
  position: fixed;
  top: 0;
  right: 0;                      /* lock to right edge */
  bottom: 0;
  width: 320px;
  max-width: 80%;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);  /* shadow on right side */
  transform: translateX(-100%);          /* hidden off-screen to the left */
  transition: transform 0.3s ease-in-out;
  z-index: 1055;
  display: flex;
  flex-direction: column;
}
.section-options-drawer-data {
  position: fixed;
  top: 0;
  right: 0;                      /* lock to right edge */
  bottom: 0;
  width: 450px;
  max-width: 80%;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);  /* shadow on right side */
  transform: translateX(-100%);          /* hidden off-screen to the left */
  transition: transform 0.3s ease-in-out;
  z-index: 1055;
  display: flex;
  flex-direction: column;
}

/* When “open”, slide it fully into view */
.section-options-drawer.open {
  transform: translateX(0);
}
.section-options-drawer-data.open {
  transform: translateX(0);
}


/* Header & content same as before */
.drawer-header {
  padding: 1rem;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* if you need to offset below a fixed navbar, use margin-top */
}

.drawer-header h5 {
  color: #000000;
}

.drawer-content {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}