/* ============================================================
   ADMIN — Painel do lojista: sidebar, variações, cropper, badges
   Parte do app.css original. A ORDEM dos <link> no index.html
   reproduz a ordem deste arquivo: não reordene, a cascata depende disso.
   ============================================================ */

/* sidebar admin */
.side-link{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1.25rem; font-size:.9rem; font-weight:500;
  color:#cbd5e1; white-space:nowrap; transition:all .15s; cursor:pointer; background:none; border:none;
  text-align:left; width:100%;
}
.side-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side-link.ativo{ background:var(--cor); color:#fff; }

/* variação: chips selecionáveis */
.var-opt{
  padding:.45rem .95rem; border:1.5px solid #e2e8f0; border-radius:.5rem; font-size:.85rem;
  cursor:pointer; transition:all .15s; background:#fff; color:#475569;
}
.var-opt.sel{ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 12%, white); color:var(--cor); font-weight:600; }

/* thumb galeria */
.mp-thumb{ height:56px; width:56px; border-radius:.5rem; object-fit:cover; cursor:pointer; border:2px solid transparent; flex-shrink:0; }
.mp-thumb.sel{ border-color:var(--cor); }

/* imagem no form (grid) */
.fimg{ position:relative; aspect-ratio:1; border-radius:.5rem; overflow:hidden; border:1px solid #e2e8f0; }
.fimg img{ width:100%; height:100%; object-fit:cover; }
.fimg button{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,.6); color:#fff; border:none;
  border-radius:9999px; height:20px; width:20px; font-size:12px; cursor:pointer; line-height:1; }

