/* ==========================================================================
   app.css — folha de estilos única do site (mobile-first)
   Tema escuro discreto, um só acento quente, font stack do sistema.
   Sem imports, sem web fonts, sem url() remotos (CSP default-src 'self').
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variáveis
   -------------------------------------------------------------------------- */
:root {
  /* Cores base (tema escuro) */
  --cor-fundo: #131215;          /* fundo quase-preto */
  --cor-superficie: #1d1c21;     /* cartões e cabeçalho */
  --cor-superficie-2: #26242c;   /* campos de formulário, hover */
  --cor-borda: #34323b;
  --cor-texto: #eae8ee;          /* contraste ~14:1 sobre o fundo */
  --cor-texto-suave: #aca8b4;    /* contraste ~7:1 — AA em qualquer tamanho */

  /* Acento único (violeta profundo — neutro para todos os públicos), usado com moderação */
  --cor-acento: #7c3aed;         /* botões primários (branco por cima: ~5.7:1) */
  --cor-acento-escuro: #6527c9;  /* hover/active do botão primário */
  --cor-acento-claro: #a78bfa;   /* links sobre fundo escuro (~6.9:1) */

  /* Estados */
  --cor-sucesso-texto: #93d8a7;
  --cor-sucesso-fundo: #142a1c;
  --cor-sucesso-borda: #2b5c3b;
  --cor-erro-texto: #f2a2b0;
  --cor-erro-fundo: #331620;
  --cor-erro-borda: #6e2a3d;
  --cor-aviso-texto: #e6c88a;
  --cor-aviso-fundo: #2b2314;
  --cor-aviso-borda: #6b552b;

  /* Espaçamento e forma */
  --esp-1: 0.5rem;
  --esp-2: 0.75rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2.5rem;
  --raio: 0.5rem;
  --raio-pequeno: 0.375rem;
  --largura-max: 64rem;

  /* Tipografia: font stack do sistema, zero web fonts */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main { flex: 1; width: 100%; }

/* Nenhuma imagem transborda o contentor (fotos de admin em tamanho real,
   KYC decifrado em stream, etc.); height:auto preserva a proporção. */
img { max-width: 100%; height: auto; }

h1, h2 {
  line-height: 1.25;
  margin: 0 0 var(--esp-3);
  font-weight: 700;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }

p { margin: 0 0 var(--esp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--cor-acento-claro); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

ul { margin: 0 0 var(--esp-3); padding-left: 1.25rem; }

code {
  font-family: var(--fonte-mono);
  font-size: 0.875em;
  background: var(--cor-superficie-2);
  border-radius: var(--raio-pequeno);
  padding: 0.125rem 0.375rem;
}

pre {
  font-family: var(--fonte-mono);
  font-size: 0.8125rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-3);
  overflow-x: auto; /* nunca forçar scroll horizontal na página */
  margin: 0 0 var(--esp-3);
}

/* Foco visível em todos os elementos interativos */
:focus-visible {
  outline: 2px solid var(--cor-acento-claro);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--esp-3);
}

main.container { padding-block: var(--esp-4); }

/* Cabeçalho */
.site-header {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-3);
  padding-block: var(--esp-2);
  min-height: 3.5rem;
}

.site-header__brand {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cor-texto);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.site-header__brand:hover { color: var(--cor-acento-claro); }

.site-header__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
}

.site-header__nav a { text-decoration: none; }
.site-header__nav a:not(.btn):hover { text-decoration: underline; }

/* Formulário embutido na navegação (ex.: botão "Sair") */
.inline-form { display: inline-flex; margin: 0; }

/* Rodapé */
.site-footer {
  margin-top: var(--esp-5);
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding-block: var(--esp-4);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-3);
}

.site-footer__nav a { color: var(--cor-texto-suave); text-decoration: none; }
.site-footer__nav a:hover { color: var(--cor-texto); text-decoration: underline; }

.site-footer__note {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* alvo de toque confortável */
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie-2);
  color: var(--cor-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--cor-borda); }

.btn--primary {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  color: #fff;
}
.btn--primary:hover { background: var(--cor-acento-escuro); border-color: var(--cor-acento-escuro); }

