/* =========================================================
   Conveniência J.J — identidade visual (preto + amarelo)
   ========================================================= */
:root {
  --jj-amarelo: #FDB913;
  --jj-amarelo-escuro: #E0A000;
  --jj-preto: #141414;
  --jj-grafite: #2a2a2a;
  --jj-creme: #FAF7F0;
  --jj-borda: #ECE6D8;
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-bg: var(--jj-creme);
  --bs-body-color: #1d1d1d;
  --bs-primary: #141414;
  --bs-primary-rgb: 20, 20, 20;
  --bs-link-color: #141414;
  --bs-link-color-rgb: 20, 20, 20;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-heading-color: inherit;
  --bs-border-radius: .75rem;
}

body { background: var(--jj-creme); }
.fw-800 { font-weight: 800; }
.text-amarelo { color: var(--jj-amarelo) !important; }
.bg-preto { background: var(--jj-preto) !important; }
.bg-amarelo { background: var(--jj-amarelo) !important; }

/* Botões */
.btn-jj {
  --bs-btn-bg: var(--jj-amarelo); --bs-btn-border-color: var(--jj-amarelo); --bs-btn-color: #141414;
  --bs-btn-hover-bg: var(--jj-amarelo-escuro); --bs-btn-hover-border-color: var(--jj-amarelo-escuro); --bs-btn-hover-color: #141414;
  --bs-btn-active-bg: var(--jj-amarelo-escuro); --bs-btn-active-border-color: var(--jj-amarelo-escuro); --bs-btn-active-color: #141414;
  --bs-btn-disabled-bg: #e9d9a8; --bs-btn-disabled-border-color: #e9d9a8; --bs-btn-disabled-color: #555;
  font-weight: 600;
}
.btn-dark { font-weight: 600; }
.btn-primary {
  --bs-btn-bg: #141414; --bs-btn-border-color: #141414; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
}
.form-control:focus, .form-select:focus { border-color: var(--jj-amarelo); box-shadow: 0 0 0 .2rem rgba(253,185,19,.3); }
.form-check-input:checked { background-color: var(--jj-preto); border-color: var(--jj-preto); }

