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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-bus-red { background-color: #E11D48; }
    .bg-bus-dark { background-color: #1E293B; }
    .bg-bus-gray { background-color: #F1F5F9; }
    
    .text-bus-red { color: #E11D48; }
    .text-bus-dark { color: #1E293B; }
    
    .border-bus-red { border-color: #E11D48; }
    
    .btn-bus {
        @apply inline-flex items-center justify-center bg-[#E11D48] text-white font-semibold rounded-lg py-3 px-8 hover:bg-[#BE123C] hover:shadow-lg transition-all duration-300;
    }
    
    .btn-bus-outline {
        @apply inline-flex items-center justify-center border-2 border-[#E11D48] text-[#E11D48] font-semibold rounded-lg py-3 px-8 hover:bg-[#E11D48] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-slate-300 hover:text-white font-medium transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-white font-semibold relative;
    }
    .nav-link.active::after {
        content: '';
        @apply absolute -bottom-2 left-0 w-full h-1 bg-[#E11D48] rounded-t-lg;
    }
    
    .nav-link-dark {
        @apply text-slate-600 hover:text-[#E11D48] font-medium transition-colors duration-300;
    }
    .nav-link-dark.active {
        @apply text-[#E11D48] font-semibold;
    }
}

.ticket-shape {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
}