/**
 * Estilos próprios da vitrine B2C (loja.php, index.php, produto.php).
 *
 * As classes de card de produto, paginação, menu de categorias e detalhe
 * de produto já existem em b2b/css/style.css e são reaproveitadas
 * diretamente (mesmas classes). Este arquivo só cobre o que é exclusivo
 * do B2C — o layout de sidebar de filtros da página de listagem — e
 * reutiliza as mesmas custom properties (--primary-color etc.) definidas
 * em b2b/css/style.css pra manter a identidade visual consistente, sem
 * duplicar nem alterar o CSS do B2B.
 */
/* Works on Firefox */
* {
    scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 15px;
}

/**::-webkit-scrollbar-track {}*/
*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    border: 1px solid;
    width: 15px;
}

.loja-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
}

.sidebar-filtros {
    background: var(--white, #fff);
    border: 1px solid var(--border-color, #bdc3c7);
    border-radius: var(--border-radius, 6px);
    padding: 20px;
    position: sticky;
    top: 20px;

}


.filtro-grupo {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-bg, #ecf0f1);
}

.filtro-grupo:last-of-type {
    border-bottom: none;
}

.filtro-grupo h3 {
    font-size: 15px;
    color: var(--primary-color, #2c3e50);
    margin-bottom: 12px;
}

.filtro-grupo-marca {
    max-height: 300px;
    overflow-y: auto;
}

.filtro-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dark, #2c3e50);
    margin-bottom: 8px;
    cursor: pointer;
}

.filtro-checkbox input {
    cursor: pointer;
}

.filtro-preco {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filtro-preco input {
    width: 0;
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #bdc3c7);
    border-radius: var(--border-radius, 6px);
    font-size: 13px;
}

.filtro-preco span {
    color: var(--gray, #95a5a6);
    font-size: 13px;
}

.btn-filtrar {
    width: 100%;
    padding: 10px;
    background: var(--secondary-color, #3498db);
    color: #fff;
    border: none;
    border-radius: var(--border-radius, 6px);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, all 0.3s ease);
    margin-bottom: 10px;
}

.btn-filtrar:hover {
    opacity: 0.9;
}

.produtos-listagem {
    min-width: 0;
}

.listagem-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.listagem-total {
    color: var(--gray, #95a5a6);
    font-size: 14px;
}

.listagem-vazia {
    text-align: center;
    color: var(--gray, #95a5a6);
    padding: 60px 20px;
    font-size: 16px;
}

@media (max-width: 800px) {
    .loja-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-filtros {
        position: static;
    }
}

/**
 * Correção de visibilidade: .category-section (usada nas 3 grades da home
 * — Novidades/Promoções/Mais Vendidos) vem com "display: none" por padrão
 * em b2b/css/style.css. No B2B isso é proposital: as seções só aparecem
 * depois que o app.js busca os produtos via fetch() e troca pra
 * "display: block" via JS (ver js/app.js, função que popula #novidades/
 * #promocoes/#vendidos). Como a home do B2C é renderizada inteira no
 * servidor (sem esse fetch/JS), a seção nunca seria revelada sem este
 * override — o conteúdo já vem pronto no HTML, então já nasce visível.
 */
.category-section {
    display: block;
}

/**
 * Formulário de endereço do checkout (checkout-endereco.php). Reaproveita
 * .login-form/.form-group (já usados nos modais de login/cadastro do
 * header.php) pra empilhar rótulo+campo — essas classes só cuidam de UM
 * campo por linha. As classes abaixo são exclusivas daqui: agrupam 2
 * campos por linha (ex: CEP + Número, Cidade + UF) lado a lado no
 * desktop, empilhando no mobile.
 */
.endereco-linha-dupla {
    display: flex;
    gap: 16px;
}

.endereco-linha-dupla>.form-group {
    flex: 1;
    min-width: 0;
}

.endereco-linha-dupla>.form-group.endereco-campo-estreito {
    flex: 0 0 140px;
}

@media (max-width: 600px) {
    .endereco-linha-dupla {
        flex-direction: column;
        gap: 0;
    }
}

.endereco-cep-status {
    font-size: 12px;
    margin-top: -2px;
    color: var(--gray, #95a5a6);
}

/**
 * Modais de login/cadastro/recuperação de senha do B2C
 * (#loginModalB2c/#registroModalB2c/#recuperarSenhaModalB2c, em
 * header.php). O CSS genérico de .modal-content (b2b/css/style.css) foi
 * pensado pra modais grandes (ex: detalhe de produto) — max-width:850px,
 * sem padding próprio. O B2B tem uma regra à parte, só pro modal de
 * login dele (#loginModal .modal-content: max-width 400px, padding
 * 25px), mas como os IDs do B2C são diferentes (loginModalB2c em vez de
 * loginModal), essa regra nunca se aplicava aqui — por isso os modais
 * apareciam largos/genéricos (bug relatado pelo David em 2026-09-22).
 * Reproduz a mesma regra do B2B, só que apontando pros IDs do B2C.
 * #recuperarSenhaModalB2c foi incluído aqui em 2026-09-29, no mesmo dia
 * em que o modal foi criado -- sem essa regra ele caía no CSS genérico
 * de 850px e ficava largo/apertado (relatado pelo David com print).
 * #cadastroIncompletoModalB2c foi incluído em 2026-09-30, junto com o
 * login via Google -- mesmo motivo.
 */
#loginModalB2c .modal-content,
#registroModalB2c .modal-content,
#recuperarSenhaModalB2c .modal-content,
#cadastroIncompletoModalB2c .modal-content {
    max-width: 400px;
    width: 90%;
    padding: 25px;
}

#loginModalB2c .modal-header h2,
#registroModalB2c .modal-header h2,
#recuperarSenhaModalB2c .modal-header h2,
#cadastroIncompletoModalB2c .modal-header h2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* O modal de cadastro tem mais campos que o de login — um pouco mais de
   espaço evita ficar apertado, mas ainda bem mais estreito que o padrão
   genérico de 850px. */
#registroModalB2c .modal-content {
    max-width: 460px;
}

/**
 * Botão "Continuar com Google" (renderizado pela própria lib do Google
 * Identity Services dentro de #googleLoginBtnB2c/#googleRegistroBtnB2c,
 * ver js/auth.js) e o divisor "ou entre com e-mail/senha" logo abaixo
 * dele -- 2026-09-30. O botão do Google já vem estilizado pela lib
 * (teme "outline"), só precisa ficar centralizado no modal, que é
 * `width:90%` (não uma largura fixa) -- daí o wrapper.
 */
.google-login-btn-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--gray, #95a5a6);
    font-size: 0.85em;
    margin: 0 0 16px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.login-divider span {
    padding: 0 10px;
}

/**
 * Widget "calcule o frete" na página do produto (produto.php), abaixo
 * do botão "Adicionar ao Carrinho" -- ver produto.php e js/produto.js.
 * Layout inspirado no bloco de frete de marketplaces conhecidos:
 * campo de CEP + botão calcular, resultado em lista com preço, prazo
 * e transportadora por linha.
 */
.product-frete-box {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--border-radius, 8px);
    padding: 16px;
}

.frete-box-titulo {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.frete-box-form {
    display: flex;
    gap: 10px;
}

.frete-box-form .form-control {
    max-width: 180px;
}

.btn-frete-calcular {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius, 6px);
    padding: 0 20px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-frete-calcular:hover {
    opacity: 0.9;
}

.btn-frete-calcular:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.frete-mensagem {
    margin-top: 10px;
    font-size: 14px;
    color: #dc3545;
}

#cupomValorDesconto {
    font-weight: bold;
    color: var(--accent-color);
}

.frete-resultado {
    margin-top: 14px;
}

.frete-opcao {
    display: grid;
    grid-template-columns: 90px 100px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, #eee);
    font-size: 14px;
}

.frete-opcao:last-of-type {
    border-bottom: none;
}

.frete-opcao-preco {
    font-weight: bold;
    color: var(--primary-color);
}

.frete-opcao-prazo {
    color: var(--gray, #777);
}

.frete-opcao-nome {
    color: var(--dark, #333);
}

.frete-opcao-aviso {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--gray, #95a5a6);
}

@media (max-width: 576px) {
    .frete-box-form {
        flex-wrap: wrap;
    }

    .frete-box-form .form-control {
        max-width: none;
        flex: 1 1 auto;
    }

    .frete-opcao {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "preco prazo" "nome nome";
        row-gap: 2px;
    }

    .frete-opcao-preco {
        grid-area: preco;
    }

    .frete-opcao-prazo {
        grid-area: prazo;
    }

    .frete-opcao-nome {
        grid-area: nome;
    }
}

/**
 * Botão "Adicionar ao Carrinho" na página do produto (produto.php) --
 * pedido do David em 2026-09-22: mover o botão pra direita em vez de
 * ocupar a largura inteira da caixa de compra.
 *
 * A classe genérica ".actions" (b2b/css/style.css) é "display:flex" e é
 * usada em vários lugares do B2B/B2C -- por isso a alteração vai numa
 * classe extra própria (.product-add-actions), sem mexer no CSS
 * compartilhado, pra não afetar nenhum outro botão que reaproveite
 * ".actions" em outra tela.
 */
.product-add-actions {
    justify-content: flex-end;
}

.product-add-actions .btn-add-produto {
    flex: 0 0 auto;
}

/**
 * Frete selecionável (radio) -- usado no carrinho (carrinho.php,
 * 2026-09-22: cálculo de frete direto no carrinho, prática comum em
 * e-commerce). Reaproveita as classes .frete-opcao/.frete-opcao-preco/
 * .frete-opcao-prazo/.frete-opcao-nome já criadas pro widget de frete de
 * produto.php -- aqui elas viram um <label> em volta de um
 * <input type="radio"> (classe extra .frete-opcao-selecionavel), em vez
 * de só uma linha de exibição.
 */
.frete-endereco-resumo {
    background: var(--light-bg);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.frete-carregando {
    color: var(--gray, #777);
    padding: 20px 0;
    text-align: center;
}

.frete-opcoes-lista {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--border-radius, 8px);
    padding: 4px 16px;
    margin-bottom: 16px;
}

.frete-opcao-selecionavel {
    cursor: pointer;
    grid-template-columns: 20px 90px 100px 1fr;
}

.frete-opcao-selecionavel input[type="radio"] {
    accent-color: var(--primary-color);
    cursor: pointer;
}

.frete-opcao-selecionavel:hover {
    background: var(--light-bg);
}

@media (max-width: 576px) {
    .frete-opcao-selecionavel {
        grid-template-columns: 20px 1fr 1fr;
        grid-template-areas: "radio preco prazo" "radio nome nome";
    }

    .frete-opcao-selecionavel input[type="radio"] {
        grid-area: radio;
    }
}

/**
 * Tela de pagamento do checkout (checkout-pagamento.php, fase de
 * Pagamento, 2026-09-23). Mesma linguagem visual do resto do checkout
 * (.form-group, .btn-primary/.btn-secondary já existentes em b2b/css/
 * style.css) -- as classes abaixo são só o que é específico desta tela:
 * resumo do pedido, grade de botões de forma de pagamento, e os estados
 * de PIX/boleto aguardando confirmação.
 */
.pagamento-resumo {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #fafafa;
}

.pagamento-resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

.pagamento-resumo-total {
    border-top: 1px solid #e5e5e5;
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 700;
    font-size: 16px;
}

.pagamento-formas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .pagamento-formas {
        grid-template-columns: 1fr;
    }
}

.btn-forma-pagamento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid var(--primary, #0d6efd);
    border-radius: 8px;
    background: #fff;
    color: var(--primary, #0d6efd);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-forma-pagamento:hover {
    background: var(--primary, #0d6efd);
    color: #fff;
}

.pagamento-pix-qrcode {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.pagamento-pix-qrcode img {
    max-width: 220px;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

.pagamento-status-aguardando {
    color: #b8860b;
    font-weight: 600;
    text-align: center;
}

.pagamento-status-sucesso {
    color: #28a745;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

/**
 * Painel "Meus Pedidos" (meus-pedidos.php, 2026-09-23). Reaproveita
 * .pagamento-resumo/.pagamento-resumo-linha/.pagamento-resumo-total
 * (já definidas acima, tela de pagamento) pro detalhe de itens de cada
 * pedido -- as classes abaixo são só o que é específico da listagem.
 */
.pedido-card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.pedido-card-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: #fafafa;
    flex-wrap: wrap;
}

.pedido-data {
    display: block;
    font-size: 12px;
    color: var(--gray, #777);
    margin-top: 2px;
}

.pedido-cabecalho-direita {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pedido-status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.pedido-status-pendente {
    background: #fff3cd;
    color: #b8860b;
}

.pedido-status-pago {
    background: #d4edda;
    color: #28a745;
}

.pedido-status-cancelado {
    background: #f1f1f1;
    color: #777;
}

.pedido-valor {
    font-weight: 700;
}

.pedido-card-detalhe {
    padding: 14px 16px;
    border-top: 1px solid #e5e5e5;
}

.pedido-detalhe-carregando,
.pedido-detalhe-erro {
    color: var(--gray, #777);
    font-size: 14px;
}

.pedido-acoes {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .pedido-card-cabecalho {
        flex-direction: column;
        align-items: flex-start;
    }

    .pedido-cabecalho-direita {
        width: 100%;
        justify-content: space-between;
    }
}

/**
 * Aviso de pedidos pendentes no carrinho vazio (carrinho.php,
 * 2026-09-23) -- ver js/carrinho-pedidos-pendentes.js.
 */
.cart-empty-pedidos-pendentes {
    margin-top: 8px;
    border-top: 1px solid #e5e5e5;
}

.cart-empty-carrinho-vazio {
    margin-top: 8px;
    border-top: 1px solid #e5e5e5;
}

.cart-empty-pedidos-pendentes p {
    color: #b8860b;
    font-weight: 600;
    margin-bottom: 10px;
}

.cart-empty i {
    display: block;
    font-size: 36px;
    color: var(--border-color);
    margin: 8px;
}
/* PIX com chave própria (2026-09-24) -- o QR é um <svg> desenhado no
   navegador (qrcode-generator), não um <img> vindo do gateway; mesma
   moldura visual do PIX do Mercado Pago (ver .pagamento-pix-qrcode img
   acima) pra não ficar com aparência diferente conforme a forma de
   confirmação. */
.pagamento-pix-qrcode svg {
    max-width: 220px;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

/* Link do WhatsApp dentro do aviso de confirmação manual do PIX
   (pagamentoPixStatusTexto, 2026-09-24) -- sublinhado pra ficar claro
   que é clicável mesmo dentro do texto dourado de "aguardando". */
.pagamento-status-aguardando a {
    color: inherit;
    text-decoration: underline;
    font-weight: 700;
}

/**
 * Menu de categorias colapsável no mobile (header.php, 2026-09-27).
 *
 * b2b/css/style.css deixa .nav-menu sempre visível (display:flex/column) --
 * funciona no desktop porque cabe tudo numa linha horizontal, mas no B2C,
 * em telas pequenas, b2b/css/responsive.css empilha os itens em coluna
 * (.nav-menu { flex-direction: column }) e cada um deles fica sempre
 * visível ao mesmo tempo -- a lista inteira de categorias cobria boa parte
 * da tela assim que a página abria (relatado pelo David, com print).
 *
 * .nav-menu-toggle fica oculto no desktop (onde o menu já cabe numa linha
 * só e não precisa de botão nenhum) e some com display:none. No mobile ele
 * aparece, e o <ul class="nav-menu"> some por padrão -- só reaparece com a
 * classe .nav-menu-open, adicionada/removida pelo script inline no fim de
 * header.php.
 */
.nav-menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .nav-menu-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 15px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: none;
        border-radius: 0;
    }

    .nav-menu-toggle:hover {
        background: transparent;
        color: #fff;
    }

    .nav-menu-toggle i {
        font-size: 16px;
        transition: transform .2s ease;
    }

    .nav-menu-toggle.ativo i {
        transform: rotate(90deg);
    }

    /* Escondido por padrão -- só aparece com .nav-menu-open (JS no
       header.php). !important necessário pra vencer ".nav-menu { display:
       flex }" de b2b/css/style.css, carregado antes deste arquivo. */
    .nav-menu {
        display: none !important;
        max-height: 70vh;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .nav-menu.nav-menu-open {
        display: flex !important;
    }
}

/* Submenu aberto por toque (acordeão, JS no header.php). b2b/css/responsive.css
   só define .submenu.show até 768px -- aqui vale também pra tablet (touch sem
   :hover acima de 768px), e a seta gira em qualquer nível, não só no raiz. */
.nav-item.has-submenu>.submenu.show {
    display: block;
}

.submenu-aberto .dropdown-arrow {
    transform: rotate(90deg);
}

/* Subcategoria que tem filhas: seta alinhada à direita, igual ao 1º nível */
.nav-item.has-submenu>.submenu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/**
 * Imagem do produto vazando por cima do título da seção e por baixo sobre o
 * nome do produto no mobile (relatado pelo David, print, 2026-09-27).
 *
 * Causa: b2b/css/style.css fixa ".product-image img" em max-height:200px,
 * mas b2b/css/responsive.css reduz a altura do CONTAINER ".product-image"
 * pra 150px (768px) e depois 120px (480px/landscape) sem tocar no
 * max-height da imagem -- ela continua tentando desenhar até 200px dentro
 * de uma caixa menor, e como ".product-image" não tem overflow:hidden, o
 * excesso vaza pra cima e pra baixo da caixa.
 *
 * max-height:100% resolve na raiz (a imagem nunca ultrapassa a altura real
 * do container, em qualquer breakpoint, sem precisar repetir um valor em
 * px sincronizado com cada media query) -- overflow:hidden fica como rede
 * de segurança extra.
 */
.product-image {
    overflow: hidden;
}

.product-image img {
    max-height: 100%;
}

/**
 * Botões de login/carrinho ao lado da busca no mobile bem estreito
 * (pedido do David, 2026-09-27) -- antes, b2b/css/responsive.css
 * (@media max-width:480px) empilhava logo, busca e login/carrinho em 3
 * linhas separadas (.header-content vira flex-direction:column, e cada um
 * dos 3 filhos -- logo, search-bar, header-actions -- ocupa sua própria
 * linha), gastando altura de tela extra antes da vitrine aparecer.
 *
 * Tentativa anterior (forçar de volta flex-direction:row + width:auto nos
 * itens) não funcionou de forma confiável -- dependia do cálculo automático
 * de quebra do flex-wrap com 3 itens concorrendo por espaço, frágil entre
 * navegadores. Solução mais robusta: agrupar search-bar + header-actions
 * num wrapper próprio no HTML (.search-actions-row, ver header.php) --
 * assim .header-content sempre teve, na prática, só 2 filhos (logo e o
 * wrapper), e a coluna do b2b/css/responsive.css já empilha os dois
 * corretamente sem ambiguidade nenhuma. O wrapper é "invisível" pro layout
 * em qualquer tela maior (display:contents -- os filhos dele se comportam
 * como se fossem filhos diretos de .header-content, mantendo o desktop
 * idêntico a antes) e vira uma linha flex própria só no mobile.
 */
.search-actions-row {
    display: contents;
}

@media (max-width: 480px) {
    .search-actions-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .search-actions-row .search-bar {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .search-actions-row .header-actions {
        flex: 0 0 auto;
        width: auto;
    }
}