:root {
    --primary-color: #FFDE21;
    /* O verde que vimos na foto 4 */
    --dark-bg: #000;
    --gray-bg: #f8f9fa;
}

/* O Fundo cinza de fora (Background repetido e overlay por inteiro) */
body {
    background-color: #EEF1F5;
    /* AQUI VOCÊ AJUSTA O OVERLAY E A IMAGEM!
       O "linear-gradient" é quem faz o overlay por inteiro. Ambos os "rgba(255, 255, 255, 0.7)" 
       representam a cor (branco) e a intensidade (0.7 = 70%).
       Mude os dois números 0.7 para deixar mais claro (ex: 0.5) ou mais suave/branco (ex: 0.9).
       Atrás dele, coloque o caminho da sua nova imagem. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.9)), url('../assets/background_pattern.png');
    background-size: 350px; /* Tamanho da imagem repetida */
    background-repeat: repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* A Folha Branca (App) */
.container-principal {
    width: 100%;
    max-width: 900px;
    /* Largura fixa de um celular */
    background-color: #EEF1F5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.178);
    position: relative;
}

/* Sua div pai que você já tem */
#webapp-cardapio {
    width: 100%;
    max-width: 860px;
    margin: 90px auto 0 auto;
    /* Aumentei para 86px (topo fixo + respiro) */
    padding: 20px 20px 20px 20px;
    /* Reduzi o padding inferior */
    background-color: #ffffff;
    min-height: 48vh;
    box-sizing: border-box;
    border-left: 1px solid #ddd;
    /* Linha cinza na lateral esquerda */
    border-right: 1px solid #ddd;
    /* Linha cinza na lateral direita */
}

main {
    padding-bottom: 80px;
    /* Cria um espaço para o conteúdo não ficar escondido atrás do footer */
}

/* Container para colocar o nome e o botão lado a lado */
.cardapio-topo-flex {
    display: flex;
    justify-content: space-between;
    /* Nome na esquerda, Botão na direita */
    align-items: center;
    /* Alinha eles na mesma altura */
    padding: 0 15px;
    /* Afasta um pouco das bordas do fundo */
    margin: 15px 0;
}

/* O Botão exatamente como te entreguei primeiro, mas agora com fundo preto */
#menu-btn {
    background: #000;
    /* Fundo preto */
    color: white;
    /* Texto e ícone brancos */
    border: 1px solid white;
    border-radius: 3px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    /* Tamanho do ícone de barras */
    transition: all 0.3s ease;
}

#menu-btn:hover {
    background: white;
    color: black;
    border: 2px solid black;
}

.menu-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Ajuste no título para não criar espaços desnecessários */
.section-title {
    margin: 0 !important;
    font-size: 24px;
    color: #333;
}


/* Ajuste do Header para não sobrar espaço */
#store-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
    /* Mesma largura da container-principal */
    background-color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    box-sizing: border-box;
    z-index: 1500;
    /* Acima de tudo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.229);
}


#store-logo {
    height: 50px;
    /* Tamanho que vimos que fica bom */
    width: auto;
    object-fit: contain;
}

/* Container Principal: Dando respiro ao conteúdo */
.container {
    padding: 20px;
    max-width: 600px;
    /* Largura ideal para simular celular no PC */
    margin: 0 auto;
}


