:root { 
            --primary: #424242; 
            --primary-rgb: 66, 66, 66;
            --secondary: #6c757d; 
            --success: #198754; 
            --light: #f8f9fa; 
            --dark: #212529; 
            --light-gray-border: #dee2e6;
        }
        * { font-family: 'Segoe UI', system-ui, sans-serif; }
        body { background-color: var(--light); padding-bottom: 80px; }
        .header { background: linear-gradient(135deg, var(--primary), #2d2d2d); color: white; padding: 1.5rem 0; }
        .store-logo { max-height: 60px; max-width: 200px; margin-bottom: 1rem; }
        .category-nav { background: white; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #dee2e6; padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .products-grid { display: grid; gap: 1rem; padding: 1rem 0; grid-template-columns: repeat(2, 1fr); }
        @media (min-width: 768px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1200px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }
        .product-card { border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease; background: white; overflow: hidden; height: 100%; }
        .product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
        .product-image { height: 160px; object-fit: cover; width: 100%; }
        .product-image-placeholder { height: 160px; background: linear-gradient(45deg, #f8f9fa, #e9ecef); display: flex; align-items: center; justify-content: center; color: #6c757d; }
        .product-body { padding: 1rem; }
        .product-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; line-height: 1.3; }
        .product-price { font-weight: 700; color: var(--primary); font-size: 1.1rem; margin-bottom: 0.75rem; }
        .btn-view-details { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; transition: all 0.2s; width: 100%; margin-bottom: 0.5rem; }
        .btn-view-details:hover { background: var(--primary); color: white; }
        .quick-add-btn { background: var(--primary); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.2s; }
        .quick-add-btn:hover { background: #2d2d2d; transform: scale(1.1); }
        .cart-btn { position: fixed; bottom: 2rem; right: 2rem; width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: white; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 1000; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        .cart-badge { position: absolute; top: -5px; right: -5px; background: #dc3545; color: white; border-radius: 50%; width: 24px; height: 24px; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 600; }
        .cart-sidebar { position: fixed; top: 0; right: -400px; width: 100%; max-width: 400px; height: 100vh; background: white; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.3s ease; z-index: 1050; overflow-y: auto; }
        .cart-sidebar.open { right: 0; }
        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1040; display: none; }
        .overlay.show { display: block; }
        .cart-item { border-bottom: 1px solid #dee2e6; padding: 1rem 0; }
        .quantity-control { display: flex; align-items: center; gap: 0.5rem; }
        .quantity-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--primary); background: white; color: var(--primary); display: flex; align-items: center; justify-content: center; }
        .quantity-input { width: 40px; text-align: center; border: 1px solid #dee2e6; border-radius: 4px; }
        .footer { background: var(--dark); color: white; padding: 2rem 0; margin-top: 3rem; }
        .loading { display: flex; justify-content: center; align-items: center; height: 200px; }
        .empty-state { text-align: center; padding: 3rem 1rem; color: #6c757d; }
        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; }
        .step-indicator { display: flex; justify-content: space-between; margin-bottom: 2rem; position: relative; }
        .step-indicator::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: #dee2e6; z-index: 1; }
        .step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
        .step-number { width: 30px; height: 30px; border-radius: 50%; background: #dee2e6; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 0.5rem; }
        .step.active .step-number { background: var(--primary); }
        .step.completed .step-number { background: var(--success); }
        .client-info-card { background: var(--light); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
        .client-search-container { position: relative; }
        .client-search-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #dee2e6; border-radius: 0.375rem; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; }
        .client-search-result { padding: 0.5rem 1rem; cursor: pointer; border-bottom: 1px solid #dee2e6; }
        .client-search-result:hover { background-color: var(--light); }
        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 2000; }
        .loading-overlay.show { display: flex; }
        .order-summary-total { display: flex; justify-content: space-between; font-weight: bold; font-size: 1.2rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #dee2e6; }
        .product-modal-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; margin-bottom: 1.5rem; }
        .quantity-selector { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
        .quantity-selector .quantity-btn { width: 40px; height: 40px; font-size: 1.2rem; }
        .quantity-selector .quantity-display { font-size: 1.5rem; font-weight: 600; min-width: 50px; text-align: center; }
        .social-links { margin: 1rem 0; }
        .social-icon { font-size: 1.5rem; color: white; margin: 0 0.5rem; opacity: 0.8; transition: opacity 0.2s; }
        .social-icon:hover { opacity: 1; }
        .cash-change-section { display: none; }
        .disabled-page { opacity: 0.6; pointer-events: none; }
        .category-section { background: white; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
        .category-title { background: var(--primary); color: white; padding: 0.75rem 1rem; margin: 0; font-size: 1.1rem; font-weight: 600; }
        
        /* Estilos para o modal de cadastro de cliente */
        .client-registration-form .form-label {
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        
        #client-saving-spinner {
            margin-right: 0.5rem;
        }
        
        /* Estilos para o valor total no modal de pagamento */
        .payment-total-display {
            background: var(--light);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            border: 1px solid var(--primary);
        }
        
        .payment-total-label {
            font-weight: 600;
            color: var(--primary);
        }
        
        .payment-total-amount {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        /* Destaque para PIX selecionado */
        .payment-pix-selected {
            background-color: rgba(37, 211, 102, 0.1);
            border-radius: 8px;
            padding: 0.5rem;
            border: 1px solid #25d366;
        }
        
        /* Botão de editar cliente */
        .edit-client-btn {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            transition: all 0.2s;
        }
        
        .edit-client-btn:hover {
            background: var(--primary);
            color: white;
        }
        
        .client-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        /* Para telas menores, ajuste a posição */
        @media (max-width: 768px) {
            .pedidos-btn {
                right: 2rem;
                bottom: 8rem; /* Acima do carrinho em mobile */
                min-width: 60px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                padding: 0;
            }
            
            .pedidos-btn-text {
                display: none; /* Esconde o texto em mobile */
            }
            
            .pedidos-btn .bi-list-check {
                font-size: 1.5rem;
                margin: 0;
            }
        }

        /* Ajuste o botão do carrinho para dar espaço */
        .cart-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            border: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        
        /* Estilo para o botão Continuar Comprando */
        .continue-shopping-btn {
            transition: all 0.2s ease;
        }
        
        .continue-shopping-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* NOVOS ESTILOS PARA PROMOÇÕES */
        .btn-warning {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #212529;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-warning:hover {
            background-color: #e0a800;
            border-color: #d39e00;
            color: #212529;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
        }
        
        .btn-warning:active {
            background-color: #d39e00;
            border-color: #c69500;
            transform: translateY(0);
        }
        
        .btn-warning:disabled {
            background-color: #ffc107;
            border-color: #ffc107;
            opacity: 0.6;
        }
        
        /* Badge de contador de promoções */
        .promocoes-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
            display: none;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* Destaque para produtos em promoção */
        .promocao-card {
            border: 2px solid #ffc107;
            position: relative;
            animation: pulsePromocao 2s infinite;
        }
        
        .promocao-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #dc3545;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: bold;
            z-index: 1;
        }
        
        .promocao-tag {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        @keyframes pulsePromocao {
            0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        
        /* Botão para limpar filtro */
        .btn-clear-filter {
            font-size: 0.875rem;
            padding: 0.25rem 0.75rem;
        }
        
        /* Estilos para Complementos e Coberturas */
        .extras-price {
            font-size: 0.85rem;
            color: var(--success);
            font-weight: 500;
            margin-left: 5px;
        }
        
        .extras-checkbox {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 6px;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        
        .extras-checkbox:hover {
            background-color: rgba(var(--primary-rgb), 0.05);
            border-color: rgba(var(--primary-rgb), 0.1);
        }
        
        .extras-checkbox .form-check-label {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
        }
        
        .extras-section-title {
            color: var(--primary);
            font-weight: 600;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-gray-border);
            margin-bottom: 1rem;
        }
        
        #extras-summary {
            background-color: rgba(var(--primary-rgb), 0.05);
            border-left: 4px solid var(--primary);
            margin-top: 1rem;
        }
        
        .extras-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            border-bottom: 1px dashed #dee2e6;
        }
        
        .extras-list-item:last-child {
            border-bottom: none;
        }
        
        .extras-badge {
            background: #0dcaf0;
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 5px;
        }
        
        .extras-badge.cobertura {
            background: #ffc107;
            color: #000;
        }