/* 
   MODERN DELIVERY SKIN - VERSÃO CLEAN (AJUSTE RETO)
*/
.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-skin {
    position: relative;
    background: #ffffff !important;
    color: #2d3436;
    border-radius: 12px !important; /* Popup levemente arredondado apenas */
    overflow: hidden;
    padding: 10px !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px);
}

/* 1. BANNER (BANNER ARREDONDADO COM ENCAIXE) */
.flexslider, 
.flexslider .slides img, 
.banner-container img {
    border-radius: 20px !important; /* Cantos arredondados no banner */
}

.flexslider {
    /* Ajuste de posição: Alinhado perfeitamente com a navbar */
    margin-bottom: 0 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    z-index: 10 !important;
}

/* BANNER MODERNO E ALTO */
.flexslider, 
.flexslider .slides img, 
.banner-container img {
    border-radius: 12px !important; /* Estilo iFood */
}

.flexslider {
    margin-top: 85px !important; /* Puxa para perto da navbar */
    margin-bottom: 5px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* --- CORREÇÃO DEFINITIVA DA BUSCA (ID BUSCAR) --- */
#buscar {
    /* Força o formato Cápsula e remove o estilo antigo */
    display: block !important;
    flex-grow: 1 !important;
    width: 94% !important;
    margin: 15px auto !important; /* Centraliza e dá respiro */
    height: 52px !important;
    
    /* Cores e Fundo */
    background-color: #ffffff !important;
    border-radius: 50px !important;
    border: 1.5px solid #e0e0e0 !important; /* Cria a borda em volta de tudo */
    padding: 0 25px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    
    /* Ajuste de Texto e Nitidez */
    font-size: 18px !important;
    color: #2d3436 !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    
    /* Remove o efeito negativo do HTML original */
    margin-top: 10px !important; 
    outline: none !important;
}

/* Efeito ao clicar para digitar */
#buscar:focus {
    border-color: #00BFFF !important; /* Azul do seu carrinho */
    box-shadow: 0 6px 18px rgba(0, 191, 255, 0.15) !important;
    background-color: #ffffff !important;
}

/* Ajuste do placeholder (texto de exemplo) */
#buscar::placeholder {
    color: #b2bec3 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
}


/* 4. CARDS DA VITRINE E IMAGENS (ESTILO PREMIUM) */
.list-group-item {
    border: none !important;
    background: #ffffff !important;
    border-radius: 20px !important; /* Cards bem redondos */
    margin-bottom: 12px !important;
    padding: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

img[src*="produtos/"], .foto-produto {
    border-radius: 18px !important; /* Fotos dos produtos redondas */
    object-fit: cover !important;
}

/* 5. BOTÕES E INTERAÇÃO (ARREDONDADOS) */
.btn, button, .btn-checkout, #btn-finalizar-pedido {
    border-radius: 15px !important; /* Botões arredondados */
    font-weight: 700 !important;
    height: 48px !important;
    background: #00BFFF !important; /* Azul da marca */
    color: #fff !important;
    border: none !important;
}

/* 6. TEXTO E HIERARQUIA */
.titulo-item {
    font-size: 15px !important;
    color: #2d3436 !important;
    font-weight: 600 !important;
}

