@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

/* Paleta tirada do logo: rosa pastel, azul-bebê, contorno azul-petróleo e a noite preta do fundo. */
:root {
  --noite: #000000;
  --noite-2: #14121c;
  --papel: #fff7f9;
  --superficie: #ffffff;
  --tinta: #22304a;
  --tinta-suave: #66708a;
  --borda: #f0dde4;

  --petroleo: #2e6a8e;            /* contorno do logo: cor principal */
  --petroleo-escuro: #22536f;
  --rosa: #eb98ad;
  --rosa-claro: #f9d3dc;
  --rosa-texto: #b8436a;
  --rosa-fundo: #fdeaf0;
  --celeste: #9edbe5;
  --celeste-fundo: #e2f5f8;
  --celeste-texto: #1f6b80;
  --lavanda-fundo: #eeecfb;
  --lavanda-texto: #5a57a6;
  --ambar-fundo: #fff2d9;
  --ambar-texto: #9a5f00;
  --verde-fundo: #def4e9;
  --verde-texto: #1b7650;

  /* nomes antigos, usados direto em alguns HTML/JS */
  --azul: var(--petroleo);
  --azul-fundo: var(--celeste-fundo);
  --vermelho: var(--rosa-texto);
  --vermelho-fundo: var(--rosa-fundo);

  --fita: linear-gradient(90deg, #f3a3b7 0%, #fbe4ea 22%, #a6dde7 45%, #8fa6dc 62%, #f5b3c2 80%, #a6dde7 100%);
  --raio: 18px;
  --raio-pequeno: 12px;
  --sombra: 0 1px 2px rgba(46, 106, 142, .06), 0 12px 30px -18px rgba(184, 67, 106, .35);
  --sombra-alta: 0 2px 4px rgba(46, 106, 142, .08), 0 22px 40px -20px rgba(184, 67, 106, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--tinta);
  font: 400 15.5px/1.6 Nunito, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 105% 10%, rgba(158, 219, 229, .28), transparent 70%),
    radial-gradient(800px 480px at -10% 60%, rgba(235, 152, 173, .20), transparent 70%),
    var(--papel);
  background-attachment: fixed;
}

h1, h2, h3, .preco {
  font-family: Fredoka, Nunito, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--tinta);
}

h1 { font-size: 2.1rem; line-height: 1.15; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; line-height: 1.3; }

a { color: var(--petroleo); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--rosa-texto); }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--noite);
  color: #fff;
}

.topo::after {
  content: '';
  display: block;
  height: 4px;
  background: var(--fita);
}

.topo-interno {
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.marca { display: flex; align-items: center; line-height: 0; border-radius: 10px; }
.marca img { height: 64px; width: auto; display: block; }

.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: #f3e6ec;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a[aria-current='page'] { background: var(--rosa-claro); color: var(--tinta); }
.nav .quem {
  color: var(--celeste);
  font-size: .85rem;
  font-weight: 600;
  padding: 0 4px 0 10px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  margin-left: 4px;
}

/* ---------- vitrine (banner da página inicial) ---------- */
.vitrine {
  position: relative;
  background: var(--noite);
  color: #fff;
  text-align: center;
  padding: 18px 20px 42px;
  overflow: hidden;
}

.vitrine::before,
.vitrine::after {
  content: '✦';
  position: absolute;
  font-size: 1.4rem;
  color: var(--rosa);
  opacity: .8;
  animation: brilho 3.2s ease-in-out infinite;
}
.vitrine::before { top: 22%; left: 8%; }
.vitrine::after { bottom: 22%; right: 9%; color: var(--celeste); animation-delay: 1.6s; }

@keyframes brilho {
  0%, 100% { transform: scale(.8); opacity: .35; }
  50% { transform: scale(1.15); opacity: .95; }
}

.vitrine img {
  display: block;
  width: min(760px, 100%);
  height: auto;
  margin: 0 auto;
}

.vitrine p {
  margin: 4px auto 0;
  max-width: 54ch;
  color: #e9dde3;
  font-size: 1.02rem;
}

.vitrine p strong { color: var(--celeste); font-weight: 800; }

/* A página inicial já tem a fita embaixo da vitrine. */
.inicio .topo { position: static; }
.inicio .topo::after { display: none; }
.inicio .vitrine { border-bottom: 4px solid transparent; border-image: var(--fita) 1; }
/* O banner já mostra o logo grande; no topo fica só a navegação. */
.inicio .marca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inicio .topo-interno { padding-block: 14px 0; }

main { max-width: 1160px; margin: 0 auto; padding: 32px 20px 80px; }

.cabecalho-pagina { margin-bottom: 24px; }
.cabecalho-pagina h1::after {
  content: ' ✦';
  color: var(--rosa);
  font-size: .8em;
}
.cabecalho-pagina p { color: var(--tinta-suave); margin: 8px 0 0; max-width: 64ch; }

/* ---------- cartões ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.cartao-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cartao-produto::before {
  content: '';
  height: 6px;
  background: var(--fita);
  flex: none;
}
.cartao-produto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.cartao-produto.encerrado { opacity: .7; }
.cartao-produto.encerrado::before { background: #ddd6da; }
.cartao-produto.encerrado:hover { transform: none; box-shadow: var(--sombra); }

.cartao-corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cartao-corpo .meta { color: var(--tinta-suave); font-size: .88rem; }
.cartao-imagem {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: #fff;
  padding: 14px;
  border-bottom: 1px solid var(--borda);
}

/* Galeria de fotos do produto: desliza no toque, setas e pontos no desktop. */
.galeria { position: relative; border-bottom: 1px solid var(--borda); }
.galeria-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galeria-trilho::-webkit-scrollbar { display: none; }
.galeria-trilho .cartao-imagem {
  flex: 0 0 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  border-bottom: 0;
}
.galeria-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  background: rgba(255, 255, 255, .92);
  color: var(--petroleo);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  opacity: 0;
  transition: opacity .15s ease;
}
.galeria-seta:hover { background: #fff; color: var(--petroleo-escuro); }
.galeria-seta:active { transform: translateY(-50%); }
.galeria-seta.anterior { left: 8px; }
.galeria-seta.proxima { right: 8px; }
.galeria:hover .galeria-seta, .galeria-seta:focus-visible { opacity: 1; }
@media (hover: none) { .galeria-seta { display: none; } }
.galeria-pontos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.galeria-pontos button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--rosa-claro);
  border: 0;
  box-shadow: none;
}
.galeria-pontos button[aria-current] { background: var(--petroleo); }

/* Lista de fotos no formulário do admin */
.lista-imagens { display: flex; flex-direction: column; gap: 8px; }
.linha-imagem { display: flex; align-items: center; gap: 8px; }
.linha-imagem input { flex: 1; min-width: 0; }
.linha-imagem .miniatura {
  width: 42px;
  height: 42px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #fff;
}
.linha-imagem button { flex: none; }

.preco { font-size: 1.75rem; color: var(--petroleo); font-weight: 700; }
.preco small { font-family: Nunito, sans-serif; font-weight: 600; font-size: .8rem; color: var(--tinta-suave); }

.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.painel + .painel { margin-top: 20px; }

/* mascote da tela de login */
.mascote {
  display: block;
  width: 96px;
  height: 96px;
  margin: -70px auto 6px;
  filter: drop-shadow(0 8px 14px rgba(184, 67, 106, .3));
}
.painel:has(.mascote) { margin-top: 56px; text-align: left; }
.painel:has(.mascote) h1 { text-align: center; }
.painel:has(.mascote) #subtitulo { text-align: center; }

/* ---------- formulários ---------- */
[hidden] { display: none !important; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: .86rem; font-weight: 700; color: var(--tinta-suave); }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: #fffdfe;
  padding: 10px 13px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

input:hover, select:hover, textarea:hover { border-color: #e4c6d1; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--petroleo);
  box-shadow: 0 0 0 4px var(--celeste-fundo);
}

button:focus-visible, .botao:focus-visible, a:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 2px;
}

textarea { min-height: 84px; resize: vertical; }

button, .botao {
  font: 700 .95rem Nunito, sans-serif;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--petroleo);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(46, 106, 142, .8);
  transition: background .15s, transform .12s, box-shadow .15s;
}

.botao { display: inline-block; text-decoration: none; }
button:hover, .botao:hover { background: var(--petroleo-escuro); color: #fff; }
button:active, .botao:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

button.secundario, .botao.secundario {
  background: #fff;
  color: var(--petroleo);
  border-color: #cfe3ea;
  box-shadow: none;
}
button.secundario:hover, .botao.secundario:hover { background: var(--celeste-fundo); color: var(--petroleo-escuro); }

button.perigo { background: var(--rosa-fundo); color: var(--rosa-texto); border-color: var(--rosa-claro); box-shadow: none; }
button.perigo:hover { background: var(--rosa-claro); color: var(--rosa-texto); }
button.pequeno { padding: 6px 13px; font-size: .84rem; }

button.reservar { padding: 10px 26px; }
button.reservar::after { content: ' ✦'; color: var(--rosa-claro); }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- avisos ---------- */
.aviso { padding: 12px 16px; border-radius: var(--raio-pequeno); font-size: .92rem; font-weight: 600; margin: 12px 0; }
.aviso.erro { background: var(--rosa-fundo); color: var(--rosa-texto); }
.aviso.ok { background: var(--verde-fundo); color: var(--verde-texto); }
.aviso.info { background: var(--celeste-fundo); color: var(--celeste-texto); }
.aviso:empty { display: none; }

/* ---------- selos de status ---------- */
.selo {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  text-transform: capitalize;
}

.selo.pendente   { background: var(--ambar-fundo); color: var(--ambar-texto); }
.selo.chamado    { background: var(--celeste-fundo); color: var(--celeste-texto); }
.selo.confirmado { background: var(--lavanda-fundo); color: var(--lavanda-texto); }
.selo.pago       { background: var(--verde-fundo); color: var(--verde-texto); }
.selo.entregue   { background: var(--verde-fundo); color: var(--verde-texto); }
.selo.cancelado  { background: var(--rosa-fundo); color: var(--rosa-texto); }
.selo.neutro     { background: #f3eef0; color: var(--tinta-suave); text-transform: none; }

/* ---------- tabelas ---------- */
.tabela-envolvente { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left;
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  background: #fdf1f5;
  padding: 11px 12px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tbody tr:hover { background: #fffafc; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.destaque { background: #fff8ea; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- resumo da fila ---------- */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.resumo div {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.resumo strong { display: block; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 1.7rem; color: var(--petroleo); }
.resumo span { color: var(--tinta-suave); font-size: .85rem; }

/* ---------- caixa modal ---------- */
dialog {
  border: none;
  border-radius: 22px;
  padding: 0;
  width: min(580px, 94vw);
  color: var(--tinta);
  box-shadow: 0 30px 70px -24px rgba(34, 48, 74, .55);
  overflow: hidden;
}

dialog::backdrop { background: rgba(20, 18, 28, .55); backdrop-filter: blur(3px); }
.modal-topo {
  padding: 26px 24px 16px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  background:
    var(--fita) top / 100% 6px no-repeat,
    linear-gradient(135deg, var(--rosa-fundo), var(--celeste-fundo));
}
.modal-corpo { padding: 20px 24px; max-height: 62vh; overflow-y: auto; }
.modal-rodape { padding: 14px 24px; border-top: 1px solid var(--borda); display: flex; gap: 10px; justify-content: flex-end; background: #fdf6f9; }

/* ---------- opções de frete ---------- */
.opcao-frete {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcao-frete:hover { border-color: #cfe3ea; }
.opcao-frete:has(input:checked) { border-color: var(--petroleo); background: var(--celeste-fundo); }
.opcao-frete input { width: auto; margin: 0; accent-color: var(--petroleo); }
.opcao-frete .detalhe { flex: 1; }
.opcao-frete .detalhe small { display: block; color: var(--tinta-suave); }

.totais { border-top: 1.5px dashed var(--borda); margin-top: 14px; padding-top: 12px; }
.totais div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .92rem; }
.totais div.final { font-weight: 800; font-size: 1.08rem; padding-top: 8px; color: var(--petroleo); }

/* ---------- estados vazios ---------- */
.vazio { text-align: center; padding: 44px 20px; color: var(--tinta-suave); }
.vazio::before {
  content: '';
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  background: url('/img/raposa.png') center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(184, 67, 106, .25));
}
.vazio h2 { margin-bottom: 6px; }

@media (max-width: 640px) {
  h1 { font-size: 1.7rem; }
  .topo-interno { gap: 8px; padding: 8px 16px; }
  .marca img { height: 48px; }
  .nav { gap: 2px; width: 100%; margin-left: 0; }
  .nav a { padding: 6px 10px; }
  .vitrine { padding: 10px 16px 30px; }
  .vitrine::before, .vitrine::after { display: none; }
  main { padding: 24px 16px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}