/* primitives/drag.css
   Neutral base styles for the generic Drag primitive.
   Uses the "draggable-" prefix. Question-types may override within their own scope.
*/

.draggable-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  min-height: 240px;
  margin: 12px auto;
  background: #f8fafc;
  border: 1px solid #e6e9ee;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(16,24,40,0.02);
}

.draggable-handle {
  position: absolute; /* we position via transform for performance, but keep absolute for layout sanity */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #60a5fa;
  box-shadow: 0 8px 24px rgba(96,165,250,0.12);
  cursor: grab;
  outline: none;
  will-change: transform;
  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.draggable-handle:focus {
  box-shadow: 0 6px 18px rgba(14,165,233,0.18);
  border-color: #0ea5e9;
}

.draggable-handle:active,
.draggable-handle.draggable-handle-dragging {
  cursor: grabbing;
  box-shadow: 0 12px 28px rgba(96,165,250,0.24);
  transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) scale(1.02);
}

.draggable-handle-correct {
  border-color: #10b981 !important;
  background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02));
  box-shadow: 0 8px 20px rgba(16,185,129,0.06);
}

.draggable-handle-incorrect {
  border-color: #ef4444 !important;
  background: linear-gradient(180deg, rgba(239,68,68,0.04), rgba(239,68,68,0.02));
  box-shadow: 0 8px 20px rgba(239,68,68,0.04);
}

/* Optional grid helper (question-type may add background) */
.draggable-container-grid {
  background-image:
    linear-gradient(#e6e9ee 1px, transparent 1px),
    linear-gradient(90deg, #e6e9ee 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Smaller screens tweaks */
@media (max-width: 420px) {
  .draggable-handle {
    width: 32px;
    height: 32px;
  }
}