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

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

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 215 25% 15%;

        --card: 0 0% 100%;
        --card-foreground: 215 25% 15%;

        --popover: 0 0% 100%;
        --popover-foreground: 215 25% 15%;

        --primary: 189 100% 35%;
        /* #0097B2 Teal */
        --primary-foreground: 0 0% 100%;

        --secondary: 215 75% 15%;
        --secondary-foreground: 0 0% 100%;

        --muted: 210 20% 96%;
        --muted-foreground: 215 15% 45%;

        --accent: 25 79% 61%;
        /* #EC904C Orange */
        --accent-foreground: 0 0% 100%;

        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 100%;

        --border: 214 20% 90%;
        --input: 214 20% 90%;
        --ring: 189 100% 35%;

        --radius: 0.375rem;

        /* Custom colors */
        --navy: 215 75% 15%;
        --navy-dark: 215 80% 10%;
        --teal: 189 100% 35%;
        --orange: 25 79% 61%;
        --light-gray: 210 20% 97%;
        --text-dark: 215 25% 20%;
        --text-muted: 215 15% 50%;

        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 240 5.9% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 240 4.8% 95.9%;
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
        --background: 215 80% 10%;
        --foreground: 0 0% 98%;
        --card: 215 75% 15%;
        --card-foreground: 0 0% 98%;
        --popover: 215 75% 15%;
        --popover-foreground: 0 0% 98%;
        --primary: 189 100% 35%;
        --primary-foreground: 0 0% 100%;
        --secondary: 215 60% 25%;
        --secondary-foreground: 0 0% 98%;
        --muted: 215 60% 20%;
        --muted-foreground: 215 15% 65%;
        --accent: 25 79% 61%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 62% 30%;
        --destructive-foreground: 0 0% 98%;
        --border: 215 60% 25%;
        --input: 215 60% 25%;
        --ring: 189 100% 35%;
        --sidebar-background: 240 5.9% 10%;
        --sidebar-foreground: 240 4.8% 95.9%;
        --sidebar-primary: 224.3 76.3% 48%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 240 3.7% 15.9%;
        --sidebar-accent-foreground: 240 4.8% 95.9%;
        --sidebar-border: 240 3.7% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground font-poppins;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-poppins font-bold;
    }

    /* Global Scrollbar Styling */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #0097B2 0%, #EC904C 100%);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #00859c 0%, #d47e3e 100%);
    }
}

@layer components {
    .btn-primary {
        @apply text-white px-6 py-2.5 rounded font-semibold transition-all duration-300 hover:shadow-lg hover:brightness-110;
        background: linear-gradient(135deg, #0097B2 0%, #EC904C 100%);
    }

    .btn-secondary {
        @apply bg-secondary text-secondary-foreground px-6 py-2.5 rounded font-semibold transition-all duration-300 hover:bg-secondary/90;
    }

    /* Gradient Text Utility */
    .text-gradient {
        @apply bg-clip-text text-transparent;
        background-image: linear-gradient(135deg, #0097B2 0%, #EC904C 100%);
    }

    .section-heading {
        @apply text-2xl md:text-3xl font-bold mb-2;
        /* Using the gradient text by default for headings to make it 'Elegant Pro' */
        @apply bg-clip-text text-transparent;
        background-image: linear-gradient(135deg, #0097B2 0%, #EC904C 100%);
    }

    /* Small accent elements using the gradient */
    .bg-primary-gradient {
        background: linear-gradient(135deg, #0097B2 0%, #EC904C 100%);
    }

    .section-subheading {
        @apply text-muted-foreground text-sm md:text-base mb-8;
    }

    .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    }

    .nav-link {
        @apply text-black hover:text-primary transition-colors duration-200 font-medium;
    }

    .topbar {
        @apply bg-secondary text-secondary-foreground py-2 text-sm;
    }

    .search-header {
        @apply bg-background py-4 border-b border-border;
    }

    .main-nav {
        @apply bg-white text-black py-3;
    }

    .feature-bar {
        @apply bg-muted py-6 border-b border-border;
    }

    .course-card {
        @apply bg-card rounded-lg overflow-hidden shadow-md card-hover border border-border;
    }

    .category-card {
        @apply bg-card rounded-lg p-6 text-center card-hover border border-border cursor-pointer;
    }

    .footer-section {
        @apply bg-secondary text-secondary-foreground py-12;
    }

    .sidebar-menu {
        @apply fixed left-0 top-0 h-full w-80 bg-background shadow-2xl z-50 transform -translate-x-full transition-transform duration-300 overflow-y-auto overflow-x-hidden;
    }

    .svg-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .sidebar-menu.open {
        @apply translate-x-0;
    }

    .overlay {
        @apply fixed inset-0 bg-black/50 z-40 opacity-0 pointer-events-none transition-opacity duration-300;
    }

    .overlay.open {
        @apply opacity-100 pointer-events-auto;
    }

    .swiper-nav-btn {
        @apply w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors cursor-pointer;
    }

    .program-section {
        @apply py-16;
    }

    .program-section:nth-child(even) {
        @apply bg-muted;
    }

    /* INFINITE BACKGROUND COLOR CHANGE */
    .btn-infinite-bg {
        @apply relative text-white overflow-hidden transition-all duration-300;
        background: linear-gradient(270deg, #0097B2, #EC904C, #0097B2);
        background-size: 200% 200%;
        animation: bgInfinite 4s ease infinite;
    }

    .btn-infinite-bg:hover {
        @apply shadow-lg transform scale-105;
        box-shadow: 0 0 15px rgba(0, 151, 178, 0.5);
    }

    @keyframes bgInfinite {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }
}

@layer utilities {
    .animate-slide-in {
        animation: slideIn 0.3s ease-out forwards;
    }

    @keyframes slideIn {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    .animate-fade-in {
        animation: fadeIn 0.3s ease-out forwards;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
        }

        to {
            transform: translateY(0);
        }
    }

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

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

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

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Custom category scrollbar */
    .category-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: hsl(var(--primary)) hsl(var(--muted));
    }

    .category-scrollbar::-webkit-scrollbar {
        height: 6px;
    }

    .category-scrollbar::-webkit-scrollbar-track {
        background: hsl(var(--muted));
        border-radius: 10px;
    }

    .category-scrollbar::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)));
        border-radius: 10px;
    }

    .category-scrollbar::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, hsl(var(--primary) / 0.8), hsl(var(--secondary) / 0.8));
    }
}