@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
    /* Mobile app feel */
    overscroll-behavior-y: none;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    min-height: 100vh;
}

@layer utilities {
    .bg-qr-bg { background-color: #FAFAFA; }
    .bg-qr-surface { background-color: #FFFFFF; }
    .bg-qr-accent { background-color: #EA580C; } /* Appetizing Orange */
    .bg-qr-dark { background-color: #18181B; }
    
    .text-qr-dark { color: #18181B; }
    .text-qr-muted { color: #71717A; }
    .text-qr-accent { color: #EA580C; }
    
    .font-outfit { font-family: 'Outfit', sans-serif; }
    .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
}

/* Hide scrollbar for category slider */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Bottom Nav Safe Area */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}
.pt-safe {
    padding-top: env(safe-area-inset-top, 20px);
}

.category-pill {
    @apply flex-shrink-0 px-6 py-2.5 rounded-full font-jakarta text-sm font-semibold transition-all duration-300;
}
.category-pill.active {
    @apply bg-[#EA580C] text-white shadow-md shadow-[#EA580C]/30;
}
.category-pill:not(.active) {
    @apply bg-white text-[#71717A] border border-gray-100;
}

.product-card {
    @apply flex gap-4 p-4 bg-white rounded-3xl shadow-sm border border-gray-50 active:scale-[0.98] transition-transform;
}

.product-img-wrapper {
    @apply w-28 h-28 flex-shrink-0 rounded-2xl overflow-hidden relative bg-gray-50;
}

.add-btn {
    @apply w-8 h-8 rounded-full bg-[#EA580C] text-white flex items-center justify-center shadow-md active:bg-[#C2410C] transition-colors;
}

/* Toast Animation */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.toast-enter {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}