/* --- 1. POPUPS E MODAIS (FANCYBOX & MODAL) --- */
.fancybox-skin, 
.fancybox-outer, 
.fancybox-inner, 
[class*="fancybox-skin"], 
.modal-content {
    background: #ffffff !important;
    color: #2d3436;
    border-radius: 22px !important; /* Arredondamento unificado */
    border: none !important;
    overflow: hidden !important;
    padding: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 2. IMAGENS NOS POPUPS E CARDS */
div[class*="fancybox"] img, 
#fancybox-img, 
.modal-body img, 
[src*="produtos/"] {
    border-radius: 16px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 8px auto !important;
    width: 90% !important;
    max-height: 165px !important; /* Compactação garantida */
}

/* 3. TÍTULO E PREÇO NO POPUP (AZUL) */
.fancybox-title-float-wrap .child {
    display: inline-block;
    padding: 5px 12px !important; /* Diminuí o respiro lateral de 20 para 12 */
    background: #00BFFF !important;
    border-radius: 12px;
    color: #FFF !important;
    font-weight: 700;
    font-size: 13px !important; /* Diminuí de 15px para 12px */
    box-shadow: 0 4px 10px rgba(0, 191, 255, 0.2) !important;
    -webkit-text-size-adjust: none !important; /* Trava para o celular não aumentar a letra */
}


/* 4. OVERLAY (FUNDO ESCURO COM BLUR) */
.fancybox-overlay, .modal-backdrop {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 8010;
}

/* 5. VITRINE E CARDS (LISTA) */
.list-group-item {
    border: none !important;
    background: #ffffff !important;
    border-radius: 15px !important;
    margin-bottom: 8px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
}

.list-group-item img {
    border-radius: 10px !important;
    width: 75px !important;
    height: 75px !important;
    margin-right: 12px !important;
}


/* --- 1. INTERAÇÃO E BOTÕES (ESTILO MARCA AZUL) --- */
.btn-warning, .btn-primary, .btn-checkout, #btn-finalizar-pedido {
    background: #00BFFF !important; /* Azul Principal */
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 700 !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.2) !important;
    transition: transform 0.2s active;
}

/* Botão de Sucesso (Verde) */
.btn-checkout, #btn-finalizar-pedido, .card-cupom {
    background: #27ae60 !important;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2) !important;
}

/* 2. CAMPOS DE TEXTO E CHECKOUT --- */
input[type="text"], input[type="number"], .form-control, select {
    border-radius: 10px !important; 
    border: 1px solid #dcdde1 !important;
    padding: 10px 12px !important;
    background-color: #ffffff !important;
    font-size: 17px !important;
}

input.form-control:focus {
    border-color: #00BFFF !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 191, 255, 0.1) !important;
}

/* 3. BUSCA PREMIUM (ESTILO IPHONE) --- */
input[id*="busca"], .form-control-busca {
    display: block !important;
    width: 92% !important;
    margin: 12px auto !important;
    height: 46px !important;
    border-radius: 50px !important;
    border: 1px solid #e0e0e0 !important; 
    font-size: 16px !important; 
    font-weight: 600 !important;
    padding: 0 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    z-index: 1001 !important; /* Garante que fique visível */
}

