/* ============================================================================
   BASE STYLES - Core Reset & Body
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* removes blue flash on mobile tap */
}

a, button, [onclick], .category-card, .menu-item, .size-option, .addon-option {
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

a:focus-visible, button:focus-visible {
    outline: 2px solid #d4a574;
    outline-offset: 2px;
}

/* Remove blue focus ring on mouse click for ALL elements */
*:focus:not(:focus-visible) {
    outline: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #f8f9fa;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 0;
    padding-bottom: 90px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
    body {
        max-width: 450px;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================================================
   ANIMATIONS - Keyframes
   ============================================================================ */

@keyframes slideDownFade {
    from {
        transform: translateY(-100%) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInCart {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

@keyframes starPop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-25px) rotate(180deg);
    }
}

@keyframes floatCart {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes searchFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes searchWave {
    0% {
        transform: scale(0.5);
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes voicePulse {
    0%, 100% {
        box-shadow: 
            0 4px 12px rgba(239, 68, 68, 0.4),
            0 0 0 4px rgba(239, 68, 68, 0.1);
    }
    50% {
        box-shadow: 
            0 4px 16px rgba(239, 68, 68, 0.5),
            0 0 0 8px rgba(239, 68, 68, 0.2);
    }
}

@keyframes slideInLang {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}