/* ==========================================================
   Feira em Casa — identidade visual
   ========================================================== */
:root {
    --verde: #2d6a4f;
    --verde-claro: #52b788;
    --verde-menta: #d8f3dc;
    --laranja: #e76f51;
    --laranja-escuro: #d1543a;
    --creme: #fefae0;
    --escuro: #1a1a2e;
    --cinza: #6b7280;
    --cinza-claro: #e5e7eb;
    --branco: #fff;
    --sombra: 0 2px 12px rgba(26, 26, 46, .08);
    --sombra-forte: 0 8px 28px rgba(26, 26, 46, .14);
    --raio: 16px;
}

body {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--creme);
    color: var(--escuro);
    padding-bottom: 70px;
}

h1, h2, h3, h4, .fonte-titulo {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
}

a { text-decoration: none; }

/* ---------- Botões ---------- */
.btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-verde:hover, .btn-verde:focus { background: #245a42; border-color: #245a42; color: #fff; }
.btn-outline-verde { border: 1.5px solid var(--verde); color: var(--verde); background: transparent; }
.btn-outline-verde:hover { background: var(--verde); color: #fff; }
.btn-laranja { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.btn-laranja:hover, .btn-laranja:focus { background: var(--laranja-escuro); border-color: var(--laranja-escuro); color: #fff; }
.btn { border-radius: 50px; font-weight: 500; }
.btn-lg { padding: .7rem 1.8rem; }

.text-verde { color: var(--verde) !important; }
.text-laranja { color: var(--laranja) !important; }
.bg-verde { background: var(--verde) !important; }
.bg-menta { background: var(--verde-menta) !important; }
.bg-laranja { background: var(--laranja) !important; }

/* ---------- Navbar ---------- */
.navbar-fec {
    background: var(--verde);
    box-shadow: var(--sombra);
}
.navbar-fec .navbar-brand {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    color: #fff;
    font-size: 1.35rem;
}
.navbar-fec .navbar-brand span { color: var(--verde-claro); }
.navbar-fec .nav-link { color: rgba(255,255,255,.85); font-weight: 500; }
.navbar-fec .nav-link:hover, .navbar-fec .nav-link.active { color: #fff; }

.badge-carrinho {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--laranja);
    color: #fff;
    font-size: .68rem;
    border-radius: 20px;
    padding: 2px 6px;
    font-weight: 600;
}

/* ---------- Hero ---------- */
.hero-fec {
    background: var(--verde);
    color: #fff;
    padding: 48px 0 60px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 28px 28px;
}
.hero-fec::before {
    content: '';
    position: absolute;
    top: -70px; right: -60px;
    width: 280px; height: 280px;
    background: var(--verde-claro);
    border-radius: 50%;
    opacity: .18;
}
.hero-fec h1 {
    font-size: clamp(30px, 6vw, 48px);
    font-weight: 800;
    line-height: 1.1;
}
.hero-fec h1 span { color: var(--verde-claro); }
.hero-fec p { opacity: .88; font-weight: 300; }

.busca-hero .form-control {
    border-radius: 50px 0 0 50px;
    border: none;
    padding: .8rem 1.4rem;
}
.busca-hero .btn { border-radius: 0 50px 50px 0; padding-inline: 1.4rem; }

/* ---------- Cards ---------- */
.card-fec {
    background: #fff;
    border: 1.5px solid var(--cinza-claro);
    border-radius: var(--raio);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    /* Sem height fixo: o card acompanha o conteúdo.
       Em grades onde os cards precisam ficar do mesmo tamanho,
       use a classe h-100 do Bootstrap no card. */
}
/* O efeito de levantar só faz sentido em card clicável (vitrine),
   não nos painéis, onde o card é só um contêiner de conteúdo. */
.card-fec.clicavel:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
a > .card-fec:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }

.card-loja-capa {
    height: 120px;
    background: var(--verde-menta);
    background-size: cover;
    background-position: center;
    position: relative;
}
.card-loja-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: var(--sombra);
    object-fit: cover;
    position: absolute;
    bottom: -22px; left: 16px;
}
.card-loja-corpo { padding: 30px 16px 16px; }

.pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.pill-menta { background: var(--verde-menta); color: var(--verde); }
.pill-laranja { background: #fde8e2; color: var(--laranja); }
.pill-cinza { background: #f3f4f6; color: var(--cinza); }
.pill-fechada { background: #f3f4f6; color: #9ca3af; }

.loja-fechada { opacity: .62; }

/* ---------- Produto ---------- */
.produto-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--verde-menta);
}
.produto-sem-img {
    height: 140px;
    background: var(--verde-menta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--verde-claro);
}
.produto-preco { font-size: 1.15rem; font-weight: 700; color: var(--verde); }
.produto-preco-antigo { font-size: .85rem; color: var(--cinza); text-decoration: line-through; }
.produto-unidade { font-size: .8rem; color: var(--cinza); }

.qtd-grupo { display: flex; align-items: center; gap: 6px; }
.qtd-grupo .btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; line-height: 1; }
.qtd-grupo input {
    width: 58px; text-align: center;
    border: 1.5px solid var(--cinza-claro);
    border-radius: 8px;
    padding: 4px;
}

/* ---------- Categorias ---------- */
.chip-categoria {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--cinza-claro);
    border-radius: 50px;
    padding: 8px 16px;
    color: var(--escuro);
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 500;
}
.chip-categoria:hover, .chip-categoria.ativo {
    background: var(--verde-menta);
    border-color: var(--verde);
    color: var(--verde);
}
.scroll-x { overflow-x: auto; white-space: nowrap; padding-bottom: 6px; }
.scroll-x::-webkit-scrollbar { height: 4px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--cinza-claro); border-radius: 4px; }

