/* Custom styles for AudioShrinker */

/* Quality selection cards */
.quality-card {
    display: block;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background-color: white;
}

.quality-card:hover {
    border-color: #818cf8;
    background-color: #fafafa;
}

/* Style for selected quality */
.quality-option input[type="radio"]:checked + label.quality-card {
    border-color: #4f46e5;
    background-color: #eef2ff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.quality-card span {
    display: block;
    margin: 2px 0;
}

/* Platform preset buttons */
.platform-btn {
    padding: 8px 16px;
    background-color: #f3f4f6;
    color: #374151;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-block;
}

.platform-btn:hover {
    background-color: #e5e7eb;
}

.platform-btn.active {
    background-color: #eef2ff;
    color: #4f46e5;
    border-color: #4f46e5;
}

.free-compression-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.btn-primary.hidden {
    display: none;
}

.alert {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Upload area styling */
#uploadArea.dragover {
    @apply border-indigo-500 bg-indigo-50;
}

/* Smooth transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

/* File type icons */
.file-icon {
    @apply w-8 h-8 flex items-center justify-center rounded-lg text-white font-bold text-xs;
}

.file-icon-mp3 { @apply bg-blue-500; }
.file-icon-wav { @apply bg-green-500; }
.file-icon-m4a { @apply bg-purple-500; }
.file-icon-flac { @apply bg-red-500; }
.file-icon-ogg { @apply bg-orange-500; }
.file-icon-wma { @apply bg-pink-500; }
.file-icon-aac { @apply bg-indigo-500; }

/* Progress bar animation */
#progressBar {
    transition: width 0.5s ease-out;
}

/* Success animation */
@keyframes checkmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#successArea svg {
    animation: checkmark 0.5s ease-out;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .quality-card {
        @apply p-2 text-xs;
    }
    
    .platform-btn {
        @apply px-3 py-1.5 text-xs;
    }
}

/* Tooltip styles */
.tooltip {
    @apply absolute z-10 bg-gray-900 text-white text-xs rounded py-1 px-2 pointer-events-none;
    @apply opacity-0 transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Print styles */
@media print {
    header, footer, #uploadArea {
        display: none !important;
    }
}