<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta name="description" content="<?php echo $__env->yieldContent('meta_description', $store_name ?? config('app.name') . ' – Fresh groceries delivered'); ?>">
    <title><?php echo $__env->yieldContent('title', 'Home'); ?> – <?php echo e($store_name ?? config('app.name')); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        blinkit: {
                            yellow: '#FFD700',
                            'yellow-dark': '#FFC700',
                            green: '#00A651',
                            'green-dark': '#008F45',
                            'green-light': '#00C85C',
                        },
                        primary: { DEFAULT: '#00A651', dark: '#008F45', light: '#00C85C' },
                        accent: '#FFD700',
                    },
                    boxShadow: {
                        'soft': '0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)',
                        'card': '0 2px 8px rgba(0,0,0,0.08)',
                        'card-hover': '0 8px 24px rgba(0,166,81,0.15)',
                        'blinkit': '0 2px 12px rgba(255,215,0,0.2)',
                        'floating': '0 8px 32px rgba(0,0,0,0.12)',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.3s ease-in',
                        'slide-up': 'slideUp 0.3s ease-out',
                        'bounce-subtle': 'bounceSubtle 0.6s ease-in-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
                        slideUp: { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
                        bounceSubtle: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-5px)' } },
                    },
                },
            },
        };
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { font-family: 'Inter', system-ui, sans-serif; }
        [x-cloak] { display: none !important; }
        .skeleton { @apply animate-pulse bg-gray-200 rounded; }
        .btn-primary { @apply bg-blinkit-green hover:bg-blinkit-green-dark text-white font-bold py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:scale-95; }
        .btn-yellow { @apply bg-blinkit-yellow hover:bg-blinkit-yellow-dark text-gray-900 font-bold py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:scale-95; }
        .btn-outline { @apply border-2 border-blinkit-green text-blinkit-green hover:bg-blinkit-green hover:text-white font-semibold py-2.5 px-5 rounded-xl transition-all duration-200; }
        .card { @apply bg-white rounded-2xl shadow-card hover:shadow-card-hover transition-all duration-300 border border-gray-100; }
        .input { @apply w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blinkit-green focus:border-blinkit-green outline-none transition text-gray-800 placeholder-gray-400; }
        .badge-discount { @apply absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2.5 py-1 rounded-lg shadow-md z-10; }
        .badge-new { @apply absolute top-2 right-2 bg-blinkit-green text-white text-xs font-bold px-2.5 py-1 rounded-lg shadow-md z-10; }
        .badge-stock { @apply absolute bottom-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-lg shadow-md z-10; }
        .product-card:hover { transform: translateY(-4px); }
        .gradient-blinkit { background: linear-gradient(135deg, #FFD700 0%, #00A651 100%); }
        .trust-badge { @apply flex items-center gap-2 px-4 py-2 bg-white rounded-xl shadow-sm border border-gray-100; }
        .floating-cart { @apply fixed bottom-6 right-6 z-50 bg-blinkit-green text-white rounded-full w-16 h-16 shadow-floating flex items-center justify-center hover:bg-blinkit-green-dark transition-all transform hover:scale-110 active:scale-95; }
        .step-indicator { @apply flex items-center gap-2; }
        .step-item { @apply flex items-center gap-2; }
        .step-number { @apply w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm; }
        .step-active .step-number { @apply bg-blinkit-green text-white shadow-md; }
        .step-completed .step-number { @apply bg-blinkit-green text-white; }
        .step-pending .step-number { @apply bg-gray-200 text-gray-500; }
        .timeline-item { @apply relative pl-8 pb-6 border-l-2 border-gray-200 last:border-0; }
        .timeline-dot { @apply absolute left-0 top-0 w-4 h-4 rounded-full border-2 border-white transform -translate-x-[9px]; }
        .timeline-active .timeline-dot { @apply bg-blinkit-green border-blinkit-green shadow-md; }
        .timeline-completed .timeline-dot { @apply bg-blinkit-green border-blinkit-green; }
        .timeline-pending .timeline-dot { @apply bg-gray-300 border-gray-300; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        @media (max-width: 640px) {
            .floating-cart { @apply bottom-20 right-4 w-14 h-14; }
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="bg-gray-50 text-gray-900 antialiased min-h-screen flex flex-col">
    <?php echo $__env->make('store.partials.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <main class="flex-1">
        <?php if(session('success')): ?>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 animate-slide-up">
                <div class="bg-green-50 border-l-4 border-green-500 text-green-800 px-4 py-3 rounded-lg shadow-soft flex items-center gap-2" role="alert">
                    <i class="fas fa-check-circle"></i>
                    <span><?php echo e(session('success')); ?></span>
                </div>
            </div>
        <?php endif; ?>
        <?php if(session('error')): ?>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 animate-slide-up">
                <div class="bg-red-50 border-l-4 border-red-500 text-red-800 px-4 py-3 rounded-lg shadow-soft flex items-center gap-2" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    <span><?php echo e(session('error')); ?></span>
                </div>
            </div>
        <?php endif; ?>
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <?php echo $__env->make('store.partials.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    
    <?php
        if(auth()->guard('web')->check()) {
            $floatingCart = \App\Models\Cart::where('user_id', auth()->guard('web')->id())->with('items')->first();
        } else {
            $floatingCart = \App\Models\Cart::where('session_id', session()->getId())->with('items')->first();
        }
        $floatingCartCount = $floatingCart ? $floatingCart->items->sum('quantity') : 0;
    ?>
    <?php if($floatingCartCount > 0): ?>
    <a href="<?php echo e(route('cart.show')); ?>" class="floating-cart md:hidden animate-bounce-subtle">
        <i class="fas fa-shopping-cart text-xl"></i>
        <span class="absolute -top-1 -right-1 bg-blinkit-yellow text-gray-900 text-xs font-black rounded-full w-6 h-6 flex items-center justify-center border-2 border-white"><?php echo e($floatingCartCount > 99 ? '99+' : $floatingCartCount); ?></span>
    </a>
    <?php endif; ?>

    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH D:\laragon\www\ReactNative\grocery-api\resources\views/store/layouts/app.blade.php ENDPATH**/ ?>