/* ---------- Painéis (loja/admin) ---------- */
.painel-sidebar {
    background: var(--escuro);
    color: #cbd5e1;
    padding: 20px 0;
}
@media (min-width: 992px) {
    /* Fica grudada no topo e ocupa a tela inteira, sem sobrar faixa clara embaixo */
    .painel-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
    /* A coluna de conteúdo tem altura própria; o fundo escuro não depende dela */
    .painel-conteudo { min-height: 100vh; }
}
.painel-sidebar .nav-link {
    color: #cbd5e1;
    padding: 11px 20px;
    border-radius: 0 30px 30px 0;
    margin-right: 12px;
    font-size: .93rem;
    display: flex;
    align-items: center;
    gap: 11px;
}
.painel-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.painel-sidebar .nav-link.active { background: var(--verde); color: #fff; font-weight: 500; }
.painel-sidebar .nav-link i { width: 18px; text-align: center; }
.painel-marca {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    color: #fff;
    font-size: 1.15rem;
    padding: 0 20px 18px;
}
.painel-marca span { color: var(--verde-claro); }
.painel-conteudo { padding: 26px; }

.card-metrica {
    background: #fff;
    border-radius: var(--raio);
    border: 1.5px solid var(--cinza-claro);
    padding: 18px;
    height: 100%;
}
.card-metrica .rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cinza);
    margin-bottom: 6px;
}
.card-metrica .valor {
    font-family: 'Fraunces', serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--verde);
    line-height: 1.1;
}
.card-metrica.destaque { background: var(--verde); border-color: var(--verde); }
.card-metrica.destaque .rotulo { color: rgba(255,255,255,.75); }
.card-metrica.destaque .valor { color: #fff; }

/* ---------- Kanban de pedidos ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kanban-coluna {
    min-width: 290px;
    flex: 1;
    background: #f3f4f6;
    border-radius: var(--raio);
    padding: 12px;
}
.kanban-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cinza);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.kanban-card {
    background: #fff;
    border-radius: 12px;
    padding: 13px;
    margin-bottom: 10px;
    box-shadow: var(--sombra);
    border-left: 4px solid var(--verde-claro);
}
.kanban-card.urgente { border-left-color: var(--laranja); }

/* ---------- Linha do tempo do pedido ---------- */
.timeline-pedido { list-style: none; padding: 0; margin: 0; }
.timeline-pedido li {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 22px;
}
.timeline-pedido li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px; top: 34px;
    width: 2px; height: calc(100% - 30px);
    background: var(--cinza-claro);
}
.timeline-pedido li.feito:not(:last-child)::after { background: var(--verde-claro); }
.timeline-ponto {
    width: 32px; height: 32px; min-width: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
    z-index: 1;
}
.timeline-pedido li.feito .timeline-ponto { background: var(--verde); color: #fff; }
.timeline-pedido li.atual .timeline-ponto { background: var(--laranja); color: #fff; }

/* ---------- Barra fixa do carrinho (mobile) ---------- */
.barra-carrinho {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--verde);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 16px rgba(0,0,0,.15);
    z-index: 1030;
}

/* ---------- Diversos ---------- */
.vazio-estado {
    text-align: center;
    padding: 46px 20px;
    color: var(--cinza);
}
.vazio-estado i { font-size: 2.6rem; color: var(--verde-claro); margin-bottom: 12px; }

.rodape-fec {
    background: var(--escuro);
    color: #9ca3af;
    padding: 28px 0;
    font-size: .88rem;
    margin-top: 40px;
}
.rodape-fec a { color: #cbd5e1; }

.form-control:focus, .form-select:focus {
    border-color: var(--verde-claro);
    box-shadow: 0 0 0 .2rem rgba(82,183,136,.2);
}
.form-label { font-weight: 500; font-size: .9rem; }

.tabela-fec { background: #fff; border-radius: var(--raio); overflow: hidden; }
.tabela-fec thead th {
    background: var(--verde-menta);
    color: var(--verde);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    border: none;
}
.tabela-fec td { vertical-align: middle; font-size: .92rem; }

/* ---------- Barra inferior do celular (estilo app) ---------- */
.nav-inferior {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--cinza-claro);
    display: flex;
    z-index: 1035;
    box-shadow: 0 -2px 12px rgba(26,26,46,.08);
    padding-bottom: env(safe-area-inset-bottom);
}
.nav-inferior a {
    flex: 1;
    text-align: center;
    padding: 9px 2px 7px;
    color: var(--cinza);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
    position: relative;
}
.nav-inferior a i {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 3px;
}
.nav-inferior a.ativo { color: var(--verde); }
.nav-inferior a.ativo i { transform: translateY(-1px); }
.nav-inferior .badge-nav {
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: 4px;
    background: var(--laranja);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 5px;
    min-width: 16px;
}

/* Carrinho sempre visível ao lado do hambúrguer */
.carrinho-topo {
    position: relative;
    color: #fff;
    padding: 6px 10px;
    font-size: 1.05rem;
}
.carrinho-topo:hover, .carrinho-topo:focus { color: #fff; }

/* ---------- Topo dos painéis no celular ---------- */
.painel-topo {
    background: var(--escuro);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.painel-topo .marca {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
}
.painel-topo .marca span { color: var(--verde-claro); }
.painel-topo button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 10px;
    padding: 5px 11px;
}
.offcanvas-painel { background: var(--escuro); width: 265px; }
.offcanvas-painel .painel-sidebar { min-height: auto; padding-top: 0; }

/* ---------- Ajustes gerais de responsividade ---------- */
@media (max-width: 991.98px) {
    .painel-conteudo { padding: 16px 14px 24px; }

    /* Cartões e formulários deixam de esticar sem limite */
    .card-fec, .card-metrica { width: 100%; }
    form[style*="max-width"], div[style*="max-width"] { max-width: 100% !important; }

    .card-metrica { padding: 14px; }
    .card-metrica .valor { font-size: 1.35rem; }
    .card-metrica .rotulo { font-size: .68rem; }

    h1 { font-size: 1.35rem !important; }

    /* Tabelas largas rolam em vez de estourar a tela */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .tabela-fec td, .tabela-fec th { font-size: .85rem; }

    .kanban { gap: 10px; }
    .kanban-coluna { min-width: 250px; }

    .hero-fec { padding: 32px 0 40px; border-radius: 0 0 20px 20px; }

    /* Espaço para a barra inferior não cobrir conteúdo */
    body { padding-bottom: 78px; }
    .rodape-fec { margin-bottom: 0; }
}

@media (max-width: 575.98px) {
    .painel-conteudo { padding: 12px 10px 20px; }
    .card-fec { border-radius: 14px; }
    .produto-img, .produto-sem-img { height: 110px; }
    .btn-lg { padding: .6rem 1.2rem; font-size: .95rem; }
    .chip-categoria { padding: 6px 12px; font-size: .82rem; }
    .card-loja-capa { height: 96px; }
    .timeline-pedido li { padding-bottom: 16px; }

    /* Botões de ação em tabela não quebram a linha */
    .tabela-fec .btn-sm { padding: .25rem .5rem; font-size: .78rem; }
}

/* Evita rolagem horizontal SEM quebrar o position:sticky do cabeçalho.
   overflow-x:hidden no html/body transforma a página em contêiner de rolagem
   e o sticky para de funcionar — por isso aqui é clip, e só no body. */
body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; height: auto; }


/* ---------- DataTables ---------- */
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border: 1.5px solid var(--cinza-claro);
    border-radius: 8px;
    padding: 4px 10px;
}
div.dt-container .dt-search label,
div.dt-container .dt-length label,
div.dt-container .dt-info {
    font-size: .85rem;
    color: var(--cinza);
}
div.dt-container .dt-paging .page-link { color: var(--verde); }
div.dt-container .dt-paging .active > .page-link {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}
table.dataTable > tbody > tr > td { border-color: var(--cinza-claro); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background: var(--verde);
    border-color: var(--verde);
}


/* ---------- Seletor de ícones ---------- */
.grade-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 8px;
}
.btn-icone {
    background: #fff;
    border: 1.5px solid var(--cinza-claro);
    border-radius: 12px;
    height: 58px;
    font-size: 1.3rem;
    color: var(--escuro);
    transition: all .12s ease;
}
.btn-icone:hover {
    background: var(--verde-menta);
    border-color: var(--verde);
    color: var(--verde);
    transform: translateY(-2px);
}
.previa-icone {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--verde-menta);
    color: var(--verde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: 0 0 auto;
}