/* 4. AJUSTES GERAIS DE BODY E ÍCONES --- */
body { background-color: #fcfcfc !important; }

.bi-cart-fill, .bi-cart3 {
    font-size: 20px !important;
    color: #2d3436 !important;
}

/* 5. MODAIS E CONTAINERS --- */
.modal-content, .modal-body, .tpbanner__item {
    border-radius: 22px !important;
    border: none !important;
    overflow: hidden !important;
}


/* --- 1. TIPOGRAFIA UNIFICADA (CLEAN LUXO) --- */

/* Base do site - Aplicando de forma mais inteligente */
body, p, li, a, span {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; /* Fontes mais modernas */
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #2d3436 !important;
    line-height: 1.4 !important; /* Aumentado levemente para não embolar as letras */
    -webkit-font-smoothing: antialiased; /* Deixa a letra mais nítida em telas HD */
}

/* Títulos e Destaques - Criando contraste real */
h1, h2, h3, 
.titulo-item, 
.nome-produto, 
strong, 
b {
    color: #000000 !important; /* Preto puro para dar o ar de "Luxo" */
    font-size: 15px !important; /* Um pouco maior que o texto base */
    font-weight: 800 !important; /* Peso extra para destacar */
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

 /* Foco apenas nos botões do resumo */
button, .btn, .button, input[type="submit"] {
    font-size: 15px !important; /* Tamanho da letra no botão */
    font-weight: 700 !important; /* Deixa a letra do botão mais "grossa" */
    text-transform: uppercase; /* Opcional: deixa em maiúsculo para destacar */
}


/* Ajuste para links - Remove aquele sublinhado antigo */
a {
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Pequenos detalhes (Preços, subtextos) - Para não ficar tudo igual */
small, .subtexto, .descricao-curta {
    font-size: 13px !important;
    color: #636e72 !important; /* Cinza mais suave */
}



/* 2. BANNER (ARREDONDADO E AJUSTADO) --- */
.flexslider, .flexslider .slides img {
    border-radius: 15px !important; /* Mantido conforme seu gosto */
}

.flexslider {
    margin: 100px 10px 0 10px !important; /* 100px para descer da navbar */
    margin-bottom: 0 !important; /* Cola no conteúdo abaixo */
    z-index: 10 !important;
}

/* 1. TOPO LUMINOSO (ESTILO ATUAL) */
.navbar.fixed-top {
    background: linear-gradient(180deg, #515251 0%, #1a1a1a 100%) !important;
    height: 90px !important; /* Altura de 90px */
    border-bottom: 3px solid #cffaaa !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 20px rgba(207,250,170,0.4) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. LOGO DENTRO DA BARRA */
.navbar-brand img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 12px !important;
    border: 2px solid #cffaaa !important;
    background-color: #fff;
}

/* 5. AJUSTE DO STATUS ABERTO/FECHADO (MAIOR E POSICIONADO) */
.img-aberto, .status-loja {
    position: fixed !important;
    bottom: 50px !important;  /* Desceu mais um pouco */
    left: 4px important;     /* Mantido bem à esquerda */
    z-index: 10000 !important;
    
    /* AUMENTO DE TAMANHO */
    width: 72px !important;   /* Largura maior */
    height: auto !important;  /* Mantém a proporção */
    
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); /* Sombra para dar profundidade */
    transition: all 0.3s ease;
}


/* 6. COMPACTAÇÃO DE CARDS --- */
.list-group-item {
    margin-top: 0 !important;
    padding: 10px 15px !important;
}



/* --- 1. CARRINHO E ITENS DA LISTA (SLIM) --- */
#listar-itens-carrinho .list-group-item, 
.item-carrinho {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 15px !important;
    border: 1px solid #f1f1f1 !important;
}

/* 2. BOTÃO DE EXCLUSÃO (ESTILO APPLE) --- */
.remover-item, [onclick*="excluir"], .btn-remover {
    position: relative !important;
    background: #f1f2f6 !important;
    color: #2d3436 !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    font-size: 14px !important;
}

/* 3. FINALIZAR PEDIDO (AZUL CENTRALIZADO) --- */
.btn-warning.btn-lg, 
.btn-primary, 
#btn-finalizar-pedido,
.btn-finalizar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    background: #00BFFF !important; 
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    border: none !important;
}

/* 4. MODAIS E OBSERVAÇÕES --- */
.modal-content {
    border-radius: 20px !important;
}

.modal-header {
    background-color: #f8f9fa !important;
    border-radius: 20px 20px 0 0 !important;
}

textarea#obs, .form-control-obs {
    border-radius: 12px !important;
    border: 1px solid #ddd !important;
    padding: 12px !important;
    font-size: 14px !important;
}


/* --- CARRINHO AZUL E ALINHADO --- */
a[href*="carrinho"], 
a[href*="resumo"], 
#carrinho-topo,
.fa-shopping-cart {
    position: fixed !important;
    left: 15px !important;
    right: auto !important; 
    top: 8px !important; 
    
    /* CORES AQUI */
    background-color: #00BFFF !important; /* Fundo Azul */
    color: #ffffff !important;           /* Ícone Branco para contrastar */
    
    border-radius: 5px !important; 
    padding: 6px 12px !important;        /* Aumentei um pouco para o azul aparecer bem */
    
    z-index: 1000 !important; 
    font-size: 18px !important;          /* Ícone um pouco maior */
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; /* Sombra leve para dar profundidade */
}

/* --- 2. RODAPÉ E CARRINHO FIXO (FOOTER) --- */
.rodape-container {
    background: #000 !important;
    border-top: 3px solid #cffaaa; /* Combinando com o neon do topo */
    padding: 12px 0 !important;
}

.footer-carrinho, .carrinho-footer, [class*="footer-finalizar"] {
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    padding: 10px 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1) !important;
}

