        .item-card {
            transition: transform 0.2s ease;
        }

        .item-card:hover {
            transform: translateY(-2px);
        }

        .btn-pedido {
            transition: all 0.3s ease;
        }

        .categoria-btn.ativa {
            background: linear-gradient(135deg, #dd277c 0%, #f71e5f 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
        }

        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #ee52b2;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Header fixo compacto para mobile */
        .header-compacto {
            transform: translateY(-100%);
            transition: transform 0.3s ease;
        }

        .header-compacto.visivel {
            transform: translateY(0);
        }

        /* Força altura mínima da viewport para esconder barra de endereço */
        @media (max-width: 768px) {
            html {
                height: 100vh;
                height: -webkit-fill-available;
            }

            body {
                min-height: 100vh;
                min-height: -webkit-fill-available;
            }
        }

        /* Estilos do carrinho modal */
        .carrinho-flutuante {
            transition: all 0.3s ease;
            animation: bounceIn 0.5s ease;
        }

        .carrinho-flutuante:hover {
            transform: scale(1.05);
        }

        .modal-overlay {
            backdrop-filter: blur(4px);
            transition: all 0.3s ease;
        }

        .modal-content {
            animation: slideUpModal 0.3s ease;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0) rotate(180deg);
                opacity: 0;
            }

            50% {
                transform: scale(1.1) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes slideUpModal {
            0% {
                transform: translateY(100%);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .item-adicionado {
            animation: pulseAdd 0.6s ease;
        }

        @keyframes pulseAdd {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }