/* Custom styles for Bulk Image Optimizer */

/* Hide elements with x-cloak */
[x-cloak] {
    display: none !important;
}

/* Custom animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.3s ease-in-out;
}

/* Card hover effects */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Button states */
.btn-primary {
    @apply bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg;
    @apply hover:bg-blue-700 transition;
    @apply disabled:bg-gray-400 disabled:cursor-not-allowed;
}

.btn-success {
    @apply bg-green-600 text-white font-semibold py-3 px-6 rounded-lg;
    @apply hover:bg-green-700 transition;
}

.btn-danger {
    @apply bg-red-600 text-white font-semibold py-3 px-6 rounded-lg;
    @apply hover:bg-red-700 transition;
}

/* Form elements */
input[type="file"]::file-selector-button {
    @apply bg-gray-100 border border-gray-300 rounded px-4 py-2 mr-4;
    @apply hover:bg-gray-200 cursor-pointer transition;
}

/* Radio button custom styling */
input[type="radio"]:checked + div {
    @apply border-blue-500 bg-blue-50;
}

/* Status indicators */
.status-pending {
    @apply text-yellow-600 bg-yellow-100;
}

.status-processing {
    @apply text-blue-600 bg-blue-100;
}

.status-done {
    @apply text-green-600 bg-green-100;
}

.status-failed {
    @apply text-red-600 bg-red-100;
}

/* Code blocks */
code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}

/* Language switcher dropdown */
.lang-dropdown {
    @apply absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg py-2 z-50;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        @apply px-2;
    }
    
    h1 {
        @apply text-2xl;
    }
    
    .grid-cols-3 {
        @apply grid-cols-1;
    }
}