/* =============================================================================
   Dumont Imóveis — anuncio.css
   Página "Anuncie seu imóvel" (templates/cadastre-seu-imovel.php).
   Os campos (.form-dumont__*) vêm de formulario.css; aqui só o que é do
   anúncio: passos, cartões de escolha, contadores, fotos e a lateral.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   Página (o topo com foto é o template-parts/pagina/topo.php, em singular.css)
   -------------------------------------------------------------------------- */
.anuncio {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* A lateral começa abaixo da borda do topo: sobre o fundo escuro dele, o
   cartão escuro sumiria. No celular ela vem depois do formulário. */
@media (min-width: 992px) {
  .anuncio .anuncio__lateral {
    margin-top: 1.5rem;
  }
}

.anuncio__cartao {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--dm-raio-lg);
  background: var(--dm-superficie);
  box-shadow: var(--dm-sombra-2);
}


/* -----------------------------------------------------------------------------
   Progresso (com JS)
   Etapas em linha; a do passo atual em marinho, as feitas com o número em
   verde. Clicar numa etapa feita volta para ela.
   -------------------------------------------------------------------------- */
.anuncio__progresso {
  margin-bottom: 1.75rem;
}

.anuncio__etapas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 0 .85rem;
}

.anuncio__etapa button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dm-suave);
}

.anuncio__etapa button:disabled {
  cursor: default;
}

.anuncio__etapa-numero {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--dm-papel);
  font-weight: 700;
  transition: background-color var(--dm-transicao), color var(--dm-transicao);
}

.anuncio__etapa.is-atual button {
  color: var(--dm-acento);
}

.anuncio__etapa.is-atual .anuncio__etapa-numero {
  background: var(--dm-marinho);
  color: #fff;
}

.anuncio__etapa.is-feita .anuncio__etapa-numero {
  background: var(--dm-verde-suave);
  color: var(--dm-verde);
}

.anuncio__etapa.is-feita button:hover .anuncio__etapa-numero {
  background: var(--dm-verde);
  color: #fff;
}

@media (min-width: 576px) {
  .anuncio__etapa button {
    flex-direction: row;
    justify-content: center;
    font-size: .9rem;
  }
}

/* Barra: a largura é o progresso (anuncio.js muda o --progresso) */
.anuncio__barra {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--dm-papel);
}

.anuncio__barra span {
  display: block;
  width: var(--progresso, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--dm-degrade-ouro);
  transition: width .45s var(--dm-curva);
}


/* -----------------------------------------------------------------------------
   Passos
   Sem JS, todos aparecem. Com JS (.is-passo-a-passo no form), só o atual.
   -------------------------------------------------------------------------- */
.anuncio__passo {
  min-width: 0;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

.is-passo-a-passo .anuncio__passo {
  display: none;
  margin-bottom: 0;
}

.is-passo-a-passo .anuncio__passo.is-atual {
  display: block;
  animation: anuncio-entra .35s var(--dm-curva);
}

@keyframes anuncio-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .is-passo-a-passo .anuncio__passo.is-atual {
    animation: none;
  }
}

/* legend flutuando: senão o fieldset abre um vão (ver busca.css) */
.anuncio__passo-titulo,
legend.anuncio__pergunta {
  float: left;
  width: 100%;
  padding: 0;
}

.anuncio__passo-titulo {
  margin: 0 0 1.25rem;
  font-family: var(--dm-fonte-titulo);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dm-tinta);
}

.anuncio__passo-numero {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--dm-fonte-texto);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dm-suave);
}

.anuncio__bloco {
  clear: both;
  min-width: 0;
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.anuncio__pergunta {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dm-tinta);
}

.anuncio__nota {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .9rem 0 0;
  font-size: .88rem;
  color: var(--dm-suave);
}

.anuncio__nota .icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: .1rem;
  color: var(--dm-acento);
}

.form-dumont__ajuda {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: var(--dm-suave);
}

.form-dumont__ajuda a {
  color: var(--dm-acento);
}


/* -----------------------------------------------------------------------------
   Cartões de escolha (finalidade e tipo)
   O input é o .btn-check do Bootstrap (escondido, mas focável); o visual
   está no <label> logo depois dele.
   -------------------------------------------------------------------------- */
.anuncio__finalidades {
  display: grid;
  gap: .75rem;
}

