/* ============================================================
   modal.css — a folha que sobe, o cartaz e a tela de detalhe
   ------------------------------------------------------------
   No celular é uma folha que sobe de baixo (bottom sheet).
   Em telas grandes vira uma janela centralizada (responsive.css).
   ============================================================ */

.modal{
  position:fixed; inset:0;
  /* acima de tudo: o Leaflet usa z-index interno de até 1000 e
     precisa ficar por baixo desta camada */
  z-index:9000;
  display:none;
}
.modal[data-open="true"]{ display:block }

.modal-bg{
  position:absolute; inset:0;
  background:rgba(62,51,88,.5);
  backdrop-filter:blur(3px);
}

.sheet{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column;
  /* dvh acompanha a barra de endereço do navegador no celular,
     o que vh não faz — sem isso o rodapé da folha some atrás dela */
  max-height:92dvh;
  background:var(--bg);
  border-top:3px solid var(--ink);
  border-radius:24px 24px 0 0;
  animation:sheet-up .24s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes sheet-up{ from{ transform:translateY(100%) } }
@media (prefers-reduced-motion: reduce){
  .sheet{ animation:none }
}

/* alça visual indicando que a folha veio de baixo */
.sheet::before{
  content:"";
  display:block; flex:none;
  width:46px; height:5px; margin:9px auto 0;
  background:var(--ink-14); border-radius:999px;
}

.sheet-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:var(--bg);
  border-bottom:2.5px dashed var(--ink-14);
  flex:none;
}
.sheet-head h2{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:21px; line-height:1.15;
}
.sheet-head .x{
  margin-left:auto; flex:none;
  width:var(--touch); height:var(--touch);
  border:2.5px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; font-size:15px;
  background:var(--card); box-shadow:0 3px 0 var(--ink-14);
}

.steps{ display:flex; gap:6px; padding:14px 18px 0; flex:none }
.steps i{ height:7px; flex:1; background:var(--ink-14); border-radius:999px }
.steps i[data-on="true"]{ background:var(--lost); box-shadow:inset 0 0 0 2px var(--ink) }

/* a única parte que rola é o corpo; cabeçalho e rodapé ficam fixos */
.sheet-body{ padding:18px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch }

.sheet-foot{
  padding:14px 18px calc(14px + var(--safe-b));
  background:var(--bg);
  border-top:2.5px dashed var(--ink-14);
  display:flex; gap:10px; align-items:center;
  flex:none;
}

.q{
  font-family:var(--display); font-weight:800;
  font-size:clamp(21px,5.6vw,29px); line-height:1.1; margin:0 0 6px;
}
.hint{ font-size:13.5px; color:var(--ink-70); margin:0 0 16px }

/* ============ CARTAZ ============ */
.poster-stage{ display:grid; gap:16px; grid-template-columns:1fr }
.poster-stage canvas{
  width:100%; height:auto;
  border:2.5px solid var(--ink); border-radius:18px;
  box-shadow:var(--drop-lg);
}
.share{ display:flex; flex-direction:column; gap:9px }
/* flex:none anula o flex:1 de .btn-main, que existe para a linha
   horizontal do rodapé do modal. Numa coluna, aquele flex:1 fazia o
   botão esticar na altura e virar uma elipse gigante. */
.share .btn{ width:100%; flex:none }
.share-note{ font-size:12px; color:var(--ink-70); line-height:1.45; margin:2px 0 0 }
.shortlink{
  font-family:var(--mono); font-size:12px; font-weight:700;
  background:var(--butter); padding:9px;
  border:2.5px solid var(--ink); border-radius:var(--rs);
  text-align:center; word-break:break-all;
}

/* ============ DETALHE DO CARTAZ ============ */
.detail{ display:grid; gap:18px; grid-template-columns:1fr }
/* A foto do anúncio CABE inteira, não é recortada.
   Aqui não é grade: não há motivo para forçar todas ao mesmo formato,
   e recortar a foto de um pet perdido pode esconder justamente a marca
   que faz alguém reconhecer o animal. A altura máxima evita que uma
   foto muito em pé empurre todo o resto para fora da tela. */
.detail-photo{
  border:2.5px solid var(--ink); border-radius:20px;
  display:grid; place-items:center;
  overflow:hidden; position:relative;
  background:var(--soft); box-shadow:var(--drop);
  min-height:200px; max-height:62vh;
}
.detail-photo img{
  width:100%; height:auto; max-height:62vh;
  object-fit:contain; display:block;
}
.detail-photo .initial{ font-family:var(--display); font-weight:800; font-size:84px; color:var(--ink-14) }
.detail-photo svg{ position:absolute; width:44%; height:44%; opacity:.16 }

.detail .flyer-name{ font-size:30px }

.dl{ margin:0; font-size:14.5px }
.dl dt{
  font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-45); margin-top:13px;
}
.dl dd{ margin:2px 0 0 }

.contact-lock{
  margin-top:16px; border:2.5px solid var(--ink); border-radius:18px;
  padding:14px; background:var(--card); box-shadow:var(--drop);
}
.contact-lock .warn{ font-size:12px; color:var(--ink-70); margin:11px 0 0; line-height:1.45 }
.phone{ font-family:var(--display); font-weight:800; font-size:23px }

/* linha de campo + botão usada na conferência da marca secreta */
.inline-row{ display:flex; gap:9px; flex-wrap:wrap }
.inline-row input{
  flex:1 1 140px; min-width:0; padding:11px 13px;
  border:2.5px solid var(--ink); border-radius:var(--rs);
  background:#fff; color:var(--ink); min-height:var(--touch);
}
.inline-row .btn{ flex:0 0 auto; padding:11px 16px; font-size:14px }

/* atalhos discretos abaixo do aviso, no computador */
.share .pc-links{ margin-top:4px; justify-content:center }

/* ações sobre a prévia da foto */
.prev-acoes{ position:absolute; bottom:10px; left:10px; right:10px;
  display:flex; gap:8px; justify-content:center }
.prev-acoes button{
  font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  background:var(--card); color:var(--ink); border:2.5px solid var(--ink);
  border-radius:999px; padding:8px 14px; min-height:38px;
}
.prev-acoes button:hover{ background:var(--butter) }
.drop-preview img{ transition:transform .18s ease }

.guardar-link{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px }
.guardar-link .btn{ flex:1 1 150px; padding:11px 14px; font-size:13.5px }