/* =========================
   BELO ASSADO - LOJA: CARDAPIO, SACOLA, CHECKOUT E CONFIRMACAO
   Carregado depois de main.css. Refina a home sem reescrever home.css
   (que ainda usa !important em varios pontos, por isso alguns aqui tambem usam).
   ========================= */

:root {
    --ba-laranja: #FFA100;
    --ba-laranja-escuro: #C97A00; /* contraste AA com texto branco em tamanhos grandes */
    --ba-laranja-texto: #8A5300;  /* laranja para texto sobre fundo claro (AA) */
    --ba-laranja-suave: #FFF4E0;
    --ba-preto: #141210;
    --ba-texto: #2B241C;
    --ba-texto-suave: #6B6157;
    --ba-borda: #E9E1D6;
    --ba-fundo: #FAF7F2;
    --ba-sucesso: #1E7A3C;
    --ba-erro: #B42318;
    --ba-erro-suave: #FEF3F2;
    --ba-raio: 14px;
    --ba-foco: 0 0 0 3px rgba(255, 161, 0, 0.45);
}

body.home-page {
    background: var(--ba-fundo);
    color: var(--ba-texto);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 20000;
    background: var(--ba-preto);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
}

.skip-link:focus {
    top: 12px;
}

.home-page :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ba-foco) !important;
}

/* ===== Cabecalho compacto: o cardapio aparece sem rolar uma tela inteira ===== */
.home-page .header.header-compacto {
    padding: 18px 0 !important;
    background: var(--ba-preto) !important;
}

.home-page .header.header-compacto::after {
    display: none;
}

.home-page .header-compacto .header-main {
    justify-content: flex-start;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
}

.home-page .header-compacto .header-logo {
    min-width: 0;
}

.home-page .header-compacto .logo-img {
    width: 112px !important;
    max-width: 112px !important;
    min-height: 0 !important;
    left: 0;
}

.home-page .header-compacto .header-text h1 {
    font-size: 1.75rem !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.home-page .header-compacto .header-text p {
    font-size: 0.98rem !important;
    color: #CFC6BA;
    font-weight: 400;
    max-width: 46ch;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .home-page .header.header-compacto {
        padding: 14px 0 !important;
    }

    .home-page .header-compacto .header-main {
        flex-direction: row;
        text-align: left;
        gap: 14px;
    }

    .home-page .header-compacto .logo-img {
        width: 76px !important;
        max-width: 76px !important;
    }

    .home-page .header-compacto .header-text h1 {
        font-size: 1.3rem !important;
    }

    .home-page .header-compacto .header-text p {
        font-size: 0.85rem !important;
    }
}

.home-page .main-content-wrapper {
    max-width: 960px;
    padding-bottom: 120px;
}

/* ===== Pedido recente (atalho para acompanhar) ===== */
.pedido-em-andamento {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ba-borda);
    border-left: 4px solid var(--ba-laranja);
    border-radius: var(--ba-raio);
}

.pedido-em-andamento[hidden] {
    display: none;
}

.pedido-em-andamento > i {
    color: var(--ba-laranja-texto);
    font-size: 1.2rem;
}

.pedido-em-andamento div {
    display: grid;
    flex: 1;
    min-width: 0;
}

.pedido-em-andamento span {
    color: var(--ba-texto-suave);
    font-size: 0.85rem;
}

.pedido-em-andamento .btn {
    white-space: nowrap;
    padding: 8px 14px;
    min-height: 40px;
}

/* ===== Status da loja: uma faixa, nao um cartao enorme ===== */
.home-page .store-status-card {
    padding: 14px 16px !important;
    margin-top: 16px !important;
    border-radius: var(--ba-raio) !important;
    background: #fff !important;
    border: 1px solid var(--ba-borda) !important;
    box-shadow: none !important;
}

.home-page .store-status-card .store-status-kicker {
    display: none;
}