/* Título Cardápio */
.titulo-cardapio {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.titulo-cardapio::before,
.titulo-cardapio::after {
    content: " ";
    display: table;
}

.titulo-cardapio::after {
    clear: both;
}

.titulo-cardapio-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icone-cardapio {
    color: #666;
}

/* Área de Tempo (Entrega/Retirada) */
.info-time-container {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.time-card {
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
    padding: 8px 30px;
    border-radius: 30px;
    margin-bottom: 7px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    box-shadow: none;
}

.time-card p {
    margin: 0;
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

/* Deixa o input de busca limpo dentro do retângulo */
.search-box {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 3px 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#search-input {
    border: none;
    background: transparent;
    margin: 0;
    padding: 5px 0;
    box-shadow: none;
    width: 100%;
    outline: none;
    font-size: 14px;
    color: #333;
}

#search-input::placeholder {
    color: #999;
}

.repeat-box {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 3px 12px 3px 12px;
    margin-bottom: 10px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.repeat-text {
    color: #666;
    font-size: 14px;
}

.btn-repeat {
    background: #000;
    color: #fff;
    border: none;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-repeat:hover {
    background: #333;
}


/* Estilizando apenas o texto MENU dentro do botão */
.menu-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 350;
    text-transform: none;
}

/* O Card do Produto (Foto 4) */
.product-card {
    background: white;
    margin: 0 0 15px 0;
    padding: 0;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.product-card .info h4 {
    margin: 0 0 10px 0;
}

/* Removidos blocos redundantes que alteravam as fontes globalmente */

.product-content,
.bebida-product-content {
    display: flex;
    gap: 15px;
    padding: 10px;
}

.adicional-product-content {
    display: flex;
    flex-direction: row;
    padding: 10px;
    gap: 15px;
}

.product-content img {
    width: 192px;
    height: 256px;
    object-fit: cover;
    border-radius: 8px;
}

.adicional-product-content img {
    width: 191px;
    height: 118px;
    object-fit: cover;
    border-radius: 8px;
}

.bebida-product-content img {
    width: 192px;
    height: 256px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.product-content .info,
.bebida-product-content .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.adicional-product-content .info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-content h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
    font-weight: 700;
}

.product-content p,
.adicional-product-content p,
.bebida-product-content p {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.product-content .preco,
.adicional-product-content .preco {
    font-size: 14px;
    color: #565656;
    /* Verde solicitado */
    font-weight: 700;
    margin-top: 5px;
}

.btn-comprar {
    background: #00A808;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 0;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    font-size: 14px;
    transition: background 0.3s;
}

.btn-comprar:hover {
    background: #008f06;
}

.icon-circle.error {
    border-color: #dc3545;
}

.icon-circle.error span {
    color: #dc3545;
}

.btn-error {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.tela-cheia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 4000;
    display: flex;
    flex-direction: column;
}

.carrinho-itens {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.carrinho-resumo {
    padding: 20px;
    border-top: 2px solid #eee;
    background: #fdfdfd;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.btn-finalizar {
    background: #28a745;
    color: white;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* FOOTER - Ajuste do Carrinho para não fugir da folha branca */

/* FOOTER - Fixado no rodapé da tela, centralizado com o app */
#cart-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 900px;
    /* DEVE ser igual ao max-width da sua .container */

    background-color: #000;
    color: #fff;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    /* border-top: 3px solid #fff; */
    z-index: 1000;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.229);
}

/* Garante que o badge (círculo) apareça corretamente */
.cart-badge {
    background-color: #fff;
    color: #000;

    /* 1. Removemos a largura fixa para ele poder esticar se tiver 2 dígitos */
    min-width: 24px;
    height: 24px;

    /* 2. O PULO DO GATO: Border-radius menor para não ser um círculo */
    /* 6px ou 8px deixa ele exatamente com as quinas arredondadas da foto */
    border-radius: 6px;

    /* 3. Espaço interno nas laterais para o número respirar */
    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 12px;
    box-sizing: border-box;
}


.cart-info {
    display: flex;
    align-items: center;
    font-weight: 700;
    letter-spacing: 1px;
}

.cart-total {
    font-weight: 700;
    font-size: 1.1rem;
}

/* 1. Esconder Modais e Telas Cheias por padrão */
.modal-alert,
.modal,
.tela-cheia {
    display: none;
    /* Eles somem da tela inicial */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Fundo escuro transparente */
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

/* 2. Estilo do Card de Sucesso (para não ficar esticado) */
.alert-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 80%;
    max-width: 300px;
}

/* 3. Estilo do Modal de Detalhes (Estilo iFood) */
.modal-content {
    background: white;
    width: 100%;
    height: 100%;
    /* Ocupa a tela toda no mobile */
    display: flex;
    flex-direction: column;
}


/* Container do Cardápio */
#categories-container {
    background: #fff;
    /* mais quadrado */
    overflow: hidden;
    margin-top: 15px;
}

/* Linha da Categoria (Acordeão) */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 15px;
    /* Aumentei um pouco o respiro */
    background-color: #F5F5F5;
    border: 1px solid #ddd;
    /* Cor padronizada com o container */
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 5px;
    /* Encosta no conteúdo quando abrir */
}

.category-header:hover {
    background-color: #f9f9f9;
}

.category-header h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    margin: 0;
}

.category-header span {
    color: #999;
    font-size: 20px;
}

/* Área onde os produtos vão aparecer ao expandir */
.category-content {
    display: none;
    background: #fff;
    padding: 15px 15px;
    /* Movido do inline do HTML */
    border: 1px solid #ddd;
    border-top: none;
    /* Unir com o header */
    margin-bottom: 15px;
    /* Espaço para a próxima categoria */
}

.category-content.active {
    display: block;
}

#cart-footer .cart-info span {
    font-weight: 300;
    /* mais fino */
    font-size: 14px;
}

#cart-footer .cart-total {
    font-weight: 300;
    /* mais fino */
    font-size: 14px;
}

