/* ==========================================
   ACHEI ÁGUA & GÁS — A TELA DE BUSCA

   Três passos, um embaixo do outro, na mesma página: onde você está,
   o que você quer, e quem entrega. O de baixo só aparece quando o de
   cima está respondido.

   Sem tela nova a cada passo de propósito. Voltar para corrigir o
   endereço não pode custar uma navegação, porque endereço errado é o
   erro mais comum aqui — e o mais caro, já que ele decide a lista
   inteira.
   ========================================== */

/* ==========================================
   TOPO
========================================== */

/* O marinho da logo. É o que faz o "Achei", que é branco na imagem,
   aparecer — em fundo claro ele some. O degradê imita o da própria
   logo, mais claro no meio. */
.topo {
    background:
        radial-gradient(600px 200px at 30% 0%, var(--marinho-clara) 0%, transparent 70%),
        var(--marinho);
    padding: 14px 0;
}

.topo .limite {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Altura travada e largura automática: a logo é deitada, e travar a
   largura a deformaria no dia em que o desenho mudar. */
.marca {
    display: block;
    margin-right: auto;
    line-height: 0;
}

.marca img {
    height: 40px;
    width: auto;
}

@media (max-width: 420px) {
    /* No celular estreito o link de anunciar disputa espaço com ela. */
    .marca img { height: 32px; }
}

/* Sobre o marinho, o link vira contorno claro. Texto azul no azul
   escuro não se lê, e este é o único caminho do dono da revenda para
   dentro do site. */
.link-anunciar {
    padding: 8px 14px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: .18s;
}

.slogan {
    max-width: 720px;
    margin: 12px auto 2px;
    padding: 0 18px;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 420px) {
    .slogan { font-size: 14px; margin-top: 10px; }
}

.link-anunciar:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
}

.acoes-topo {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* O "Entrar" é só texto, sem contorno: quem já é anunciante sabe onde
   clicar, e o botão com borda fica para quem ainda vai virar um. */
.link-entrar {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: .18s;
}

.link-entrar:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 420px) {
    .link-anunciar { padding: 7px 11px; font-size: 12.5px; }
    .link-entrar { padding: 7px 8px; font-size: 12.5px; }
}


/* ==========================================
   OS PASSOS
========================================== */

.passo {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    padding: 20px 18px;
    margin: 16px 0;
    box-shadow: var(--sombra);
}

.passo > h2 {
    font-family: var(--titulo);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin-bottom: 4px;
    color: var(--marinho);
}

.passo > .explica {
    font-size: 14.5px;
    color: var(--tinta-fraca);
    margin-bottom: 16px;
}

/* O passo já respondido encolhe e vira um resumo com botão de trocar.
   Continuar ocupando meia tela depois de respondido empurra o que
   importa — a lista — para baixo da dobra. */
/* Respondido, o passo vira uma barra azul clara: some do caminho sem
   sumir da tela, e continua sendo onde se clica para corrigir. */
.passo.pronto {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--agua-clara);
    border-color: #bfdffd;
    box-shadow: none;
}

.passo.pronto > h2,
.passo.pronto > .explica,
.passo.pronto > .corpo { display: none; }

.resumo-passo {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
}

.resumo-passo small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--tinta-fraca);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botao-trocar {
    flex: none;
    width: auto;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
}

.passo:not(.pronto) .resumo-passo,
.passo:not(.pronto) .botao-trocar { display: none; }

/* Dois campos por linha: número e complemento, cidade e estado. O
   pequeno de cada par tem largura fixa, e o outro fica com o resto. */
.linha-endereco {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
}

.linha-endereco.estado-no-fim { grid-template-columns: minmax(0, 1fr) 96px; }

/* O lugar achado, embaixo do formulário, e o formulário continua
   aberto em cima: a pessoa ainda pode estar digitando o número. */
.onde-achado {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--marinho);
}

.onde-achado small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--tinta-fraca);
}

/* Tudo que some nesta tela some pelo atributo hidden, e o display de
   cada caixa, definido nas regras dela, ganharia do atributo sem esta
   linha. Foi assim que o "seu pedido" continuava na tela com o último
   item depois de a pessoa tirá-lo no x. */
[hidden] { display: none !important; }

.mapa-onde iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px solid #bfdffd;
    border-radius: var(--raio);
    background: var(--papel);
}

.mapa-onde a {
    display: inline-block;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--agua-escura);
}


/* ==========================================
   ONDE VOCÊ ESTÁ
========================================== */

.ou {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--tinta-fraca);
}

.ou::before,
.ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--linha);
}


/* ==========================================
   O QUE VOCÊ QUER
========================================== */

.tipos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.tipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    background: var(--papel);
    border: 2px solid var(--linha);
    border-radius: var(--raio);
    font-weight: 700;
    cursor: pointer;
    transition: .18s;
}

.tipo .emoji { font-size: 28px; line-height: 1; }

