/* Admin cards */
.mcf-instance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(780px, 1fr));
  gap: 18px;
}
.mcf-instance-card {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  overflow: hidden;
}
.mcf-card-head {
  padding: 12px 14px;
  border-bottom: 1px solid #dcdcde;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.mcf-card-title { font-weight: 600; }
.mcf-card-sub code { background: #f6f7f7; padding: 2px 6px; border: 1px solid #ccd0d4; border-radius: 4px; margin-right: 6px; }
.mcf-card-body { padding: 12px 14px; }
.mcf-card-foot { padding: 12px 14px; border-top: 1px solid #dcdcde; display: flex; gap: 8px; justify-content: flex-end; }

.mcf-add-card.is-disabled { opacity: .5; pointer-events: none; }

/* Tabs */
.mcf-tabs { padding: 0 14px; border-bottom: 1px solid #dcdcde; }
.mcf-tabs .nav-tab { margin: 0 4px -1px 0; }
.mcf-tab-panel { display: none; padding: 14px; }
.mcf-tab-panel.nav-tab-active { display: block; }

/* Code chip */
.mcf-code { display: inline-block; padding: 8px 10px; background: #f6f7f7; border: 1px solid #ccd0d4; border-radius: 4px; }

/* Front UI (existing styles trimmed) */
.mcf-wrap { position: relative; }
.mcf-step[data-step]::before {
  content: attr(data-step);
  display: inline-block;
  background: #2271b1; color: #fff; font-weight: 600; font-size: 12px;
  padding: 2px 8px; border-radius: 12px; margin-right: 8px; position: relative; top: -2px;
}
.mcf-canvas-wrap { position: relative; margin: 12px 0; }
.mcf-canvas-wrap canvas { width: 100%; height: auto; display: block; border-radius: 8px; }

.mcf-float-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;              /* ⬅ parked at the bottom-right */
  top: auto;                 /* ⬅ ensure top is not used */
  background: rgba(255,255,255,.96);
  border: 1px solid #dcdcde;
  border-radius: 8px;
  padding: 10px;
  display: none;             /* gets .visible after upload */
  min-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  cursor: grab;              /* for drag affordance */
}
.mcf-float-controls.visible { display: block; }
.mcf-float-controls:active { cursor: grabbing; }
.mcf-float-controls label { display: block; font-size: 12px; margin-bottom: 6px; }

/* keep it off the edges on very small screens */
@media (max-width: 480px) {
  .mcf-float-controls { right: 8px; bottom: 8px; min-width: 200px; }
}

/* Drag handle inside the floating controls */
.mcf-float-controls { cursor: default; }
.mcf-float-controls__handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-weight: 600;
  color: #111;
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid #e5e5e5;
  padding: 6px 10px;
  border-radius: 8px 8px 0 0;
  margin: -10px -10px 8px -10px; /* spans panel width */
}
.mcf-float-controls__handle:active { cursor: grabbing; }



.mcf-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mcf-actions .mcf-btn { background: #2271b1; border-color: #2271b1; color:#fff; }

/* Responsive tweaks */
@media (min-width: 960px) {
  .mcf-instance-grid { grid-template-columns: 1fr; }
}

/* Step layout */
.mcf-step {
  margin: 14px 0 18px;
}
.mcf-badge {
  display: inline-block;
  background: #2271b1;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 14px;
  margin-right: 12px;        /* ← space between badge and title */
  vertical-align: middle;
}
.mcf-step-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 8px;
}
.mcf-field {
  margin-top: 10px;          /* ← space before dropdown/button/inputs */
}

/* Floating controls panel (already bottom-right) */
.mcf-float-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  top: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid #dcdcde;
  border-radius: 8px;
  padding: 10px;
  display: none;
  min-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  cursor: default;
}
.mcf-float-controls.visible { display: block; }

/* Drag handle so sliders remain interactive */
.mcf-float-controls__handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-weight: 600;
  color: #111;
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid #e5e5e5;
  padding: 6px 10px;
  border-radius: 8px 8px 0 0;
  margin: -10px -10px 8px -10px;
}
.mcf-float-controls__handle:active { cursor: grabbing; }

.mcf-float-controls label {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
}

/* Actions row */
.mcf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.mcf-actions .mcf-btn {
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}

/* Responsive niceties */
@media (max-width: 480px) {
  .mcf-float-controls { right: 8px; bottom: 8px; min-width: 200px; }
  .mcf-step-title { display: inline-block; margin-top: 6px; }
}

.mcf-panel-row { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* Optional: a tiny divider look when switching panels */
.mcf-panel { animation: mcfFade .15s ease-in; }
@keyframes mcfFade { from { opacity: .0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }