/* Ninee — sistema visual compartilhado (vitrine e painel).
   Cores do logo: framboesa #D14255 sobre creme #F6E8D8. Títulos em Fredoka (arredondada como o logo), texto em Nunito.
   Páginas específicas: loja.css (vitrine) e painel.css (painel). Use os tokens daqui, não cores soltas.
   A cor principal e a de fundo podem ser trocadas no painel (Aparência): base.html injeta os tons derivados
   (loja/servicos/cores.py) depois dos arquivos CSS. */

@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/fredoka-normal-latin.9591efe1be62.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/nunito-normal-latin.166202cc391c.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/nunito-italic-latin.e0eb96848e7e.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --framboesa: #d14255;
  --framboesa-escuro: #a8324a;   /* texto/link em fundo claro (contraste ≥ 4.5) */
  --framboesa-clara: #f7d9d9;
  --framboesa-fundo: #fbe9e6;
  --framboesa-luz: #fdf1ec;      /* começo do degradê do topo */
  --framboesa-rgb: 209, 66, 85;  /* a mesma cor principal, para usar com transparência */
  --vinho: #8f2a3f;              /* rodapé */
  --vinho-escuro: #5a1f2c;       /* cartão de coleção com foto */
  --vinho-escuro-rgb: 90, 31, 44;
  --creme: #f6e8d8;
  --creme-rgb: 246, 232, 216;
  --creme-claro: #fbf4ec;
  --papel: #fffcf8;              /* cartões */
  --tinta: #3a2a2e;              /* texto principal */
  --tinta-suave: #6e5a5f;        /* texto secundário (contraste ≥ 4.5 no creme) */
  --linha: #ead8c6;
  --linha-forte: #d9c0a8;
  --verde: #276b43;              /* pronta entrega, pago (5,5:1 no verde-fundo) */
  --verde-fundo: #e3f1e7;
  --ambar: #9a5b0f;              /* aguardando */
  --ambar-fundo: #fbedd5;
  --azul: #2d5f8a;
  --azul-fundo: #e2edf6;
  --cinza-fundo: #efe7df;
  --whatsapp: #17733e;           /* verde do WhatsApp escurecido para texto branco legível (5,9:1) */

  --fonte-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio-p: 10px;
  --raio: 16px;
  --raio-g: 24px;
  --raio-pilula: 999px;
  --sombra: 0 1px 2px rgba(58, 42, 46, .06), 0 4px 16px rgba(58, 42, 46, .06);
  --sombra-forte: 0 8px 28px rgba(58, 42, 46, .14);
  --margem: 16px;
  --largura: 1120px;
  --altura-topo: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--framboesa-escuro); text-underline-offset: 3px; }
a:hover { color: var(--framboesa); }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--linha); margin: 24px 0; }
:focus-visible { outline: 3px solid var(--framboesa); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--framboesa-clara); }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }
.estreito { max-width: 680px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: .875rem; }
.centro { text-align: center; }
.pilha > * + * { margin-top: 16px; }
.pilha-p > * + * { margin-top: 8px; }
.linha-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.oculto, [hidden] { display: none !important; }

.icone { width: 22px; height: 22px; flex: none; }
.icone-p { width: 18px; height: 18px; flex: none; }

