/* Custom styles for MicroBrief */

/* Tool Card Styles */
.tool-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tool-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-0.25rem);
}

.tool-icon {
    @apply w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 transform transition-transform group-hover:scale-110;
}

/* Upload Zone Styles */
.upload-zone {
    @apply border-2 border-dashed border-gray-300 rounded-2xl p-12 text-center bg-gray-50 hover:border-primary hover:bg-primary/5 transition-all duration-300 cursor-pointer;
}

.upload-zone.dragover {
    border-color: #E5322D; /* Primary color */
    background-color: rgba(229, 50, 45, 0.05); /* Light primary bg */
    transform: scale(1.02);
}

/* Button Styles */
.btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white font-semibold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-secondary font-semibold py-3 px-8 rounded-xl transition-all duration-300;
}

/* Progress Bar */
.progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-bar-fill {
    @apply h-full bg-primary transition-all duration-300 ease-out;
}

/* File Item Styles */
.file-item {
    @apply flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-200;
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Loading Spinner */
.spinner {
    @apply w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .tool-card {
        @apply p-4;
    }

    .upload-zone {
        @apply p-8;
    }

    #result-section .bg-white {
        padding: 1.5rem;
    }
    
    #result-section h3 {
        font-size: 1.125rem;
    }
    
    #download-btn,
    #convert-another-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Sidebar Ad Transitions */
#left-sidebar-ad,
#right-sidebar-ad {
    transition: opacity 0.3s ease-in-out;
}

/* Mobile bottom ad safe area for notched phones */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Global Modal Alert */
#alert-overlay {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}