/* Botão com aspeto de link (ex.: "Sair" na navegação) */
.btn--link {
  background: none;
  border: none;
  min-height: 0;
  padding: 0;
  font-weight: 400;
  color: var(--cor-acento-claro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn--link:hover { background: none; text-decoration: none; }

.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Mensagens flash e avisos
   -------------------------------------------------------------------------- */
.flash {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  padding: var(--esp-2) var(--esp-3);
  margin: 0 0 var(--esp-3);
  font-size: 0.9375rem;
}

.flash--success {
  color: var(--cor-sucesso-texto);
  background: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso-borda);
}

.flash--error {
  color: var(--cor-erro-texto);
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
}

.notice {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-2) var(--esp-3);
  font-size: 0.875rem;
}

.notice--draft {
  color: var(--cor-aviso-texto);
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso-borda);
}

/* --------------------------------------------------------------------------
   Blocos de conteúdo
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--esp-4); text-align: center; }

.hero h1 { font-size: 1.625rem; margin-bottom: var(--esp-2); }

.hero__lead {
  color: var(--cor-texto-suave);
  font-size: 1.0625rem;
  max-width: 40rem;
  margin-inline: auto;
}

.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4);
  margin-bottom: var(--esp-4);
}
.card:last-child { margin-bottom: 0; }

.page { max-width: 44rem; }
.page h1 { margin-bottom: var(--esp-4); }

.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li { padding-block: var(--esp-1); border-bottom: 1px solid var(--cor-borda); }
.status-list li:last-child { border-bottom: none; }
.status-list em { color: var(--cor-texto-suave); }

/* Páginas de erro (404 / 419 / 500) */
.error-page { padding-block: var(--esp-4); text-align: center; margin-inline: auto; }
.error-detail { text-align: left; color: var(--cor-texto-suave); }

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
.form-field { margin-bottom: var(--esp-3); }

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 44px;      /* alvo de toque confortável */
  font-size: 16px;       /* evita o zoom automático do iOS */
  font-family: inherit;
  line-height: 1.4;
  color: var(--cor-texto);
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 0.5rem 0.75rem;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cor-acento-claro);
  outline-offset: 0;
  border-color: var(--cor-acento-claro);
}

textarea { resize: vertical; min-height: 6rem; }

input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0.125rem 0 0;
  flex-shrink: 0;
  accent-color: var(--cor-acento);
}

/* Campo de checkbox: caixa e texto lado a lado */
.form-field--checkbox label {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.9375rem;
}

.form-hint { font-weight: 400; font-size: 0.8125rem; color: var(--cor-texto-suave); }

.form-error {
  color: var(--cor-erro-texto);
  font-size: 0.875rem;
  margin: 0.375rem 0 0;
}

/* --------------------------------------------------------------------------
   Autenticação (entrar / registar / recuperar palavra-passe)
   -------------------------------------------------------------------------- */
.auth-card {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4);
}

.auth-card h1 { font-size: 1.25rem; }

.auth-card__alt {
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
  margin: var(--esp-3) 0 0;
}

/* --------------------------------------------------------------------------
   Área de conta: lista de anúncios, badges de estado e grelha de fotos
   -------------------------------------------------------------------------- */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--published {
  color: var(--cor-sucesso-texto);
  background: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso-borda);
}

.badge--pending,
.badge--paused,
.badge--expired {
  color: var(--cor-aviso-texto);
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso-borda);
}

.badge--rejected {
  color: var(--cor-erro-texto);
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
}

.ad-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-1);
}
.ad-item__head h2 { margin: 0; }

.ad-item__meta {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  margin-bottom: var(--esp-2);
}

.ad-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-2);
  margin-top: var(--esp-2);
}

.btn--small {
  /* Alvo de toque ≥ 44px (inclui ações destrutivas adjacentes);
     padding/fonte mantêm-se reduzidos. */
  min-height: 44px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.photo-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--esp-3);
  padding: 0;
  margin: 0 0 var(--esp-4);
}

.photo-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-2);
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-pequeno);
  margin-bottom: var(--esp-1);
}

.photo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
}

