/* === MAGNETIC SNAPPING STYLES === */

.snap-zone {
    position: absolute;
    background: transparent;
    border: 2px dashed var(--color-primary-base);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: calc(var(--z-dragging) - 1);
}

.snap-zone.potential {
    opacity: 0.8;
    background: transparent;
    border-style: dotted;
    border-color: var(--color-primary-base);
}

.snap-zone.potential::after {
    display: none;
}

.snap-zone.active {
    opacity: 1;
    background: rgba(59, 130, 246, 0.1);
    border-style: solid;
    border-color: var(--color-primary-base);
    animation: snapPulse 1.5s ease-in-out infinite;
}

@keyframes snapPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

@keyframes fadeInHint {
    from { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.8); 
    }
    to { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); 
    }
}

.snap-indicator {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-primary-base);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    z-index: calc(var(--z-dragging) + 10);
    animation: fadeInHint 0.3s ease-out;
}

.snap-indicator.active {
    display: block;
}

/* === DRAGGING ENHANCEMENTS === */
.recipe-card.dragging { 
    cursor: grabbing !important; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important; 
    transform: scale(1.03) !important; 
    z-index: var(--z-dragging) !important; 
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; 
}

.recipe-card.front-card { 
    z-index: calc(var(--z-card) + 1); 
}

/* === SNAP ZONE POSITIONING HELPERS === */
.snap-zone-left {
    border-left: 2px dashed var(--color-primary-base);
}

.snap-zone-right {
    border-right: 2px dashed var(--color-primary-base);
}

.snap-zone-top {
    border-top: 2px dashed var(--color-primary-base);
}

.snap-zone-bottom {
    border-bottom: 2px dashed var(--color-primary-base);
}

/* === SNAP ZONE VISUAL FEEDBACK === */
.snap-zone.potential.snap-zone-left,
.snap-zone.potential.snap-zone-right {
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%);
}

.snap-zone.potential.snap-zone-top,
.snap-zone.potential.snap-zone-bottom {
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%);
}

/* === SNAP ZONE ANIMATIONS === */
.snap-zone.potential {
    animation: snapZonePulse 2s ease-in-out infinite;
}

@keyframes snapZonePulse {
    0%, 100% { 
        opacity: 0.4;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* === SNAP ZONE RESPONSIVE === */
@media (max-width: 768px) {
    .snap-zone {
        border-width: 1px;
    }
    
    .snap-indicator {
        font-size: 10px;
        padding: 2px 6px;
    }
}

.card-flavor-pips .flavor-pip:hover { transform: scale(1.25) translateX(0px) !important; z-index: calc(var(--z-card) + 50) !important; position: relative; }