/* --- 3. TRAVAS DE ESPAÇAMENTO GLOBAL --- */
body { 
    padding-bottom: 100px !important; /* Espaço para o botão flutuante não cobrir o conteúdo */
    background-color: #f8f9fa !important;
    overflow-x: hidden !important;
}

/* ============================================================
   ESTILO IFOOD: BANNER ALTO + CONTEÚDO RETO (SEM ORELHAS)
   ============================================================ */

/* 1. Sobe o Banner e deixa os cantos modernos */
.flexslider, .flexslider .slides img {
    margin-top: 25px !important; /* Puxa para perto da navbar luminosa */
    margin-bottom: 0 !important;
    border-radius: 12px !important; /* Arredondado suave estilo iFood */
}

/* 3. Limpeza total de topos */
body, #corpo {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* --- 4. BUSCA (RESULTADOS) --- */
#area_busca {
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Efeito de destaque no campo de busca ao clicar */
#buscar:focus {
    border-bottom: 3px solid #ea1d2c !important;
    transition: 0.3s;
}


/* --- 5. TOPO LUMINOSO (NAVBAR MESTRE) --- */
.navbar.fixed-top {
    background: linear-gradient(180deg, #515251 0%, #1a1a1a 100%) !important;
    height: 90px !important;
    border-bottom: 3px solid #cffaaa !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 20px rgba(207,250,170,0.4) !important;
    z-index: 9999 !important;
}

.navbar-brand img {
    width: 100px !important;
    height: 60px !important;
    border-radius: 12px !important;
    border: 2px solid #cffaaa !important;
    background-color: #fff;
}

/* FORÇAR TUDO NO TOPO A FICAR BRANCO E MAIOR */
.navbar-brand, 
.navbar-brand span, 
.navbar-brand small, 
.navbar-brand strong,
.navbar-brand a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; 
    opacity: 1 !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
    
    /* ADICIONE ESTAS LINHAS ABAIXO */
    font-size: 20px !important; /* Aumenta o tamanho real */
    font-weight: 800 !important; /* Deixa a letra bem visível */
    line-height: 1.1 !important; /* Evita que o topo fique alto demais */
}

/* TRAVA DE BALANÇO */
html, body { overflow-x: hidden !important; width: 100%; margin: 0; padding: 0; }

.rodape-container {
    background: #000 !important; /* COR DO FUNDO */
    border-top: 3px solid #ea1d2c;
    padding: 12px 0 !important; /* ALTURA MAIS BAIXA */
    width: 100%;
}

/* 3. MARRETADA EXPLOSIVA (FORÇA TUDO QUE SOBE A DESCER) */

/* Ataca qualquer div que o sistema use para sobreposição */
div[style*="display: block"], 
div[style*="z-index"], 
.modal-open, 
.modal-scrollable {
     padding-top: 50px !important;
}

/* Se for um Iframe (Página de checkout externa) */
iframe, .fancybox-iframe {
    margin-top: 105px !important;
    height: calc(100% - 95px) !important;
}

/* Força o formulário pelo nome da ação */
form[action*="checkout"], 
form[id*="finalizar"], 
.form-finalizar {
    transform: translateY(100px) !important; /* Move usando o eixo Y (Força bruta) */
}


/* --- AJUSTE EXCLUSIVO: RESUMO DO PEDIDO (ALINHADO) --- */

/* 1. Reduzido de 100px para 25px para um encaixe perfeito */
.fancybox-wrap, 
.fancybox-opened, 
#listar-itens-carrinho,
div[id*="fancybox"] {
    transform: translateY(25px) !important; 
}

/* 2. Mantém o fundo escuro respeitando a barra superior */
.fancybox-overlay {
    top: 90px !important; 
}

/* 3. Respiro interno */
.fancybox-inner {
    padding-top: 5px !important;
}

/* --- AUMENTAR ALERTA DE PEDIDO FINALIZADO --- */

/* Título: "Pedido Finalizado com Sucesso" */
.swal2-title, 
#modal-finalizar-titulo,
.modal-title-sucesso {
    font-size: 28px !important; 
    font-weight: bold !important;
    color: #28a745 !important; /* Verde para sucesso */
}

