/*
 * Davo button system
 *
 * Base: .dpe-button
 * Variants: --primary, --secondary, --neutral, --danger, --icon, --round
 */

:root {
  --dpe-button-font: "Montserrat", "Inter", sans-serif;
  --dpe-button-text: #000;
  --dpe-button-primary: #f6af2f;
  --dpe-button-hover: #f6af2f;
  --dpe-button-surface: #edede9;
  --dpe-button-danger: #dc3545;
  --dpe-button-danger-hover: #b02a37;
  --dpe-button-focus: #2b6cb0;
  --dpe-button-radius: 30px;
  --dpe-button-height: 35px;
  --dpe-button-shadow:
    -2px -2px 2px rgba(255, 255, 255, 0.8),
    2px 2px 2px rgba(0, 0, 0, 0.8);
  --dpe-button-shadow-pressed:
    inset -2px -2px 2px rgba(255, 255, 255, 0.7),
    inset 2px 2px 2px rgba(0, 0, 0, 0.55);

  /* Aliases voor bestaande editorregels. */
  --btn-orange: var(--dpe-button-primary);
  --btn-green: var(--dpe-button-hover);
}

.dpe-button,
.dpe-editor-root .btn,
.dpe-editor-root .tool-btn,
.dpe-editor-root .control-btn,
.dpe-editor-root .canvas-fit-btn,
.dpe-editor-root .canvas-crop-btn,
.dpe-editor-root .photo-tile-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 15px !important;
  border: 0 !important;
  border-radius: var(--dpe-button-radius) !important;
  background: var(--dpe-button-primary) !important;
  background-image: none !important;
  color: var(--dpe-button-text) !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: var(--dpe-button-shadow) !important;
  transform: translateY(0) !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.dpe-button {
  min-height: var(--dpe-button-height);
  gap: 8px;
  line-height: 1.2;
}

.dpe-button--primary,
.dpe-editor-root .btn-primary,
.dpe-editor-root .btn-secondary {
  background: var(--dpe-button-primary) !important;
  color: var(--dpe-button-text) !important;
}

.dpe-button--secondary {
  border: 1px solid var(--dpe-button-primary);
  background: transparent;
  color: var(--dpe-button-text);
  box-shadow: none;
}

.dpe-button--neutral,
.dpe-editor-root .tool-btn--toggle,
.dpe-editor-root .canvas-circle-btn,
.dpe-editor-root .canvas-fit-btn,
.dpe-editor-root .canvas-crop-btn,
.dpe-editor-root .photo-tile-btn {
  background: var(--dpe-button-primary) !important;
  color: var(--dpe-button-text) !important;
}

.dpe-button--danger {
  background: var(--dpe-button-danger);
  color: #fff;
  box-shadow: var(--dpe-button-shadow);
}

.dpe-button--icon {
  width: var(--dpe-button-height);
  padding: 0 !important;
}

.dpe-button--round {
  width: var(--dpe-button-height);
  padding: 0 !important;
  border-radius: 50% !important;
}

.dpe-editor-root .control-btn,
.dpe-editor-root .canvas-circle-btn {
  padding: 0 !important;
  border-radius: 50% !important;
}

.dpe-button:hover,
.dpe-editor-root .btn:hover,
.dpe-editor-root .btn-primary:hover,
.dpe-editor-root .btn-secondary:hover,
.dpe-editor-root .tool-btn:hover,
.dpe-editor-root .tool-btn--toggle:hover,
.dpe-editor-root .control-btn:hover,
.dpe-editor-root .canvas-fit-btn:hover,
.dpe-editor-root .canvas-crop-btn:hover,
.dpe-editor-root .photo-tile-btn:hover {
  background: var(--dpe-button-primary) !important;
  background-image: none !important;
  color: var(--dpe-button-text) !important;
  box-shadow: var(--dpe-button-shadow) !important;
  transform: translateY(-1px) !important;
}

.dpe-button--secondary:hover {
  border-color: var(--dpe-button-hover);
}

.dpe-button--danger:hover {
  background: var(--dpe-button-danger-hover);
  color: #fff;
}

.dpe-button:active,
.dpe-editor-root .btn:active,
.dpe-editor-root .tool-btn:active,
.dpe-editor-root .tool-btn--toggle:active,
.dpe-editor-root .tool-btn--toggle.is-active,
.dpe-editor-root .tool-btn--toggle[aria-pressed="true"],
.dpe-editor-root .control-btn:active,
.dpe-editor-root .canvas-fit-btn:active,
.dpe-editor-root .canvas-crop-btn:active,
.dpe-editor-root .photo-tile-btn:active,
.dpe-editor-root .photo-tile-btn.active {
  background: var(--dpe-button-primary) !important;
  background-image: none !important;
  color: var(--dpe-button-text) !important;
  box-shadow: var(--dpe-button-shadow-pressed) !important;
  transform: translateY(1px) !important;
}

.dpe-button:focus-visible,
.dpe-editor-root .btn:focus-visible,
.dpe-editor-root .tool-btn:focus-visible,
.dpe-editor-root .control-btn:focus-visible,
.dpe-editor-root .canvas-fit-btn:focus-visible,
.dpe-editor-root .canvas-crop-btn:focus-visible,
.dpe-editor-root .photo-tile-btn:focus-visible {
  outline: 3px solid var(--dpe-button-focus);
  outline-offset: 2px;
}