/* --- CARRINHO PAGE --- */
#webapp-carrinho {
    width: 94%;
    max-width: 860px;
    margin: 90px auto 140px auto;
    padding: 20px;
    background-color: #ffffff;
    min-height: 28vh;
    box-sizing: border-box;
    border: 1px solid #ddd;
    display: none;
}

.titulo-carrinho {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    padding-bottom: 35px;
    /* Mantendo a alteração manual do usuário */
}

.titulo-carrinho-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icone-carrinho {
    color: #666;
    font-size: 15px;
}

.carrinho-vazio-container {
    padding: 20px 2px;
    text-align: center;
}

.carrinho-vazio-container p {
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
}

.btn-ver-cardapio {
    background-color: #565656;
    color: white;
    border: none;
    padding: 10px 20px;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.btn-ver-cardapio:hover {
    background-color: #008f06;
}

/* PASSOS DO CARRINHO */
.cart-steps {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 8px;
    /* Mais arredondado como no exemplo */
    margin-bottom: 25px;
    overflow: hidden;
    /* Garante que os filhos não "vazem" do arredondamento */
}

.cart-steps .step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    /* Aumentado de 10px para 15px para ganhar mais altura (espessura) */
    color: #999;
}

.cart-steps .step.active {
    background-color: #4b4b4b;
    /* Tom de cinza mais escuro do exemplo */
    color: #fff;
    border-radius: 8px;
    /* Igual ao container */
}

.step-num {
    font-size: 15px;
    /* Ligeiramente maior */
    font-weight: bold;
    line-height: 1.2;
}

.step-label {
    font-size: 13px;
    /* Ligeiramente maior para melhor leitura */
    font-weight: 300;
}

.cart-instruction {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

.cart-items-block-group {
    background-color: #f2f5f7;
    /* Fundo cinza suave englobando tudo */
    margin-bottom: 0;
    padding-top: 15px;
    /* Espaço acima do título badge */
}

.cart-items-header {
    background-color: #000;
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 10;
    margin-left: -5px;
    /* Alinha o início da dobra com a lateral do card */
    margin-bottom: 0;
}

.cart-items-header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0px;
    width: 0;
    height: 0;
    border-top: 6px solid #000;
    border-left: 6px solid transparent;
    filter: brightness(0.6);
}

.cart-items-list {
    border: none;
    padding: 15px;
    background-color: transparent;
    /* Removido para usar o do grupo */
    margin-bottom: 0;
}

.cart-item-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted rgba(0,0,0,0.15);
    gap: 15px;
}

.cart-item-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cart-item-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.cart-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-qty {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    /* Diminuído para igualar ao exemplo */
    display: flex;
    align-items: center;
}

.btn-qty.minus {
    color: #b20000;
}

.btn-qty.plus {
    color: #565656;
}

.cart-item-qty {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    min-width: 20px;
    text-align: center;
}

.cart-item-price {
    font-size: 16px;
    /* Levemente maior que o nome */
    font-weight: 400;
    color: #565656;
    white-space: nowrap;
}

.cart-subtotal-row {
    background-color: #4b4b4b;
    /* Cinza escuro da inspiração */
    color: #fff;
    padding: 12px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 30px;
}

.cart-divider-dashed {
    border-top: 1px dashed #ccc;
    margin-bottom: 25px;
    width: 100%;
}

.cart-divider-solid {
    border-top: 1px solid #ddd;
    margin-bottom: 25px;
    width: 100%;
}