.home-page .store-status-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.home-page .store-status-pill {
    flex-shrink: 0;
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
}

.home-page .menu-item-img i {
    font-size: 1.2rem !important;
}

.home-page .store-status-card h2 {
    font-size: 1rem !important;
    line-height: 1.35;
    margin: 0;
}

.home-page .store-status-message {
    margin: 6px 0 10px !important;
    font-size: 0.9rem;
    color: var(--ba-texto-suave);
}

.home-page .store-status-chips {
    gap: 6px !important;
}

.home-page .store-status-chip {
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
    background: var(--ba-fundo) !important;
}

/* ===== Tipos de pedido: barra segmentada (todas as opcoes visiveis, sem arrastar) ===== */
.home-page .pedido-mode-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: visible;
    padding: 4px !important;
    margin: 18px 0 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 1.5px solid var(--ba-borda) !important;
    border-radius: 16px !important;
}

.home-page .pedido-mode-nav[hidden] {
    display: none !important;
}

/* dividem a largura igualmente; se nao couberem, quebram para uma 2a linha em vez de rolar */
.home-page .pedido-mode-btn {
    flex: 1 1 88px !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ba-texto) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    white-space: nowrap;
    box-shadow: none !important;
    gap: 8px !important;
}

.home-page .pedido-mode-btn:not(.active):hover {
    background: #FBF6EF !important;
}

/* celular: icone em cima do nome, para caberem lado a lado */
@media (max-width: 480px) {
    .home-page .pedido-mode-btn {
        flex: 1 1 72px !important;
        flex-direction: column !important;
        min-height: 54px !important;
        padding: 6px 4px !important;
        font-size: 0.8rem !important;
        gap: 3px !important;
    }
}

.home-page .pedido-mode-btn[hidden] {
    display: none !important;
}

.home-page .pedido-mode-btn.active {
    background: var(--ba-preto) !important;
    border-color: var(--ba-preto) !important;
    color: #fff !important;
}

.home-page .pedido-mode-btn.active i {
    color: var(--ba-laranja) !important;
}

/* ===== Passos 1 e 2 ===== */
.passo-numero {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ba-laranja);
    color: var(--ba-preto);
    font-size: 0.85rem;
    font-weight: 800;
    margin-right: 6px;
    flex-shrink: 0;
}

.home-page .menu-header {
    margin: 22px 0 12px !important;
    text-align: left !important;
}

.home-page .menu-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem !important;
    color: var(--ba-texto) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
}

.menu-subtitle {
    margin: 4px 0 0 34px;
    color: var(--ba-texto-suave);
    font-size: 0.9rem;
}

/* ===== Cards de tamanho ===== */
.home-page .menu-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px !important;
}

.home-page .menu-item {
    width: 100%;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: var(--ba-raio) !important;
    border: 2px solid var(--ba-borda) !important;
    box-shadow: none !important;
    text-align: left;
    font: inherit;
    color: inherit;
    align-items: center !important;
}

.home-page .menu-item:hover {
    transform: none !important;
    border-color: #F2C77A !important;
}

.home-page .menu-item.selecionado {
    border-color: var(--ba-laranja) !important;
    background: var(--ba-laranja-suave) !important;
    box-shadow: 0 0 0 1px var(--ba-laranja) inset !important;
}

.home-page .menu-item-img {
    width: 48px !important;
    height: 48px !important;
    background: var(--ba-laranja-suave) !important;
    box-shadow: none !important;
    color: var(--ba-laranja-texto);
    font-size: 1.2rem;
}

.home-page .menu-item-info {
    display: grid;
    gap: 2px;
}

.home-page .menu-item-name {
    font-size: 1.05rem !important;
    margin: 0 !important;
}

.home-page .menu-item-desc {
    margin: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.35;
}

/* home.css escondia descricao e titulo no celular; aqui eles sao curtos e uteis */
.home-page .menu-item .menu-item-desc,
.home-page .header-compacto .header-text {
    display: block !important;
}

.menu-item-limites {
    font-size: 0.78rem;
    color: var(--ba-laranja-texto);
    font-weight: 600;
}

.home-page .menu-item-price {
    font-size: 1.1rem !important;
    color: var(--ba-texto) !important;
    white-space: nowrap;
    align-self: center;
}

.estado-vazio {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1.5px dashed var(--ba-borda);
    border-radius: var(--ba-raio);
    background: #fff;
    color: var(--ba-texto-suave);
    text-align: center;
}

.estado-vazio > i {
    font-size: 1.5rem;
    color: var(--ba-laranja-texto);
}

.estado-erro {
    border-color: #F4C7C3;
    background: var(--ba-erro-suave);
}

/* ===== Montagem ===== */
.home-page .section-title {
    display: flex;
    align-items: center;
    font-size: 1.2rem !important;
}

.home-page .categoria-title {
    font-size: 1rem !important;
}

.home-page .prato-item {
    justify-content: flex-start !important;
    gap: 10px;
    min-width: 0 !important;
    text-align: left !important;
    padding: 10px 14px !important;
}

.prato-check {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #CDBFAE;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: transparent;
    background: #fff;
}

.home-page .prato-item.selecionado {
    background: var(--ba-laranja-suave) !important;
    color: var(--ba-texto) !important;
    border-color: var(--ba-laranja) !important;
    box-shadow: none !important;
}

.home-page .prato-item.selecionado .prato-nome,
.home-page .prato-item.selecionado::after {
    color: var(--ba-texto) !important;
}

.home-page .prato-item.selecionado::after {
    display: none !important;
}

.home-page .prato-item.selecionado .prato-check {
    background: var(--ba-laranja);
    border-color: var(--ba-laranja);
    color: var(--ba-preto);
}

.home-page .prato-item.no-limite {
    opacity: 0.55;
}

.home-page .contador.ok {
    color: var(--ba-sucesso);
}

.home-page .contador.limite {
    color: var(--ba-laranja-texto);
    font-weight: 700;
}

/* Botao flutuante "Adicionar" so aparece quando ha um tamanho escolhido */
.home-page .btn-floating-action.aguardando-tamanho {
    display: none !important;
}

.home-page .btn-floating-action {
    bottom: 20px !important;
    width: min(360px, calc(100vw - 32px)) !important;
}

/* ===== Sacola flutuante: so com itens, mostrando o total ===== */
.home-page .floating-cart {
    display: none;
    bottom: 20px !important;
    right: 16px !important;
}

.home-page .floating-cart.tem-itens {
    display: block;
}

.home-page .fab-cart {
    width: auto !important;
    min-width: 60px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    gap: 8px !important;
    height: 56px !important;
}

.home-page .fab-cart .fab-count {
    position: static !important;
    min-width: 22px;
    height: 22px;
    font-size: 0.75rem !important;
}

.home-page .fab-total {
    font-weight: 800;
    font-size: 0.95rem;
}

.home-page .fab-total:empty {
    display: none;
}

@media (max-width: 520px) {
    .home-page .fab-total {
        display: none;
    }

}

/* O botao "Adicionar" fica sempre centralizado: em telas estreitas a sacola sobe para nao cobri-lo. */
@media (max-width: 760px) {
    .home-page:has(.btn-floating-action:not(.aguardando-tamanho)) .floating-cart {
        bottom: 88px !important;
    }
}

/* ===== Painel lateral (sacola + finalizar) ===== */
.home-page .drawer-header {
    gap: 12px;
}

.drawer-step {
    margin-left: auto;
    font-size: 0.78rem;
    color: #CFC6BA;
}

.home-page .cart-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.drawer-total-hint {
    margin: -4px 0 6px;
    font-size: 0.8rem;
    color: var(--ba-texto-suave);
    text-align: center;
    width: 100%;
}

