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

        :root {
            --primary-orange: #FF4D00;
            --primary-orange-dark: #E63E00;
            --secondary-green: #10B981;
            --accent-blue: #3B82F6;
            --neutral-gray: #6B7280;
            --light-gray: #F9FAFB;
            --border-gray: #E5E7EB;
        }

        * {
            font-family: 'Inter', sans-serif;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .food-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .food-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .category-tab {
            position: relative;
            transition: all 0.2s ease;
        }

        .category-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary-orange);
            border-radius: 2px;
        }

        .order-item {
            animation: slideInRight 0.3s ease;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(20px);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-orange-dark) 100%);
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 15px -3px rgba(255, 77, 0, 0.3);
        }

        .rating-badge {
            background: linear-gradient(135deg, var(--secondary-green) 0%, #059669 100%);
        }

        .stats-card {
            /* background: linear-gradient(135deg,  var(--primary-orange) 0%,  var(--primary-orange-dark) 100%); */
            border: 1px solid var(--primary-orange-dark);
            color: black;
        }

        .scroll-smooth {
            scroll-behavior: smooth;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #ffffff;
            border-radius: 3px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c5bebb;
            border-radius: 3px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #d4a291
        }

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

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

        /* Enhanced tab styles */
        .category-tab {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
        }

        .category-tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .category-tab:hover::before {
            left: 100%;
        }

        .category-tab:hover {
            transform: translateY(-2px) scale(1.05);

            border-color: rgba(249, 115, 22, 0.3);
        }

        .category-tab.active {
            background: linear-gradient(135deg, #E63E00, #ea580c);

            transform: scale(1.05);
            border-color: #E63E00;
        }

        .category-tab.active::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 12px;
            height: 12px;
            background: #fbbf24;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        .slide-in {
            animation: slideIn 0.6s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-gradient {
            background: linear-gradient(90deg, transparent 0%, white 20%, white 80%, transparent 100%);
        }

        /* Icon animations */
        .tab-icon {
            transition: all 0.3s ease;
        }

        .category-tab:hover .tab-icon {
            transform: rotate(5deg) scale(1.1);
        }

        .category-tab.active .tab-icon {
            transform: scale(1.2);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        .custom-scrollbar-two {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        .custom-scrollbar-two::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        @media screen and (max-width:942px) {
            .costom-text-size {
                font-size: 13px !important;
            }
        }

        @media screen and (max-width:800px) {
            .costom-flex {
                flex-direction: column !important;
            }
        }