.cart-actions-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-cart-finish {
    background-color: #565656;
    color: white;
    border: none;
    padding: 12px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cart-actions-row {
    display: flex;
    flex-direction: column;
    /* Mobile: Um embaixo do outro */
    gap: 10px;
}

.btn-cart-continue,
.btn-cart-clear {
    width: 100%;
    /* No mobile ocupam largura total */
    background-color: #B20000;
    color: white;
    border: none;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* --- AJUSTES EXCLUSIVOS PARA DESKTOP --- */
@media (min-width: 601px) {
    .cart-actions-row {
        flex-direction: row;
        /* No desktop ficam lado a lado */
        gap: 10px;
    }

    .btn-cart-continue,
    .btn-cart-clear {
        width: 50%;
        /* Cada um ocupa metade no desktop */
        padding: 12px;
    }

    .btn-cart-finish {
        padding: 15px;
        font-size: 15px;
    }
}

/* --- LOGIN PAGE --- */
#webapp-login {
    width: 100%;
    max-width: 850px;
    /* Alterado de 820px para 900px */
    margin: 90px auto 0 auto;
    padding: 20px;
    background-color: #ffffff;
    min-height: 34vh;
}

.portlet.light {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.portlet-title {
    font-size: 15px;
    font-weight: 700;
    color: #3f444a;
    margin-bottom: 15px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

.portlet-title::before,
.portlet-title::after {
    content: " ";
    display: table;
}

.portlet-title::after {
    clear: both;
}

.portlet-title i {
    color: #3f444a;
    font-size: 14px;
}

.form-body p {
    color: #666;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    color: #777;
    font-size: 14px;
    margin-bottom: 8px;
}

.form-label span {
    color: #dc3545;
}

.input-group {
    display: flex;
    border: 1px solid #ccc;
    background: #fff;
    overflow: hidden;
}

.input-group .country-code {
    background-color: #f8f9fa;
    padding: 8px 15px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #495057;
    font-size: 14px;
    user-select: none;
}

.input-group .form-control {
    flex: 1;
    border: none;
    padding: 8px;
    outline: none;
    font-size: 16px;
    letter-spacing: 1px;
}

.btn-login {
    background-color: #565656;
    color: #fff;
    width: 100%;
    border: none;
    padding: 8px;
    font-size: 14px;
    /* font-weight: bold; */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background 0.3s;
}

.btn-login:hover {
    background-color: #218838;
}

/* --- CONFIRMATION STEP --- */
.confirmacao-container {
    padding: 10px 0;
}

.confirmacao-msg {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: left;
}

.btn-confirm-option {
    background-color: #4b4b4b;
    color: #fff;
    width: 100%;
    border: none;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    margin-bottom: 10px;
}

.btn-confirm-option:hover {
    background-color: #333;
}

.btn-confirm-option .option-title {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 4px;
}

.btn-confirm-option .option-subtitle {
    font-size: 12px;
    color: #ccc;
    font-weight: 300;
}

.btn-confirm-option i {
    margin-right: 5px;
}

.text-divisor {
    text-align: center;
    color: #888;
    margin: 15px 0;
    font-size: 14px;
    position: relative;
}

.icon-lightning {
    color: #ffb822;
}

/* --- MODAL DETALHES PRODUTO --- */
.modal-details-card {
    background: #fff;
    width: 98%;
    max-width: 650px;
    height: auto;
    max-height: 98vh;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 15px;
    /* Rounded corners as requested */
    overflow: hidden;
    animation: slideUpDetails 0.2s ease-out;
}

@keyframes slideUpDetails {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.modal-details-header {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centering for h3 */
    padding: 10px 15px;
    background: #404040;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 50px;
    /* Precise height */
}

.btn-back-details {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    position: absolute;
    /* Lock to the left */
    left: 15px;
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.btn-back-details .material-symbols-outlined {
    font-size: 20px;
    /* Small arrow as in screenshot */
}

.modal-details-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    flex: 1;
    /* Center between buttons if any, but absolute button helps */
}

.modal-details-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    /* Margem igual em todos os lados para efeito de moldura */
}

.details-image-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.details-image-container img {
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: cover;
    /* Using cover for a filled, premium look as in the inspiration */
    border-radius: 15px;
}

.details-info {
    padding: 20px;
}

.details-info h2 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #333;
    font-weight: 700;
}

.details-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.modal-details-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fff;
    z-index: 101;
}

.footer-details-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#btn-add-detail {
    background-color: #565656;
    color: #fff;
    border: none;
    flex: 1;
    height: 44px;
    padding: 0 15px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}

