/* ============================================================
   SÓ INDICADOS - Visual do CELULAR
   ------------------------------------------------------------
   Carregado pelo cabecalho.php com media="(max-width: 800px)",
   e tudo aqui também fica dentro do @media abaixo: o PC
   NUNCA é afetado por este arquivo.

   Os seletores começam com "body" para ganhar dos <style>
   que cada página tem dentro dela.
   ============================================================ */

@media (max-width: 800px) {

/* ---------- Base ---------- */
body {
  background: #f4f4f6;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body main.container { padding-top: 16px !important; padding-bottom: 8px !important; }

/* Rodapé sempre no fim da tela, mesmo em páginas curtas (ex.: login) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main.container { flex: 1 0 auto; width: 100%; }
body h1, body h2, body h3 { letter-spacing: -0.01em; }

/* Toque: tira o "pulinho" de hover que fica preso no celular */
body .card:hover { transform: none; box-shadow: var(--sombra); }

/* ---------- Cabeçalho ---------- */
body header.topo {
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04);
}
body header.topo .container { height: 60px; }

/* A logo é um quadrado com muito espaço em branco: no celular
   mostramos só o letreiro "Só Indicados", recortado e legível. */
body header.topo .logo {
  display: block;
  width: 192px;
  height: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
body header.topo .logo img {
  width: 219px;
  height: 219px;
  max-height: none;
  max-width: none;
  margin: -120px 0 0 -13px;
}

body .menu-hamburguer {
  width: 44px;
  height: 44px;
  justify-content: center;
  border-radius: 12px;
  background: #f4f4f6;
  font-size: 22px;
  padding: 0;
}
body .menu-hamburguer:active { background: #ececef; }

/* Menu lateral */
body .menu-overlay.aberto {
  background: rgba(20,20,20,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: so-fade .2s ease-out;
}
body header.topo nav {
  width: 82%;
  max-width: 320px;
  padding: 74px 16px 24px;
  gap: 4px;
  border-radius: 20px 0 0 20px;
  box-shadow: -8px 0 30px rgba(0,0,0,.18);
}
body header.topo nav.aberto { animation: so-deslizar .25s ease-out; }
body header.topo nav a {
  padding: 13px 16px !important;
  border-bottom: none !important;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
}
body header.topo nav a:active { background: #FFF3E0; }
body header.topo nav a.btn {
  margin-top: 10px !important;
  text-align: center;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(253,116,2,.3);
}
body header.topo nav a.btn + a:not(.btn):not(.link-admin) { margin-top: 6px !important; }
body .fechar-menu {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: #f4f4f6;
  font-size: 24px;
  color: #666;
}

@keyframes so-deslizar { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes so-fade     { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Botões ---------- */
body .btn {
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
}
body .btn:not(.btn-secundario):not(.btn-whats) { box-shadow: 0 4px 12px rgba(253,116,2,.22); }
body .btn-whats { box-shadow: 0 4px 12px rgba(37,211,102,.28); }
body .btn:active { transform: scale(.98); }

/* ---------- Formulários ----------
   16px evita que o iPhone dê zoom sozinho ao tocar no campo */
body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body select,
body textarea {
  font-size: 16px !important;
}
body .form-grupo input,
body .form-grupo select,
body .form-grupo textarea {
  padding: 12px 14px;
  border-radius: 12px;
}
body .form-grupo label { font-size: 14px; }

/* Duas colunas apertadas nos formulários viram uma só */
@media (max-width: 480px) {
  body form div[style*="grid-template-columns: 1fr 1fr;"]:not([style*="1fr 1fr 1fr"]),
  body form div[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Cards, alertas, caixas ---------- */
body .card { border-radius: 14px; }
body .alerta { border-radius: 12px; }

body .caixa-central {
  margin: 4px 0 24px;
  padding: 26px 18px;
  border-radius: 18px;
}
body .caixa-central h1 { font-size: 22px; }

/* ============================================================
   HOME (public/index.php)
   ============================================================ */
body .home-hero { padding: 6px 4px 16px !important; }
body .home-hero h1 { font-size: 23px !important; line-height: 1.25; margin-bottom: 6px !important; }
body .home-hero p { font-size: 14px; }

body .busca-bar {
  padding: 12px;
  border-radius: 16px;
  margin-bottom: 16px;
}

/* Linha 1: [ busca ............ ][Buscar]
   Linha 2: [ ⚙️ Filtros (n)         ▾ ]
   Resto: só aparece quando "Filtros" é aberto */
body .filtros { grid-template-columns: 1fr auto; gap: 8px; }
body .filtros > .form-grupo:first-child { grid-column: 1; grid-row: 1; }
body .filtros > .form-grupo:first-child label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
body .filtros > button[type="submit"] {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  padding: 0 18px;
}
body .filtros > .form-grupo:not(:first-child) { display: none; grid-column: 1 / -1; }
body form.filtros-abertos .filtros > .form-grupo { display: block; }

body .filtros > .filtros-toggle { grid-column: 1 / -1; grid-row: 2; }

/* Botão "Filtros" (home e comunidade) */
body .filtros-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fafafa;
  color: var(--cinza-escuro);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body .filtros-toggle .filtros-toggle-seta {
  margin-left: auto;
  color: var(--cinza-claro);
  transition: transform .2s;
}
body form.filtros-abertos .filtros-toggle { border-color: var(--laranja); background: #FFF8F0; }
body form.filtros-abertos .filtros-toggle .filtros-toggle-seta { transform: rotate(180deg); }

body .filtros-extras { display: none; }
body form.filtros-abertos .filtros-extras {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
body .filtros-extras details { min-width: 0; padding: 10px 14px; border-radius: 12px; }
body .filtros-extras label.opt { padding: 7px 0; }
body #wrapper-bairros .dd-trigger { min-width: 0 !important; }
body .filtros-extras > a { align-self: center !important; padding: 6px; }

body .dd-trigger { min-height: 46px; border-radius: 12px; font-size: 15px; }
body .dd-item { padding: 10px 14px; }
body .dd-painel { border-radius: 12px; }

/* Lista de anúncios: 2 por linha, estilo app */
body .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body .card-anuncio { border-radius: 14px; }
/* Foto sempre na mesma proporção (anúncio sem foto não estica o card) */
body .card-foto { overflow: hidden; }
body .card-foto img { position: absolute; inset: 0; }
body .card-foto img.logo-fallback { object-fit: contain !important; padding: 10px; }
body .card-info { padding: 10px 11px 12px; gap: 3px; }
body .card-titulo {
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body .card-categoria,
body .card-local {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .card-categoria { font-size: 12px; }
body .card-local { font-size: 11.5px; padding-top: 2px; }

body .selo-indicacoes {
  top: auto;
  bottom: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 11px;
}
body .card-faixa-canto {
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

@media (max-width: 340px) {
  body .grid { grid-template-columns: 1fr; }
}

body .paginacao { gap: 6px; margin-top: 24px; }
body .paginacao a,
body .paginacao span { padding: 9px 13px; border-radius: 10px; }

/* ============================================================
   PÁGINA DO ANÚNCIO (public/anuncios/ver.php)
   ============================================================ */
body .anuncio-grid { gap: 16px; }
body .anuncio-grid > div { min-width: 0; }
body .compartilhar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .compartilhar-btn { text-align: center; line-height: 1.25; }

/* Foto de ponta a ponta */
body .galeria-principal {
  margin: 0 -16px;
  border-radius: 0;
}
/* Miniaturas numa fileira que desliza para o lado */
body .galeria-miniaturas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body .galeria-miniaturas::-webkit-scrollbar { display: none; }
body .galeria-miniaturas img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  scroll-snap-align: start;
}

body .anuncio-grid .card { padding: 18px 16px !important; }
body .anuncio-grid .card h1 { font-size: 20px !important; line-height: 1.3; }

/* Anunciante: foto ao lado do nome */
body .bloco-anunciante {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 0;
}
body .bloco-anunciante .avatar {
  grid-row: span 3;
  width: 56px;
  height: 56px;
  margin: 0;
  font-size: 22px;
}
body .bloco-anunciante h3 { margin: 0 !important; }
body .bloco-anunciante .faixa { justify-self: start; }
body .bloco-anunciante > div:last-child { margin-top: 2px !important; }

/* WhatsApp + Indicar numa barra fixa no rodapé da tela */
body .bloco-acoes {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  flex-direction: row;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
body .bloco-acoes > * { flex: 1 1 0; min-width: 0; }
body .bloco-acoes .btn {
  padding: 13px 8px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .bloco-acoes .alerta,
body .bloco-acoes > div {
  margin: 0;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  border-radius: 12px;
}
body .bloco-acoes .so-pc { display: none; } /* "Falar pelo WhatsApp" vira "WhatsApp" */

/* Espaço no fim da página para a barra não cobrir o rodapé */
body:has(.bloco-acoes) .rodape {
  padding-bottom: calc(26px + 72px + env(safe-area-inset-bottom, 0px));
}
@supports not selector(:has(*)) {
  body .barra-acoes-espaco { display: block; height: 72px; }
  body .rodape { margin-top: 0; }
}

body .bloco-compartilhar { margin-top: 12px; border-radius: 14px; }
body .compartilhar-aviso { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   COMUNIDADE
   ============================================================ */
body .com-hero { padding: 22px 18px; border-radius: 16px; margin-bottom: 16px; }
body .com-hero h1 { font-size: 22px; }
body .com-hero p { font-size: 14px; }
body .com-hero .botoes a { flex: 1 1 auto; text-align: center; }
/* Filtros: [ busca .................. ]
            [ ⚙️ Filtros (n)  ▾ ][Filtrar]
   o resto aparece ao tocar em "Filtros" */
body form.com-filtros {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
}
body .com-filtros .linha1,
body .com-filtros .linha2 { display: contents; }
body .com-filtros .linha1 > div,
body .com-filtros .linha2 > div { grid-column: 1 / -1; }
body .com-filtros .linha1 > div:first-child { grid-row: 1; }
body .com-filtros .linha1 > div:first-child label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
body .com-filtros .filtros-toggle { grid-column: 1; grid-row: 2; }
body .com-filtros button[type="submit"] { grid-column: 2; grid-row: 2; padding: 0 20px; }
body .com-filtros .linha2 > div:empty { display: none; }
body form.com-filtros:not(.filtros-abertos) .linha1 > div:not(:first-child),
body form.com-filtros:not(.filtros-abertos) .linha2 > div { display: none !important; }
body .com-filtros label { font-size: 13px; }
body .com-filtros input,
body .com-filtros select { padding: 12px 14px; border-radius: 12px; }
body .com-card { padding: 16px; border-radius: 14px; }
body .com-card:hover { transform: none; }
body .com-card .titulo { font-size: 16px; }
body .com-paginacao { flex-wrap: wrap; }

body .pg-pergunta { padding: 18px 16px; border-radius: 14px; }
body .pg-pergunta h1 { font-size: 20px; }
body .pg-pergunta .desc { font-size: 15px; }
body .pg-pergunta .acoes { flex-wrap: wrap; }
body .pg-resposta { border-radius: 14px; }
body .pg-btn-acao { padding: 8px 14px; }

/* ============================================================
   COMO FUNCIONA
   ============================================================ */
body .cf-secao { padding: 24px 0; }
body .cf-titulo { font-size: 22px !important; line-height: 1.25; }
body h1.cf-titulo { font-size: 27px !important; }
body .cf-secao:first-of-type { padding-top: 8px !important; }
body .cf-sub { font-size: 15px; margin-bottom: 20px; }
body .cf-passos { gap: 12px; }
body .cf-passo { padding: 18px; border-radius: 14px; }
body .cf-faixas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body .cf-faixa-card { padding: 14px 10px; border-radius: 14px; }
body .cf-cta { padding: 28px 18px; border-radius: 18px; }
body .cf-cta h2 { font-size: 22px; }
body .cf-cta .btn { display: block; padding: 14px 20px; border-radius: 12px; }
body .cf-destaque { padding: 14px 16px; }

/* ============================================================
   MEU PAINEL
   ============================================================ */
/* Os 3 números lado a lado (2 + 1) em vez de 3 blocos empilhados */
body main > div[style*="minmax(260px, 1fr)"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body main > div[style*="minmax(260px, 1fr)"] > .card { padding: 16px !important; }
body main > div[style*="minmax(260px, 1fr)"] > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
body main table td { word-break: break-word; }
body main table td[style*="width: 180px"] { width: 110px !important; }
body main .card table td:first-child { font-size: 13px; }

/* ============================================================
   MEUS ANÚNCIOS
   [foto][título / infos]
   [  Editar  ][  Excluir  ]
   ============================================================ */
body .meu-anuncio {
  grid-template-columns: 88px 1fr !important;
  gap: 12px 14px !important;
  padding: 14px !important;
  align-items: start !important;
}
body .meu-anuncio-foto {
  width: 88px !important;
  height: 88px !important;
  border-radius: 12px !important;
}
body .meu-anuncio h3 { font-size: 15px !important; line-height: 1.3; }
body .meu-anuncio-acoes {
  grid-column: 1 / -1;
  flex-direction: row !important;
  gap: 8px !important;
}
body .meu-anuncio-acoes > * { flex: 1; }
body .meu-anuncio-acoes .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 0 14px !important;
  font-size: 14px !important;
}

/* ---------- Rodapé ---------- */
body .rodape {
  margin-top: 32px;
  padding: 26px 0 calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: 13px;
}

} /* fim @media (max-width: 800px) */