/* Loja · formulário, checkout, obrigada e área de pedidos.
   Usa os mesmos componentes do formulário do mapa e a base do site. */

.escondido { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mag); }
.botao-largo { width: 100%; justify-content: space-between; }
.botao:disabled { opacity: .75; cursor: progress; translate: none; }
.botao:disabled::after { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.botao-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 28px; border: 1px solid rgba(204, 1, 112, 0.5); border-radius: 999px;
  background: none; color: var(--mag); font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s ease;
}
.botao-secundario:hover { background: rgba(204, 1, 112, 0.06); }


/* ── Faixa da promoção ─────────────────────── */

.barra-promo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 12px 24px;
  background: var(--tinta);
  color: var(--branco);
  font-size: 14px;
  line-height: 1.4;
  animation: barra-entra .6s var(--suave-saida) both;
}
.barra-promo[hidden] { display: none; }
@keyframes barra-entra { from { transform: translateY(-100%); } }
.barra-promo-texto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.barra-promo-texto .estrela { color: var(--rosa); }
.barra-promo-texto s { color: rgba(255, 255, 255, 0.55); }
.barra-promo-texto strong { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; color: var(--rosa); }
.barra-promo-fim { color: rgba(255, 255, 255, 0.75); }
.barra-promo-contagem { display: flex; gap: 8px; }
.barra-promo-contagem span { display: flex; align-items: baseline; gap: 3px; padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 11px; color: rgba(255, 255, 255, 0.65); }
.barra-promo-contagem b { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1; color: var(--branco); font-variant-numeric: tabular-nums; min-width: 1.1em; text-align: right; }
.barra-promo-link {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--mag);
  color: var(--branco);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.barra-promo-link:hover { background: var(--rosa); }
@media (max-width: 900px) {
  .barra-promo { flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; }
  .barra-promo-fim, .barra-promo-link { display: none; }
  .barra-promo-texto strong { font-size: 20px; }
  .barra-promo-contagem b { font-size: 16px; }
}

/* ── Página ────────────────────────────────── */

.pagina-loja { padding: 40px 0 120px; gap: 64px; min-height: 80vh; }
.cabecalho-loja { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 820px; max-width: 100%; text-align: center; }
.cabecalho-loja .titulo { font-size: 64px; }
.subtitulo-loja { max-width: 620px; font-size: 18px; line-height: 1.7; color: var(--suave); }
.cartao-loja {
  display: flex; flex-direction: column; gap: 22px;
  padding: 44px; border-radius: 24px; background: var(--branco);
  box-shadow: 0 24px 60px rgba(27, 20, 24, 0.10);
}

/* ── Formulário ────────────────────────────── */

.formulario { width: 720px; max-width: 100%; }
.formulario fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.progresso { display: flex; gap: 6px; }
.progresso i { flex: 1; height: 3px; border-radius: 3px; background: rgba(27, 20, 24, 0.08); overflow: hidden; position: relative; }
.progresso i::after { content: ""; position: absolute; inset: 0; background: var(--mag); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--suave-saida); }
.progresso i.ativo::after { transform: scaleX(1); }

.etapa { display: flex; flex-direction: column; gap: 22px; }
.etapa[hidden] { display: none; }
.etapa-cabecalho { display: flex; flex-direction: column; gap: 8px; padding: 0; margin-bottom: 22px; }
.etapa-nome { font-family: var(--serif); font-size: 36px; line-height: 1.05; }
.etapa-nota { margin-top: -6px; font-size: 14px; line-height: 1.6; color: var(--suave); }
.etapa.entra-direita { animation: entra-direita .5s var(--suave-saida) both; }
.etapa.entra-esquerda { animation: entra-esquerda .5s var(--suave-saida) both; }
@keyframes entra-direita { from { opacity: 0; transform: translateX(40px); } }
@keyframes entra-esquerda { from { opacity: 0; transform: translateX(-40px); } }