.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 44px;
    overflow: hidden;
}

.quantity-controls button {
    width: 40px;
    height: 100%;
    border: none;
    background: #f9f9f9;
    font-size: 20px;
    font-weight: 300;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-controls button:first-child {
    border-right: 1px solid #ddd;
}

.quantity-controls button:last-child {
    border-left: 1px solid #ddd;
}

.quantity-controls span {
    font-size: 16px;
    font-weight: 600;
    min-width: 25px;
    text-align: center;
}

@media (max-width: 600px) {
    .modal-overlay {
        padding: 0 !important;
    }

    #modal-product-details.modal-overlay {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .modal-details-card {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
    }

    .modal-details-body {
        padding: 15px !important;
        /* Margem igual como no exemplo */
        padding-bottom: 95px !important;
        /* Espaço para o rodapé fixo */
    }

    .details-image-container {
        height: 50vh !important;
        /* Reduced from 60vh to avoid scrolling on mobile */
        max-height: 50vh !important;
    }

    .details-image-container img {
        border-radius: 15px !important;
        /* Cantos arredondados na imagem conforme solicitado */
        object-fit: contain !important;
        background: #f9f9f9;
    }

    .modal-details-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1) !important;
        padding: 10px 15px !important;
        /* Padding lateral de 15px para alinhar com o corpo */
        border-top: 1px solid #eee !important;
    }

    /* Garantir que o rodapé da página suma quando o modal abrir (opcional via CSS se usarmos z-index) */
}

.icon-turtle {
    color: #7abaff;
}

/* --- MODAL SUCESSO --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    /* Centraliza no meio da tela */
    padding: 20px;
    /* Margem de segurança para mobile */
}

.modal-success-card {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin: 15px;
}

.success-icon-circle {
    width: 100px;
    height: 100px;
    border: 4px solid #f2faf0;
    /* Verde bem clarinho para o círculo */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #79c379;
    /* Verde mais vivo para o ícone */
}

.modal-success-card h2 {
    color: #595959;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
}

