/* --- CDesigner layout tune: center canvas + toolbar, smaller gaps --- */

/* Center the editing canvas (Cropper.js container is commonly used) */
#cdesigner .cropper-container,
.cdesigner .cropper-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reduce general padding/margins in the button wrapper */
.eg-button, 
#cdesigner .eg-button, 
.cdesigner .eg-button {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the actions wrapper shrinks to content and is centered */
#actions,
#cdesigner #actions,
.cdesigner #actions {
  width: 100%;
  max-width: 100%;
  text-align: center !important;
  margin: 8px auto 12px !important;
  padding: 0 !important;
}

/* Center the toolbar horizontally under the canvas */
#actions .docs-buttons,
#cdesigner #actions .docs-buttons,
.cdesigner #actions .docs-buttons {
  display: inline-flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Buttons: compact spacing and inline sizing */
#actions .docs-buttons > a,
#actions .docs-buttons > button,
#cdesigner #actions .docs-buttons > a,
#cdesigner #actions .docs-buttons > button,
.cdesigner #actions .docs-buttons > a,
.cdesigner #actions .docs-buttons > button {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  float: none !important;
  white-space: nowrap !important;
  margin: 0 6px 6px 0 !important;
  padding: 6px 10px !important;
}

/* Icon stack inside the buttons */
#actions .docs-buttons .fa-stack {
  line-height: 1 !important;
  margin-right: .25rem !important;
}

/* Tighten outer whitespace around the whole designer panel if present */
#cdesigner .cdesigner-main,
.cdesigner .cdesigner-main {
  padding: 8px 0 !important;
  margin: 0 auto !important;
}

/* Mobile: keep centered, allow wrap */
@media (max-width: 576px) {
  #actions .docs-buttons,
  #cdesigner #actions .docs-buttons,
  .cdesigner #actions .docs-buttons {
    justify-content: center !important;
    gap: 6px !important;
  }
}