/* ---------- botões ---------- */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid var(--framboesa); border-radius: var(--raio-pilula);
  background: var(--framboesa); color: #fff;
  font: 600 1rem/1.1 var(--fonte-titulo); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--framboesa-escuro); border-color: var(--framboesa-escuro); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.desativado { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sec { background: transparent; color: var(--framboesa-escuro); }
.btn-sec:hover { background: var(--framboesa-fundo); color: var(--framboesa-escuro); }
.btn-leve { background: var(--papel); color: var(--tinta); border-color: var(--linha-forte); }
.btn-leve:hover { background: var(--creme-claro); color: var(--tinta); border-color: var(--tinta-suave); }
.btn-whats { background: var(--whatsapp); border-color: var(--whatsapp); }
.btn-whats:hover { background: #125e33; border-color: #125e33; }
.btn-perigo { background: transparent; color: #a12a2a; border-color: #e3b4b4; }
.btn-perigo:hover { background: #fbe4e4; color: #8a1f1f; border-color: #a12a2a; }
.btn-bloco { display: flex; width: 100%; }
.btn-p { min-height: 38px; padding: 7px 14px; font-size: .9rem; }
.btn-icone { min-height: 44px; width: 44px; padding: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--framboesa-escuro); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- formulários ---------- */
.campo { display: block; }
.campo + .campo { margin-top: 14px; }
.campo > label, .rotulo { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.campo .ajuda, .ajuda { display: block; color: var(--tinta-suave); font-size: .85rem; margin-top: 4px; }
.campo .erro, .erro { display: block; color: #a12a2a; font-size: .875rem; font-weight: 700; margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url],
input[type=date], input[type=search], select, textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--papel); color: var(--tinta);
  font: 16px/1.3 var(--fonte-texto); /* 16px evita zoom no iPhone */
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236e5a5f' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--framboesa); box-shadow: 0 0 0 3px var(--framboesa-clara); }
input[type=checkbox], input[type=radio] { accent-color: var(--framboesa); width: 20px; height: 20px; flex: none; }
.marcar { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; }
.marcar input { margin-top: 2px; }
.grade-campos { display: grid; gap: 14px; grid-template-columns: 1fr; }
.grade-campos .campo + .campo { margin-top: 0; }
@media (min-width: 560px) {
  .grade-campos.duas { grid-template-columns: 1fr 1fr; }
  .grade-campos.tres { grid-template-columns: repeat(3, 1fr); }
  .grade-campos .largo { grid-column: 1 / -1; }
}

/* Escolha de cor: <label class="cor"><input type=radio name=.. value=..><span class="bolinha" style="--cor:#hex"></span><span class="cor-nome">Verde</span></label> */
.cores { display: flex; flex-wrap: wrap; gap: 10px; }
.cor { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; cursor: pointer; text-align: center; }
.cor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bolinha {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cor, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--creme), 0 0 0 4px var(--linha-forte);
  transition: box-shadow .15s, transform .15s;
}
.bolinha.com-foto { background-size: cover; background-position: center; }
.cor-nome { font-size: .78rem; line-height: 1.15; color: var(--tinta-suave); }
.cor input:checked + .bolinha { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--creme), 0 0 0 5px var(--framboesa); transform: scale(1.04); }
.cor input:checked ~ .cor-nome { color: var(--tinta); font-weight: 800; }
.cor input:focus-visible + .bolinha { outline: 3px solid var(--framboesa); outline-offset: 5px; }
.cor.esgotada { cursor: not-allowed; opacity: .55; }
.cor.esgotada .bolinha::after { content: ""; position: absolute; top: 19px; left: 10px; width: 44px; height: 2px; background: var(--tinta); transform: rotate(-45deg); }

/* ---------- cartões, selos, avisos ---------- */
.caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 20px; box-shadow: var(--sombra); }
.caixa-p { padding: 14px; border-radius: var(--raio); }
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--raio-pilula);
  font: 700 .78rem/1.4 var(--fonte-texto); letter-spacing: .01em;
  background: var(--cinza-fundo); color: var(--tinta);
}
.selo-verde { background: var(--verde-fundo); color: var(--verde); }
.selo-ambar { background: var(--ambar-fundo); color: var(--ambar); }
.selo-azul { background: var(--azul-fundo); color: var(--azul); }
.selo-framboesa { background: var(--framboesa-fundo); color: var(--framboesa-escuro); }
.selo-cinza { background: var(--cinza-fundo); color: var(--tinta-suave); }

