/* Drag to swap (see drag.js). Shared by the planner and the kitchen screen. */
[data-slot] img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
[data-slot] { position: relative; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.drag-ghost { z-index: 3000; pointer-events: none; opacity: .92; transform: rotate(-2deg) scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,.25); border-radius: 12px; }
.drag-src { opacity: .35; }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* Every slot the picked-up meal can go to: moving dashed border ("marching ants") in the brand orange */
.drop-can::after, .drop-ok::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
    --ant: #D85A30; --w: 2px;
    background-image:
        linear-gradient(90deg, var(--ant) 50%, transparent 50%), linear-gradient(90deg, var(--ant) 50%, transparent 50%),
        linear-gradient(0deg, var(--ant) 50%, transparent 50%), linear-gradient(0deg, var(--ant) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 12px var(--w), 12px var(--w), var(--w) 12px, var(--w) 12px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: marchingAnts .5s linear infinite;
}
/* The one you're hovering over right now: thicker border and a light orange wash */
.drop-ok::after { --w: 4px; background-color: rgba(216, 90, 48, .14); }
.drop-no { opacity: .45; }
@keyframes marchingAnts {
    to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}