/* ============================================================
   BASE — Base: inputs, botões, login e chips de filtro
   Parte do app.css original. A ORDEM dos <link> no index.html
   reproduz a ordem deste arquivo: não reordene, a cascata depende disso.
   ============================================================ */

:root{
  --cor: #3b5b7f;      /* azul jean */
  --cor-2: #2d4763;    /* variação escura p/ hover */
}

.font-display{ font-family:'Sora',sans-serif; }
body{ font-family:'Inter',sans-serif; }

/* inputs */
.input{
  width:100%; border:1px solid #e2e8f0; border-radius:.6rem;
  padding:.65rem .85rem; font-size:.9rem; background:#fff; transition:border .15s, box-shadow .15s;
}
.input:focus{ outline:none; border-color:var(--cor); box-shadow:0 0 0 3px color-mix(in srgb, var(--cor) 18%, transparent); }
.input-file{ width:100%; font-size:.85rem; }
.lbl{ font-size:.8rem; font-weight:600; color:#475569; display:block; margin-bottom:.25rem; }

/* login: cor FIXA azul jean, nunca herda a cor da loja */
.input-login{
  width:100%; border:1px solid #e2e8f0; border-radius:.6rem;
  padding:.65rem .85rem; font-size:.9rem; background:#fff; transition:border .15s, box-shadow .15s;
}
.input-login:focus{ outline:none; border-color:#3b5b7f; box-shadow:0 0 0 3px rgba(59,91,127,.18); }
.btn-login{
  background:#3b5b7f; color:#fff; font-weight:600; font-size:.9rem;
  padding:.7rem 1.1rem; border-radius:.6rem; transition:opacity .15s; border:none; cursor:pointer;
}
.btn-login:hover{ opacity:.92; }
.btn-login:disabled{ opacity:.5; cursor:not-allowed; }

/* botões */
.btn-primary{
  background:var(--cor); color:#fff; font-weight:600; font-size:.9rem;
  padding:.65rem 1.1rem; border-radius:.6rem; transition:opacity .15s, transform .05s;
  border:none; cursor:pointer;
}
.btn-primary:hover{ opacity:.92; }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

/* filtros de categoria (público) */
.filtro-chip{
  white-space:nowrap; padding:.4rem .85rem; border-radius:9999px; border:1.5px solid #e8ecf1;
  background:#fff; font-size:.8rem; font-weight:600; color:#64748b; cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.filtro-chip:hover{ border-color:var(--cor); color:var(--cor); transform:translateY(-1px); box-shadow:0 3px 10px rgba(30,42,58,.08); }
.filtro-chip.ativo{ background:var(--cor); color:#fff; border-color:var(--cor); box-shadow:0 3px 12px color-mix(in srgb, var(--cor) 35%, transparent); }
.filtro-chip.ativo:hover{ color:#fff; transform:translateY(-1px); filter:brightness(1.05); }


/* ============================================================
   CADASTRO DA LOJA EM 6 PASSOS (wizard)
   ============================================================ */
.wz-passos{ display:flex; align-items:flex-start; gap:0; padding:1rem 1rem .5rem;
  border-bottom:1px solid #f1f5f9; overflow-x:auto; scrollbar-width:none; }
.wz-passos::-webkit-scrollbar{ display:none; }
.wz-passo{ display:flex; flex-direction:column; align-items:center; gap:.35rem;
  flex:1 0 auto; min-width:3.4rem; position:relative; font-size:.65rem; font-weight:600;
  color:#94a3b8; background:none; border:none; padding:0; text-align:center; cursor:pointer; }
/* linha entre as bolinhas */
.wz-passo:not(:first-child)::before{ content:''; position:absolute; top:.85rem; right:50%;
  width:100%; height:2px; background:#e8ecf1; z-index:0; }
.wz-passo.feito:not(:first-child)::before,
.wz-passo.atual:not(:first-child)::before{ background:var(--cor); }
.wz-passo span{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  height:1.7rem; width:1.7rem; border-radius:9999px; background:#fff; border:2px solid #e2e8f0;
  color:#94a3b8; font-size:.75rem; font-weight:700; transition:all .2s; }
.wz-passo.atual span{ background:var(--cor); border-color:var(--cor); color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cor) 18%, transparent); transform:scale(1.05); }
.wz-passo.atual{ color:var(--cor); }
.wz-passo.feito span{ background:var(--cor); border-color:var(--cor); color:#fff; }
.wz-passo.feito{ color:#475569; }
/* o número vira ✓ quando o passo está feito */
.wz-passo.feito span::after{ content:'✓'; }
.wz-passo.feito span{ font-size:0; }
.wz-passo.feito span::after{ font-size:.85rem; }

/* painel do wizard: tela cheia no mobile, com rolagem garantida */
/* página de criar loja (tela cheia com URL própria) */
.wz-painel-full{ max-width:44rem; margin:0 auto; min-height:100%;
  display:flex; flex-direction:column; background:#fff; }
@media (min-width:768px){
  .wz-painel-full{ margin:2rem auto; min-height:auto; border-radius:1rem;
    box-shadow:0 10px 40px rgba(15,23,42,.08); overflow:hidden; }
}
/* a barra de passos gruda no topo ao rolar */
.wz-passos{ flex-shrink:0; position:sticky; top:0; background:#fff; z-index:5; }
/* dentro da página cheia, o conteúdo não precisa de overflow próprio: rola a página */
.wz-painel-full .flex-1{ overflow:visible !important; }
.wz-passo.feito span{ background:#16a34a; color:#fff; }

.wz-titulo{ font-family:Sora,sans-serif; font-weight:700; color:#1e293b; font-size:.95rem; margin-bottom:.9rem; }
.wz-url{ display:flex; align-items:center; border:1px solid #e2e8f0; border-radius:.6rem; overflow:hidden; }
.wz-url span{ padding:.65rem .5rem .65rem .8rem; background:#f8fafc; color:#94a3b8;
  font-size:.85rem; white-space:nowrap; border-right:1px solid #e2e8f0; }
.wz-url input{ flex:1; padding:.65rem .8rem; font-size:.9rem; border:none; outline:none; min-width:0; }

.wz-check{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:#334155; cursor:pointer; }
.wz-check input{ height:1.05rem; width:1.05rem; accent-color:var(--cor); flex-shrink:0; }

.wz-dia{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  padding:.5rem .75rem; border:1px solid #f1f5f9; border-radius:.6rem; }
.wz-dia-horas{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:#94a3b8; }
.wz-dia-horas .input{ padding:.35rem .5rem; font-size:.82rem; width:auto; }

.wz-cor{ height:2.75rem; width:4rem; border-radius:.6rem; border:1px solid #e2e8f0; cursor:pointer; padding:.2rem; }
.wz-preview{ border:1px solid #eef1f5; border-radius:.8rem; padding:1rem; background:#fafbfc; }
.wz-preview-barra{ border-radius:.5rem; padding:.7rem 1rem; color:#fff; font-weight:700;
  font-family:Sora,sans-serif; background:#3b5b7f; }
.wz-preview-btn{ margin-top:.75rem; width:100%; padding:.65rem; border-radius:.5rem;
  color:#fff; font-weight:600; font-size:.85rem; background:#3b5b7f; }
.wz-aviso{ font-size:.82rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a;
  border-radius:.6rem; padding:.75rem .9rem; }

.wz-termos{ max-height:12rem; overflow-y:auto; border:1px solid #e8ecf1; border-radius:.6rem;
  padding:.9rem 1rem; background:#fafbfc; font-size:.8rem; color:#475569; line-height:1.55; }
.wz-termos h4{ font-weight:700; color:#1e293b; margin:.9rem 0 .3rem; font-size:.83rem; }
.wz-termos h4:first-child{ margin-top:0; }
.wz-termos p{ margin-bottom:.45rem; }

/* nome da loja no topo — tipografia profissional */
.nome-loja{
  font-family:'Sora', system-ui, sans-serif;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.02em;
  line-height:1.1;
  color:#0f172a;
}
@media (min-width:768px){ .nome-loja{ font-size:1.2rem; } }