@media (min-width: 576px) {
  .anuncio__finalidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.anuncio__finalidade {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .9rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-radius: var(--dm-raio);
  background: var(--dm-papel);
  cursor: pointer;
  transition: background-color var(--dm-transicao), box-shadow var(--dm-transicao), transform var(--dm-transicao);
}

.anuncio__finalidade .icone {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 14px;
  background: var(--dm-superficie);
  color: var(--dm-acento);
}

.anuncio__finalidade strong {
  font-size: 1.05rem;
  color: var(--dm-tinta);
}

.anuncio__finalidade small {
  font-size: .85rem;
  color: var(--dm-suave);
}

.anuncio__finalidade:hover {
  transform: translateY(-1px);
}

.btn-check:checked + .anuncio__finalidade {
  background: var(--dm-marinho-claro);
  box-shadow: inset 0 0 0 2px var(--dm-acento);
}

.btn-check:checked + .anuncio__finalidade .icone {
  background: var(--dm-marinho);
  color: #fff;
}

/* Tipos: grade de "azulejos" com ícone */
.anuncio__tipos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

@media (min-width: 576px) {
  .anuncio__tipos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .anuncio__tipos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.anuncio__tipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 84px;
  padding: .75rem .4rem;
  border-radius: var(--dm-raio-sm);
  background: var(--dm-papel);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--dm-texto);
  cursor: pointer;
  transition: background-color var(--dm-transicao), color var(--dm-transicao), box-shadow var(--dm-transicao);
}

.anuncio__tipo .icone {
  width: 24px;
  height: 24px;
  color: var(--dm-acento);
}

.anuncio__tipo:hover {
  background: var(--dm-marinho-claro);
}

.btn-check:checked + .anuncio__tipo {
  background: var(--dm-marinho);
  color: #fff;
}

.btn-check:checked + .anuncio__tipo .icone {
  color: var(--dm-ouro-claro);
}

/* Foco de teclado nos cartões (o input escondido recebe o foco) */
.btn-check:focus-visible + .anuncio__finalidade,
.btn-check:focus-visible + .anuncio__tipo,
.btn-check:focus-visible + .anuncio__item {
  outline: 3px solid var(--dm-foco);
  outline-offset: 2px;
}

/* Grupo com erro: contorno vermelho (o texto do erro vem embaixo) */
[data-campo][aria-invalid="true"].anuncio__finalidades .anuncio__finalidade,
[data-campo][aria-invalid="true"].anuncio__tipos .anuncio__tipo {
  box-shadow: inset 0 0 0 1.5px var(--dm-erro);
}


/* -----------------------------------------------------------------------------
   Endereço
   -------------------------------------------------------------------------- */
.anuncio__cep {
  position: relative;
}

.anuncio__cep-status {
  position: absolute;
  top: 50%;
  right: .9rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dm-suave);
  transform: translateY(-50%);
  pointer-events: none;
}

.anuncio__cep-status.is-ok {
  color: var(--dm-verde);
}

/* Cidade + UF na mesma linha */
.anuncio__cidade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  gap: .75rem;
}

.anuncio__cidade label {
  display: block;
  margin: 0 0 .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dm-tinta);
}

/* Com JS, o endereço aparece depois do CEP (anuncio.js tira o is-escondido) */
.is-escondido {
  display: none;
}


/* -----------------------------------------------------------------------------
   Contadores (quartos, suítes, banheiros, vagas)
   -------------------------------------------------------------------------- */
.anuncio__contadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

@media (min-width: 768px) {
  .anuncio__contadores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.anuncio__contador {
  padding: .85rem .9rem;
  border-radius: var(--dm-raio);
  background: var(--dm-papel);
}

.anuncio__contador label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .55rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dm-tinta);
}

.anuncio__contador label .icone {
  width: 18px;
  height: 18px;
  color: var(--dm-acento);
}

.anuncio__contador-controle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

.anuncio__contador-controle input {
  width: 100%;
  min-width: 0;
  padding: .3rem 0;
  border: 0;
  background: transparent;
  font-family: var(--dm-fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--dm-tinta);
  appearance: textfield;
  -moz-appearance: textfield;
}

.anuncio__contador-controle input::-webkit-outer-spin-button,
.anuncio__contador-controle input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.anuncio__contador-controle input:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--dm-foco);
}

.anuncio__contador-controle button {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--dm-superficie);
  color: var(--dm-acento);
  box-shadow: var(--dm-sombra-1);
  transition: background-color var(--dm-transicao), color var(--dm-transicao);
}

