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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    ::-webkit-scrollbar {
        @apply w-2 h-2;
    }
    
    ::-webkit-scrollbar-track {
        @apply bg-gray-100;
    }
    
    ::-webkit-scrollbar-thumb {
        @apply bg-gray-400 rounded-full hover:bg-gray-500;
    }
}

* {
    @apply scroll-smooth;
}

body {
    @apply font-sans text-gray-900 bg-white;
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Mobile menu styles */
@media (max-width: 1023px) {
    #mobile-menu-btn {
        display: block !important;
        z-index: 51;
    }
    
    #mobile-menu {
        display: none;
    }
    
    #mobile-menu.visible {
        display: block !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    }
}

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

.animate-fadeInLeft {
    animation: fadeInLeft 0.8s ease-out;
}

.animate-fade-in {
    animation: fadeInAlert 0.4s ease-out;
}

.animate-fadeInRight {
    animation: fadeInRight 0.8s ease-out;
}

.animate-slideDown {
    animation: slideDown 0.3s ease-out;
}

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

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Gradient styles */
.gradient-primary {
    @apply bg-gradient-to-r from-blue-600 to-blue-800;
}

.gradient-accent {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600;
}

.gradient-text {
    @apply bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent;
}

/* Button styles */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-white transition duration-300 gradient-primary hover:shadow-lg hover:-translate-y-1;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-blue-600 border-2 border-blue-600 transition duration-300 hover:bg-blue-50;
}

.btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-gray-900 border-2 border-gray-200 transition duration-300 hover:border-gray-400;
}

.btn-sm {
    @apply px-4 py-2 text-sm rounded-lg font-medium;
}

/* Card styles */
.card {
    @apply rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition duration-300 bg-white;
}

.card-hover {
    @apply hover:-translate-y-2 hover:shadow-lg;
}

.card-glow {
    @apply border-blue-200 shadow-md hover:shadow-xl hover:border-blue-400;
}

/* Section titles */
.section-title {
    @apply text-4xl md:text-5xl font-bold text-gray-900;
}

.section-subtitle {
    @apply text-xl text-gray-600 max-w-2xl mx-auto;
}

/* Badge styles */
.badge-primary {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-700;
}

.badge-secondary {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-purple-100 text-purple-700;
}

.badge-success {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-700;
}

/* Container utilities */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Utility classes */
.shadow-glass {
    @apply bg-white/10 backdrop-blur-md border border-white/20;
}

.shadow-elevation {
    @apply shadow-lg hover:shadow-2xl transition-shadow duration-300;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hide-mobile {
        @apply hidden;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        @apply hidden;
    }
}

/* Text effects */
.text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

/* Hover effects */
.hover-lift {
    @apply transition duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.hover-glow {
    @apply transition duration-300 hover:shadow-lg hover:shadow-blue-500/50;
}

/* Borders */
.border-gradient {
    @apply border-b-2 border-transparent bg-clip-padding;
    background-image: linear-gradient(to right, #3b82f6, #9333ea);
    background-clip: padding-box;
}

/* Scrollbar */ 
.scrollbar-thin::-webkit-scrollbar {
    @apply w-1;
}

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

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

.section-subtitle {
    @apply text-lg text-gray-600;
}

.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.badge-primary {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold text-white gradient-primary;
}

.badge-secondary {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold text-indigo-600 bg-indigo-100;
}

.fade-in {
    @apply animate-fade-in;
}

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

@layer components {
    .input-field {
        @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 outline-none;
    }
    
    .input-field-error {
        @apply border-red-500 focus:ring-red-200;
    }
}

/* Academy Page Enhancements */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out forwards;
}

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

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Course Cards */
.course-card {
    @apply group bg-white rounded-2xl overflow-hidden border border-gray-200 transition duration-300;
}

.course-card:hover {
    @apply border-blue-300 shadow-lg;
}

.course-card-image {
    @apply relative h-40 md:h-48 flex items-center justify-center overflow-hidden;
}

.course-card-image::before {
    @apply absolute inset-0 transition duration-300 group-hover:scale-105;
}

/* Badge Styles */
.badge-beginner {
    @apply bg-green-100 text-green-700;
}

.badge-intermediate {
    @apply bg-yellow-100 text-yellow-700;
}

.badge-advanced {
    @apply bg-red-100 text-red-700;
}

/* Typography */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .hide-mobile {
        @apply hidden;
    }
}

@media (min-width: 641px) {
    .show-mobile {
        @apply hidden;
    }
}

/* Gradient Backgrounds */
.gradient-blue {
    @apply bg-gradient-to-br from-blue-400 to-blue-600;
}

.gradient-purple {
    @apply bg-gradient-to-br from-purple-400 to-purple-600;
}

.gradient-green {
    @apply bg-gradient-to-br from-green-400 to-green-600;
}

.gradient-pink {
    @apply bg-gradient-to-br from-pink-400 to-pink-600;
}

.gradient-orange {
    @apply bg-gradient-to-br from-orange-400 to-orange-600;
}

.gradient-indigo {
    @apply bg-gradient-to-br from-indigo-400 to-indigo-600;
}

/* Hover Effects */
.hover-lift {
    @apply transition duration-300 transform hover:-translate-y-1 hover:shadow-xl;
}

.hover-scale {
    @apply transition duration-300 transform hover:scale-105;
}

/* Backdrop Blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
}
/* Mobile-First Responsive Utilities */
@layer components {
    /* Responsive Typography */
    .responsive-h1 {
        @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold;
    }
    
    .responsive-h2 {
        @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold;
    }
    
    .responsive-h3 {
        @apply text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold;
    }
    
    .responsive-h4 {
        @apply text-base sm:text-lg md:text-xl lg:text-2xl font-semibold;
    }
    
    /* Responsive Spacing */
    .responsive-px {
        @apply px-4 sm:px-6 md:px-8 lg:px-12;
    }
    
    .responsive-py {
        @apply py-8 sm:py-12 md:py-16 lg:py-20;
    }
    
    .responsive-section {
        @apply responsive-px responsive-py;
    }
    
    /* Responsive Grid */
    .grid-responsive-2 {
        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4 sm:gap-6;
    }
    
    .grid-responsive-3 {
        @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4 sm:gap-6;
    }
    
    .grid-responsive-4 {
        @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6;
    }
    
    /* Responsive Flex */
    .flex-responsive {
        @apply flex flex-col sm:flex-row gap-4 sm:gap-6;
    }
    
    /* Responsive Container */
    .container-responsive {
        @apply max-w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl;
    }
}