/* Vídeos na página do anúncio */
.video-grid {
  display: grid;
  gap: var(--esp-2);
}

.video-grid video,
.video-grid img {
  width: 100%;
  max-width: 32rem;
  height: auto;
  border-radius: var(--raio);
  background: #000;
}

/* Títulos das secções do formulário de anúncio */
.form-section-title {
  font-size: 1.125rem;
  margin: var(--esp-4) 0 var(--esp-2);
  padding-bottom: var(--esp-1);
  border-bottom: 1px solid var(--cor-borda);
}

.form-section-title:first-of-type {
  margin-top: 0;
}

/* Grupos de checkboxes (atributos do anúncio) */
.checkbox-group {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
  margin: 0 0 var(--esp-3);
}

.checkbox-group legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding-inline: var(--esp-1);
}

.checkbox-group__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--esp-1) var(--esp-3);
}

.checkbox-group__options label {
  display: flex;
  gap: var(--esp-1);
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Ecrãs maiores (~768px)
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .container { padding-inline: var(--esp-4); }
  main.container { padding-block: var(--esp-5); }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.25rem; }

  .hero { padding-block: var(--esp-5); }
  .hero h1 { font-size: 2.25rem; }
  .hero__lead { font-size: 1.125rem; }

  .auth-card { padding: var(--esp-5); margin-top: var(--esp-4); }
  .auth-card h1 { font-size: 1.5rem; }

  .error-page { padding-block: var(--esp-5); max-width: 34rem; }
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
/* Texto só para leitores de ecrã */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot anti-bot: fora do ecrã, NUNCA display:none (os bots detetam-no) */
.hp-field {
  position: absolute;
  left: -200vw;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Interstitial +18 (overlay SSR, sem JS)
   -------------------------------------------------------------------------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(10, 9, 12, 0.94);
  padding: var(--esp-3);
  overflow-y: auto;
}

.age-gate__box {
  width: 100%;
  max-width: 26rem;
  margin: auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-4);
}

.age-gate__box h2 { margin-bottom: var(--esp-2); }

.age-gate__exit { text-align: center; margin: var(--esp-3) 0 0; }

.age-gate__legal {
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
  margin: var(--esp-3) 0 0;
}

/* Sem scroll por trás do overlay (fallback inofensivo onde :has não existe) */
body:has(> .age-gate) { overflow: hidden; }

/* --------------------------------------------------------------------------
   Home: pesquisa, cidades, categorias, distritos
   -------------------------------------------------------------------------- */
.search-box {
  display: flex;
  gap: var(--esp-2);
  max-width: 34rem;
  margin: var(--esp-3) auto 0;
}
.search-box input[type="search"] { flex: 1; }

.home-section { margin-bottom: var(--esp-4); }

.city-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
}

.city-grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto);
  text-decoration: none;
}
.city-grid a:hover { border-color: var(--cor-acento-claro); }

.city-grid__count {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.25rem 0.875rem;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto);
  text-decoration: none;
  font-size: 0.9375rem;
}
.chip:hover { border-color: var(--cor-acento-claro); }

.district { margin-bottom: var(--esp-3); }

.district__name {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  margin: 0 0 var(--esp-1);
}

.district__cities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--esp-3);
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Grelha de listagem e cards de anúncio
   -------------------------------------------------------------------------- */
.breadcrumbs {
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-2);
}
.breadcrumbs a { color: inherit; }

.listing__count {
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
  margin-top: calc(-1 * var(--esp-2));
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-2);
}

.ad-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.ad-card:hover { border-color: var(--cor-acento-claro); }

.ad-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ad-card__photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--cor-superficie-2);
}
.ad-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-card__body { display: block; padding: var(--esp-2); }

.ad-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.ad-card__meta {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
}

.empty-state {
  text-align: center;
  color: var(--cor-texto-suave);
  background: var(--cor-superficie);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-5) var(--esp-3);
}

/* --------------------------------------------------------------------------
   Filtros das listagens (details/summary — colapsável sem JS)
   -------------------------------------------------------------------------- */
.filters { margin-bottom: var(--esp-4); }