.drawer-total-hint:empty {
    display: none;
}

.checkout-aviso-privacidade {
    margin: 0;
    font-size: 0.72rem;
}

.checkout-aviso-privacidade a {
    color: inherit;
    text-decoration: underline;
}

.home-page .drawer-footer {
    flex-direction: column;
    gap: 8px;
}

.home-page .btn-finalizar-pedido,
.home-page .btn-confirmar-pedido {
    width: 100%;
    min-height: 54px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    background: var(--ba-laranja) !important;
    color: var(--ba-preto) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.home-page .btn-confirmar-pedido {
    justify-content: space-between;
    padding: 0 18px !important;
}

.home-page .btn-finalizar-pedido:disabled,
.home-page .btn-confirmar-pedido:disabled {
    background: #E5DED4 !important;
    color: #7A7066 !important;
    cursor: not-allowed;
}

.checkout-erro-geral {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ba-erro-suave);
    color: var(--ba-erro);
    font-size: 0.88rem;
    font-weight: 600;
}

.checkout-erro-geral[hidden] {
    display: none;
}

/* ===== Formulario do checkout ===== */
.checkout-dados-salvos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #EEF7F0;
    color: var(--ba-sucesso);
    font-size: 0.85rem;
}

.checkout-dados-salvos[hidden] {
    display: none;
}

.link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
}

.checkout-secao {
    border: 1px solid var(--ba-borda);
    border-radius: var(--ba-raio);
    padding: 14px;
    margin: 0 0 14px;
    background: #fff;
    min-width: 0;
}

.checkout-secao legend {
    display: flex;
    align-items: center;
    padding: 0 6px;
    margin-left: -6px;
    font-weight: 800;
    font-size: 1rem;
    color: var(--ba-texto);
}

.checkout-secao legend small {
    font-weight: 500;
    color: var(--ba-texto-suave);
    margin-left: 6px;
}

.home-page .finalize-form .form-group {
    margin-bottom: 12px;
}

.home-page .finalize-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ba-texto);
}

.obrigatorio {
    color: var(--ba-erro);
}

.home-page .finalize-form .form-input,
.home-page .finalize-form .form-select,
.home-page .finalize-form .form-textarea {
    min-height: 48px;
    font-size: 16px; /* evita zoom automatico no iOS */
    border-radius: 12px;
}

.home-page .finalize-form .form-hint {
    font-size: 0.8rem;
    color: var(--ba-texto-suave);
    margin: 4px 0 0;
}

.form-row-2 {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
}

.cep-campo {
    position: relative;
}

.cep-campo .cep-carregando {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -0.5em;
    line-height: 1;
    color: var(--ba-texto-suave);
    pointer-events: none;
}

.cep-campo .cep-carregando[hidden] {
    display: none;
}

.rua-campo {
    position: relative;
}

.rua-sugestoes {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ba-borda);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(20, 18, 16, 0.12);
}

.rua-sugestoes[hidden] {
    display: none;
}

.rua-sugestoes li {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.3;
}

.rua-sugestoes li small {
    display: block;
    color: var(--ba-texto-suave);
    font-size: 0.8rem;
}

.rua-sugestoes li:hover,
.rua-sugestoes li[aria-selected="true"] {
    background: var(--ba-laranja-suave);
}

.fora-area-aviso {
    display: flex;
    gap: 12px;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid #F4C7C3;
    border-radius: 12px;
    background: var(--ba-erro-suave);
    color: var(--ba-texto);
}

.fora-area-aviso[hidden] {
    display: none;
}

.fora-area-aviso > i {
    color: var(--ba-erro);
    font-size: 1.2rem;
    margin-top: 2px;
}

.fora-area-aviso strong {
    color: var(--ba-erro);
}

.fora-area-aviso p {
    margin: 4px 0 10px;
    font-size: 0.88rem;
}

.fora-area-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fora-area-acoes .btn {
    flex: 1 1 180px;
    min-height: 44px;
}

