/* ==========================================================================
   TIO CHICO - STYLESHEET (OPTIMIZED FOR MOBILE ONLY)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300..700;1,300..700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --primary: #5c0d8e;
  --primary-light: #8e24aa;
  --primary-dark: #38006b;
  --accent: #ffc107;
  --accent-hover: #ffb300;
  --bg-color: #f4f5f8;
  --card-bg: #ffffff;
  --text-dark: #2c3e50;
  --text-muted: #6c757d;
  --border-radius: 16px;
  --border-radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-active: 0 2px 10px rgba(0, 0, 0, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Poppins', 'Josefin Sans', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 480px; /* Limite perfeito para visualização mobile */
  background: var(--bg-color);
  min-height: 100vh;
  padding-bottom: 30px;
  box-shadow: 0 0 25px rgba(0,0,0,0.1);
  position: relative;
}

/* ==========================================================================
   TELA DE CARREGAMENTO (LOADER)
   ========================================================================== */

#telaCarregamento {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loaderConteudo {
  text-align: center;
  padding: 20px;
}

.loaderLogo img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--accent);
  margin-bottom: 15px;
  animation: pulse 1.5s infinite ease-in-out;
}

#mensagemCarregamento {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.loader {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px auto;
}

#statusCarregamento {
  font-size: 0.9rem;
  opacity: 0.85;
}

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

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

/* ==========================================================================
   CATEGORIAS & ABAS
   ========================================================================== */

.tab-container10 {
  padding: 0 16px;
  margin-bottom: 10px;
}

.tab10 {
  width: 100%;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 6px solid var(--primary);
  border-radius: var(--border-radius);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.2s;
}

.tab10:active {
  transform: scale(0.98);
}

.category {
  display: none; /* Oculto por padrão, ativado pelo JS */
  padding: 16px;
  margin: 0 16px 15px 16px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.sub_category {
  padding: 10px 0;
}

.tab-container3 {
  display: flex;
  gap: 8px;
  margin: 15px 0;
}

.sub_tab {
  flex: 1;
  padding: 10px;
  background: #eef0f5;
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
}

.sub_tab.active, .sub_tab:active {
  background: var(--primary);
  color: #fff;
}

/* ==========================================================================
   CARDS DE PRODUTOS, SELEÇÕES E IMAGENS
   ========================================================================== */

.mais_pedidos {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid #f0f0f0;
  text-align: center;
}

.titulo_shake, .estilo_titulo2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.paragrafo_shake, .estilo_paragrafo2 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.select_copo, .select_marmita, .select_salada, .select_shake, select {
  width: 100%;
  padding: 12px 15px;
  font-size: 0.95rem;
  font-family: inherit;
  border: 2px solid #e0e0e0;
  border-radius: var(--border-radius-sm);
  background: #fff;
  color: var(--text-dark);
  margin-bottom: 12px;
  outline: none;
}

select:focus {
  border-color: var(--primary);
}

.btn_escolha_shake, .btns, .btns2, .btns_especial {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--primary-dark);
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(255, 193, 7, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.btns_regioes {
    display:none;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--primary-dark);
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(255, 193, 7, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.btns3 {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--primary-dark);
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(255, 193, 7, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
  margin: 10px;
}

.btn_escolha_shake:active, .btns:active, .btns2:active, .btns_especial:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-active);
}

.btns_especial {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  box-shadow: 0 4px 12px rgba(92, 13, 142, 0.3);
  margin-top: 10px;
}

#imagem_copo, #imagem_marmita, #imagem_garrafa, #imagem_salada, .mais_pedidos img {
  margin-top: 15px;
  text-align: center;
}

#imagem_copo img, #imagem_marmita img, #imagem_garrafa img, #imagem_salada img, .mais_pedidos img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* ==========================================================================
   CARRINHO & ELEMENTOS DINÂMICOS (OCULTOS POR PADRÃO)
   ========================================================================== */

.grid_botoes {
  padding: 0 16px;
}

#esconde_carrinho {
  padding: 16px;
  display: none; /* Controlado via JS */
}

