/* Ofertelaria: visual comum do site. Mobile primeiro.
   Para trocar a cara da marca, mude só as variáveis abaixo. */
:root {
  --cor-marca: #d9381e;
  --cor-marca-escura: #b02c16;
  --cor-marca-clara: #fdebe7;
  --cor-fundo: #f6f5f3;
  --cor-cartao: #ffffff;
  --cor-texto: #1f1f1f;
  --cor-texto-suave: #5f5f5f;
  --cor-borda: #dedbd6;
  --cor-ok: #1f7a3d;
  --cor-ok-fundo: #e6f4ea;
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fce8e6;
  --cor-info: #1d4f91;
  --cor-info-fundo: #e8f0fb;
  --raio: 12px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .04);
  --fonte: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.5;
}
a { color: var(--cor-marca-escura); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 1.6rem; font-weight: 800; }
p { margin: 0 0 14px; }

/* Topo */
.topo { background: var(--cor-cartao); border-bottom: 1px solid var(--cor-borda); }
.topo-dentro {
  max-width: 960px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { display: inline-block; padding: 4px 0; font-weight: 800; font-size: 1.3rem; color: var(--cor-marca); text-decoration: none; letter-spacing: -.02em; line-height: 1.15; }
.marca-slogan { display: block; font-size: .68rem; font-weight: 600; letter-spacing: 0; color: var(--cor-texto-suave); }
@media (max-width: 399px) { .marca-slogan { display: none; } } /* tela muito estreita: só o nome */
.topo-nav { display: flex; align-items: center; gap: 8px; }
.topo-ola { color: var(--cor-texto-suave); font-size: .95rem; display: none; }
@media (min-width: 520px) { .topo-ola { display: inline; } }
.form-inline { display: inline; margin: 0; }

/* Conteúdo */
.conteudo { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 16px 40px; }
.cartao {
  background: var(--cor-cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 24px 20px; max-width: 440px; margin: 0 auto;
}
@media (min-width: 520px) { .cartao { padding: 32px; } }
.cartao .subtitulo { color: var(--cor-texto-suave); margin-bottom: 20px; }
.centro { text-align: center; }
.icone-grande { font-size: 2.6rem; line-height: 1; margin-bottom: 12px; color: var(--cor-marca); }
.icone-grande svg { width: 56px; height: 56px; }

/* Formulários */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.campo .dica { display: block; font-size: .88rem; color: var(--cor-texto-suave); margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=password] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cor-texto);
  padding: 12px 14px; border: 1.5px solid var(--cor-borda); border-radius: 10px; background: #fff;
  min-height: 48px;
}
input:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 84px; }
.senha-mostrar {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--cor-marca-escura); padding: 8px 12px; min-height: 44px; cursor: pointer;
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: var(--cor-marca); color: #fff; border: 0; border-radius: 10px;
  padding: 12px 20px; min-height: 48px;
}
.btn:hover { background: var(--cor-marca-escura); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-bloco { width: 100%; }
.btn-pequeno { min-height: 44px; padding: 8px 14px; font-size: .95rem; }
.btn-link { background: none; color: var(--cor-marca-escura); padding: 8px 10px; min-height: 44px; }
.btn-link:hover { background: var(--cor-marca-clara); }
.btn-secundario { background: #fff; color: var(--cor-marca-escura); border: 1.5px solid var(--cor-marca); }
.btn-secundario:hover { background: var(--cor-marca-clara); }

.links-baixo { margin-top: 20px; text-align: center; font-size: .95rem; }
.links-baixo p { margin: 6px 0; }
.links-baixo a { display: inline-block; padding: 10px 4px; } /* área de toque de pelo menos 44px */

/* Avisos */
.aviso { max-width: 440px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.cartao .aviso { margin: 0 0 16px; }
.aviso-ok { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.aviso-erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.aviso-info { background: var(--cor-info-fundo); color: var(--cor-info); }

/* Rodapé */
.rodape { text-align: center; color: var(--cor-texto-suave); font-size: .85rem; padding: 20px 16px; }
.rodape p { margin: 0; }

/* ---------- Pedido (pedido_novo.php) ---------- */
.pedido { max-width: 560px; margin: 0 auto; }
.pedido .cartao { max-width: none; margin-bottom: 16px; }
.pedido .aviso { max-width: none; }
.pedido-topo { margin-bottom: 16px; }
.pedido-topo h1 { margin-bottom: 4px; }
.pedido-topo p { color: var(--cor-texto-suave); margin: 0; }
.passo-titulo { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.passo-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--cor-marca); color: #fff; font-size: 1rem; font-weight: 800;
}
.lista-erros { margin: 6px 0 0; padding-left: 20px; font-weight: 600; }
.lista-erros li { margin: 2px 0; }
.opcional { font-weight: 400; color: var(--cor-texto-suave); font-size: .9rem; }

select, input[type=search] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cor-texto);
  padding: 12px 14px; border: 1.5px solid var(--cor-borda); border-radius: 10px; background: #fff; min-height: 48px;
}
select:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
input[type=file] {
  width: 100%; font: inherit; font-size: .95rem; padding: 10px; border: 1.5px dashed var(--cor-borda);
  border-radius: 10px; background: var(--cor-fundo);
}
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; border: 0; border-radius: 8px; padding: 8px 14px; margin-right: 10px;
  background: var(--cor-marca); color: #fff; cursor: pointer;
}