.etapa-botoes { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.etapa-botoes .botao:only-child, .etapa-botoes [data-voltar][hidden] + .botao { margin-left: auto; }
.etapa-voltar { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--suave); cursor: pointer; }
.etapa-voltar::before { content: "←"; transition: transform .2s ease; }
.etapa-voltar:hover { color: var(--mag); }
.etapa-voltar:hover::before { transform: translateX(-3px); }
.etapa-voltar[hidden] { display: none; }
[data-avancar][hidden], [data-enviar][hidden] { display: none; }

.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo-rotulo { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--tinta); }
.campo-rotulo small { font-weight: 400; color: var(--suave); }
.campo-caixa {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px;
  border: 1px solid rgba(27, 20, 24, 0.14); border-radius: 12px; background: #FAF8F9;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo-caixa:focus-within { border-color: var(--mag); box-shadow: 0 0 0 3px rgba(204, 1, 112, 0.12); }
.campo-caixa input, .campo-caixa textarea {
  flex: 1; min-width: 0; height: 50px; padding: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; color: var(--tinta);
}
.campo-caixa input:disabled { opacity: .5; }
.campo-texto { padding: 14px 18px; align-items: stretch; }
.campo-texto textarea { height: auto; min-height: 90px; resize: vertical; line-height: 1.6; }
.campo-caixa ::placeholder { color: rgba(94, 83, 89, 0.7); opacity: 1; }
.campo-fixo { background: var(--claro); }
.campo-icone { font-size: 13px; font-weight: 500; color: var(--mag); }
.campo-linha { display: flex; gap: 14px; }
.campo-linha > * { flex: 1; }
.data-partes { gap: 0; }
.data-partes input { flex: none; }
.data-partes input[name="dia"], .data-partes input[name="mes"] { width: 1.6em; }
.data-partes input[name="ano"] { flex: 1; }
.data-partes i { font-style: normal; font-size: 15px; color: rgba(94, 83, 89, 0.7); padding: 0 0.35em 0 0.2em; }

.campo-cidade { position: relative; z-index: 20; }
.cidades {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; margin: 0; padding: 6px;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(27, 20, 24, 0.12); border-radius: 12px; background: var(--branco);
  box-shadow: 0 18px 40px rgba(27, 20, 24, 0.12); animation: descer .25s var(--suave-saida);
}
.cidades[hidden] { display: none; }
@keyframes descer { from { opacity: 0; transform: translateY(-6px); } }
.cidades li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.cidades li small { color: var(--suave); }
.cidades li[aria-selected="true"], .cidades li:hover { background: var(--claro); }

.escolhas { display: flex; flex-direction: column; gap: 10px; }
.escolhas-linha { flex-direction: row; flex-wrap: wrap; }
.escolhas-duas { display: grid; grid-template-columns: 1fr 1fr; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao > span {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 18px;
  border: 1px solid rgba(27, 20, 24, 0.12); border-radius: 12px; background: var(--branco);
  font-size: 15px; line-height: 1.4;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--suave-saida);
}
.opcao > span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--branco);
  box-shadow: inset 0 0 0 1.5px rgba(27, 20, 24, 0.3); transition: box-shadow .15s ease;
}
.opcao-caixa > span::before { border-radius: 5px; }
.opcao:hover > span { border-color: rgba(204, 1, 112, 0.45); }
.opcao input:checked + span { border-color: var(--mag); background: rgba(204, 1, 112, 0.06); font-weight: 500; }
.opcao input:checked + span::before { box-shadow: inset 0 0 0 5px var(--mag); animation: marcar .35s var(--suave-saida); }
.opcao-caixa input:checked + span::before {
  box-shadow: none;
  background: var(--mag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.opcao input:focus-visible + span { outline: 2px solid var(--mag); outline-offset: 2px; }
@keyframes marcar { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }

.opcao-produto > span { align-items: flex-start; padding: 20px 22px; }
.opcao-produto > span::before { margin-top: 4px; }
.opcao-produto strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.opcao-produto small { display: block; margin-top: 4px; font-size: 14px; color: var(--suave); font-weight: 400; }
.opcao-produto > span > strong, .opcao-produto > span > small { flex: none; }
.opcao-produto > span { flex-wrap: wrap; }
.opcao-produto > span { display: grid; grid-template-columns: 18px 1fr auto; column-gap: 14px; }
.opcao-produto > span::before { grid-row: 1 / span 2; }
.opcao-produto small { grid-column: 2; }
.opcao-preco { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; color: var(--mag); white-space: nowrap; }
.opcao-preco s { font-size: 20px; color: var(--suave); margin-right: 4px; }

.caixa-verificar { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--suave); cursor: pointer; }
.caixa-verificar input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  border-radius: 5px; background: var(--branco); box-shadow: inset 0 0 0 1.5px rgba(27, 20, 24, 0.3); cursor: pointer;
}
.caixa-verificar input:checked {
  box-shadow: none;
  background: var(--mag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.caixa-verificar input:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.caixa-verificar a { color: var(--mag); }

.form-erro { margin: 0; padding: 12px 16px; border-radius: 10px; background: rgba(204, 1, 112, 0.08); color: var(--mag); font-size: 14px; line-height: 1.5; }
.form-erro[hidden] { display: none; }
.form-erro:not([hidden]) { animation: abanar .45s ease; }
@keyframes abanar { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── Checkout ──────────────────────────────── */

.checkout-colunas { display: flex; align-items: flex-start; gap: 32px; width: 1100px; max-width: 100%; }
.checkout { flex: 1; min-width: 0; gap: 30px; }
.checkout-bloco { display: flex; flex-direction: column; gap: 18px; }
.elemento-pagamento { min-height: 120px; }
.a-carregar { font-size: 14px; color: var(--suave); }
.checkout-seguro { margin-top: -10px; font-size: 12px; line-height: 1.6; color: var(--suave); text-align: center; }
.resumo { width: 380px; flex: none; gap: 16px; position: sticky; top: 32px; }
.resumo-nome { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.resumo-descricao { font-size: 15px; line-height: 1.6; color: var(--suave); }
.resumo-linha { height: 1px; background: rgba(27, 20, 24, 0.10); }
.resumo-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; }
.resumo-preco { display: flex; align-items: baseline; gap: 10px; }
.resumo-preco s { font-family: var(--serif); font-size: 24px; color: var(--suave); }
.resumo-preco strong { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; color: var(--mag); }
.resumo-promo { display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(204, 1, 112, 0.06); font-size: 13px; line-height: 1.55; color: var(--tinta); }
.resumo-promo .estrela { margin-top: 5px; }
.resumo-alterar { align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--suave); }
.resumo-alterar:hover { color: var(--mag); }

/* ── Obrigada ──────────────────────────────── */

.proximos { width: 620px; max-width: 100%; }
.proximos-passos { display: flex; flex-direction: column; gap: 18px; }
.proximos-passos li { display: flex; align-items: flex-start; gap: 16px; font-size: 16px; line-height: 1.6; }
.proximos-passos span {
  flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--mag); border-radius: 50%; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--mag);
}
.proximos-passos p { padding-top: 5px; }
.multibanco dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.multibanco dt { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.multibanco dd { font-family: var(--serif); font-size: 32px; line-height: 1.2; }

/* ── Área de pedidos ───────────────────────── */

.admin { padding: 80px 0 120px; gap: 40px; }
.admin-cabecalho { display: flex; flex-direction: column; gap: 14px; width: 1100px; max-width: 100%; }
.admin-cabecalho .titulo { font-size: 56px; }
.admin-resumo { font-size: 15px; color: var(--suave); }
.admin-voltar { font-size: 14px; color: var(--suave); text-decoration: none; }
.admin-voltar:hover { color: var(--mag); }
.admin-tabela-caixa { width: 1100px; max-width: 100%; overflow-x: auto; border-radius: 20px; background: var(--branco); box-shadow: 0 14px 40px rgba(27, 20, 24, 0.06); }
.admin-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-tabela th { padding: 18px 20px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); border-bottom: 1px solid rgba(27, 20, 24, 0.08); }
.admin-tabela td { padding: 16px 20px; border-bottom: 1px solid rgba(27, 20, 24, 0.06); vertical-align: top; }
.admin-tabela td a { color: var(--tinta); font-weight: 500; }
.admin-tabela td small { display: block; color: var(--suave); }
.admin-vazio { text-align: center; color: var(--suave); }
.estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.estado-pago { background: #E3F4EA; color: #1E7A45; }
.estado-pendente { background: #FFF3DC; color: #8A5A00; }
.estado-falhou { background: rgba(204, 1, 112, 0.08); color: var(--mag); }
.admin-ficha { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; width: 1100px; max-width: 100%; align-items: start; }
.admin-dados, .admin-respostas { display: flex; flex-direction: column; gap: 14px; margin: 0 0 12px; }
.admin-dados dt, .admin-respostas dt { font-size: 12px; font-weight: 500; color: var(--suave); }
.admin-dados dd, .admin-respostas dd { margin: 2px 0 0; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.admin-dados a { color: var(--mag); }

/* ── Ecrãs menores ─────────────────────────── */

@media (max-width: 1340px) { .seccao { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 960px) {
  .checkout-colunas { flex-direction: column-reverse; align-items: stretch; }
  .resumo { width: 100%; position: static; }
  .admin-ficha { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .seccao { padding-left: 16px; padding-right: 16px; }
  .pagina-loja { padding-top: 24px; padding-bottom: 80px; gap: 40px; }
  .cabecalho-loja .titulo { font-size: 42px; }
  .subtitulo-loja { font-size: 16px; }
  .cartao-loja { padding: 28px 20px; border-radius: 20px; }
  .etapa-nome { font-size: 30px; }
  .campo-linha { flex-direction: column; }
  .escolhas-duas { grid-template-columns: 1fr; }
  .opcao-produto > span { grid-template-columns: 18px 1fr; }
  .opcao-preco { grid-column: 2; grid-row: auto; margin-top: 10px; font-size: 30px; }
  .resumo-preco strong { font-size: 44px; }
  .multibanco dl { grid-template-columns: 1fr; }
  .admin-cabecalho .titulo { font-size: 40px; }
}

/* ── Caixas extra no checkout e oferta depois da compra ── */

.extra { position: relative; display: block; cursor: pointer; }
.extra input { position: absolute; opacity: 0; pointer-events: none; }
.extra-caixa {
  display: grid; grid-template-columns: 22px 1fr auto; column-gap: 14px; row-gap: 4px; align-items: start;
  padding: 18px 20px; border: 1.5px dashed rgba(204, 1, 112, 0.5); border-radius: 14px; background: rgba(204, 1, 112, 0.04);
  transition: border-color .2s ease, background .2s ease;
}
.extra-caixa::before {
  content: ""; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  background: var(--branco); box-shadow: inset 0 0 0 1.5px rgba(204, 1, 112, 0.6);
}
.extra input:checked + .extra-caixa { border-style: solid; border-color: var(--mag); background: rgba(204, 1, 112, 0.08); }
.extra input:checked + .extra-caixa::before {
  box-shadow: none; animation: marcar .35s var(--suave-saida);
  background: var(--mag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.extra input:focus-visible + .extra-caixa { outline: 2px solid var(--mag); outline-offset: 2px; }
.extra-titulo { grid-column: 2; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.extra-texto { grid-column: 2; font-size: 14px; line-height: 1.55; color: var(--suave); }
.extra-preco { grid-column: 3; grid-row: 1; font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--mag); white-space: nowrap; }
.extra-preco s { font-size: 16px; color: var(--suave); }
.resumo-extras { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--suave); }
.resumo-extras:empty { display: none; }
.resumo-extras li { display: flex; justify-content: space-between; gap: 12px; }

.oferta { width: 560px; max-width: 100%; align-items: stretch; text-align: center; }
.oferta .rotulo { align-self: center; }
.oferta-preco { justify-content: center; }
.oferta-recusar { align-self: center; }
.oferta-recusar::before { content: none; }
@media (max-width: 640px) {
  .extra-caixa { grid-template-columns: 22px 1fr; }
  .extra-preco { grid-column: 2; grid-row: auto; }
}