/* Cabeçalho da loja */
.jj-topo { background: var(--jj-preto); color: #fff; position: sticky; top: 0; z-index: 1030; }
.jj-topo .logo { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; }
.jj-topo .marca { font-weight: 800; letter-spacing: .02em; line-height: 1; }
.jj-topo .marca small { display: block; font-weight: 500; font-size: .7rem; color: var(--jj-amarelo); letter-spacing: .08em; }
.jj-topo .nav-link { color: #ddd; }
.jj-topo .nav-link:hover, .jj-topo .nav-link.active { color: var(--jj-amarelo); }
.faixa-aviso { background: var(--jj-amarelo); color: #141414; font-size: .82rem; font-weight: 600; }

/* Hero */
.jj-hero { background: var(--jj-preto); color: #fff; border-radius: 1.25rem; overflow: hidden; position: relative; }
.jj-hero h1 { font-weight: 800; }
.jj-hero .coroa { color: var(--jj-amarelo); }
.jj-hero::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px;
  border-radius: 50%; border: 18px solid var(--jj-amarelo); opacity: .18;
}
.passos .passo { font-size: .78rem; font-weight: 500; }
.passos .passo i { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--jj-amarelo); color: #141414; font-size: 1.15rem; margin-bottom: .35rem; }

/* Categorias (chips roláveis) */
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; border: 1px solid var(--jj-borda); background: #fff; color: #333; border-radius: 999px;
  padding: .4rem .95rem; font-size: .85rem; font-weight: 500; text-decoration: none; }
.chip.ativo, .chip:hover { background: var(--jj-preto); border-color: var(--jj-preto); color: var(--jj-amarelo); }

/* Cards de produto */
.card-produto { border: 1px solid var(--jj-borda); border-radius: 1rem; background: #fff; height: 100%; overflow: hidden;
  transition: box-shadow .15s, transform .15s; }
.card-produto:hover { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); transform: translateY(-2px); }
.card-produto .foto { aspect-ratio: 1/1; object-fit: cover; width: 100%; background: #f3f1ec; }
.card-produto .nome { font-size: .9rem; font-weight: 500; line-height: 1.25; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-produto .preco { font-weight: 800; font-size: 1.05rem; }
.card-produto .esgotado { position: absolute; top: .5rem; left: .5rem; }

.qtd-box { display: inline-flex; align-items: center; border: 1px solid var(--jj-borda); border-radius: 999px; background: #fff; }
.qtd-box button { border: 0; background: transparent; width: 34px; height: 34px; font-size: 1.1rem; line-height: 1; }
.qtd-box input { width: 38px; border: 0; text-align: center; font-weight: 600; background: transparent; }
.qtd-box input:focus { outline: none; }

/* Caixas */
.caixa { background: #fff; border: 1px solid var(--jj-borda); border-radius: 1rem; }

/* Barra inferior (celular) */
.jj-barra { position: fixed; bottom: 0; left: 0; right: 0; background: var(--jj-preto); z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom); }
.jj-barra a { color: #bbb; text-decoration: none; font-size: .7rem; flex: 1; text-align: center; padding: .5rem 0 .45rem; position: relative; }
.jj-barra a i { display: block; font-size: 1.3rem; }
.jj-barra a.active { color: var(--jj-amarelo); }
.jj-barra .contador { position: absolute; top: 2px; left: 50%; margin-left: 6px; background: var(--jj-amarelo); color: #141414;
  font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 0 .38rem; }
@media (max-width: 767.98px) { body.loja { padding-bottom: 72px; } }

/* Barra fixa de finalizar compra */
.barra-carrinho { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 1020; padding: 0 .75rem; }
@media (min-width: 768px) { .barra-carrinho { bottom: 1rem; max-width: 520px; margin: 0 auto; } }

/* Autenticação */
.auth-wrap { min-height: calc(100vh - 140px); display: flex; align-items: center; }
.auth-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

/* Linha do tempo do pedido */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.75rem; }
.timeline li::before { content: ""; position: absolute; left: .45rem; top: .35rem; bottom: -.35rem; width: 2px; background: var(--jj-borda); }
.timeline li:last-child::before { display: none; }
.timeline li .ponto { position: absolute; left: 0; top: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #ddd; border: 3px solid #fff; box-shadow: 0 0 0 1px #ddd; }
.timeline li.feito .ponto { background: var(--jj-amarelo); box-shadow: 0 0 0 1px var(--jj-amarelo-escuro); }

/* =========================================================
   Painel administrativo
   ========================================================= */
body.admin { background: #F4F3EF; }
.adm-lateral { width: 240px; background: var(--jj-preto); height: 100vh; overflow-y: auto; position: fixed; top: 0; left: 0; z-index: 1040; }
.adm-lateral .logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.adm-lateral .nav-link { color: #bdbdbd; border-radius: .6rem; padding: .55rem .8rem; font-size: .92rem; display: flex; align-items: center; gap: .65rem; }
.adm-lateral .nav-link i { font-size: 1.1rem; }
.adm-lateral .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.adm-lateral .nav-link.active { color: #141414; background: var(--jj-amarelo); font-weight: 600; }
.adm-lateral .secao { color: #777; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; padding: 1rem .8rem .35rem; }
.adm-conteudo { margin-left: 240px; min-height: 100vh; }
.adm-barra-topo { background: #fff; border-bottom: 1px solid var(--jj-borda); position: sticky; top: 0; z-index: 1030; }
@media (max-width: 991.98px) {
  .adm-lateral { transform: translateX(-100%); transition: transform .2s; }
  .adm-lateral.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .adm-conteudo { margin-left: 0; }
}
.kpi { background: #fff; border: 1px solid var(--jj-borda); border-radius: 1rem; padding: 1rem 1.1rem; height: 100%; }
.kpi .rotulo { font-size: .78rem; color: #6b6b6b; font-weight: 500; }
.kpi .valor { font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.kpi .icone { width: 40px; height: 40px; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.tabela-adm { background: #fff; border: 1px solid var(--jj-borda); border-radius: 1rem; overflow: hidden; }
.tabela-adm table { margin: 0; }
.tabela-adm thead th { background: #faf8f3; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #6b6b6b; font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.tabela-adm td { vertical-align: middle; }
.miniatura { width: 42px; height: 42px; border-radius: .5rem; object-fit: cover; background: #f3f1ec; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fffaf0; }

@media print {
  .adm-lateral, .adm-barra-topo, .no-print { display: none !important; }
  .adm-conteudo { margin: 0; }
}

/* Valores em reais não quebram linha */
.table td.text-end, .table th.text-end { white-space: nowrap; }