.anuncio__contador-controle button:hover {
  background: var(--dm-marinho);
  color: #fff;
}

.anuncio__contador-controle button .icone {
  width: 18px;
  height: 18px;
}


/* -----------------------------------------------------------------------------
   Valores (R$ na frente do campo)
   -------------------------------------------------------------------------- */
.anuncio__moeda {
  position: relative;
}

.anuncio__moeda > span {
  position: absolute;
  top: 50%;
  left: 1rem;
  font-weight: 600;
  color: var(--dm-suave);
  transform: translateY(-50%);
  pointer-events: none;
}

.anuncio__moeda .form-dumont__entrada {
  padding-left: 2.6rem;
}


/* -----------------------------------------------------------------------------
   Comodidades (chips)
   -------------------------------------------------------------------------- */
.anuncio__itens-grupo + .anuncio__itens-grupo {
  margin-top: 1rem;
}

.anuncio__itens-titulo {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dm-suave);
}

.anuncio__itens {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.anuncio__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--dm-papel);
  font-size: .85rem;
  font-weight: 500;
  color: var(--dm-texto);
  cursor: pointer;
  transition: background-color var(--dm-transicao), color var(--dm-transicao), box-shadow var(--dm-transicao);
}

.anuncio__item .icone {
  width: 16px;
  height: 16px;
  color: var(--dm-acento);
}

.anuncio__item:hover {
  background: var(--dm-marinho-claro);
}

.btn-check:checked + .anuncio__item {
  background: var(--dm-marinho-claro);
  font-weight: 600;
  color: var(--dm-acento);
  box-shadow: inset 0 0 0 1.5px var(--dm-acento);
}


/* -----------------------------------------------------------------------------
   Fotos
   A área de soltar é o <label> do input de arquivo. Sem JS, o input
   aparece normal embaixo dela; com JS, ele fica escondido (a área faz o papel).
   -------------------------------------------------------------------------- */
.anuncio__soltar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  border: 2px dashed rgba(27, 53, 105, .25);
  border-radius: var(--dm-raio-lg);
  background: var(--dm-papel);
  text-align: center;
  color: var(--dm-suave);
  cursor: pointer;
  transition: background-color var(--dm-transicao), border-color var(--dm-transicao);
}

.anuncio__soltar strong {
  font-size: 1.1rem;
  color: var(--dm-tinta);
}

.anuncio__soltar-icone {
  width: 48px;
  height: 48px;
  margin-bottom: .25rem;
  color: var(--dm-acento);
}

.anuncio__soltar-botao {
  margin-top: .6rem;
  pointer-events: none;   /* o clique é do label inteiro */
}

.anuncio__soltar:hover,
.anuncio__soltar.is-arrastando {
  border-color: var(--dm-marinho);
  background: var(--dm-marinho-claro);
}

.anuncio__arquivo {
  display: block;
  margin-top: .75rem;
}

.is-passo-a-passo .anuncio__arquivo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* O input escondido recebe o foco do teclado; o anel aparece na área, que
   vem ANTES dele no HTML — por isso :has() ("a área que tem, logo depois, o
   input focado"). */
.is-passo-a-passo .anuncio__soltar:has(+ .anuncio__arquivo:focus-visible) {
  outline: 3px solid var(--dm-foco);
  outline-offset: 2px;
}

.anuncio__galeria {
  margin-top: 1.25rem;
}

.anuncio__galeria-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: .75rem;
}

.anuncio__galeria-topo p {
  margin: 0;
}

.anuncio__galeria-dica {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--dm-suave);
}

.anuncio__galeria-dica .icone {
  width: 16px;
  height: 16px;
}

.anuncio__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
}

@media (min-width: 576px) {
  .anuncio__fotos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .anuncio__fotos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.anuncio__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--dm-raio-sm);
  background: var(--dm-papel);
  cursor: grab;
  touch-action: manipulation;
}

.anuncio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Enquanto a foto é reduzida: brilho passando (skeleton) */
.anuncio__foto.is-processando {
  background: linear-gradient(100deg, var(--dm-papel) 30%, var(--dm-superficie) 50%, var(--dm-papel) 70%) 0 0 / 250% 100%;
  animation: anuncio-brilho 1.2s linear infinite;
}

@keyframes anuncio-brilho {
  to { background-position: -250% 0; }
}

