/* Drag and drop animations for Reconciliation Page */

/* Dragging element animation */
.dragging {
    opacity: 0.5;
    transform: scale(1.02) rotate(0.2deg);
    box-shadow: 0 14px 28px rgba(30, 30, 30, 0.18);
    cursor: grabbing !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, opacity 0.2s;
}

/* Drop zone when hovering with dragged item */
.drop-zone-hover {
    border-color: #28a745;
    background: #e6f4ea;
    transform: translateZ(0) scale(1.01);
}

/* Drop bounce animation */
@keyframes dropBounce {
    0% {
        transform: translateY(-2px) scale(0.99);
    }

    50% {
        transform: translateY(2px) scale(1.01);
    }

    80% {
        transform: translateY(-1px) scale(1.0);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.drop-bounce {
    animation: dropBounce 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Fade in animation for reconciliation items */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.box {
    animation: fadeInSlideUp 0.3s ease-out;
}

/* Smooth transition for cards */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover:not(.dragging) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active draggable cursor */
[draggable="true"]:not(.dragging) {
    cursor: grab;
}

/* Enhanced visual feedback for delete button */
.delete.is-small {
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.delete.is-small:hover {
    transform: scale(1.15);
}

/* Shrinking animation when payment hovers over partner area */
.obligation-shrinking {
    transform: scale(0.85) translateX(-10px);
    opacity: 0.7;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.3s ease;
    filter: brightness(0.95);
}