FONTE REPENTINA 5 urlAtual.includes(p)); if (podeMostrar) { document.documentElement.classList.add("mostrar-carrinho"); } })(); </script> <style> /* BOTÃO ADICIONAR (O QUE FICA NO CARD) */ .btn-carrinho { display: block; margin: 10px auto; background: linear-gradient(to bottom, #f1c40f, #d4ac0d); /* Degradê Dourado */ color: #1a1a1a; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold; transition: 0.3s; text-transform: uppercase; width: 90%; } .btn-carrinho:hover { background: linear-gradient(to bottom, #fce38a, #f1c40f); transform: scale(1.02); } /* PAINEL DO CARRINHO (FIXO) */ #carrinho-panel { position: fixed; bottom: 30px; right: 25px; width: 280px; max-height: 500px; overflow-y: auto; background: #0d1117; /* Fundo Escuro combinando com o site */ border: 1px solid #30363d; /* Borda discreta */ border-radius: 12px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.7); z-index: 9999; font-family: 'Segoe UI', Arial, sans-serif; display: none; color: #e6edf3; } html.mostrar-carrinho #carrinho-panel { display: block; } #carrinho-panel h3 { margin: 0 0 15px 0; font-size: 18px; text-align: center; color: #f1c40f; /* Título Dourado */ border-bottom: 1px solid #30363d; padding-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } /* ITENS DENTRO DO CARRINHO */ .carrinho-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; background: #161b22; padding: 8px; border-radius: 4px; border-left: 3px solid #f1c40f; /* Detalhe em dourado */ } .carrinho-item span { color: #ffffff; /* Texto branco para leitura fácil */ font-weight: 500; } .carrinho-item button { background: #ff4d4d; color: #fff; border: none; border-radius: 4px; cursor: pointer; padding: 4px 8px; font-size: 10px; transition: 0.2s; } .carrinho-item button:hover { background: #cc0000; } /* CAMPO DE EMAIL */ #contato-usuario { width: 100%; padding: 10px; margin-top: 15px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; font-size: 14px; color: #fff; box-sizing: border-box; } #contato-usuario:focus { outline: none; border-color: #f1c40f; } /* BOTÃO ENVIAR PEDIDO */ #btn-enviar-pedido { display: block; width: 100%; margin-top: 12px; background: linear-gradient(to bottom, #f1c40f, #d4ac0d); color: #1a1a1a; padding: 12px; border: none; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: 0.3s; } #btn-enviar-pedido:hover { background: linear-gradient(to bottom, #fce38a, #f1c40f); box-shadow: 0 0 15px rgba(241, 196, 15, 0.4); } #success-message { display: none; margin-top: 12px; text-align: center; color: #2ecc71; font-size: 13px; font-weight: bold; } </style> <!-- Carrinho --> <div id="carrinho-panel"> <h3>Carrinho</h3> <div id="carrinho-itens"></div> <input type="text" id="contato-usuario" placeholder="Seu email" /> <button type="button" id="btn-enviar-pedido">📨 Enviar pedido</button> <div id="success-message">✅ Pedido enviado com sucesso!</div> </div> <form id="pedidoForm" action="https://script.google.com/macros/s/AKfycby-wK79qoHCni-17qt0zQV7co5N3KiG4fjCrWsm4U-_WMfmzSnpbWOGvOmDJ_szN20krA/exec" method="post" target="invisibleFrame"> <input type="hidden" name="email" id="email" /> <input type="hidden" name="packs" id="packs" /> </form> <iframe name="invisibleFrame" style="display:none;">
