/* Disable native browser drag for common elements */
img, a, button, [draggable="false"] {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* Prevent default dragstart events */
.draggable, .draggable * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* Allow text selection in input fields */
.draggable input,
.draggable textarea,
.draggable [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

/* Drag handle - hidden since entire element is draggable */
.drag-handle {
  display: none;
}

/* Draggable items - entire element is draggable */
.draggable {
  cursor: grab;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.draggable:active {
  cursor: grabbing;
}

/* Interactive elements inside draggables should show appropriate cursors */
.draggable button,
.draggable a,
.draggable .btn,
.draggable input,
.draggable textarea,
.draggable select {
  cursor: pointer;
}

.draggable input[type="text"],
.draggable input[type="number"],
.draggable textarea {
  cursor: text;
}

/* Sole items in a group are not draggable */
.sole-item {
  cursor: default !important;
}

.sole-item:active {
  cursor: default !important;
}

/* Groups/items with children being edited are not draggable */
.editing-child {
  cursor: default !important;
  pointer-events: none; /* Prevent Sortable from detecting it */
}

/* But allow pointer events on child elements (inputs, buttons) */
.editing-child * {
  pointer-events: auto;
}

/* Source element while dragging - Shopify style */
.draggable-source--is-dragging {
  color: #3D9970; /* Klop primary green */
  background-color: rgba(61, 153, 112, 0.05); /* Light green tint */
  border-color: rgba(61, 153, 112, 0.3);
  opacity: 0.6;
  cursor: grabbing !important;
}

/* Show grabbing cursor everywhere during drag */
.draggable--is-dragging,
.draggable--is-dragging * {
  cursor: grabbing !important;
}

/* Next item separator becomes visible when dragging */
.draggable-source--is-dragging + .draggable {
  border-top-color: rgba(61, 153, 112, 0.5);
}

/* Mirror element being dragged - Shopify style with Klop colors */
.draggable-mirror {
  z-index: 9999;
  background-color: #3D9970; /* Klop primary green */
  color: white;
  transform: scale(1.025);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  border-radius: 0.5rem;
}

/* Hide borders/separators on mirror */
.draggable-mirror::before,
.draggable-mirror::after {
  display: none;
}

/* Drag handle in mirror */
.draggable-mirror .drag-handle {
  color: white;
  opacity: 0.8;
}

/* Placed/dropped animation - Shopify style */
.draggable-source--placed {
  animation: placed-pulse 0.4s ease;
}

@keyframes placed-pulse {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(61, 153, 112, 0.1);
  }
}

/* Container over state - shows valid drop zone */
.draggable-container--over {
  background-color: rgba(61, 153, 112, 0.03);
  border-color: rgba(61, 153, 112, 0.2);
}

/* Sortable-specific: placeholder showing where item will drop */
.draggable--over {
  background-color: rgba(61, 153, 112, 0.12);
  border: 2px dashed rgba(61, 153, 112, 0.5);
  border-radius: 0.375rem;
  min-height: 3.5rem;
}

/* Alternative placeholder styles that Shopify uses */
.sortable-placeholder {
  background-color: rgba(61, 153, 112, 0.12);
  border: 2px dashed rgba(61, 153, 112, 0.5);
  border-radius: 0.375rem;
  opacity: 1;
}

/* Drop indicator / ghost element */
.draggable-source--placed,
.sortable-ghost {
  background-color: rgba(61, 153, 112, 0.12);
  border: 2px dashed rgba(61, 153, 112, 0.5);
  border-radius: 0.375rem;
  opacity: 1;
}