.anuncio__foto-capa {
  position: absolute;
  top: .5rem;
  left: .5rem;
  display: none;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--dm-ouro);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--dm-profundo);
}

.anuncio__foto:first-child .anuncio__foto-capa {
  display: block;
}

.anuncio__foto:first-child {
  box-shadow: 0 0 0 3px var(--dm-ouro);
}

.anuncio__foto-acoes {
  position: absolute;
  right: .4rem;
  bottom: .4rem;
  display: flex;
  gap: .3rem;
}

.anuncio__foto-acoes button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 26, 56, .72);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background-color var(--dm-transicao);
}

.anuncio__foto-acoes button:hover {
  background: var(--dm-profundo);
}

.anuncio__foto-acoes .icone {
  width: 16px;
  height: 16px;
}

/* A primeira já é capa: o botão "tornar capa" não faz sentido nela */
.anuncio__foto:first-child [data-tornar-capa] {
  display: none;
}

/* SortableJS: o lugar vazio e a foto sendo arrastada */
.anuncio__foto.sortable-ghost {
  opacity: .35;
}

.anuncio__foto.sortable-chosen {
  cursor: grabbing;
}


/* -----------------------------------------------------------------------------
   Resumo (passo 4)
   -------------------------------------------------------------------------- */
.anuncio__resumo {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
  padding: .9rem 1rem;
  border-radius: var(--dm-raio);
  background: var(--dm-ouro-suave);
}

.anuncio__resumo span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--dm-superficie);
  font-size: .85rem;
  font-weight: 600;
  color: var(--dm-tinta);
}

.anuncio__resumo .icone {
  width: 15px;
  height: 15px;
  color: var(--dm-ouro-texto);
}


/* -----------------------------------------------------------------------------
   Navegação e envio
   -------------------------------------------------------------------------- */
.anuncio__navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  clear: both;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dm-linha);
}

/* Voltar à esquerda, Continuar/Enviar à direita — mesmo com Voltar escondido */
.anuncio__navegacao [data-continuar],
.anuncio__navegacao [data-enviar] {
  margin-left: auto;
}

.anuncio__envio {
  margin-top: 1rem;
}

.anuncio__envio p {
  margin: .5rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dm-acento);
}

.anuncio__envio .anuncio__barra {
  height: 8px;
}


/* -----------------------------------------------------------------------------
   Lateral: como funciona
   -------------------------------------------------------------------------- */
.anuncio__lateral {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--dm-raio-lg);
  background: var(--dm-profundo);
  color: #c4ccdb;
}

@media (min-width: 992px) {
  .anuncio__lateral {
    position: sticky;
    top: 96px;   /* abaixo do header fixo, igual à busca */
  }
}

.anuncio__lateral-titulo {
  margin: 0 0 1.25rem;
  font-size: 1.3rem;
  color: #fff;
}

.anuncio__linha {
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
}

/* Fio vertical ligando os três passos */
.anuncio__linha::before {
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 1.2rem;
  width: 2px;
  background: rgba(255, 255, 255, .12);
  content: "";
}

.anuncio__linha li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
}

.anuncio__linha-icone {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--dm-marinho);
  color: var(--dm-ouro-claro);
}

.anuncio__linha-icone .icone {
  width: 18px;
  height: 18px;
}

.anuncio__linha strong {
  display: block;
  color: #fff;
}

.anuncio__linha p {
  margin: .15rem 0 0;
  font-size: .9rem;
}

.anuncio__lateral-nota {
  display: flex;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  border-radius: var(--dm-raio-sm);
  background: rgba(255, 255, 255, .06);
  font-size: .88rem;
}

.anuncio__lateral-nota .icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--dm-ouro-claro);
}

.anuncio__lateral-whats {
  --dm-foco: var(--dm-ouro-claro);
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--dm-raio-sm);
  background: var(--dm-whats);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--dm-transicao);
}

.anuncio__lateral-whats:hover {
  background: var(--dm-whats-hover);
  color: #fff;
}

.anuncio__lateral-whats .icone {
  width: 28px;
  height: 28px;
}

.anuncio__lateral-whats span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.anuncio__lateral-whats small {
  font-size: .8rem;
  opacity: .85;
}

.anuncio__indisponivel h2 {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
}

.anuncio__indisponivel p {
  margin: 0 0 1.25rem;
  color: var(--dm-suave);
}