﻿/* ════════════════════════════════════════════════════════════
   JUST BITE — BASE / UTILITY STYLESHEET
   Cleaned & re-themed to the Gold/Amber palette
════════════════════════════════════════════════════════════ */

:root {
    --pink: #F4A623; /* primary amber-gold */
    --pink-dark: #C99A24; /* deep amber */
    --pink-light: #FFF3CF; /* soft gold tint */
    --cream: #FFF9E8; /* page-tint cream */
    --ink: #2d1f0f; /* warm dark ink (was cool #2d161a) */
    --muted: #7a6e5c; /* warm muted (was cool #64748b) */
    --border: #f0e4cc;
    --green: #16a34a; /* success — stays semantic green */
    --red: #e11d48; /* error — stays semantic red */

    --shadow-toast: 0 8px 24px rgba(0,0,0,.18);
    --ease: cubic-bezier(.4,0,.2,1);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--cream); /* was cool #fcfbfa */
    color: var(--ink); /* was cool #2d161a */
}

/* ══════════════════════════════════════════
   SCROLLBAR — warm gold-tinted track/thumb
══════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pink-light);
}

::-webkit-scrollbar-thumb {
    background: var(--pink-dark);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--pink);
    }

/* ══════════════════════════════════════════
   CARD ENTRANCE ANIMATION
══════════════════════════════════════════ */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-enter {
    animation: fadeSlideUp 0.4s ease both;
}

/* ══════════════════════════════════════════
   REMOVE BUTTON SHAKE
══════════════════════════════════════════ */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.btn-shake {
    animation: shake 0.3s ease;
}

/* ══════════════════════════════════════════
   CART BADGE POP
══════════════════════════════════════════ */
@keyframes badgePop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.5);
    }

    70% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(1);
    }
}

.badge-pop {
    animation: badgePop 0.35s ease;
}

/* ══════════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════════ */
#toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    padding: .75rem 1.25rem;
    border-radius: 12px;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    box-shadow: var(--shadow-toast);
    transform: translateY(80px);
    opacity: 0;
    transition: transform .35s var(--ease), opacity .35s ease;
    pointer-events: none;
}

    #toast.show {
        transform: translateY(0);
        opacity: 1;
    }

    #toast.success {
        background: var(--green);
    }

    #toast.error {
        background: var(--red);
    }

    #toast.info {
        background: var(--pink);
    }
/* new: brand-tinted info toast */

/* ══════════════════════════════════════════
   WEIGHT INFO / MUTED CAPTION TEXT
══════════════════════════════════════════ */
.text-xs.text-gray-500.font-medium {
    color: var(--muted);
}