/* Regra principal para ocultar todos os modais/seções acionados via JS */
#final,
#esconde_p,
#esconde_finalizar_carrinho,
#esconde_comprar_mais,
#adicao, 
#pagamento, 
#informativo, 
#dados_cliente, 
#adicionais, 
#sabor_trad, 
#coberturas, 
#complemento_shake, 
#adicionais_salada, 
#sabores4bolas, 
#mensagem, 
#agradece, 
#escolha_regiao, 
#pergunta_mult, 
#multiplicador,
.res_pix,
.res_cartao,
.res_dinheiro {
  display: none; /* Controlado via JS */
  background: var(--card-bg);
  margin: 16px;
  padding: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* ==========================================================================
   SELEÇÃO DE REGIÃO E FORMULÁRIO DE DADOS
   ========================================================================== */

.iptn_div {
  background: #f8f9fa;
  padding: 12px 15px;
  border-radius: var(--border-radius-sm);
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.iptn_div input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.campo-dados {
  margin-bottom: 14px;
  text-align: left;
}

.campo-dados label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.campo-dados input {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #dcdcdc;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  outline: none;
}

.campo-dados input:focus {
  border-color: var(--primary);
}

/* ==========================================================================
   FORMAS DE PAGAMENTO & PIX
   ========================================================================== */

.grid_pgto {
  display: flex;
  gap: 8px;
  margin: 15px 0;
}

.grid_pgto button {
  flex: 1;
  padding: 12px 5px;
  background: #f0f0f0;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
}

.grid_pgto button:active {
  border-color: var(--primary);
  background: #e8d8f3;
  color: var(--primary-dark);
}

#qrcode {
  margin: 15px auto;
  display: none; /* Controlado via JS quando o pagamento for PIX */
  max-width: 180px;
}

/* ==========================================================================
   OPÇÕES DE COLHERES & PESQUISA
   ========================================================================== */

.grid_colher {
  display: flex;
  gap: 12px;
  margin: 15px 0;
}

.grid_colher button {
  flex: 1;
  padding: 14px;
  font-weight: bold;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
}

#colher_sim { background: #d4edda; color: #155724; }
#colher_nao { background: #f8d7da; color: #721c24; }

.pesquisa {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.pesquisa input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: var(--border-radius-sm);
}

.pesquisa button {
  width: auto;
  padding: 10px 15px;
}

/* ==========================================================================
   FOOTER / RODAPÉ
   ========================================================================== */

.footer {
  text-align: center;
  padding: 25px 15px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-redes {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
}

.footer-redes a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.footer-redes a.whatsapp { color: #25d366; }
.footer-redes a.instagram { color: #e1306c; }
.footer-redes a.youtube { color: #ff0000; }

/* ==========================================================================
   LOJA FECHADA
   ========================================================================== */

.loja-fechada {
  display: none; /* Controlado via JS quando a loja estiver fechada */
  padding: 20px 16px;
  text-align: center;
}

.fechada-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.icone-fechado {
  font-size: 3rem;
  margin-bottom: 10px;
}

.btn-whatsapp {
  display: inline-block;
  margin-top: 15px;
  padding: 14px 20px;
  background: #25d366;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

#telaCarregamento.ocultar {

    opacity: 0;

    visibility: hidden;

}

/* Container principal do item */
.cx_itens {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px; /* Cria um espaçamento uniforme entre o nome, número e botões */
  width: 100%;
  background: var(--card-bg);
  padding: 12px 14px;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--primary);
}

/* Nome do item (Ajuste principal para exibir o texto corretamente) */
.cx_itens input[type="text"] {
  flex: 1; /* Faz o campo ocupar todo o espaço livre à esquerda */
  min-width: 0; /* Impede que o input estoure a largura do flexbox */
  border: none;
  background: transparent;
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  text-overflow: ellipsis; /* Coloca '...' caso o nome do item seja gigante */
  padding: 0;
  margin: 0;
}

/* Campo da quantidade */
.cx_itens input[type="number"] {
  width: 38px;
  height: 34px;
  flex-shrink: 0; /* Impede que a caixinha de número seja esmagada */
  border-radius: var(--border-radius-sm);
  border: 1.5px solid #e0e0e0;
  background: #f8f9fa;
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  padding: 0;
}

/* Botões ➕ e ➖ */
.cx_itens button {
  width: 34px;
  height: 34px;
  flex-shrink: 0; /* Impede que os botões fiquem ovais em telas pequenas */
  border-radius: 50%;
  border: none;
  background: #f0e6f6; /* Fundo suave para os botões com emojis */
  color: var(--primary-dark);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.cx_itens button:active {
  transform: scale(0.9);
  background: #e1d0ed;
}

.bloquear, #bloquear {
    display: none;
}

/* ==========================================================================
   CABEÇALHO & PLAYER DE MÚSICA (COMPACTO)
   ========================================================================== */

#oct_header {
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 6px solid var(--primary);
  border-right: 6px solid var(--primary);
  
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tamanho do Logo */
.logo-header, 
#oct_header img {
  width: 150px;
  height: 150px;
}

/* Título / Localização abaixo do logo */
#tituloMusical {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--primary-dark);
  margin: 0;
  opacity: 0.95;
}

/* Player em formato Cápsula/Pill */
#playerMusica {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--primary);
  padding: 6px 16px;
  border-radius: 25px;
  backdrop-filter: blur(4px);
  margin-top: 4px;
}

/* Botões do Player */
#playerMusica button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Feedback ao Clicar/Tocar */
#playerMusica button:active {
  transform: scale(0.9);
  background: var(--accent);
  color: var(--primary-dark);
}