.tipo[data-tipo="agua"].escolhido { border-color: var(--agua); background: var(--agua-clara); color: var(--marinho); }
.tipo[data-tipo="gas"].escolhido  { border-color: var(--gas);  background: var(--gas-clara);  color: var(--gas); }

.itens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.item-botao {
    padding: 11px 18px;
    background: var(--papel);
    border: 1.5px solid var(--linha);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .18s;
}

.item-botao:hover { border-color: var(--tinta-fraca); }

.item-botao.escolhido {
    background: var(--agua-clara);
    border-color: var(--agua);
    border-width: 2px;
    color: var(--marinho);
    font-weight: 700;
}

/* Os itens desenhados. Cartão, e não pílula: o desenho precisa de
   altura, e o nome do dia a dia embaixo não cabe numa linha só. */
.itens-desenho {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 560px) {
    .itens-desenho { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.item-desenho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 12px;
    border-radius: var(--raio);
    text-align: center;
}

.item-desenho svg {
    display: block;
    width: 100%;
    max-width: 84px;
    height: auto;
    margin-bottom: 4px;
}

.item-popular {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--marinho);
}

.item-medida {
    font-size: 12px;
    font-weight: 500;
    color: var(--tinta-fraca);
}

/* O endereço da revenda, na largura toda do cartão, logo acima do
   botão do WhatsApp. */
.endereco-revenda {
    grid-column: 1 / -1;
    font-size: 14px;
    color: var(--tinta);
}

.endereco-revenda span {
    font-weight: 600;
    color: var(--marinho);
}

.item-desenho[data-familia="gas"].escolhido {
    background: var(--gas-clara);
    border-color: var(--gas);
}

/* As peças dos desenhos. Em classe, e não em atributo: fill="var(...)"
   não funciona no SVG, e daqui as cores seguem as da marca. */
.d-texto        { font-family: var(--titulo); font-weight: 700; }
.d-gas-corpo    { fill: var(--gas); }
.d-gas-escuro   { fill: #b9650b; }
.d-furo         { fill: #fff; opacity: .6; }
.d-brilho       { fill: #fff; opacity: .28; }
/* Marinho, e não branco, em cima do laranja: branco nele não passa
   de 2,5 de contraste, e o nome dentro é justamente o que se lê. */
.d-texto-gas    { fill: var(--marinho); }

.d-agua-corpo   { fill: #d6ecff; stroke: var(--agua); stroke-width: 2; }
.d-agua-garrafa { fill: #d6ecff; stroke: var(--agua); stroke-width: 1.5; }
.d-agua-escuro  { fill: var(--agua-escura); }
.d-agua-alca    { fill: none; stroke: var(--agua-escura); stroke-width: 3; }
.d-costura      { stroke: var(--agua); stroke-width: 1.5; opacity: .6; }
.d-texto-agua   { fill: var(--marinho); }
.d-texto-faixa  { fill: #fff; }


/* ==========================================
   OS RESULTADOS
========================================== */

.titulo-lista {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 12px;
}

.titulo-lista h2 {
    font-family: var(--titulo);
    font-size: 18px;
    font-weight: 700;
    color: var(--marinho);
}

.titulo-lista span {
    font-size: 13.5px;
    color: var(--tinta-fraca);
}

.lista { display: grid; gap: 12px; }

.revenda {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    padding: 16px;
    box-shadow: var(--sombra);
}

/* A primeira da lista é a mais barata entre as abertas, e é onde a
   maioria vai clicar. Ganha a borda para a decisão ser de um olhar. */
.revenda.melhor { border-color: var(--agua); border-width: 2px; }

.revenda .logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--fundo);
}

/* Sem logo, a lojinha com botijão e galão: diz "revenda" sem depender
   do que a pessoa pediu, e é a mesma que o dono vê ao se cadastrar. */
.revenda .logo-vazia {
    background: var(--fundo) url("../assets/marca/revenda-sem-logo.svg") center / 88% no-repeat;
}

.revenda .miolo { min-width: 0; }

.revenda h3 {
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linha-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--tinta-fraca);
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.selo.aberta  { background: var(--verde-claro);    color: var(--verde); }
.selo.fechada { background: var(--vermelho-claro); color: var(--vermelho); }

.selo.mais-barata { background: var(--agua-clara); color: var(--agua-escura); border: 1px solid #bfdffd; }

.revenda .preco {
    color: var(--marinho);
    text-align: right;
    font-family: var(--titulo);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.5px;
    white-space: nowrap;
}

.revenda .preco small {
    display: block;
    font-family: var(--fonte);
    font-size: 12px;
    font-weight: 400;
    color: var(--tinta-fraca);
    letter-spacing: 0;
}

.acao-revenda {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.acao-revenda .botao-zap { min-height: 46px; }


/* A revenda fechada continua na lista, mas apagada. Sumir com ela
   esconderia o preço de quem abre às 7h — e quem procura às 23h muitas
   vezes quer justamente saber quanto vai pagar amanhã. */
.revenda.fechada { opacity: .72; }


.vazio {
    background: var(--papel);
    border: 1px dashed var(--linha);
    border-radius: var(--raio-grande);
    padding: 30px 20px;
    text-align: center;
}

.vazio h3 {
    font-family: var(--titulo);
    font-size: 17px;
    margin-bottom: 6px;
}

.vazio p {
    font-size: 14.5px;
    color: var(--tinta-fraca);
    max-width: 42ch;
    margin: 0 auto;
}


/* Fecha no marinho, como o cabeçalho abre. O claro fica entre os dois,
   que é onde a pessoa lê. */
.rodape {
    margin-top: 40px;
    padding: 26px 18px 30px;
    background: var(--marinho);
    text-align: center;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
}

.rodape a { color: #fff; }


@media (max-width: 480px) {
    .revenda {
        grid-template-columns: 48px 1fr;
        row-gap: 10px;
    }
    .revenda .logo { width: 48px; height: 48px; }
    .revenda .preco { grid-column: 2; text-align: left; }
}


/* ==========================================
   O PEDIDO SENDO MONTADO

   Fica logo abaixo dos itens, dentro do mesmo passo. Numa caixa
   separada, lá embaixo, ele sairia do campo de visão de quem está
   escolhendo — e a pessoa não veria que o gás já entrou antes de ir
   marcar a água.
========================================== */

.meu-pedido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    background: var(--agua-clara);
    border: 1px solid #bfdffd;
    border-radius: var(--raio);
}

.rotulo-pedido {
    width: 100%;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--agua-escura);
}

/* Cada item marcado vira uma ficha com um X. Tirar tem de ser tão
   fácil quanto pôr: quem marcou o item errado desiste do site se
   precisar recomeçar. */
.ficha {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--papel);
    border: 1.5px solid var(--agua);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--marinho);
}

.ficha-nome { padding: 0 4px; white-space: nowrap; }

/* O menos, o mais e o x. Redondos e de 30px: é o dedo, e não o
   ponteiro do mouse, que vai acertar neles. */
.ficha button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--agua-clara);
    color: var(--marinho);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ficha button:disabled { opacity: .35; cursor: default; }
.ficha .ficha-tirar { background: none; color: var(--tinta-fraca); }
.ficha .ficha-tirar:hover { color: var(--vermelho); }

#botao-fechar-pedido { margin-top: 14px; }


/* O detalhamento por item, quando o pedido tem mais de um. Com um só,
   ele repetiria o total logo ao lado. */
.detalhe-itens {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--linha);
    font-size: 14px;
}

.detalhe-itens li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: var(--tinta-fraca);
}