/* Cores */
.cores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cor-campo label { display: block; font-weight: 700; margin-bottom: 6px; }
input[type=color] {
  width: 100%; height: 64px; padding: 4px; border: 1.5px solid var(--cor-borda); border-radius: 10px; background: #fff; cursor: pointer;
}

/* Produto */
.produto { border: 1.5px solid var(--cor-borda); border-radius: var(--raio); padding: 16px; margin: 0 0 16px; }
.produto legend { font-weight: 800; padding: 0 6px; }
.produto[hidden] { display: none; }
.linha-preco { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.preco-caixa { position: relative; }
.preco-caixa span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cor-texto-suave); font-weight: 700; }
.preco-caixa input { padding-left: 44px; }
.produto-rodape { text-align: right; margin-top: 8px; }

/* Abas "Enviar foto" / "Buscar no banco" (funcionam só com CSS) */
.abas { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; }
.aba-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aba {
  flex: 1 1 50%; text-align: center; font-weight: 700; cursor: pointer; padding: 12px 8px; min-height: 48px;
  border: 1.5px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto-suave);
}
.aba-c { border-radius: 10px 0 0 0; border-right: 0; }
.aba-b { border-radius: 0 10px 0 0; }
.aba-radio:checked + .aba { background: #fff; color: var(--cor-marca-escura); border-bottom-color: #fff; box-shadow: inset 0 3px 0 var(--cor-marca); }
.aba-radio:focus-visible + .aba { outline: 3px solid var(--cor-marca-clara); outline-offset: -3px; }
.painel {
  display: none; width: 100%; padding: 14px; border: 1.5px solid var(--cor-borda); border-top: 0; border-radius: 0 0 10px 10px; background: #fff;
}
.aba-radio[value=cliente]:checked ~ .painel-cliente,
.aba-radio[value=banco]:checked ~ .painel-banco { display: block; }
.previa { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.previa img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--cor-borda); border-radius: 8px; background: #fff; }
.previa[hidden] { display: none; }
.busca-linha { display: flex; gap: 8px; }
.busca-linha input { flex: 1; }
.busca-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.busca-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; font: inherit; font-size: .8rem; line-height: 1.2;
  background: #fff; border: 1.5px solid var(--cor-borda); border-radius: 8px; cursor: pointer; color: var(--cor-texto); text-align: center;
}
.busca-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.busca-item:hover, .busca-item:focus-visible { border-color: var(--cor-marca); outline: none; }
.busca-msg { margin: 10px 0 0; color: var(--cor-texto-suave); font-size: .95rem; }
.erro-campo { display: block; color: var(--cor-erro); font-weight: 700; font-size: .9rem; margin-top: 4px; }
.campo-erro input, .campo-erro select { border-color: var(--cor-erro); }