/* ==========================================================================
   SEÇÃO DE PAGAMENTO & CAMPOS DE ENTRADA (INPUTS E TEXTAREA)
   ========================================================================== */

/* Card principal de pagamento */
.pagamento {
  background: var(--card-bg);
  padding: 20px 16px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 16px;
  text-align: center;
}

/* Títulos e valores */
.estilo_titulo {
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 8px;
}

#valor_pagamentos {
  font-size: 1.3rem;
  color: var(--primary-dark);
  font-weight: 700;
  margin: 10px 0;
}

/* Botões de Seleção (PIX, CARTÃO, DINHEIRO) */
.grid_pgto {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.grid_pgto button {
  flex: 1;
  padding: 12px 6px;
  background: #f0f0f5;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}

.grid_pgto button:active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary-dark);
}

/* --- ESTILIZAÇÃO DOS CAMPOS DE TEXTO E INPUTS --- */

/* Campo do Troco (Dinheiro) */
.res_dinheiro label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 12px 0 8px 0;
  text-align: left;
}

#troco {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem; /* Fonte maior para facilitar a leitura */
  font-family: inherit;
  font-weight: 500;
  color: var(--text-dark);
  background-color: #f8f9fa;
  border: 2px solid #dcdcdc;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}

#troco:focus {
  border-color: var(--primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(92, 13, 142, 0.15);
}

#troco::placeholder {
  color: #999;
  font-size: 0.9rem;
}

/* Campo PIX Copia e Cola */
.res_qrcode {
  width: 100%;
  margin: 12px 0;
}

#pixCopyPaste {
  width: 100%;
  height: 48px;
  padding: 12px;
  font-size: 0.85rem;
  font-family: monospace;
  color: var(--text-dark);
  background: #f0f0f5;
  border: 1.5px dashed var(--primary);
  border-radius: var(--border-radius-sm);
  resize: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}

/* --- MENSAGENS E ALERTAS DE PAGAMENTO --- */

.res_pix, .res_cartao, .res_dinheiro {
  background: #fdfdfd;
  border: 1px solid #eaeaea;
  padding: 16px;
  border-radius: var(--border-radius-sm);
  margin-top: 15px;
}