.filters__panel {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.filters__panel > summary {
  cursor: pointer;
  padding: var(--esp-2) var(--esp-3);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.filters__panel[open] > summary { border-bottom: 1px solid var(--cor-borda); }

.filters__body {
  padding: var(--esp-3);
  display: grid;
  gap: var(--esp-3);
}

.filters__group {
  border: none;
  margin: 0;
  padding: 0;
}

.filters__group legend {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  padding: 0;
  margin-bottom: var(--esp-1);
}

.filters__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem var(--esp-3);
}

.filters__options label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  min-height: 32px;
}

.filters__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
}

/* --------------------------------------------------------------------------
   Paginação (links ?p=N reais)
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-1);
  margin-top: var(--esp-4);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  font-size: 0.9375rem;
}
.pagination a { color: var(--cor-texto); background: var(--cor-superficie); }
.pagination a:hover { border-color: var(--cor-acento-claro); }

.pagination__current {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  color: #fff;
  font-weight: 600;
}

.pagination__gap {
  border: none;
  color: var(--cor-texto-suave);
  min-width: auto;
}

/* --------------------------------------------------------------------------
   Página do anúncio: galeria, atributos, contactos
   -------------------------------------------------------------------------- */
.ad-meta {
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
  margin-bottom: var(--esp-3);
}

.gallery { margin-bottom: var(--esp-4); }

.gallery__main {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.gallery__main img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
}

.gallery__thumbs {
  display: flex;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.gallery__thumb {
  flex: 0 0 auto;
  display: block;
  border: 2px solid transparent;
  border-radius: var(--raio-pequeno);
  overflow: hidden;
}
.gallery__thumb img { display: block; width: 72px; height: 72px; object-fit: cover; }
.gallery__thumb:hover,
.gallery__thumb.is-active { border-color: var(--cor-acento); }

.attr-group { margin-bottom: var(--esp-3); }
.attr-group:last-child { margin-bottom: 0; }

.attr-group__name {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  margin: 0 0 var(--esp-1);
}

.attr-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}

.attr-tag {
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.8125rem;
}

.ad-contact-note {
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

/* Botões de contacto bem visíveis em mobile (grid a toda a largura) */
.contact-actions {
  display: grid;
  gap: var(--esp-2);
  margin-block: var(--esp-3);
}

.btn--tel {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  color: #fff;
}
.btn--tel:hover { background: var(--cor-acento-escuro); border-color: var(--cor-acento-escuro); }

.btn--whatsapp { background: #1e7e46; border-color: #1e7e46; color: #fff; }
.btn--whatsapp:hover { background: #196a3b; border-color: #196a3b; }

.btn--telegram { background: #1c6ea8; border-color: #1c6ea8; color: #fff; }
.btn--telegram:hover { background: #175d8e; border-color: #175d8e; }

.btn--social { background: var(--cor-texto); border-color: var(--cor-texto); color: #fff; }
.btn--social:hover { opacity: 0.85; }

.ad-report { font-size: 0.9375rem; margin: 0; }

/* --------------------------------------------------------------------------
   Pesquisa e denúncia
   -------------------------------------------------------------------------- */
.search-form { margin-bottom: var(--esp-4); }

.search-results-title { margin-bottom: var(--esp-3); }

.radio-group { border: none; margin: 0 0 var(--esp-3); padding: 0; }
.radio-group legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0;
  margin-bottom: 0.375rem;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding-block: 0.25rem;
  font-size: 0.9375rem;
}

input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0.125rem 0 0;
  flex-shrink: 0;
  accent-color: var(--cor-acento);
}

.captcha-img {
  display: block;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  margin-bottom: var(--esp-1);
}

.report-anon-note { margin-bottom: var(--esp-3); }

/* --------------------------------------------------------------------------
   Tabelas e badges de estado (listas de conta e admin)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table th,
.table td {
  text-align: left;
  padding: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: top;
}

.table th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}

.badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--published,
.badge--approved,
.badge--actioned,
.badge--active {
  color: var(--cor-sucesso-texto);
  background: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso-borda);
}

.badge--draft,
.badge--pending,
.badge--pending_review,
.badge--open {
  color: var(--cor-aviso-texto);
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso-borda);
}

.badge--rejected,
.badge--removed,
.badge--blocked,
.badge--danger {
  color: var(--cor-erro-texto);
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
}

/* paused / expired / dismissed ficam no cinzento neutro da base */

/* --------------------------------------------------------------------------
   Ecrãs maiores — listagens e galerias
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .listing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
  .city-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-actions { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .search-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--esp-3); }
  .gallery__thumb img { width: 96px; height: 96px; }
}

@media (min-width: 64rem) {
  .listing-grid { grid-template-columns: repeat(4, 1fr); }
  .city-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Marca: "Relax" destacado no acento */
.site-header__brand-accent {
  color: var(--cor-acento-claro);
}

/* --------------------------------------------------------------------------
   Favoritos locais (localStorage — plano v1, secção 7)
   -------------------------------------------------------------------------- */
/* Sem JS o botão não faz nada, por isso não aparece (o app.js põe .js-on) */
html:not(.js-on) .fav-btn { display: none; }

.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* alvo de toque confortável */
  height: 44px;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto-suave); /* coração neutro até guardar */
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fav-btn:hover { border-color: var(--cor-acento-claro); color: var(--cor-texto); }
.fav-btn.is-fav { color: var(--cor-acento-claro); border-color: var(--cor-acento); }

/* Nos cards o coração flutua no canto da foto */
.ad-card { position: relative; }
.ad-card .fav-btn {
  position: absolute;
  top: var(--esp-1);
  right: var(--esp-1);
  background: rgba(19, 18, 21, 0.82);
}

/* Na página do anúncio fica ao lado do título */
.ad-page__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-2);
}
.ad-page__title h1 { flex: 1; min-width: 0; }
.ad-page__title .fav-btn { flex-shrink: 0; }

/* Nota e lista da página /favoritos */
.fav-note { color: var(--cor-texto-suave); }

.fav-list { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-3); }