/* Texto: "Redirecionando..." e outras instruções */
.swal2-html-container, 
.swal2-content,
#modal-finalizar-corpo {
    font-size: 22px !important; 
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* Aumentar o ícone de check (V) se ele estiver pequeno */
.swal2-icon {
    transform: scale(1.3) !important; /* Aumenta o tamanho do círculo de sucesso */
    margin-bottom: 20px !important;
}

/* Se for uma modal padrão do Bootstrap */
.modal-body #mensagem-sucesso {
    font-size: 22px !important;
    text-align: center !important;
}


/* --- AJUSTE DEFINITIVO DO BOTÃO VOLTAR AO TOPO --- */
button.scroll-top.scroll-to-target {
    position: fixed !important;
    right: 20px !important;
    
    /* SUBIDA: Ajuste o valor abaixo se quiser mais alto ou mais baixo */
     bottom: 55px !important;      /* VISIBILIDADE E ESTILO */
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* FORMATO (AZUL E MENOS REDONDO) */
    background-color: #00BFFF !important; 
    color: #ffffff !important;
    border-radius: 8px !important;
    width: 45px !important;
    height: 45px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Garante que o ícone dentro dele também apareça branco e grande */
button.scroll-top i.icon-chevrons-up {
    font-size: 22px !important;
    color: #ffffff !important;
}


/* --- AUMENTAR LETRAS DA MODAL (ESTABELECIMENTO FECHADO) --- */
.modal-content, 
.modal-body, 
#modal-alerta, 
[class*="modal-fechado"] {
    font-size: 20px !important; /* Tamanho da letra principal */
    line-height: 1.5 !important; /* Espaçamento entre linhas */
}

/* Se a modal tiver um título (ex: ESTABELECIMENTO FECHADO) */
.modal-header h5, 
.modal-title, 
.swal2-title {
    font-size: 26px !important; /* Título maior ainda */
    font-weight: bold !important;
}

/* Se houver um texto descritivo dentro da modal */
.modal-body p, 
.swal2-html-container {
    font-size: 18px !important;
    color: #333 !important;
}

/* --- AUMENTAR LETRA NO CAMPO DE OBSERVAÇÃO --- */
#obs.form-control {
    font-size: 18px !important;    /* Letra maior ao digitar */
    font-weight: 500 !important;   /* Peso médio para leitura clara */
    color: #2d3436 !important;     /* Cor grafite escuro (Luxo) */
    padding: 12px !important;      /* Espaço interno para não encostar na borda */
    height: auto !important;       /* Permite que a caixa se ajuste */
    min-height: 80px !important;   /* Altura mínima confortável para o polegar */
    border: 1px solid #dfe6e9 !important; /* Borda sutil e elegante */
    border-radius: 8px !important; /* Cantos arredondados */
    background-color: #f9f9f9 !important; /* Fundo levemente cinza para destacar */
}

/* Cor e tamanho da frase "Deseja adicionar alguma Observação?" */
#obs::placeholder {
    font-size: 16px !important;
    color: #a0a0a0 !important;
    font-style: italic;
}


/* Efeito de destaque quando o cliente clica para digitar */
#obs:focus {
    background-color: #ffffff !important;
    border-color: #00BFFF !important; /* Azul para combinar com seu carrinho */
    box-shadow: 0 0 0 0.2rem rgba(0, 191, 255, 0.25) !important;
    outline: 0;
}


/* --- CORREÇÃO DE POSIÇÃO SELETIVA (NÃO QUEBRA A HOME) --- */

/* 1. Alvo específico: Só empurra o conteúdo se ele for um "destaque" (tela do lanche) */
.destaque {
    margin-top: 100px !important; 
    position: relative !important;
    display: block !important;
    clear: both !important;
}

/* 2. Se o problema for na tela interna de itens, usamos um seletor de página */
/* Geralmente a tela de detalhe tem uma classe específica no body ou um ID */
body:not(.home) #container, 
body:not(.index) .main-wrapper {
    padding-top: 90px !important;
}

/* 3. Ajuste para a imagem dentro do destaque não subir */
.destaque .tpbanner__item {
    margin-top: 10px !important;
}