.modal-success-card p {
    color: #545454;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-modal-ok {
    background-color: #26dad2;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

/* --- MODAL CONFIRMAÇÃO --- */
.modal-confirm-card {
    background: #fff;
    width: 90%;
    max-width: 450px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin: 15px;
}

.confirm-icon-circle {
    width: 100px;
    height: 100px;
    border: 4px solid #fff4e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #ffb822;
    /* Amarelo/Laranja */
}

.confirm-text {
    color: #555;
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 300;
}

/* --- MODAL ERRO (LOJA FECHADA) --- */
.modal-error-card {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin: 15px;
}

.error-icon-circle {
    width: 100px;
    height: 100px;
    border: 4px solid #fef0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #f56c6c;
    /* Vermelho Erro */
}

.modal-error-card h2 {
    color: #595959;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 10px;
}

.modal-error-card p {
    color: #999;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-modal-erro {
    background-color: #f56c6c;
    color: #fff;
    border: none;
    padding: 8px 25px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-confirm-no,
.btn-confirm-yes {
    border: none;
    padding: 8px 25px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    min-width: 80px;
    border-radius: 2px;
}

.btn-confirm-no {
    background-color: #d9534f;
    /* Vermelho */
}

.btn-confirm-yes {
    background-color: #5cb85c;
    /* Verde */
}

/* --- FORM VERIFICACAO --- */
.timer-text {
    font-size: 14px;
    color: #333;
    margin: 15px 0;
}

.timer-text strong {
    font-weight: 700;
}

.help-text-small {
    font-size: 12px;
    color: #888;
    margin: 20px 0;
    line-height: 1.4;
}

.verify-footer-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-voltar {
    background-color: #e1e5ec;
    color: #444;
    flex: 1;
    border: none;
    padding: 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-confirmar-final {
    background-color: #008000;
    color: #fff;
    flex: 1.2;
    border: none;
    padding: 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.input-codigo-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.input-codigo-label span {
    color: #dc3545;
}

.form-control-codigo {
    width: 100%;
    border: 1px solid #ccc;
    padding: 12px;
    font-size: 16px;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
}

/* --- MENU DRAWER --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9000;
    display: none;
    pointer-events: auto;
}

body.menu-open {
    overflow: hidden !important;
    touch-action: none;
    -webkit-overflow-scrolling: none;
}

.menu-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 300px;
    height: 100%;
    background: #fff;
    z-index: 9500;
    transition: right 0.3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.menu-drawer.active {
    right: 0;
}

.drawer-header {
    padding: 40px 20px 25px 20px;
    text-align: center;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: #444;
    font-size: 26px;
    font-weight: 300;
}

.drawer-logo {
    height: 75px;
    width: auto;
    margin-bottom: 12px;
    object-fit: contain;
}

.closed-badge {
    display: inline-block;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: 400;
    text-transform: uppercase;
}

.drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-menu li {
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

/* Remove a borda superior do primeiro item para não duplicar com o header */
.drawer-menu li:first-child {
    border-top: none;
}

.drawer-menu li a {
    display: flex;
    align-items: center;
    padding: 13px 25px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    gap: 12px;
    transition: background 0.2s;
}

.drawer-menu li a:hover {
    background: #f9f9f9;
}

.drawer-menu li a i {
    width: 20px;
    font-size: 17px;
    text-align: center;
    color: #333;
}

/* Divisor entre seções (Cardápio -> Meus Pedidos) */
.section-divider {
    height: 0;
    background: transparent;
    border-top: 2px solid #b2becd;
    /* Cor azulada/cinza do exemplo */
    margin: 5px 0;
    list-style: none;
}

.drawer-info {
    padding: 25px;
    border-top: 1px solid #f0f0f0;
}

.drawer-info h4 {
    font-size: 14px;
    margin: 15px 0 5px 0;
    font-weight: 700;
    color: #333;
}

.drawer-info p {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.payment-note {
    font-size: 12px !important;
    color: #999;
    line-height: 1.3;
}

.payment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.payment-list li {
    font-size: 13px;
    color: #666;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-list li::before {
    content: "";
    width: 3px;
    height: 3px;
    background: #666;
    border-radius: 50%;
}

.drawer-footer {
    padding: 30px 20px;
    text-align: center;
    margin-top: auto;
}

.f5-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.f5-logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    /* Adicionado para arredondar os cantos */
    transition: transform 0.3s ease;
}

.f5-logo-container a:hover .f5-logo-img {
    transform: scale(1.05);
}

/* --- COMPONENTES COMPARTILHADOS --- */
.portlet {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    /* Espaço que cria a "divisão" cinza */
    /* border: 1px solid #ddd; */
    /* Bordas ao redor de cada card */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.portlet-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 15px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2F353B;
}

#webapp-conta .portlet-title i {
    color: #3f444a;
    font-size: 18px;
}

/* --- TELA MINHA CONTA --- */
#webapp-conta {
    width: 100%;
    max-width: 900px;
    /* Alinhado com a largura total do app */
    margin: 90px auto 100px auto;
    padding: 0 20px;
    /* Padding apenas lateral para respiro dos cards */
    box-sizing: border-box;
    /* SEM background-color e bordas para mostrar o fundo cinza real do app */
    min-height: 80vh;
}

/* Estilo real de Portlet (Card) como na imagem de exemplo */
#webapp-conta .portlet {
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 15px;
    /* Espaçamento real entre os cards */
    /* border: 1px solid #ddd; */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
    border-radius: 0;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 15px;
    flex: 1;
}

.col-8 {
    flex: 0 0 66.66%;
}

.col-6 {
    flex: 0 0 calc(50% - 7.5px);
}

.col-4 {
    flex: 0 0 calc(33.33% - 10px);
}

.col-3 {
    flex: 0 0 calc(25% - 11px);
}

/* --- TELA TAXA DE ENTREGA --- */
#webapp-taxa-entrega {
    width: 100%;
    max-width: 900px;
    margin: 90px auto 100px auto;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 80vh;
}

#webapp-taxa-entrega .portlet {
    background-color: #ffffff;
    padding: 30px;
    margin-bottom: 15px;
    /* border: 1px solid #ddd; */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
    border-radius: 0;
}