/* Aceites */
.aceite { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 1rem; cursor: pointer; }
.aceite input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--cor-marca); }
.aceite[hidden] { display: none; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; margin-bottom: 16px; }
.total strong { font-size: 1.5rem; }

/* Textos (termos) */
.texto-legal { max-width: 720px; }
.texto-legal h2 { font-size: 1.15rem; margin-top: 20px; }
.texto-legal li { margin-bottom: 6px; }
.aviso-extra { margin: 8px 0 0; }
.texto-suave { color: var(--cor-texto-suave); font-size: .95rem; }
.rodape-envio { margin: 10px 0 0; }
.campo-rotulo { display: block; font-weight: 700; margin-bottom: 6px; }
.sr-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* [hidden] sempre esconde (mesmo em .btn, que tem display próprio) */
[hidden] { display: none !important; }
/* Celular: nada pode passar da largura da tela */
.produto { min-width: 0; }
.cores, .linha-preco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
input[type=file], input[type=color], select { max-width: 100%; min-width: 0; }

/* ===== Painel da Draco (admin/) ===== */
.painel-adm textarea, .painel-adm input[type=number] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cor-texto);
  padding: 12px 14px; border: 1.5px solid var(--cor-borda); border-radius: 10px; background: #fff;
}
.painel-adm textarea:focus, .painel-adm input[type=number]:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.marca-painel { font-weight: 600; font-size: .85rem; color: var(--cor-texto-suave); }
.conteudo-adm { max-width: 1100px; }
.adm-cartao { max-width: none; margin: 0 0 16px; padding: 20px 16px; }
@media (min-width: 520px) { .adm-cartao { padding: 24px; } }
.adm-cartao h2 { font-size: 1.15rem; }
.adm-contagem { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.adm-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--cor-borda); color: var(--cor-texto-suave); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.adm-chip-cheio { color: var(--cor-texto); border-color: var(--cor-texto-suave); }
.adm-chip-cheio.adm-st-conferencia, .adm-chip-cheio.adm-st-locucao, .adm-chip-cheio.adm-st-render, .adm-chip-cheio.adm-st-ajuste {
  background: var(--cor-marca-clara); border-color: var(--cor-marca); color: var(--cor-marca-escura);
}
.adm-chip-cheio.adm-st-aprovado { background: var(--cor-ok-fundo); border-color: var(--cor-ok); color: var(--cor-ok); }
.adm-grupo { margin-bottom: 24px; }
.adm-grupo h2 { font-size: 1.15rem; }
.adm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-lista a {
  display: grid; gap: 2px; padding: 12px 16px; background: #fff; border: 1.5px solid var(--cor-borda); border-radius: 10px;
  text-decoration: none; color: var(--cor-texto);
}
.adm-lista a:hover, .adm-lista a:focus-visible { border-color: var(--cor-marca); outline: none; }
.adm-lista-loja { font-weight: 800; }
.adm-lista-info, .adm-lista-data { font-size: .9rem; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.adm-lista-modelos a { border: 0; border-bottom: 1px solid var(--cor-borda); border-radius: 0; }
.adm-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-cabeca h1 { margin: 0; }
.adm-acoes { border: 2px solid var(--cor-marca); }
.adm-acoes form { margin: 0 0 12px; }
.adm-devolver { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--cor-borda); }
.adm-devolver textarea { margin-bottom: 10px; }
.adm-upload { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--cor-borda); }
.adm-upload .btn { justify-self: start; }
.adm-checklist { margin: 0 0 12px; padding-left: 20px; }
.adm-checklist li.ok { color: var(--cor-ok); font-weight: 700; }
.adm-detalhes summary { cursor: pointer; font-weight: 700; color: var(--cor-marca-escura); padding: 8px 0; }
.adm-recado { margin: 0; padding: 12px 16px; background: var(--cor-marca-clara); border-radius: 10px; }
.adm-colunas { display: grid; gap: 0 16px; }
@media (min-width: 760px) { .adm-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.adm-dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.adm-dados dt { font-weight: 700; color: var(--cor-texto-suave); }
.adm-dados dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-cor { vertical-align: middle; }
.adm-logo { max-width: 160px; max-height: 120px; background: #eee; border-radius: 8px; display: block; }
.adm-produtos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.adm-produtos li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; }
.adm-produtos img { width: 88px; height: 88px; object-fit: contain; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; display: block; }
.adm-roteiro { margin-bottom: 10px; font-size: 1.05rem; line-height: 1.5; resize: vertical; }
.adm-arquivos, .adm-hist { list-style: none; margin: 0; padding: 0; }
.adm-arquivos li, .adm-hist li { padding: 10px 0; border-bottom: 1px solid var(--cor-borda); overflow-wrap: anywhere; }
.adm-arquivos audio { display: block; width: 100%; margin: 6px 0; }
.adm-nota { color: var(--cor-texto-suave); font-size: .92rem; }
.adm-previa { display: block; width: 100%; max-width: 360px; border-radius: 10px; margin-bottom: 8px; background: #000; }

/* ===== Área do cliente (minha_conta.php, pedido.php, pedido_corrigir.php) ===== */
.area { max-width: 640px; margin: 0 auto; }
.area .cartao { max-width: none; margin: 0 0 16px; }
.area .aviso { max-width: none; }
.area-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.area-topo h1 { margin: 0; }
.area-topo-pedido { align-items: flex-start; }
.area-vazia h2 { font-size: 1.25rem; }
.area .cartao h2 { font-size: 1.2rem; }
.sem-margem { margin: 0; }
.voltar { display: inline-block; margin-bottom: 12px; font-weight: 700; text-decoration: none; padding: 11px 0; }
.voltar:hover { text-decoration: underline; }
.topo-nav .btn-secundario { white-space: nowrap; }

/* Etiqueta da etapa */
.etq { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.etq-acao { background: var(--cor-marca); color: #fff; }
.etq-ok { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.etq-espera { background: #efece7; color: var(--cor-texto-suave); }
.etq-andamento { background: var(--cor-info-fundo); color: var(--cor-info); }

/* Lista de pedidos */
.lista-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pedido-card {
  display: grid; gap: 4px; padding: 16px 18px; background: var(--cor-cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  text-decoration: none; color: var(--cor-texto); border: 1.5px solid transparent;
}
.pedido-card:hover, .pedido-card:focus-visible { border-color: var(--cor-marca); outline: none; }
.pedido-card-acao { border-left: 5px solid var(--cor-marca); }
.pedido-card-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pedido-card-loja { font-size: 1.1rem; overflow-wrap: anywhere; }
.pedido-card-info { font-size: .92rem; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.pedido-card-falta { font-weight: 700; color: var(--cor-marca-escura); font-size: .95rem; }

/* Linha do tempo das etapas */
.linha-tempo { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.linha-tempo li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.linha-tempo li + li::before {
  content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; background: var(--cor-borda); z-index: 0;
}
.linha-tempo li.feito + li::before { background: var(--cor-ok); }
.lt-bola {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--cor-borda); color: var(--cor-texto-suave); font-weight: 800; font-size: .85rem;
}
.linha-tempo li.feito .lt-bola { background: var(--cor-ok); border-color: var(--cor-ok); color: #fff; }
.linha-tempo li.atual .lt-bola { background: var(--cor-marca); border-color: var(--cor-marca); color: #fff; box-shadow: 0 0 0 4px var(--cor-marca-clara); }
.lt-nome { font-size: .74rem; line-height: 1.2; color: var(--cor-texto-suave); font-weight: 600; }
.linha-tempo li.atual .lt-nome { color: var(--cor-texto); font-weight: 800; }
@media (min-width: 520px) { .lt-nome { font-size: .85rem; } }

/* Bloco "o que está acontecendo" */
.bloco-status h2 { font-size: 1.25rem; margin-bottom: 8px; }
.bloco-etq-acao { border-top: 5px solid var(--cor-marca); }
.bloco-etq-ok { border-top: 5px solid var(--cor-ok); }
.recado { margin: 0 0 16px; padding: 14px 16px; background: var(--cor-marca-clara); border-left: 4px solid var(--cor-marca); border-radius: 0 10px 10px 0; overflow-wrap: anywhere; }
.recado-cartao h2 { font-size: 1.15rem; }
.cobranca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border: 1.5px dashed var(--cor-marca); border-radius: 10px; }
.cobranca strong { font-size: 1.5rem; }

/* Vídeos */
.bloco-videos h2 { font-size: 1.2rem; }
.videos { display: grid; gap: 20px; margin-bottom: 12px; }
@media (min-width: 600px) { .videos { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.video { margin: 0; }
.video video { display: block; width: 100%; background: #000; border-radius: 10px; }
.video-reels video { aspect-ratio: 9 / 16; max-height: 70vh; }
.video-tv video { aspect-ratio: 16 / 9; }
.video figcaption { display: grid; gap: 2px; margin-top: 8px; }
.btn-baixar { margin-top: 8px; }

/* Aprovar / pedir ajuste */
.decidir h2 { font-size: 1.2rem; }
.btn-aprovar { background: var(--cor-ok); }
.btn-aprovar:hover { background: #17602f; }
.contador-ajustes { margin-bottom: 10px; }
.area textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--cor-texto); resize: vertical;
  padding: 12px 14px; border: 1.5px solid var(--cor-borda); border-radius: 10px; background: #fff;
}
.area textarea:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.lista-ajustes { list-style: none; margin: 0; padding: 0; }
.lista-ajustes li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--cor-borda); overflow-wrap: anywhere; }
.lista-ajustes li:last-child { border-bottom: 0; }

/* Resumo do que o cliente mandou */
.resumo-pedido summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; color: var(--cor-marca-escura); min-height: 32px; }
.resumo-pedido[open] summary { margin-bottom: 14px; }
.dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 16px; }
.dados dt { font-weight: 700; color: var(--cor-texto-suave); }
.dados dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; overflow-wrap: anywhere; }
.amostra { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; }
.resumo-logo { max-width: 140px; max-height: 90px; border-radius: 8px; background: #eee; display: block; }
.resumo-produtos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.resumo-produtos li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.resumo-produtos img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; }

/* Correção: foto/logo já enviados */
.foto-atual { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 8px; background: var(--cor-ok-fundo); border-radius: 10px; font-size: .92rem; }
.foto-atual img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; flex: none; }
.foto-atual[hidden] { display: none; }
.aceite-pequeno { margin: 10px 0 0; font-size: .95rem; }
.pedido .voltar { margin-bottom: 8px; }

/* Formato do vídeo (Reels, TV ou os dois): cartões para tocar; "os dois" ocupa a linha toda */
.formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.formato-op { position: relative; cursor: pointer; }
.formato-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.formato-cartao { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; height: 100%;
  padding: 14px 10px; border: 2px solid var(--cor-borda); border-radius: var(--raio); background: #fff; color: var(--cor-texto); }
.formato-cartao strong { font-size: 1.1rem; }
.formato-cartao span { font-size: .85rem; color: var(--cor-texto-suave); line-height: 1.3; }
.formato-icone { color: var(--cor-texto-suave); }
/* Selecionado em verde: vermelho fica só para erro */
.formato-op input:checked + .formato-cartao { border-color: var(--cor-ok); background: var(--cor-ok-fundo); box-shadow: inset 0 0 0 1px var(--cor-ok); }
.formato-op input:checked + .formato-cartao .formato-icone { color: var(--cor-ok); }
.formato-op input:focus-visible + .formato-cartao { outline: 3px solid var(--cor-marca-clara); outline-offset: 2px; }
.campo-erro .formato-cartao { border-color: var(--cor-erro); }
.formatos .erro-campo { grid-column: 1 / -1; }
.formato-op-ambos { grid-column: 1 / -1; }
.formato-icones { display: inline-flex; align-items: center; gap: 2px; }
.formato-mais { font-size: 1.2rem; font-weight: 800; color: var(--cor-texto-suave); }
.formato-cartao .formato-preco { font-size: 1.15rem; font-weight: 800; color: var(--cor-texto); margin-top: 2px; }
.formato-cartao .formato-economia { font-style: normal; font-size: .8rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--cor-marca); color: #fff; }
.etq-formato { display: inline-block; font-size: .78rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--cor-info-fundo); color: var(--cor-info); vertical-align: middle; }

/* Menu do topo em tela estreita: rótulos curtos (Pedidos, Perfil) para caber tudo numa linha */
.nav-curto { display: none; }
@media (max-width: 519px) {
  .nav-longo { display: none; }
  .nav-curto { display: inline; }
  .topo-nav { gap: 2px; }
  .topo-nav .btn-pequeno { padding: 8px 10px; }
  .topo-nav .btn-link { padding: 8px 7px; }
}

/* Meu perfil */
.perfil-nota { margin: 12px 0 0; font-size: .88rem; }

/* Foto escolhida: o nome do arquivo aparece na prévia; o texto nativo ("Nenhum arquivo escolhido") cortava no celular */
input[type=file][data-foto] { color: transparent; }

/* Links soltos com área de toque de pelo menos 44px */
.adm-pedido > p > a, .adm-dados a { display: inline-block; padding: 10px 0; }
.resumo-pedido summary { padding: 6px 0; }
.busca-mais { grid-column: 1 / -1; }

/* ===== Pagamento (pagar.php; botões de pagar em pedido.php) ===== */
.btn-pagar { font-size: 1.1rem; min-height: 56px; }
.desistir { margin: 14px 0 0; text-align: center; }
.desistir .btn-link { font-weight: 600; font-size: .95rem; text-decoration: underline; }
.desistir .texto-suave { display: block; font-size: .85rem; }
.pagar h1 { margin-bottom: 12px; }
.pagar-resumo .dados { margin-bottom: 14px; }
.pagar-abas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pagar-aba {
  font: inherit; font-weight: 700; cursor: pointer; padding: 12px 8px; min-height: 48px;
  border: 1.5px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto-suave);
}
.pagar-aba:first-child { border-radius: 10px 0 0 0; border-right: 0; }
.pagar-aba:last-child { border-radius: 0 10px 0 0; }
.pagar-aba[aria-selected=true] { background: #fff; color: var(--cor-marca-escura); border-bottom-color: #fff; box-shadow: inset 0 3px 0 var(--cor-marca); }
.pagar-aba:focus-visible { outline: 3px solid var(--cor-marca-clara); outline-offset: -3px; }
.pagar-painel { padding: 16px 14px; border: 1.5px solid var(--cor-borda); border-top: 0; border-radius: 0 0 10px 10px; }
.pagar-painel .aviso { max-width: none; }
.pix-qr { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 14px; border: 1px solid var(--cor-borda); border-radius: 8px; background: #fff; image-rendering: pixelated; }
.pix-texto {
  width: 100%; font: inherit; font-size: .85rem; color: var(--cor-texto); resize: none; overflow-wrap: anywhere; word-break: break-all;
  padding: 10px 12px; border: 1.5px solid var(--cor-borda); border-radius: 10px; background: var(--cor-fundo); margin-bottom: 10px;
}
.pix-espera { margin: 14px 0 0 !important; }
.pagar-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pagar-trocar { margin-top: 10px; }
#pago .icone-grande { color: var(--cor-ok); }