.dpe-button:disabled,
.dpe-button[aria-disabled="true"],
.dpe-editor-root .btn:disabled,
.dpe-editor-root .tool-btn:disabled,
.dpe-editor-root .control-btn:disabled,
.dpe-editor-root .canvas-fit-btn:disabled,
.dpe-editor-root .canvas-crop-btn:disabled,
.dpe-editor-root .photo-tile-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none !important;
}

.dpe-button--block {
  width: 100%;
}

.dpe-editor-root .shape-fill-none-btn,
.dpe-editor-root .shape-fill-none-btn:hover,
.dpe-editor-root .shape-fill-none-btn:active,
.dpe-editor-root .shape-fill-none-btn.is-active {
  width: 20px !important;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  padding: 0 !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(135deg, transparent 45%, #f00 45%, #f00 55%, transparent 55%) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.dpe-editor-root .shape-fill-none-btn {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dpe-editor-root .shape-fill-none-btn.is-active {
  outline-color: var(--dpe-button-primary);
}

/* Neutrale knoppen in de lagen- en AI-drawers. */
.dpe-editor-root #layer-move-up,
.dpe-editor-root #layer-move-down,
.dpe-editor-root #layer-delete,
.dpe-editor-root #remove-background,
.dpe-editor-root #upscale-image,
.dpe-editor-root #colorize-image,
.dpe-editor-root #nb-bg-generate,
.dpe-editor-root #nb-oilpaint-portrait,
.dpe-editor-root #nb-oilpaint-landscape,
.dpe-editor-root #nb-vaporwave-1,
.dpe-editor-root #nb-vaporwave-2,
.dpe-editor-root #aiml-oil,
.dpe-editor-root #aiml-watercolor,
.dpe-editor-root #aiml-pastel-chalk,
.dpe-editor-root #aiml-cartoon,
.dpe-editor-root #nb-pencil,
.dpe-editor-root #nb-charcoal,
.dpe-editor-root #sepia-filter,
.dpe-editor-root #vintage-filter,
.dpe-editor-root #grayscale-filter,
.dpe-editor-root #invert-filter,
.dpe-editor-root #clear-filters,
.dpe-editor-root #shape-rect-btn,
.dpe-editor-root #shape-circle-btn,
.dpe-editor-root #shape-ellipse-btn,
.dpe-editor-root #shape-clip-photo-btn,
.dpe-editor-root #color-gradient-picker {
  background: var(--dpe-button-surface) !important;
  background-image: none !important;
}

/* Canvasbediening blijft neutraal; iconen staan als losse afbeeldingen in de knop. */
.dpe-editor-root #canvas-controls button {
  background-color: var(--dpe-button-surface) !important;
}

/* Tekst toevoegen en uitlijnen gebruiken dezelfde neutrale knopinteractie. */
.dpe-editor-root #add-text-top,
.dpe-editor-root #text-align-left-top,
.dpe-editor-root #text-align-center-top,
.dpe-editor-root #text-align-right-top,
.dpe-editor-root #text-bold-top,
.dpe-editor-root #text-italic-top,
.dpe-editor-root #text-underline-top {
  background-color: var(--dpe-button-surface) !important;
  color: var(--dpe-button-text) !important;
  box-shadow: var(--dpe-button-shadow) !important;
  transform: translateY(0) !important;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.dpe-editor-root #add-text-top:hover,
.dpe-editor-root #text-align-left-top:hover,
.dpe-editor-root #text-align-center-top:hover,
.dpe-editor-root #text-align-right-top:hover,
.dpe-editor-root #text-bold-top:hover,
.dpe-editor-root #text-italic-top:hover,
.dpe-editor-root #text-underline-top:hover {
  background-color: var(--dpe-button-surface) !important;
  box-shadow: var(--dpe-button-shadow) !important;
  transform: translateY(-2px) !important;
}

.dpe-editor-root #add-text-top:active,
.dpe-editor-root #text-align-left-top:active,
.dpe-editor-root #text-align-center-top:active,
.dpe-editor-root #text-align-right-top:active,
.dpe-editor-root #text-bold-top:active,
.dpe-editor-root #text-italic-top:active,
.dpe-editor-root #text-underline-top:active {
  background-color: var(--dpe-button-surface) !important;
  transform: translateY(2px) !important;
}

.dpe-editor-root #text-bold-top.active,
.dpe-editor-root #text-italic-top.active,
.dpe-editor-root #text-underline-top.active,
.dpe-editor-root #text-bold-top[aria-pressed="true"],
.dpe-editor-root #text-italic-top[aria-pressed="true"],
.dpe-editor-root #text-underline-top[aria-pressed="true"] {
  background-color: var(--dpe-button-surface) !important;
  box-shadow: var(--dpe-button-shadow-pressed) !important;
  transform: translateY(2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dpe-button,
  .dpe-editor-root .btn,
  .dpe-editor-root .tool-btn,
  .dpe-editor-root .control-btn,
  .dpe-editor-root .canvas-fit-btn,
  .dpe-editor-root .canvas-crop-btn,
  .dpe-editor-root .photo-tile-btn {
    transition: none;
  }
}