.res_pix h3, .res_cartao h3, .res_dinheiro h3 {
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.cliqueaqui {
  background: #f3e5f5;
  color: var(--primary-dark);
  padding: 10px;
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
  cursor: pointer;
  word-break: break-all;
}

.alerta_pgto {
  color: #d9534f;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 12px;
}

/* Lista explicativa no rodapé do card */
.pagamento ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  text-align: left;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.pagamento ul li {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagamento ul li::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
}

/* ==========================================================================
   SUPORTE PARA ESTRUTURA DE PICOLÉ / PRODUTOS COM DESCRIÇÃO (.cx_itens)
   ========================================================================== */

/* Organização dos dois blocos principais (Texto à esquerda / Controles à direita) */
.cx_itens .descricao_picole {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0; /* Previne que nomes longos quebrem o layout */
}

/* Nome do Picolé/Produto */
.cx_itens .descricao_picole h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preço do Picolé/Produto */
.cx_itens .descricao_picole p {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}

/* Agrupador da direita */
.cx_itens .info_picole {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Contêiner dos botões e do número (➖ 0 ➕) */
.cx_itens .controle_picole {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Contador numérico central */
.cx_itens .controle_picole span {
  min-width: 32px;
  height: 34px;
  padding: 0 4px;
  border-radius: var(--border-radius-sm);
  border: 1.5px solid #e0e0e0;
  background: #f8f9fa;
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botões ➕ e ➖ */
.cx_itens .controle_picole button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f0e6f6;
  color: var(--primary-dark);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.cx_itens .controle_picole button:active {
  transform: scale(0.9);
  background: #e1d0ed;
}

/* ==========================================================================
   CAIXA DE CUPOM DE DESCONTO (.cupom-box)
   ========================================================================== */

/* Card container principal do cupom */
.cupom-box {
  background: var(--card-bg);
  padding: 16px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 16px 0;
}

/* Rótulo / Label */
.cupom-box label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
  text-align: left;
}

/* Agrupador do Input + Botão lado a lado */
.cupom-input {
  display: flex;
  gap: 8px;
  width: 100%;
}

/* Campo para digitar o cupom */
.cupom-input input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase; /* Força visualmente letras maiúsculas */
  color: var(--text-dark);
  background: #f8f9fa;
  border: 1.5px solid #dcdcdc;
  border-radius: var(--border-radius-sm);
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cupom-input input[type="text"]:focus {
  border-color: var(--primary);
  background: #ffffff;
}

.cupom-input input[type="text"]::placeholder {
  text-transform: none;
  color: #999;
  font-weight: 400;
}

/* Botão Aplicar */
.cupom-input button {
  padding: 0 18px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(92, 13, 142, 0.2);
}

.cupom-input button:active {
  transform: scale(0.96);
  background: var(--primary-dark);
}

/* Mensagem de Cupom (Sucesso ou Erro exibido via JS) */
#mensagemCupom {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
  text-align: left;
}

/* Dica: classes auxiliares para você aplicar via JS na tag #mensagemCupom */
#mensagemCupom.sucesso {
  color: #28a745;
}

#mensagemCupom.erro {
  color: #dc3545;
}

/* ==========================================================================
   SELEÇÃO DE FRUTAS / ADICIONAIS COM CHECKBOX (.cx_add_salada)
   ========================================================================== */

/* Grid container para organizar os itens em colunas */
.cx_add_salada, 
.cx_add_shake,
.cx_add_cobertura {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 15px 0;
  width: 100%;
}

/* Estilização de cada card/botão de opção */
.cx_add_salada label, 
.cx_add_shake label,
.cx_add_cobertura label  {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  padding: 12px 14px;
  border-radius: var(--border-radius-sm);
  border: 1.5px solid #e0e0e0;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* Texto da fruta/adicional */
.cx_add_salada label span, 
.cx_add_shake label span,
.cx_add_cobertura label span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* Estilo do Checkbox personalizado */
.cx_add_salada input[type="checkbox"],
.cx_add_shake input[type="checkbox"],
.cx_add_cobertura input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary); /* Cor do check quando marcado */
  cursor: pointer;
  flex-shrink: 0;
}

/* Destaque visual ao selecionar o item (aplica via CSS nativo do checkbox) */
.cx_add_salada label:has(input[type="checkbox"]:checked),
.cx_add_shake label:has(input[type="checkbox"]:checked),
.cx_add_cobertura label:has(input[type="checkbox"]:checked) {
  background: #f3e5f5;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(92, 13, 142, 0.12);
}

.cx_add_salada label:has(input[type="checkbox"]:checked) span,
.cx_add_shake label:has(input[type="checkbox"]:checked) span,
.cx_add_cobertura label:has(input[type="checkbox"]:checked) span {
  color: var(--primary-dark);
  font-weight: 700;
}

/* Feedback visual de clique em telas touch */
.cx_add_salada label:active,
.cx_add_shake label:active,
.cx_add_cobertura label:active {
  transform: scale(0.97);
}
/* ==========================================================================
   TELA DE LOJA FECHADA / ATENDIMENTO FORA DO APP (.app_fora)
   ========================================================================== */

/* Envolvente principal */
.app_fora {
  display: none;
  width: 100%;
  padding: 20px 16px;
  box-sizing: border-box;
}

/* Seção do aviso */
.loja-fechada {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Card centralizado de aviso */
.fechada-card {
  background: var(--card-bg);
  width: 100%;
  padding: 32px 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ícone / Emoji principal */
.icone-fechado {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: pulse 2s infinite ease-in-out;
}

/* Título principal do estabelecimento */
.fechada-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}

/* Mensagem explicativa */
.texto-whats {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 20px;
  max-width: 280px;
}

/* Botão de direcionamento para o WhatsApp */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  padding: 14px 20px;
  background: #25d366; /* Verde característico do WhatsApp */
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: all 0.2s ease;
}

/* Feedback de clique / toque mobile */
.btn-whatsapp:active {
  transform: scale(0.96);
  background: #1eb857;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.2);
}