/* Tailwind CSS Custom Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Tailwind Configuration */
:root {
    --taxi-dark: #2d3748;
    --taxi-yellow: #ffe473;
}

/* Configure Tailwind */
@layer base {
    html {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Poppins', sans-serif;
    }
    
    body {
        @apply antialiased;
    }
}

@layer components {
    .btn-primary {
        @apply bg-taxi-yellow text-black font-bold py-3 px-6 rounded-lg shadow-md hover:bg-yellow-400 transition-all duration-300 transform hover:scale-105;
    }
    
    .btn-secondary {
        @apply bg-taxi-dark text-white font-bold py-3 px-6 rounded-lg hover:bg-gray-700 transition-colors duration-300;
    }
    
    .btn-outline {
        @apply bg-transparent border-2 border-taxi-dark text-taxi-dark font-bold py-2 px-5 rounded-lg hover:bg-taxi-dark hover:text-white transition-all duration-300;
    }
    
    .service-card {
        @apply bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition-shadow duration-300;
    }
    
    .service-icon {
        @apply w-10 h-10 rounded-full flex items-center justify-center text-lg font-bold transform transition-transform;
    }
    
    .form-input {
        @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-taxi-yellow focus:border-transparent transition;
    }
    
    .modal-overlay {
        @apply fixed inset-0 bg-black bg-opacity-70 z-50 hidden items-center justify-center p-4 transition-opacity duration-300;
    }
    
    .modal-content {
        @apply bg-white rounded-2xl shadow-xl w-full max-w-3xl p-8 relative max-h-[90vh] overflow-y-auto;
    }
}

@layer utilities {
    .hero-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }
    
    .text-taxi-dark {
        color: var(--taxi-dark);
    }
    
    .text-taxi-yellow {
        color: var(--taxi-yellow);
    }
    
    .bg-taxi-dark {
        background-color: var(--taxi-dark);
    }
    
    .bg-taxi-yellow {
        background-color: var(--taxi-yellow);
    }
    
    .border-taxi-dark {
        border-color: var(--taxi-dark);
    }
    
    .border-taxi-yellow {
        border-color: var(--taxi-yellow);
    }
    
    .hover\:text-taxi-yellow:hover {
        color: var(--taxi-yellow);
    }
    
    .hover\:bg-taxi-dark:hover {
        background-color: var(--taxi-dark);
    }
    
    .focus\:ring-taxi-yellow:focus {
        --tw-ring-color: var(--taxi-yellow);
    }
    
    .focus\:border-taxi-yellow:focus {
        border-color: var(--taxi-yellow);
    }
}

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

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

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* Responsive design helpers */
@media (max-width: 768px) {
    .mobile-menu-hidden {
        display: none;
    }
}

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