/* Coluna de estoque: larga no desktop, compacta no celular */
.col-estoque { width: 150px; }
@media (max-width: 991.98px) {
    .col-estoque { width: auto; }
    .col-estoque + td, td .js-estoque { min-width: 90px; }
}


/* ---------- Notificações ---------- */
.lista-notificacoes { width: 320px; max-height: 400px; overflow-y: auto; padding: 0; }
.lista-notificacoes .dropdown-item { white-space: normal; }
.icone-notificacao {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 12px;
    background: var(--verde-menta);
    color: var(--verde);
    display: flex; align-items: center; justify-content: center;
}
.card-fec.nao-lida { border-left: 4px solid var(--verde); background: #fbfffc; }

/* ---------- Código de entrega ---------- */
.codigo-entrega {
    background: var(--verde);
    color: #fff;
    border-radius: var(--raio);
    padding: 18px;
    text-align: center;
}
.codigo-entrega .numero {
    font-family: 'Fraunces', serif;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 8px;
    line-height: 1.1;
}
.codigo-entrega .aviso { font-size: .82rem; opacity: .85; }

@media (max-width: 575.98px) {
    .lista-notificacoes { width: calc(100vw - 24px); }

    /* Busca ocupa o topo da tela, como em aplicativo */
    #modalBusca .modal-dialog {
        margin: 0;
        max-width: 100%;
        align-items: flex-start;
        min-height: auto;
    }
    #modalBusca .modal-content { border-radius: 0 0 18px 18px; }
    /* marcador: modal-busca-mobile */
}