.aviso { padding: 12px 14px; border-radius: var(--raio); background: var(--azul-fundo); color: var(--azul); font-weight: 600; }
/* flex só com ícone na frente: com texto e link misturados, cada pedaço viraria uma coluna */
.aviso:has(> svg:first-child) { display: flex; gap: 10px; align-items: flex-start; }
.aviso-ambar { background: var(--ambar-fundo); color: var(--ambar); }
.aviso-verde { background: var(--verde-fundo); color: var(--verde); }
.aviso-framboesa { background: var(--framboesa-fundo); color: var(--framboesa-escuro); }

.mensagens { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.mensagens li { padding: 12px 16px; border-radius: var(--raio); background: var(--papel); border: 1px solid var(--linha); font-weight: 700; box-shadow: var(--sombra); }
.mensagens .success { background: var(--verde-fundo); color: var(--verde); border-color: transparent; }
.mensagens .error { background: #fbe4e4; color: #8a1f1f; border-color: transparent; }
.mensagens .warning { background: var(--ambar-fundo); color: var(--ambar); border-color: transparent; }

/* ---------- preço ---------- */
.preco { font: 700 1.25rem/1.1 var(--fonte-titulo); color: var(--tinta); }
.preco-g { font-size: 1.75rem; }
.preco-de { font: 500 .95rem var(--fonte-texto); color: var(--tinta-suave); text-decoration: line-through; margin-right: 6px; }

/* ---------- chips (categorias) ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--margem); margin: 0 calc(var(--margem) * -1); scroll-snap-type: x proximity; scroll-padding-inline: var(--margem); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px;
  border-radius: var(--raio-pilula); border: 1.5px solid var(--linha-forte); background: var(--papel);
  color: var(--tinta); font: 600 .95rem var(--fonte-titulo); text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--framboesa); color: var(--framboesa-escuro); }
.chip.ativo { background: var(--framboesa); border-color: var(--framboesa); color: #fff; }
.chip-colecao { border-color: var(--framboesa-clara); background: var(--framboesa-fundo); color: var(--framboesa-escuro); }

/* ---------- tabelas (painel e resumos) ---------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela th { font: 700 .8rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.tabela .num { text-align: right; white-space: nowrap; }

/* ---------- carregando (o script fica no base.html) ---------- */
/* barrinha no topo: aparece se a troca de página ou o envio passar de 150 ms */
.barra-carregando {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--framboesa-clara), var(--framboesa) 40%, var(--framboesa-escuro));
  border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(var(--framboesa-rgb), .45);
  transform-origin: 0 50%; transform: scaleX(.7); opacity: 0; visibility: hidden;
}
.barra-carregando.ligada { opacity: 1; visibility: visible; animation: barra-andando 9s cubic-bezier(.1, .7, .25, 1) both; }
@keyframes barra-andando { from { transform: scaleX(0); } 12% { transform: scaleX(.35); } to { transform: scaleX(.92); } }
/* rodinha: botão ocupado, 3D carregando */
@keyframes girar { to { transform: rotate(360deg); } }
.carregando-giro {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 3px solid rgba(var(--framboesa-rgb), .18); border-top-color: var(--framboesa); border-right-color: var(--framboesa);
  animation: girar .8s linear infinite;
}
.btn.ocupado, .link-btn.ocupado { opacity: 1; cursor: progress; }
.ocupado > svg { display: none; }
.ocupado::before {
  content: ""; display: inline-block; flex: none; width: 1em; height: 1em; margin-right: .1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; vertical-align: -.15em; animation: girar .7s linear infinite;
}
.btn-icone.ocupado::before { margin: 0; }
/* quadro do 3D enquanto o .glb baixa (visor3d.js e editor do kit) */
.visor-carregando::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 3px solid rgba(var(--framboesa-rgb), .18); border-top-color: var(--framboesa);
  border-right-color: var(--framboesa); background: rgba(255, 252, 248, .6); pointer-events: none;
  animation: girar .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}