/* 
CSS - FIX PARA SOBREPOSIÇÃO DO MENU INFERIOR MOBILE
Solução para o problema onde o menu inferior sobrepõe o botão de finalizar pedido
*/

/* Garante que o container principal tenha espaço suficiente para o footer */
#ct-e-AppDelivery .container {
    padding-bottom: 50px !important;
}

/* Garante que o container da sacola tenha espaço extra */
#ct-e-AppDelivery-Pedido-Bloco {
    padding-bottom: 60px !important;
    margin-bottom: 20px !important;
}

/* Garante que todos os botões de ação sejam visíveis e clicáveis */
#ct-e-AppDelivery-Pedido-Bloco .btn-primary {
    position: relative;
    z-index: 600 !important;
    margin-bottom: 20px !important;
    min-height: 66px !important; /* Aumentado em 50% de 44px para 66px */
    font-size: 1rem !important; /* Aumentado em 50% de 0.66rem para 1rem */
    padding: 12px 20px !important; /* Aumentado padding em 50% */
}

/* Adiciona espaço extra para o último botão de finalizar pedido */
#ct-e-AppDelivery-Pedido-Bloco .card-shadow:last-child {
    margin-bottom: 30px !important;
}

/* Garante que o footer não sobreponha elementos importantes */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 500;
    margin-top: 20px !important;
}

/* Solução específica para quando está na página da sacola */
body[data-page="sacola"] #ct-e-AppDelivery-Pedido-Bloco {
    padding-bottom: 70px !important;
}

/* Garante que o botão de finalizar pedido seja sempre visível na sacola */
#ct-e-AppDelivery-Pedido-Bloco .btn-primary[ng-click*="finalizar"] {
    position: relative;
    z-index: 700 !important;
    margin-bottom: 15px !important;
    min-height: 66px !important; /* Aumentado em 50% */
    font-size: 1.1rem !important; /* Aumentado em 50% + extra para destaque */
    padding: 15px 25px !important; /* Aumentado padding em 50% + extra */
    font-weight: bold !important; /* Deixa o texto em negrito para destaque */
}

/* Adiciona espaço extra antes do footer quando há botões de ação */
#ct-e-AppDelivery-Pedido-Bloco .d-grid:last-child {
    margin-bottom: 30px !important;
    padding-bottom: 10px !important;
}

/* Solução para navegadores que suportam :has() */
#ct-e-AppDelivery .container:has(#ct-e-AppDelivery-Pedido-Bloco[ng-show*="sacola"]) {
    padding-bottom: 120px !important;
}

/* Alternativa para navegadores que não suportam :has() */
#ct-e-AppDelivery-Pedido-Bloco[ng-show*="sacola"] ~ .footer {
    margin-top: 100px !important;
}