@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.upload-circle {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

body.dragover {
    background: rgba(0, 123, 255, 0.05);
}

body.dragover .upload-circle {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(0, 123, 255, 0.3);
}

.upload-icon-large:hover .upload-circle {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(0, 123, 255, 0.25);
}

.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
    .main-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }
    
    /* Remove sticky positioning on tablets */
    .fade-in[style*="sticky"] {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 768px) {
    .main-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }
    
    /* Disable scrolling and remove sticky positioning on mobile */
    body {
        overflow-x: hidden;
    }
    
    .fade-in[style*="sticky"] {
        position: static !important;
        top: auto !important;
    }
    
    /* Fix header overlap on mobile */
    .bg-primary .max-w-6xl {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 8px !important;
    }
    
    .bg-primary {
        height: auto !important;
        padding: 8px 0 !important;
    }
    
    /* Make email button smaller on mobile */
    .bg-primary a[href^="mailto:"] {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
    
    /* Fix countdown overflow on mobile */
    #countdown {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    
    #countdown > div {
        min-width: 70px !important;
        padding: 12px 8px !important;
        flex: 1 1 auto !important;
        max-width: calc(50% - 6px) !important;
    }
    
    #countdown .text-3xl {
        font-size: 1.5rem !important;
    }
    
    #countdown .text-sm {
        font-size: 0.75rem !important;
    }
}

/* FAQ Animations */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 0;
    padding-bottom: 0;
}

.faq-content.show {
    padding-top: 0;
    padding-bottom: 1.5rem; /* 24px */
}

/* Smooth State Transitions */
.transition-smooth {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Upload states transitions */
.upload-state {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-state.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

/* Container for smooth height transitions */
.transition-container {
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Height transition helper classes */
.height-transition {
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.height-auto {
    height: auto !important;
}

/* Consent banner styles */
#consent-banner {
  font-family: Arial, sans-serif;
  color: #333;
}
#consent-banner button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
#consent-banner button:hover {
  background-color: #0056b3;
}
#consent-banner label {
  display: block;
  margin: 5px 0;
}