/* Animation for spinner */
@keyframes spin-sm {
    to { 
        transform: rotate(360deg); 
    }
}

/* Drag over effect */
@keyframes drag-pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(20, 184, 166, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(20, 184, 166, 0);
    }
}

/* Step slide in animation */
@keyframes step-slide-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Step icon pulse when completed */
@keyframes step-completed-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Result card slide in animation */
@keyframes result-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Result icon bounce in animation */
@keyframes result-icon-bounce {
    0% {
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/* History row fade in */
@keyframes history-row-fade {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive styles */
@media (max-width: 576px) {
    .container-upload-form {
        max-width: 100%;
        padding: 0 1rem;
    }

    .drop-zone {
        padding: 2rem 1rem;
    }

    .result-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-content {
        margin-left: 0;
    }

    .error-checks-list {
        margin-left: 0;
    }

    .stats-row {
        flex-direction: column;
        gap: 1rem;
    }

    .upload-header h1 {
        font-size: 1.5rem;
    }
}