/* swatch de cor (paleta) */
.swatch{ height:44px; border-radius:.6rem; cursor:pointer; border:3px solid transparent; transition:transform .1s; }
.swatch:hover{ transform:scale(1.06); }
.swatch.sel{ border-color:#0f172a; }

@keyframes toastIn{ from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
#toast:not(.hidden){ animation:toastIn .2s ease-out; }

/* forma de pagamento (modal venda) */
.pg-opt{ padding:.6rem; border:1.5px solid #e2e8f0; border-radius:.6rem; font-size:.85rem; font-weight:600;
  color:#475569; background:#fff; cursor:pointer; transition:all .15s; }
.pg-opt.sel{ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 12%, white); color:var(--cor); }

/* menu 3 pontinhos do pedido */
.ped-menu{ position:absolute; right:0; top:100%; margin-top:.25rem; background:#fff; border:1px solid #e2e8f0;
  border-radius:.6rem; box-shadow:0 8px 24px rgba(30,42,58,.12); padding:.25rem; z-index:20; min-width:180px; }
.ped-menu button{ display:block; width:100%; text-align:left; padding:.55rem .75rem; font-size:.85rem; border-radius:.4rem; }
.ped-menu button:hover{ background:#f1f5f9; }

/* badge de status */
.badge{ font-size:.7rem; font-weight:700; padding:.15rem .6rem; border-radius:9999px; }
.badge-novo{ background:#dbeafe; color:#1e40af; }
.badge-andamento{ background:#fef3c7; color:#92400e; }
.badge-finalizado{ background:#dcfce7; color:#166534; }
.badge-cancelado{ background:#fee2e2; color:#991b1b; }


/* ===== aviso de plano / teste grátis (topo do painel) ===== */
.aviso-plano{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.75rem 1rem; border-radius:.75rem; margin-bottom:1.25rem; font-size:.85rem;
  background:#eff6ff; border:1px solid #dbeafe; color:#1e40af; }
.aviso-plano.urgente{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.aviso-plano.bloqueado{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.aviso-plano button{ margin-left:auto; background:currentColor; border-radius:.5rem;
  padding:.4rem .9rem; font-weight:700; font-size:.78rem; }
.aviso-plano button{ color:#fff; }
.aviso-plano.urgente button{ background:#b45309; }
.aviso-plano.bloqueado button{ background:#b91c1c; }
.aviso-plano:not(.urgente):not(.bloqueado) button{ background:#1d4ed8; }

/* ============================================================
   ASSINATURA
   ============================================================ */
.ass-recursos-box{ border:1px solid #e8ecf1; border-radius:1rem; padding:1.25rem 1.25rem 1rem; background:#fff; }
.ass-recursos-titulo{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#94a3b8; margin-bottom:.85rem; }
.ass-recursos{ display:grid; gap:.55rem .9rem; grid-template-columns:1fr; }
@media (min-width:768px){ .ass-recursos{ grid-template-columns:1fr 1fr; } }
.rec-item{ display:flex; align-items:flex-start; gap:.55rem; font-size:.87rem; color:#334155; }
.rec-item svg{ color:#16a34a; flex-shrink:0; margin-top:.15rem; }

.plano-card{ position:relative; border:1px solid #e8ecf1; border-radius:1rem; padding:1.5rem 1.25rem 1.25rem;
  background:#fff; text-align:center; display:flex; flex-direction:column; transition:all .18s; }
.plano-card:hover{ border-color:#cbd5e1; transform:translateY(-2px); box-shadow:0 10px 30px rgba(15,23,42,.08); }
.plano-card.destaque{ border:2px solid var(--cor); box-shadow:0 10px 34px color-mix(in srgb, var(--cor) 16%, transparent); }
.plano-tag{ position:absolute; top:-.7rem; left:50%; transform:translateX(-50%);
  background:var(--cor); color:#fff; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:.28rem .75rem; border-radius:9999px; white-space:nowrap;
  box-shadow:0 3px 10px color-mix(in srgb, var(--cor) 40%, transparent); }
.plano-nome{ font-size:.76rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.07em; }
.plano-preco{ font-family:Sora,sans-serif; font-size:2.25rem; font-weight:800; color:#0f172a;
  line-height:1.1; margin:.5rem 0 .15rem; }
.plano-cifrao{ font-size:1rem; font-weight:600; color:#94a3b8; vertical-align:super; margin-right:.15rem; }
.plano-centavos{ font-size:1.15rem; font-weight:700; }
.plano-mes{ font-size:.8rem; color:#64748b; }
.plano-economia{ display:inline-block; margin:.7rem auto 0; font-size:.72rem; font-weight:700;
  color:#166534; background:#dcfce7; border-radius:9999px; padding:.22rem .7rem; }
.plano-economia.vazio{ background:transparent; }
.plano-btn{ width:100%; margin-top:1.1rem; padding:.8rem; border-radius:.7rem;
  background:var(--cor); color:#fff; font-weight:700; font-size:.87rem; transition:filter .15s; }
.plano-btn:hover{ filter:brightness(1.08); }
.plano-btn.sec{ background:#fff; color:var(--cor); border:1.5px solid #e2e8f0; }
.plano-btn.sec:hover{ border-color:var(--cor); background:#f8fafc; filter:none; }
.plano-obs{ font-size:.72rem; color:#94a3b8; margin-top:.6rem; }

.ass-rodape{ margin-top:1.75rem; padding:1.1rem 1.25rem; border-radius:1rem;
  background:#f8fafc; border:1px solid #eef1f5;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.ass-rodape-titulo{ font-size:.85rem; font-weight:700; color:#334155; }
.ass-rodape-txt{ font-size:.8rem; color:#64748b; margin-top:.2rem; }
.ass-selos{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.75rem; color:#94a3b8; font-weight:600; }


/* ============================================================
   MENU DO PAINEL
   Desktop: barra fixa à esquerda.
   Celular: gaveta que abre pelo botão de 3 riscos.
   ============================================================ */
#side-admin.side-admin{
  position:fixed; top:0; left:0; height:100%; width:16rem; z-index:50;
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .25s ease;
}
#side-admin.side-admin.aberto{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.4); }
.side-nav{ display:flex; flex-direction:column; flex:1; overflow-y:auto; padding:.5rem 0; }
.side-fundo{ position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:45; }
.side-fundo.hidden{ display:none; }

/* botão de 3 riscos (só no celular) */
.btn-hamburguer{ display:flex; flex-direction:column; justify-content:center; gap:4px;
  height:2.25rem; width:2.25rem; border-radius:.5rem; padding:.5rem; flex-shrink:0; }
.btn-hamburguer:hover{ background:#f1f5f9; }
.btn-hamburguer span{ display:block; height:2px; width:100%; border-radius:2px; background:#334155; }

@media (min-width:768px){
  #side-admin.side-admin{ transform:none; width:15rem; box-shadow:none; }
  .side-fundo{ display:none !important; }
  .btn-hamburguer{ display:none !important; }
}


/* ===== formas de entrega ===== */
.entrega-row{ display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem;
  background:#fff; border:1px solid #e8ecf1; border-radius:.75rem; }
.badge-sn{ font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:9999px; }
.badge-sn.on{ background:#dcfce7; color:#166534; }
.badge-sn.off{ background:#f1f5f9; color:#94a3b8; }
.icon-btn{ height:2rem; width:2rem; display:flex; align-items:center; justify-content:center;
  border-radius:.5rem; border:1px solid #e2e8f0; color:#64748b; }
.icon-btn:hover{ background:#f8fafc; color:#0f172a; }
.icon-btn.del:hover{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }

/* botões Sim/Não */
.opt-sn{ flex:1; padding:.6rem; border-radius:.6rem; border:1.5px solid #e2e8f0;
  font-size:.85rem; font-weight:600; color:#64748b; background:#fff; }
.opt-sn.ativo{ border-color:var(--cor); color:var(--cor); background:color-mix(in srgb, var(--cor) 8%, #fff); }

/* nova categoria no form do produto */
.btn-add-cat{ display:flex; align-items:center; justify-content:center; width:2.75rem;
  border-radius:.6rem; border:1.5px dashed #cbd5e1; color:var(--cor); flex-shrink:0; }
.btn-add-cat:hover{ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 6%, #fff); }

/* banners no admin: título + ativo */
.cfg-bnr{ position:relative; }
.cfg-bnr.off img{ filter:grayscale(1); opacity:.55; }
.cfg-bnr .bnr-x{ position:absolute; top:.25rem; right:.25rem; background:rgba(239,68,68,.95); color:#fff;
  border-radius:9999px; height:1.4rem; width:1.4rem; font-size:.7rem; line-height:1; }
.cfg-bnr-pe{ display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.35rem .5rem; font-size:.7rem; color:#64748b; background:#f8fafc; border-top:1px solid #e2e8f0; }
.bnr-sn{ font-size:.62rem; font-weight:700; padding:.15rem .45rem; border-radius:9999px;
  background:#f1f5f9; color:#94a3b8; flex-shrink:0; }
.bnr-sn.on{ background:#dcfce7; color:#166534; }


/* ===== MEU PLANO ===== */
.plano-box{ background:#fff; border:1px solid #e8ecf1; border-radius:1rem; overflow:hidden; }
.plano-box-topo{ display:flex; align-items:center; justify-content:space-between;
  background:#1e2a3a; color:#fff; padding:.85rem 1.1rem; font-weight:700; font-size:.9rem; }
.plano-box-corpo{ padding:.5rem 1.1rem 1rem; }
.plano-linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid #f1f5f9; font-size:.85rem; color:#64748b; }
.plano-linha:last-child{ border-bottom:none; }
.plano-val{ font-weight:700; color:#0f172a; font-size:.85rem; }
.plano-val.trunc{ max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qr-caixa{ display:flex; align-items:center; justify-content:center; }
.qr-caixa svg{ width:180px; height:180px; border:1px solid #eef1f5; border-radius:.75rem; padding:.4rem; }

/* ===== form de produto: seções e status ===== */
.fp-secao{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#94a3b8; padding-top:.5rem; border-top:1px solid #f1f5f9; margin-top:.25rem; }
.fp-secao:first-of-type{ border-top:none; padding-top:0; }
.fp-status{ background:#f8fafc; border:1px solid #eef1f5; border-radius:.9rem; padding:1rem 1.1rem; }
.fp-status-titulo{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-bottom:.6rem; }
.fp-toggle{ display:flex; align-items:center; gap:1rem; padding:.6rem 0; border-bottom:1px solid #eef1f5; cursor:pointer; }
.fp-toggle:last-of-type{ border-bottom:none; }
.fp-toggle-txt{ flex:1; }
.fp-toggle-txt b{ display:block; font-size:.87rem; color:#1e293b; font-weight:600; }
.fp-toggle-txt small{ display:block; font-size:.75rem; color:#94a3b8; margin-top:.1rem; }
.fp-switch-input{ position:absolute; opacity:0; pointer-events:none; }
.fp-switch{ position:relative; width:2.6rem; height:1.5rem; border-radius:9999px; background:#cbd5e1; flex-shrink:0; transition:background .15s; }
.fp-switch::after{ content:''; position:absolute; top:2px; left:2px; height:1.1rem; width:1.1rem; border-radius:9999px; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.fp-switch-input:checked + .fp-switch{ background:var(--cor); }
.fp-switch-input:checked + .fp-switch::after{ transform:translateX(1.1rem); }
.fp-oferta-nota{ display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#64748b;
  margin-top:.7rem; padding-top:.7rem; border-top:1px dashed #e2e8f0; }
.fp-oferta-nota i{ color:var(--cor); }

/* ===== produtos agrupados por categoria ===== */
.prod-grupo{ display:flex; align-items:center; gap:.5rem; margin:1.25rem 0 .6rem; }
.prod-grupo:first-child{ margin-top:0; }
.prod-grupo span{ font-family:Sora,sans-serif; font-weight:700; font-size:.95rem; color:#1e293b; }
.prod-grupo small{ font-size:.7rem; font-weight:700; color:#94a3b8; background:#f1f5f9; border-radius:9999px; padding:.1rem .5rem; }

/* ===== ícones de ação do cupom ===== */
.cup-acao{ display:inline-flex; align-items:center; justify-content:center; height:2rem; width:2rem;
  border-radius:.5rem; border:1px solid #e2e8f0; color:#64748b; background:#fff; }
.cup-acao:hover{ background:#f8fafc; color:#0f172a; }
.cup-acao.del:hover{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }

/* card com menu aberto vai pra frente (senão o próximo card o cobre) */
.prod-admin-item{ position:relative; }
.prod-admin-item.menu-aberto{ z-index:30; }

/* features dentro de cada card de plano (lado a lado) */
.pl-feats{ margin-top:1rem; padding-top:1rem; border-top:1px solid #eef1f5; display:flex; flex-direction:column; gap:.5rem; text-align:left; }
.pl-feat{ display:flex; align-items:flex-start; gap:.5rem; font-size:.8rem; color:#475569; }
.pl-feat svg{ color:#16a34a; flex-shrink:0; margin-top:.15rem; }

/* toggle do cupom no checkout */
.cupom-toggle{ display:flex; align-items:center; gap:1rem; cursor:pointer; }
.cupom-toggle span:first-child{ flex:1; }
.cupom-toggle b{ font-size:.85rem; color:#334155; font-weight:600; }
@media (min-width:768px){ #ass-planos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:start; } }

/* ===== logo redonda na sidebar ===== */
.side-logo{ height:2.5rem; width:2.5rem; border-radius:9999px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; overflow:hidden; }
.side-logo img{ width:100%; height:100%; object-fit:cover; }
.side-logo.tem-img{ background:transparent !important; }

/* ===== categorias profissionais ===== */
.cat-row{ display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:#fff;
  border:1px solid #e8ecf1; border-radius:.85rem; transition:box-shadow .15s, border-color .15s; position:relative; }
.cat-row:hover{ border-color:#cbd5e1; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.cat-row.menu-aberto{ z-index:30; }
.cat-row.dragging{ opacity:.5; }
.cat-row.drag-over{ border-color:var(--cor); border-style:dashed; }
.cat-alca{ color:#cbd5e1; cursor:grab; font-size:1.1rem; line-height:1; user-select:none; flex-shrink:0; }
.cat-alca:active{ cursor:grabbing; }
.cat-info{ flex:1; min-width:0; }
.cat-nome{ font-family:Sora,sans-serif; font-weight:600; font-size:.95rem; color:#1e293b; }
.cat-count{ font-size:.72rem; color:#94a3b8; margin-top:.1rem; }
.cat-menu-btn{ color:#94a3b8; padding:.4rem; border-radius:.5rem; }
.cat-menu-btn:hover{ background:#f1f5f9; color:#334155; }


/* ações sobre cada banner (trocar / excluir) */
.cfg-bnr{ position:relative; }
.cfg-bnr-acoes{ position:absolute; top:.35rem; right:.35rem; display:flex; gap:.3rem; }
.cfg-bnr-acoes button{ height:1.7rem; width:1.7rem; display:flex; align-items:center; justify-content:center;
  border-radius:.4rem; background:rgba(255,255,255,.95); color:#334155; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.cfg-bnr-acoes button:hover{ background:#fff; }
.cfg-bnr-acoes button.del:hover{ background:#fef2f2; color:#dc2626; }