.form-row-cidade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 10px;
}

.form-row-cidade .campo-erro {
    grid-column: 1 / -1;
    margin: -6px 0 12px;
}

.campo-erro {
    margin: 4px 0 0;
    color: var(--ba-erro);
    font-size: 0.82rem;
    font-weight: 600;
}

.campo-erro:empty {
    display: none;
}

.home-page .finalize-form .campo-invalido {
    border-color: var(--ba-erro) !important;
    background: #FFFBFA;
}

.grupo-invalido {
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ba-erro);
}

/* Entrega/retirada e pagamento como cartoes de opcao */
.home-page .entrega-opcoes,
.home-page .pagamento-opcoes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    margin-bottom: 12px;
}

.home-page .entrega-btn,
.home-page .pagamento-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 60px;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 2px solid var(--ba-borda) !important;
    background: #fff !important;
    color: var(--ba-texto) !important;
    text-align: left;
    font: inherit;
    box-shadow: none !important;
}

.home-page .entrega-btn > i,
.home-page .pagamento-btn > i {
    font-size: 1.15rem;
    color: var(--ba-laranja-texto);
    width: 22px;
    text-align: center;
}

.home-page .entrega-btn span,
.home-page .pagamento-btn span {
    display: grid;
    line-height: 1.2;
}

.home-page .entrega-btn strong,
.home-page .pagamento-btn strong {
    font-size: 0.95rem;
}

.home-page .entrega-btn small,
.home-page .pagamento-btn small {
    font-size: 0.75rem;
    color: var(--ba-texto-suave);
    font-weight: 500;
}

.home-page .entrega-btn.selecionado,
.home-page .pagamento-btn.selecionado {
    border-color: var(--ba-laranja) !important;
    background: var(--ba-laranja-suave) !important;
    color: var(--ba-texto) !important;
}

.pagamento-aviso-geral {
    margin: 0 0 10px !important;
}

.home-page .sem-numero-opcao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.85rem;
    min-height: 32px;
}

.home-page .retirada-box {
    border-radius: 12px;
    background: var(--ba-fundo);
    border: 1px solid var(--ba-borda);
}

/* ===== Paineis de pagamento (PIX, dinheiro, cartao) ===== */
.painel-pagamento {
    margin-top: 4px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ba-fundo);
    border: 1px solid var(--ba-borda);
    display: grid;
    gap: 10px;
    font-size: 0.9rem;
}

.painel-pagamento[hidden] {
    display: none;
}

.painel-pagamento p {
    margin: 0;
    line-height: 1.45;
}

.painel-pagamento-titulo {
    font-weight: 800;
    color: var(--ba-texto);
}

.painel-pagamento-titulo i {
    color: var(--ba-laranja-texto);
    margin-right: 6px;
}

.pix-valor {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--ba-borda);
}

.pix-valor span {
    color: var(--ba-texto-suave);
    font-size: 0.85rem;
}

.pix-valor strong {
    font-size: 1.3rem;
}

.pix-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.pix-grid:not(:has([data-pix-qr])) {
    grid-template-columns: 1fr;
}

.pix-qr {
    background: #fff;
    border: 1px solid var(--ba-borda);
    border-radius: 10px;
    padding: 6px;
    aspect-ratio: 1;
}