.fav-item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-2);
}

.fav-item__link {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex: 1;
  min-width: 0;
  color: var(--cor-texto);
  text-decoration: none;
}
.fav-item__link:hover .fav-item__title { text-decoration: underline; }

.fav-item__photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie-2);
}

.fav-item__title { font-weight: 600; overflow-wrap: anywhere; }

.fav-item__remove { flex-shrink: 0; }

/* Mini-aviso ao guardar, com link para /favoritos (criado por JS) */
.fav-toast {
  position: fixed;
  left: 50%;
  bottom: var(--esp-3);
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100vw - 2 * var(--esp-3));
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-2) var(--esp-3);
  font-size: 0.9375rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Diff de edições de anúncios aprovados (admin — moderação)
   -------------------------------------------------------------------------- */
.diff {
  border-left: 3px solid var(--cor-acento);
  padding-left: var(--esp-3);
  margin-bottom: var(--esp-3);
}

.diff__campo {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  margin: 0 0 var(--esp-1);
}

.diff__antes,
.diff__depois {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: var(--esp-2);
  font-size: 0.9375rem;
  color: var(--cor-texto);
  overflow-wrap: anywhere;
  margin: 0 0 var(--esp-2);
}
.diff__antes { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); }
.diff__depois { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); }

.diff__lista {
  list-style: none;
  margin: 0 0 var(--esp-2);
  padding: 0;
}

.diff__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--esp-1);
  margin-bottom: var(--esp-2);
}
.diff__fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
}

/* Antes/depois lado a lado em desktop: o elemento que contém o par vira
   grelha (fallback inofensivo onde :has não existe — ficam empilhados). */
@media (min-width: 48rem) {
  .diff:has(> .diff__depois),
  .diff :has(> .diff__depois) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--esp-2);
  }
  .diff:has(> .diff__depois) > .diff__campo,
  .diff :has(> .diff__depois) > .diff__campo { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Acessibilidade: skip-link (1.º elemento focável; visível apenas com foco)
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95; /* acima de tudo excepto o interstitial +18 (100) */
  width: auto;
  height: auto;
  clip-path: none;
  white-space: normal;
  padding: var(--esp-2) var(--esp-3);
  background: var(--cor-acento);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--raio) 0;
}