/* Tailwind CSS Custom Styles */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

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

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

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

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

/* Custom animations - Removed unused animations */

/* Scroll animation initial states */
.card-hover, .group {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.card-hover.animate-fade-in, .group.animate-fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section elements should be visible immediately */
#home .animate-fade-in, #home .animate-slide-up {
    opacity: 1;
    transform: translateY(0);
}

/* Glass morphism effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom button styles */
.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .card-hover:hover {
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

/* Form styles */
.form-input {
    @apply w-full px-5 py-4 border-2 border-gray-200 dark:border-gray-600 rounded-2xl focus:ring-4 focus:ring-primary-500/20 focus:border-primary-500 transition-all duration-300 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 shadow-lg hover:shadow-xl focus:shadow-2xl backdrop-blur-sm;
}

.form-input:focus {
    @apply transform scale-[1.01] border-primary-500;
}

.form-input:hover {
    @apply border-gray-300 dark:border-gray-500 shadow-xl;
}

.form-input::placeholder {
    @apply text-gray-400 dark:text-gray-500 font-medium;
}

/* Enhanced form input styles */
.form-input {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark .form-input {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9) 0%, rgba(31, 41, 55, 0.95) 100%);
    border: 2px solid rgba(75, 85, 99, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.form-input:focus {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .form-input:focus {
    background: linear-gradient(135deg, rgba(31, 41, 55, 1) 0%, rgba(31, 41, 55, 1) 100%);
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.form-input:hover {
    border: 2px solid rgba(156, 163, 175, 0.8);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .form-input:hover {
    border: 2px solid rgba(107, 114, 128, 0.8);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Textarea specific styles */
.form-input[type="textarea"], textarea.form-input {
    min-height: 120px;
    line-height: 1.6;
    resize: none;
}

/* Input focus animation */
.form-input:focus {
    animation: inputFocus 0.3s ease-out;
}

@keyframes inputFocus {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1.01);
    }
}

/* Radio button styles */
input[type="radio"] {
    @apply w-5 h-5 text-primary-600 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:ring-2 transition-all duration-200;
}

input[type="radio"]:checked {
    @apply bg-primary-600 border-primary-600;
}

input[type="radio"]:hover {
    @apply border-primary-400;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

/* Toast notifications */
.toast {
    @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300;
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

.toast-info {
    @apply bg-blue-500 text-white;
}

/* Custom utilities */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive typography */
@media (max-width: 640px) {
    .text-responsive-xl {
        @apply text-2xl;
    }
    .text-responsive-lg {
        @apply text-xl;
    }
}

@media (min-width: 641px) {
    .text-responsive-xl {
        @apply text-4xl;
    }
    .text-responsive-lg {
        @apply text-2xl;
    }
}

/* Dark mode transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Focus styles for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}