/* ---------- Barra do cliente no topo (celular) ---------- */
.cabecalho-fixo {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.barra-cliente {
    background: var(--verde);
    color: #fff;
    padding: 8px 14px 10px;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 2px 10px rgba(26,26,46,.12);
}
.endereco-botao {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
    line-height: 1.25;
    min-width: 0;           /* deixa o texto truncar em vez de empurrar os ícones */
}
.endereco-botao .saudacao {
    font-size: .78rem;
    opacity: .85;
    font-weight: 300;
}
.endereco-botao .endereco {
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.icone-topo {
    color: #fff;
    font-size: 1.05rem;
    padding: 6px 8px;
    position: relative;
    flex: 0 0 auto;
}
.icone-topo:hover, .icone-topo:focus { color: #fff; }

/* Opções do modal de endereço */
.opcao-endereco {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1.5px solid var(--cinza-claro);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}
.opcao-endereco.ativo { border-color: var(--verde); background: var(--verde-menta); }


/* ---------- Lista de atalhos da tela de Conta ---------- */
.item-conta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    color: var(--escuro);
    border-bottom: 1px solid var(--cinza-claro);
    font-size: .95rem;
    text-align: left;
}
.item-conta:last-child { border-bottom: none; }
.item-conta:hover { background: var(--verde-menta); color: var(--verde); }
.item-conta > i:first-child {
    width: 20px;
    text-align: center;
    color: var(--verde);
}
.item-conta .seta { margin-left: auto; color: var(--cinza); font-size: .8rem; }
.item-conta.text-danger > i:first-child { color: inherit; }


/* ---------- Grade de horários da loja ---------- */
.linha-horario {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1.6fr;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cinza-claro);
}
.linha-horario:last-of-type { border-bottom: none; }
.linha-horario .dia-nome { font-weight: 500; font-size: .92rem; }
.linha-horario input[type="time"] { max-width: 110px; }

@media (max-width: 575.98px) {
    .linha-horario {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "nome fechado" "faixas faixas";
    }
    .linha-horario .dia-nome { grid-area: nome; }
    .linha-horario .dia-fechado { grid-area: fechado; justify-self: end; }
    .linha-horario .dia-faixas { grid-area: faixas; }
}

/* Coluna de agendados no painel */
.kanban-card.agendado { border-left-color: #7c3aed; }
.pill-agendado { background: #ede9fe; color: #6d28d9; }


/* ---------- Escolha do dia no agendamento ---------- */
.chip-data {
    display: inline-block;
    text-align: center;
    min-width: 88px;
    border: 1.5px solid var(--cinza-claro);
    border-radius: 14px;
    padding: 10px 12px;
    margin-right: 8px;
    cursor: pointer;
    background: #fff;
}
.chip-data.ativo { border-color: var(--verde); background: var(--verde-menta); color: var(--verde); }


/* ---------- Avaliações ---------- */
.estrelas { color: #f59e0b; letter-spacing: 1px; }
.estrelas-grandes { font-size: 1.8rem; }
.nota-loja { font-weight: 600; color: var(--escuro); }

.seletor-nota { display: flex; gap: 6px; justify-content: center; }
.seletor-nota input { display: none; }
.seletor-nota label {
    font-size: 2rem;
    color: var(--cinza-claro);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.seletor-nota label:hover { transform: scale(1.12); }
.seletor-nota label.marcada { color: #f59e0b; }

.card-avaliacao {
    border-left: 3px solid var(--verde-menta);
    padding-left: 12px;
    margin-bottom: 14px;
}
.resposta-loja {
    background: var(--verde-menta);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: .88rem;
}

/* Item removido do pedido */
.item-removido { opacity: .55; text-decoration: line-through; }