.cep-container {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.cep-container .form-control {
    flex: 1;
}

.btn-cep-help {
    background-color: #4E4E4E;
    color: #fff;
    border: none;
    padding: 0 20px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.form-hint {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 8px;
    line-height: 1.4;
}

.btn-calculate-tax {
    background-color: #565656;
    color: #fff;
    width: 100%;
    border: none;
    padding: 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    border-radius: 4px;
}

.btn-calculate-tax:hover {
    background-color: #008f06;
}

/* Responsividade para rows do formulário */
@media (max-width: 600px) {
    .form-row.flex-mobile {
        flex-direction: column;
        gap: 0;
    }

    .form-row.flex-mobile .form-group {
        flex: 0 0 100%;
        margin-bottom: 15px;
    }
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    margin-bottom: 5px;
}

.form-label .required {
    color: red;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
}

.form-control:read-only {
    background-color: #f5f5f5;
}

.input-group {
    display: flex;
    align-items: stretch;
}

.country-code {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-right: none;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333;
    gap: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-save {
    background-color: #565656;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

/* MEUS ENDEREÇOS */
.section-addresses .portlet-body {
    padding-top: 10px;
}

.address-item {
    background: #E9EDEF;
    border: 1px solid #eee;
    border-radius: 0;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    padding: 15px;
}

.address-header {
    position: absolute;
    top: 15px;
    left: -15px;
    /* Faz a barra preta sair para fora do card branco */
    background: #000;
    color: #fff;
    padding: 8px 15px;
    /* Aumentei um pouco o preenchimento */
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
}

.address-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    /* Posiciona exatamente na dobra */
    left: 0;
    width: 0;
    height: 0;
    border-top: 10px solid #222;
    /* Cor mais escura para o efeito de sombra da dobra */
    border-left: 10px solid transparent;
    /* Cria o triângulo da dobra para fora */
}

.address-content {
    margin-top: 55px;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.btn-delete-address {
    background-color: #b20000;
    color: white;
    border: none;
    padding: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-logout {
    background-color: #444;
    color: white;
    border: none;
    padding: 22px;
    /* Aumentado para dar a espessura da inspiração */
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 0;
    /* Cantos quadrados como solicitado */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    margin-bottom: 40px;
}

@media (min-width: 900px) {
    .menu-drawer {
        max-width: 280px;
    }
}

/* --- AJUSTES EXCLUSIVOS PARA MOBILE --- */
@media (max-width: 600px) {

    /* Efeito de bordas laterais (espaço para o fundo cinza aparecer) */
    #webapp-cardapio,
    #webapp-login {
        width: 92% !important;
        margin: 80px auto 150px auto !important;
        /* Removido negativo para liberar o scroll total */
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 15px 15px 20px 15px !important;
        background-color: #ffffff;
        /* Espaço exato para aparecer acima das duas barras */
        box-sizing: border-box;
    }

    /* Tela de conta no mobile mantém os portlets como cards sobre o fundo */
    #webapp-conta {
        width: 92% !important;
        margin: 80px auto 140px auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        border: none !important;
        box-sizing: border-box;
    }

    #webapp-conta .portlet {
        width: 100% !important;
        padding: 25px 22px !important;
        /* Aumentado para garantir o respeito às margens internas */
        margin-bottom: 20px !important;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
        /* Essencial para manter o conteúdo dentro do card */
    }

    /* Melhora o alinhamento do título para não colar nas bordas do card */
    #webapp-conta .portlet-title {
        margin-left: 0;
        margin-right: 0;
    }

    #webapp-conta .btn-save {
        width: 100%;
        margin-top: 20px;
    }

    /* Reset Home para tela cheia */
    #webapp-home {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 60px 0 70px 0 !important;
    }

    /* Ajuste para o header não cobrir o topo do card */
    #store-header {
        padding: 5px 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .info-time-container {
        margin-top: 15px;
        padding-bottom: 0px !important;
    }

    .time-card {
        width: 100% !important;
        max-width: 100% !important;
        /* Mantém o tamanho original para mobile */
        padding: 8px 10px !important;
        margin-bottom: 8px;
    }

    /* Imagens dos produtos maiores no mobile */
    .product-content img {
        width: 100px !important;
        height: 130px !important;
        min-width: 100px;
        object-fit: cover;
    }

    .adicional-product-content img {
        width: 120px !important;
        height: 75px !important;
        min-width: 120px;
        object-fit: cover;
    }

    .bebida-product-content img {
        width: 100px !important;
        height: 130px !important;
        min-width: 100px;
        object-fit: contain !important;
        /* Mostra a garrafa inteira */
        background-color: #f9f9f9;
    }

    /* Ajuste no texto lateral da imagem */
    .product-content .info h4 {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .product-content .info p {
        font-size: 11px;
        margin-bottom: 5px;
    }

    /* Botão de comprar mais compacto */
    .btn-comprar {
        padding: 10px;
        font-size: 13px;
    }

    /* Estilo do Carrinho igual à inspiração */
    #cart-footer {
        padding: 5px 15px;
        height: 60px;
        border-top: 1px solid #333;
        /* Linha mais fina */
    }

    .cart-badge {
        min-width: 35px;
        height: 35px;
        border-radius: 50%;
        /* Círculo perfeito */
        padding: 0;
        margin-right: 15px;
        font-size: 16px;
    }

    #cart-footer .cart-info span {
        font-size: 13px;
        font-weight: 500;
    }

    /* Cabeçalhos de categoria mais finos */
    .category-header {
        padding: 5px 12px;
    }

    .category-header h3 {
        font-size: 14px;
    }
}

