/* primitives/drop.css
   Neutral base styles for the DropZone primitive.
   Uses the "droppable-" prefix. Question-types may override within their own scope.
*/

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

.droppable-zone {
  position: absolute;
  background: rgba(59,130,246,0.08); /* soft blue */
  border: 2px dashed #60a5fa;
  border-radius: 8px;
  transition: box-shadow 120ms ease, transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.droppable-zone-hover {
  background: rgba(96,165,250,0.14);
  border-color: #3b82f6;
  box-shadow: 0 10px 28px rgba(59,130,246,0.16);
  transform: translateY(-1px);
}

.droppable-zone-active {
  background: rgba(16,185,129,0.10);
  border-color: #10b981;
}

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

.droppable-zone-incorrect {
  background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.03));
  border-color: #ef4444 !important;
  box-shadow: 0 8px 20px rgba(239,68,68,0.06);
}

@media (max-width: 420px) {
  .droppable-container {
    min-height: 200px;
  }
}