.pix-qr svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pix-dados {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.pix-rotulo {
    font-size: 0.75rem;
    color: var(--ba-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pix-chave {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px dashed #CDBFAE;
    font-size: 0.92rem;
    word-break: break-all;
    color: var(--ba-texto);
}

.pix-beneficiario {
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.pix-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.btn-copiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--ba-preto);
    background: #fff;
    color: var(--ba-preto);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-copiar-principal {
    background: var(--ba-preto);
    color: #fff;
}

.btn-copiar-principal.copiado {
    background: #fff;
}

.btn-copiar.copiado {
    border-color: var(--ba-sucesso);
    color: var(--ba-sucesso);
}

.pix-passos {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 4px;
}

.pix-aviso {
    font-size: 0.82rem;
    color: var(--ba-texto-suave);
}

@media (max-width: 420px) {
    .pix-grid {
        grid-template-columns: 1fr;
    }

    .pix-qr {
        width: 180px;
        justify-self: center;
    }
}

.troco-pergunta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px;
}

.troco-pergunta > span {
    font-weight: 600;
    flex-basis: 100%;
}

.troco-opcao {
    min-height: 40px;
    min-width: 70px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid var(--ba-borda);
    background: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.troco-opcao.selecionado {
    border-color: var(--ba-laranja);
    background: var(--ba-laranja-suave);
}

.input-moeda {
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-moeda > span {
    font-weight: 700;
    color: var(--ba-texto-suave);
}

.input-moeda .form-input {
    max-width: 180px;
}

/* ===== Resumo ===== */
.home-page .checkout-summary-card {
    border-radius: var(--ba-raio) !important;
    border: 1px solid var(--ba-borda) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.checkout-summary-title {
    font-size: 1rem;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-resumo-itens {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px dashed var(--ba-borda);
    display: grid;
    gap: 8px;
}

.checkout-resumo-itens li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    font-size: 0.88rem;
}

.resumo-item-qtd {
    font-weight: 800;
    color: var(--ba-laranja-texto);
}

.resumo-item-nome small {
    display: block;
    color: var(--ba-texto-suave);
    font-size: 0.78rem;
    line-height: 1.35;
}

.resumo-item-preco {
    font-weight: 700;
    white-space: nowrap;
}

/* ===== Sugestoes de bebida dentro da sacola ===== */
#cart-sugestoes {
    margin-top: 14px;
}

/* ===== Confirmacao ===== */
.home-page .modal-confirmacao {
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.home-page .modal-confirmacao-header {
    background: var(--ba-preto) !important;
    color: #fff;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}

/* "X" para sair da tela de pedido recebido (mesmo efeito de "Fazer outro pedido") */
.home-page .modal-confirmacao-fechar {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
}

.home-page .modal-confirmacao-fechar:hover {
    background: rgba(255, 255, 255, 0.22);
}

.home-page .modal-confirmacao-fechar i {
    color: #fff !important;
}

.home-page .modal-confirmacao-badge {
    background: var(--ba-sucesso) !important;
    color: #fff !important;
}

.home-page .modal-confirmacao-copy p {
    color: #DDD4C8 !important;
}

.home-page .pedido-id .numero {
    color: var(--ba-texto) !important;
    letter-spacing: 1px;
}

.pedido-id-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.home-page .pedido-id small {
    display: block;
    margin-top: 6px;
    color: var(--ba-texto-suave);
    font-size: 0.8rem;
}

.painel-pagamento-confirmacao {
    margin: 14px 0;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 12px;
    background: #1E7A3C;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 14px;
    text-align: center;
    white-space: normal;
}

.home-page details.pedido-resumo-card summary,
.home-page .pedido-resumo-title {
    color: var(--ba-texto) !important;
}

.proximos-passos {
    margin: 0 0 14px;
    padding-left: 22px;
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
}

.home-page details.pedido-resumo-card summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.home-page details.pedido-resumo-card summary strong {
    margin-left: auto;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--ba-borda);
    font-size: 0.88rem;
}

.resumo-linha small {
    display: block;
    color: var(--ba-texto-suave);
}

.home-page .pedido-acao-btn {
    min-height: 50px;
    border-radius: 12px !important;
    font-weight: 800 !important;
    justify-content: center;
}

.home-page .pedido-acao-btn.btn-primary {
    background: var(--ba-laranja) !important;
    color: var(--ba-preto) !important;
    border: 0 !important;
}

.home-page .pedido-acao-btn.pedido-acao-btn-secundario {
    background: #fff !important;
    color: var(--ba-texto) !important;
    border: 1.5px solid var(--ba-borda) !important;
    box-shadow: none !important;
}

.home-page .pedido-acoes {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================
   LINHA FITNESS (refino)
   Cards com nome, descricao e preco bem separados; acao sempre visivel.
   Sem foto, o icone fica pequeno ao lado do nome em vez de um bloco vazio.
   ========================= */
.home-page .fitness-line-section {
    gap: 1rem;
}

.home-page .fitness-line-head-actions:not(:has(> :not([hidden]))) {
    display: none;
}

.home-page .fitness-line-kicker {
    margin-bottom: 0.5rem;
}

.home-page .fitness-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem;
}

/* Sem foto: [icone | nome e descricao] e, embaixo, [preco | Adicionar] na largura toda */
.home-page .fitness-product-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 0.85rem;
    row-gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--ba-raio);
    border: 1px solid rgba(58, 151, 108, 0.16);
    box-shadow: 0 6px 18px rgba(36, 90, 69, 0.06);
}

.home-page .fitness-product-card:hover {
    border-color: rgba(58, 151, 108, 0.35);
    box-shadow: 0 10px 24px rgba(36, 90, 69, 0.1);
}

/* Com foto: imagem no topo, texto e acao embaixo */
.home-page .fitness-product-card.has-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    padding: 0 0 1rem;
    overflow: hidden;
}

.home-page .fitness-product-media {
    min-height: 0;
    border: 0;
    border-radius: 12px;
    align-self: start;
}

.home-page .fitness-product-media.is-placeholder {
    width: 44px;
    height: 44px;
    background: #ecfaf2;
    color: #2b7d58;
    font-size: 1.15rem;
}

.home-page .fitness-product-card.has-image .fitness-product-media {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    background: #f3faf6;
}

.home-page .fitness-product-card.has-image .fitness-product-media img {
    min-height: 0;
    height: 100%;
}

.home-page .fitness-product-card.has-image .fitness-product-body,
.home-page .fitness-product-card.has-image .fitness-product-footer {
    padding: 0 1rem;
}

.home-page .fitness-product-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.home-page .fitness-product-name {
    margin: 0;
    color: #173a2d;
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.home-page .fitness-product-desc {
    margin: 0;
    color: #567564;
    font-size: 0.9rem;
    line-height: 1.5;
}

.home-page .fitness-product-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.home-page .fitness-product-price {
    color: #1f6b49;
    font-size: 1.2rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-page .fitness-product-card .btn.fitness-product-add {
    flex-shrink: 0;
    min-height: 44px;
    margin-top: 0;
    padding: 0.6rem 1.1rem;
    gap: 0.45rem;
    white-space: nowrap;
}

/* Celular: um card por linha, nome e descricao inteiros; com foto, miniatura ao lado do nome */
@media (max-width: 600px) {
    .home-page .fitness-products-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .home-page .fitness-product-card,
    .home-page .fitness-product-card.has-image {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: 0.65rem;
        padding: 0.85rem;
    }

    .home-page .fitness-product-card.has-image {
        grid-template-columns: 64px minmax(0, 1fr);
        overflow: visible;
    }

    .home-page .fitness-product-card.has-image .fitness-product-media {
        width: 64px;
        height: 64px;
        aspect-ratio: auto;
        border-radius: 12px;
    }

    .home-page .fitness-product-card.has-image .fitness-product-body,
    .home-page .fitness-product-card.has-image .fitness-product-footer {
        padding: 0;
    }

    .home-page .fitness-product-desc {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
        font-size: 0.86rem;
        line-height: 1.45;
    }

    .home-page .fitness-product-name {
        font-size: 1rem;
    }

    .home-page .fitness-product-card .btn.fitness-product-add {
        padding: 0.55rem 1rem;
        font-size: 0.9rem;
    }
}