/* css/styles.css - VegeVista shared styles */

/* Animations (same design language as v1) */
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
.slide-up { animation: slideUp 0.5s ease-out forwards; }
.slide-up-stagger-1 { animation: slideUp 0.5s ease-out 0.1s forwards; opacity: 0; }
.slide-up-stagger-2 { animation: slideUp 0.5s ease-out 0.2s forwards; opacity: 0; }
.slide-up-stagger-3 { animation: slideUp 0.5s ease-out 0.3s forwards; opacity: 0; }
.pop-in { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.toast-slide { animation: toastSlide 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.toast-fade-out { animation: toastFadeOut 0.3s ease-in forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes toastSlide { from { opacity: 0; transform: translateX(100%) translateY(10px); } to { opacity: 1; transform: translateX(0) translateY(0); } }
@keyframes toastFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }

/* Hide scrollbar for horizontal pill lists */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile safe area */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 1rem); }

/* Card hover lift */
.hover-lift { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; }
.hover-lift: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); }

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 0.75rem;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Clamp helpers */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Blog prose */
.prose-vv h2 { font-size: 1.4rem; font-weight: 700; color: #14532d; margin: 1.5rem 0 0.5rem; }
.prose-vv p { margin: 0.75rem 0; line-height: 1.75; color: #374151; }
.prose-vv a { color: #16a34a; text-decoration: underline; }

/* Floating WhatsApp button */
.whatsapp-float {
    position: fixed; bottom: 96px; right: 18px; z-index: 60;
    width: 56px; height: 56px; border-radius: 9999px;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
    transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.1); }
@media (min-width: 768px) { .whatsapp-float { bottom: 24px; } }

/* Status badges */
.badge-pending          { background: #fef9c3; color: #854d0e; }
.badge-confirmed        { background: #dbeafe; color: #1e40af; }
.badge-preparing        { background: #fde68a; color: #92400e; }
.badge-out_for_delivery { background: #e0e7ff; color: #3730a3; }
.badge-delivered        { background: #dcfce7; color: #166534; }
.badge-cancelled        { background: #fee2e2; color: #991b1b; }