/* --- ADDRESS CARD NEW STYLE (METRONIC INSPIRED) --- */
.mt-element-ribbon {
    position: relative;
    margin: 0 auto 15px auto;
    background-color: #e9edef; /* bg-grey-steel */
    padding: 25px 25px 25px 25px;
    border: 1px solid #e7ecf1;
    text-align: left;
}

.mt-element-ribbon .ribbon {
    position: absolute;
    top: 15px;
    left: -10px; /* Puxa para fora do card para o efeito clip */
    padding: 6px 15px;
    z-index: 10;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    background-color: #000;
}

.mt-element-ribbon .ribbon-sub {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.mt-element-ribbon .ribbon-sub::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 0 10px; /* Invertido para o sentido correto */
    border-color: #000 transparent transparent transparent;
    filter: brightness(0.5);
}

.mt-element-ribbon .ribbon-content {
    padding-top: 40px;
    text-align: left;
}

.address-label-bold {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.address-text-line {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    display: block;
}

.btn-delete-address-red {
    width: 100%;
    background-color: #a90303;
    color: #fff !important;
    border: none;
    padding: 10px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    text-decoration: none;
}

.btn-delete-address-red:hover {
    background-color: #820202;
    color: #fff !important;
}

/* --- CUSTOM PREMIUM MODALS --- */
.modal-premium-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-premium-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-premium-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
}

.modal-premium-icon.success {
    border: 3px solid #00A808;
    color: #565656;
}

.modal-premium-icon.confirm {
    border: 3px solid #ffc107;
    color: #ffc107;
}

.modal-premium-title {
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
}

.modal-premium-message {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin-bottom: 25px;
}

.modal-premium-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-premium-modal {
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-premium-modal.primary {
    background-color: #17a2b8; /* Cor teal do print */
    color: #fff;
}

.btn-premium-modal.primary:hover {
    background-color: #138496;
}

.btn-premium-modal.secondary {
    background-color: #6c757d;
    color: #fff;
}

.btn-premium-modal.secondary:hover {
    background-color: #5a6268;
}


/* Custom contrast-compliant yellow theme rules */
.btn-comprar, .btn-finalizar, .btn-ver-cardapio, .btn-cart-finish, .btn-login, #btn-add-detail, .btn-calculate-tax, .btn-save, .btn-cart-next {
    background-color: #FFDE21 !important;
    background: #FFDE21 !important;
    color: #565656 !important;
    transition: all 0.3s ease !important;
}
.btn-comprar:hover, .btn-finalizar:hover, .btn-ver-cardapio:hover, .btn-cart-finish:hover, .btn-login:hover, #btn-add-detail:hover, .btn-calculate-tax:hover, .btn-save:hover, .btn-cart-next:hover {
    background-color: #565656 !important;
    background: #565656 !important;
    color: #FFDE21 !important;
}

/* Destaques Component Styling */
.destaque-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e8f0;
}
.destaque-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.destaque-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}
.destaque-card-info h4 {
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333333;
    line-height: 1.25;
}
.destaque-card-info p {
    margin: 0 0 10px 0;
    font-size: 0.72rem;
    color: #777777;
    line-height: 1.35;
    height: 2.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.destaque-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}
.destaque-card-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #10B981;
}
.destaque-btn-add {
    background-color: #10B981;
    color: #ffffff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
}
.destaque-btn-add:hover {
    background-color: #059669;
}