/* ============================================================
 * DURUPRINT – Direkt-Canvas-Editor
 * Direkte Auswahl, Drag, Skalierung, Rotation, Lock & Delete
 * ============================================================ */

#holocard-editors .dp-canvas-addbar {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

#holocard-editors .dp-add-text,
#holocard-editors .dp-add-image-label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.35rem .7rem;
  border:1px solid #111;
  border-radius:5px;
  background:#fff;
  color:#111;
  font-size:.86rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
}

#holocard-editors .dp-add-text:hover,
#holocard-editors .dp-add-image-label:hover {
  background:#111;
  color:#fff;
}

#holocard-editors .dp-add-image-label.is-uploading {
  opacity:.6;
  pointer-events:none;
}

#holocard-editors .dp-canvas-hint {
  font-size:.78rem;
  line-height:1.4;
  color:#666;
}

/* Die eigentliche Bearbeitungsfläche liegt direkt auf der Kartenvorderseite. */
.holocard-preview .ec-face--front {
  position:absolute;
}

.dp-canvas-layer {
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
  transform-style:preserve-3d;
}

.dp-canvas-item {
  position:absolute;
  box-sizing:border-box;
  min-width:10px;
  min-height:10px;
  transform-origin:center center;
  pointer-events:auto;
  touch-action:none;
  cursor:move;
  user-select:none;
  outline:0 solid transparent;
}

.dp-canvas-item[hidden] {
  display:none !important;
}

.dp-canvas-item.is-selected {
  outline:1.5px dashed #159ee4;
  outline-offset:0;
}

.dp-canvas-item.is-locked {
  cursor:default;
}

.dp-canvas-item--text {
  display:flex;
  align-items:center;
  overflow:visible;
  white-space:normal;
}

.dp-canvas-item--text > .dp-canvas-text,
.dp-canvas-item--text > p {
  box-sizing:border-box;
  width:100%;
  height:100%;
  margin:0 !important;
  padding:0 !important;
  line-height:1.2;
  color:inherit;
  pointer-events:none;
  overflow:visible;
  white-space:pre-wrap;
  word-break:normal;
}

.dp-canvas-item--text.is-editing {
  cursor:text;
  outline-style:solid;
}

.dp-canvas-item--text.is-editing > .dp-canvas-text,
.dp-canvas-item--text.is-editing > p {
  pointer-events:auto;
  user-select:text;
  cursor:text;
}

.dp-canvas-item--image,
.dp-canvas-item--logo {
  display:flex;
  align-items:center;
  justify-content:center;
}

.dp-canvas-item--image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/*
 * Die bestehenden Logo-Slots sind in den Templates vollflächig. Sobald sie
 * im Canvas-Wrapper liegen, übernimmt der Wrapper Größe und Position.
 */
.dp-canvas-item--logo > .ec-logo-slot,
.dp-canvas-item--logo > .dp-emboss-logo-slot,
.dp-canvas-item--logo > .dp-gold-logo-slot,
.dp-canvas-item--logo > .dp-metal-logo-slot,
.dp-canvas-item--logo > .dp-logo-slot {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  transform:none !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none !important;
}

.dp-canvas-item--logo > .ec-logo-slot svg,
.dp-canvas-item--logo > .dp-emboss-logo-slot svg,
.dp-canvas-item--logo > .dp-gold-logo-slot svg,
.dp-canvas-item--logo > .dp-metal-logo-slot svg,
.dp-canvas-item--logo > .dp-logo-slot svg {
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  overflow:visible !important;
  pointer-events:none !important;
}

/* Vier Eckgriffe plus Rotationsgriff. */
.dp-canvas-handle {
  position:absolute;
  z-index:5;
  width:12px;
  height:12px;
  box-sizing:border-box;
  border:1px solid #777;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  pointer-events:auto;
  touch-action:none;
}

.dp-canvas-handle--nw { left:-6px; top:-6px; cursor:nwse-resize; }
.dp-canvas-handle--ne { right:-6px; top:-6px; cursor:nesw-resize; }
.dp-canvas-handle--sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.dp-canvas-handle--se { right:-6px; bottom:-6px; cursor:nwse-resize; background:#d8edf8; }

.dp-canvas-rotate-stem {
  position:absolute;
  left:50%;
  bottom:-28px;
  width:1px;
  height:20px;
  background:#159ee4;
  transform:translateX(-50%);
  pointer-events:none;
}

.dp-canvas-handle--rotate {
  left:50%;
  bottom:-39px;
  transform:translateX(-50%);
  cursor:grab;
  border-color:#159ee4;
}

.dp-canvas-handle--rotate:active { cursor:grabbing; }

.dp-canvas-item:not(.is-selected) > .dp-canvas-handle,
.dp-canvas-item:not(.is-selected) > .dp-canvas-rotate-stem,
.dp-canvas-item.is-locked > .dp-canvas-handle,
.dp-canvas-item.is-locked > .dp-canvas-rotate-stem {
  display:none;
}

/* Werkzeugleiste wird in body als fixed overlay gerendert. */
.dp-canvas-floating-toolbar {
  position:fixed;
  z-index:2147482000;
  display:none;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(255,255,255,.97);
  box-shadow:0 4px 18px rgba(0,0,0,.13);
  backdrop-filter:blur(6px);
}

.dp-canvas-floating-toolbar.is-visible { display:flex; }

.dp-canvas-floating-toolbar button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#111;
  cursor:pointer;
}

.dp-canvas-floating-toolbar button:hover {
  background:#f0f0f0;
}

.dp-canvas-floating-toolbar button:disabled {
  opacity:.35;
  cursor:not-allowed;
}

.dp-canvas-floating-toolbar button svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.dp-canvas-floating-toolbar .dp-canvas-lock-btn[data-locked="1"] {
  background:#edf7ed;
}

.dp-canvas-selection-label {
  display:none;
  margin-left:.25rem;
  font-size:.78rem;
  color:#666;
}

@media (max-width: 640px) {
  .dp-canvas-handle {
    width:14px;
    height:14px;
  }
  .dp-canvas-handle--nw { left:-7px; top:-7px; }
  .dp-canvas-handle--ne { right:-7px; top:-7px; }
  .dp-canvas-handle--sw { left:-7px; bottom:-7px; }
  .dp-canvas-handle--se { right:-7px; bottom:-7px; }
}


/* Dynamisch hinzugefügte Texte erscheinen zusätzlich im bestehenden Texteditor. */
#holocard-editors .dp-custom-text-fields {
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

#holocard-editors .dp-custom-text-field {
  display:flex;
  flex-direction:column;
  gap:.15rem;
  font-size:.9rem;
}

#holocard-editors .dp-custom-text-label {
  font-weight:600;
}

#holocard-editors .dp-custom-text-input {
  width:100%;
  box-sizing:border-box;
  border:1px solid #ddd;
  padding:.4rem .5rem;
  border-radius:4px;
  background:#fff;
}

#holocard-editors .dp-custom-text-field.is-selected .dp-custom-text-input {
  border-color:#159ee4;
  box-shadow:0 0 0 1px rgba(21,158,228,.2);
}

#holocard-editors .dp-custom-text-field.is-locked {
  opacity:.62;
}

#holocard-editors .dp-custom-text-input:disabled {
  cursor:not-allowed;
  background:#f4f4f4;
}