.detalhe-itens li span { font-weight: 600; color: var(--tinta); }

/* O que ela não vende fica riscado, e não escondido: é essa a
   informação que faz a pessoa decidir entre pedir tudo aqui ou
   dividir em dois lugares. */
.detalhe-itens li.falta { text-decoration: line-through; opacity: .65; }
.detalhe-itens li.falta span { text-decoration: none; font-weight: 400; }

.selo.incompleta { background: var(--gas-clara); color: #a8560a; }
.selo.nao-aceita { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.entrega-gratis { background: var(--verde-claro); color: var(--verde); }
.selo.taxa { background: var(--fundo); color: var(--tinta); }


/* ==========================================
   COMO VAI PAGAR
========================================== */

.pagamentos { margin-top: 18px; }

.rotulo-pagamento {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--marinho);
}

.formas-pagamento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.campo-troco { margin: 12px 0 0; }

.aviso-pagamento {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--raio);
    background: var(--vermelho-claro);
    color: var(--vermelho);
    font-size: 14px;
    font-weight: 600;
}


/* ==========================================
   ENTREGAR OU BUSCAR

   Fica logo abaixo do pedido, e não junto dos resultados, porque muda
   QUEM entra na lista — não é um filtro sobre o que já apareceu.
========================================== */

.modos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.modo {
    padding: 12px 10px;
    background: var(--papel);
    border: 2px solid var(--linha);
    border-radius: var(--raio);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta-fraca);
    cursor: pointer;
    transition: .18s;
}

.modo.escolhido {
    background: var(--agua-clara);
    border-color: var(--agua);
    color: var(--marinho);
    font-weight: 700;
}

/* A ordem da lista usa o mesmo botão de dois lados do modo. */
.ordens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}


.so-abertas {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tinta-fraca);
    cursor: pointer;
}

.so-abertas input {
    width: 20px;
    height: 20px;
    accent-color: var(--agua-escura);
    cursor: pointer;
}


/* O que a revenda faz, no cartão. Só aparece quando ela NÃO faz o
   outro: dizer "entrega e retira" em todas seria ruído, mas "só
   balcão" é a informação que evita a pessoa esperar em casa. */
.selo.so-balcao  { background: var(--gas-clara); color: #a8560a; }
.selo.so-entrega { background: var(--agua-clara); color: var(--agua-escura); }