/* =============================================================
   app.css — Clemar Gourmet Custom Styles
   Works alongside Tailwind CDN
   ============================================================= */

/* ---- CSS Variables (match Tailwind config) ---- */
:root {
    --brand-green:  #2d6a4f;
    --brand-glight: #52b788;
    --brand-red:    #c1121f;
    --brand-rlight: #e63946;
    --brand-yellow: #f4a261;
    --brand-ylight: #ffd166;
    --brand-dark:   #1b1b1b;
    --brand-cream:  #fefae0;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--brand-cream);
    color: var(--brand-dark);
}

/* ---- Scrollbar hide utility ---- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

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

/* ---- Smooth page transitions ---- */
main { animation: fadeIn 0.2s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Card hover lift ---- */
.card-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* ---- Status badge colors ---- */
.status-pending    { background: #fef3c7; color: #92400e; }
.status-received   { background: #dbeafe; color: #1e40af; }
.status-preparing  { background: #ede9fe; color: #5b21b6; }
.status-ready      { background: #d1fae5; color: #065f46; }
.status-in_delivery{ background: #fce7f3; color: #9d174d; }
.status-completed  { background: #d1fae5; color: #065f46; }
.status-cancelled  { background: #fee2e2; color: #991b1b; }

/* ---- Cart drawer transition ---- */
#cart-drawer {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Product image scale on hover ---- */
.product-img-wrap {
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
}
.product-img-wrap img {
    transition: transform 0.35s ease;
    width: 100%;
    height: 11rem;
    object-fit: cover;
}
.product-img-wrap:hover img {
    transform: scale(1.05);
}

/* ---- Form inputs global style ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(45,106,79,0.15) !important;
    outline: none !important;
}

/* ---- Button pulse for CTA ---- */
.btn-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,106,79,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(45,106,79,0); }
}

/* ---- Hero wave clip ---- */
.hero-wave {
    clip-path: ellipse(100% 80% at 50% 20%);
}

/* ---- Notification dot animation ---- */
@keyframes notif-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.notif-ping::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
    animation: notif-ping 1s cubic-bezier(0,0,0.2,1) infinite;
}

/* ---- Skeleton loader ---- */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-load 1.4s infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-load {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Chef order card pulse (new orders) ---- */
.order-new {
    animation: order-glow 1.5s ease-in-out 3;
}
@keyframes order-glow {
    0%   { box-shadow: 0 0 0 0 rgba(244,162,97,0.6); }
    50%  { box-shadow: 0 0 0 10px rgba(244,162,97,0); }
    100% { box-shadow: 0 0 0 0 rgba(244,162,97,0); }
}

/* ---- Progress bar transition ---- */
.progress-bar {
    transition: width 0.6s ease;
}

/* ---- Table striping ---- */
tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.015); }

/* ---- Mobile bottom nav (optional future use) ---- */
@media (max-width: 768px) {
    .mobile-bottom-safe {
        padding-bottom: env(safe-area-inset-bottom, 1rem);
    }
}

/* ---- Print styles ---- */
@media print {
    header, footer, nav, .no-print { display: none !important; }
    main { padding: 0; margin: 0; }
}