/* ===========================================================
   Topíssima Classificados — Tema Principal
   Estrutura unificada de cores, tipografia e botões
   =========================================================== */

/* ---------- CORES ---------- */
:root {
  --gold: #ffb400;
  --gold-dark: #d29a00;
  --bg-page: #0f0f10;
  --bg-card: #1a1a1a;
  --stroke: #2a2a2a;
  --text: #fff;
  --text-dim: rgba(255, 255, 255, 0.75);
  --danger: #a30000;
  --success: #1ad14f;
}

/* ---------- BASE ---------- */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------- HEADER (VERSÃO ANTIGA, AINDA USADA EM ALGUMAS PÁGINAS) ---------- */
header.site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--stroke);
  color: var(--text);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand-left {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.2;
}

.brand-mark {
  background: linear-gradient(135deg, #ffb400 0%, #ff4d00 100%);
  color: #000;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  padding: 0.4rem 0.5rem;
}

.brand-text {
  font-size: 0.7rem;
  color: var(--text);
}
.brand-text strong {
  color: var(--text);
  font-weight: 600;
  display: block;
  font-size: 0.8rem;
}

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
}
nav.main-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
nav.main-nav a.active {
  color: var(--gold);
  font-weight: 600;
}

.btn-pub-header {
  background: var(--gold);
  color: #000;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  line-height: 1.2;
}
.btn-pub-header:active {
  opacity: 0.85;
}

/* ---------- ESTRUTURA DE PÁGINA GENÉRICA ---------- */
.page-wrap {
  max-width: 1100px;
  margin: 24px auto 64px;
  padding: 0 1rem 2rem;
  line-height: 1.45;
}

.page-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.page-intro {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.back-top {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.back-top a {
  color: var(--text);
  text-decoration: none;
}
.back-top a span {
  opacity: 0.6;
}

/* ---------- CARTÕES ---------- */
.card-dark {
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: 0.75rem;
  color: var(--text);
  padding: 1rem 1rem 1.25rem;
}

.card-gold {
  background: linear-gradient(135deg, #ffb400 0%, #ff4d00 100%);
  color: #000;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

/* ---------- BOTÕES GENÉRICOS ---------- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

/* dourado padrão */
.btn-gold,
.btn-primary {
  background: var(--gold);
  color: #000;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.btn-gold:active,
.btn-primary:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* botão escuro / secundário */
.btn-dark,
.btn-secondary {
  background: #2a2a2a;
  color: var(--text);
  border: 1px solid #444;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.btn-dark:active,
.btn-secondary:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* ---------- FORMULÁRIOS ---------- */
label.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--text);
}

input.form-input,
textarea.form-input,
select.form-input {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.7rem 0.75rem;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

input.form-input:focus,
textarea.form-input:focus,
select.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 180, 0, 0.25);
}

/* ---------- HEADER TOPÍSSIMA NOVO (TC) ---------- */

.tc-header {
  background: #050607;
  border-bottom: 1px solid #272727;
}

.tc-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* LOGO */

.tc-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.tc-logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff7a30, #ffb830);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: #141417;
}

.tc-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.tc-logo-name {
  font-weight: 700;
  font-size: 18px;
  color: #f7f3ea;
}

.tc-logo-sub {
  font-weight: 600;
  font-size: 14px;
  color: #f7f3ea;
}

.tc-logo-tagline {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffb830;
}

/* NAV */

.tc-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}

.tc-nav a {
  color: #f1f1f1;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.tc-nav a:hover {
  color: #ffb830;
  opacity: 0.9;
}

/* Botão "Minha conta" destacado */
.tc-nav-cta,
.btn-conta-topissima {
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4f00, #ffb400);
  color: #141417 !important;
  font-weight: 600;
}

.tc-nav-cta:hover,
.btn-conta-topissima:hover {
  filter: brightness(1.05);
}

/* Responsivo simples */
@media (max-width: 720px) {
  .tc-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tc-nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ---------- FOOTER ANTIGO (algumas páginas) ---------- */
footer.site-footer {
  background: #111111;
  border-top: 1px solid var(--stroke);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 1.8rem 1rem 1.4rem;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-block {
  flex: 1 1 190px;
  min-width: 190px;
}

.footer-block-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.55rem;
}

.footer-block p,
.footer-block a {
  color: var(--text);
  font-size: 0.75rem;
  text-decoration: none;
  margin: 0 0 0.4rem;
  line-height: 1.45;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.footer-copy {
  max-width: 1100px;
  margin: 1.4rem auto 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--stroke);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
}

.footer-copy a {
  color: #ffb400;
  text-decoration: none;
}
.footer-copy a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .footer-inner {
    flex-direction: column;
  }

  .footer-copy {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================================================
   FOOTER TOPÍSSIMA NOVO (TC) — mais horizontal e simples
   =========================================================== */

.tc-footer {
  background: #111111;
  border-top: 1px solid #272727;
  color: #f5f5f5;
  font-size: 0.75rem;
  padding: 1.8rem 1rem 1.6rem;
}

.tc-footer a {
  color: #ffb400;
  text-decoration: none;
}
.tc-footer a:hover {
  text-decoration: underline;
}

.tc-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.tc-footer-col {
  flex: 1 1 180px;
  min-width: 180px;
}

.tc-footer-col h3,
.tc-footer-col h4 {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffb400;
}

.tc-footer-col p {
  margin: 0 0 0.4rem;
  line-height: 1.4;
}

/* Redes sociais */
.tc-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.tc-footer-social a {
  font-size: 0.7rem;
}

/* Linha inferior */
.tc-footer-bottom {
  border-top: 1px solid #272727;
  margin-top: 1.4rem;
  padding-top: 0.8rem;
}

.tc-footer-legal {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tc-footer-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
}

.tc-footer-disclaimer {
  max-width: 1100px;
  margin: 0.6rem auto 0;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

@media (max-width: 720px) {
  .tc-footer-inner {
    flex-direction: column;
  }

  .tc-footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========== HOME / CAPA TOPÍSSIMA (BLOCOS) ========== */

.home-main {
  max-width: 1100px;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.8fr);
  gap: 1.75rem;
}

.home-column {
  min-width: 0;
}

.home-card {
  background: #262626;
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  position: relative;
}

/* Linha de cor no topo dos quadros */
.home-card::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6a400, #ffcf40);
}

.home-card-login {
  font-size: 0.95rem;
}

/* Card "Últimos anúncios" — agora sem limite de altura e em grelha */
.home-card-latest {
  /* sem max-height nem scroll interno */
  padding-bottom: 1.5rem;
}

/* Os cards de anúncios dentro da home em forma de grelha 2-a-2 */
#home-ultimos-anuncios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.home-card h2 {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
}

.home-card p {
  margin-bottom: 0.75rem;
}

.home-note {
  font-size: 0.85rem;
  color: #cccccc;
}

.home-links a {
  color: #f6a400;
  text-decoration: none;
  font-weight: 500;
}
.home-links a:hover {
  text-decoration: underline;
}

/* Formulário de login */
#form-login label {
  display: block;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

#form-login input[type="tel"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #444;
  background: #181818;
  color: #fff;
  margin-bottom: 0.75rem;
}

#form-login input::placeholder {
  color: #777;
}

#form-login .btn.btn-primary {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: none;
  background: #f6a400;
  color: #111;
  font-weight: 600;
  cursor: pointer;
}

#form-login .btn.btn-primary:hover {
  filter: brightness(1.05);
}

/* Últimos anúncios dentro do card (apenas espaçamento) */
.home-card-latest #ultimos-anuncios {
  margin-top: 1rem;
}

@media (max-width: 800px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== NOVO LAYOUT HOME: LOGIN HORIZONTAL + ÚLTIMOS ANÚNCIOS FULL WIDTH ===== */

/* o main já existe, só garantimos espaçamento geral */
.home-main {
  max-width: 1100px;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* card horizontal de login */
.home-card-login-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.home-login-text {
  flex: 1 1 260px;
  min-width: 220px;
}

.home-login-text h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.home-login-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.home-login-form {
  flex: 1 1 260px;
  min-width: 220px;
}

.home-login-form .form-input {
  margin-bottom: 0.6rem;
}

.home-login-note {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.home-login-note a {
  color: var(--gold);
  text-decoration: none;
}
.home-login-note a:hover {
  text-decoration: underline;
}

/* botão mais compacto para o header dos últimos anúncios */
.btn-small {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}

/* card de últimos anúncios agora ocupa a largura toda */
.home-card-latest-full {
  padding-top: 1.4rem;
}

.home-latest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.home-latest-header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
}

.home-latest-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* já tens #ultimos-anuncios como grid 2-a-2,
   só garantimos que usa o espaço todo */
#ultimos-anuncios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* responsivo: empilha tudo em ecrãs pequenos */
@media (max-width: 720px) {
  .home-card-login-horizontal {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-latest-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== MINIATURAS NO FORMULÁRIO DE PUBLICAÇÃO ===== */
.foto-preview {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.foto-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--stroke);
}
/* ===== MINIATURAS NO FORMULÁRIO DE PUBLICAÇÃO ===== */
.foto-preview {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

.foto-preview img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 0.4rem;
border: 1px solid var(--stroke);
}

/* ===== RESET de pseudo-elementos que criavam o círculo nas thumbs ===== */
.anuncio-thumb::before,
.anuncio-thumb::after,
.anuncio-lista-thumb::before,
.anuncio-lista-thumb::after {
content: none !important;
}

/* ===== MINIATURAS NAS LISTAGENS (ex.: admin) ===== */
.anuncio-fotos {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

.anuncio-fotos img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 0.45rem;
border: 1px solid var(--stroke);
}

/* =====================================================
LISTA DE ANÚNCIOS PÚBLICOS (anuncios.html + home)
===================================================== */

.anuncios-lista {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.75rem;
}

/* Card horizontal */
.anuncio-card {
display: flex;
gap: 1rem;
align-items: center;
background: var(--bg-card);
border: 1px solid var(--stroke);
border-radius: 0.9rem;
padding: 0.9rem 1rem;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.anuncio-card:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
transform: translateY(-2px);
}

/* Thumb no card */
.anuncio-thumb {
position: relative;
flex-shrink: 0;
width: 120px;
height: 80px;
border-radius: 0.75rem;
overflow: hidden;
background: #000;
}

.anuncio-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Placeholder se não tiver foto */
.anuncio-thumb-placeholder {
width: 100%;
height: 100%;
border-radius: 0.75rem;
background: #2a2a2a;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
color: var(--text-dim);
}

/* Badge nº de fotos (ex.: "3 fotos") */
.thumb-photos-badge {
position: absolute;
right: 6px;
top: 6px;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 0.7rem;
}

/* Texto do card */
.anuncio-info {
flex: 1 1 auto;
}

.anuncio-info h3,
.anuncio-titulo {
margin: 0 0 0.15rem;
font-size: 1rem;
font-weight: 600;
}

.anuncio-preco {
margin: 0 0 0.2rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--gold);
}

.anuncio-meta,
.anuncio-whats,
.anuncio-whatsapp {
margin: 0;
font-size: 0.8rem;
color: var(--text-dim);
}

/* Link principal clicável dentro do card */
.anuncio-card-main {
display: flex;
gap: 1rem;
align-items: center;
text-decoration: none;
color: inherit;
}

/* Mobile: empilha thumb + texto */
@media (max-width: 600px) {
.anuncio-card {
flex-direction: column;
align-items: flex-start;
}

.anuncio-thumb {
width: 100%;
height: 190px;
}
}

/* =====================================================
BLOCO "ÚLTIMOS ANÚNCIOS" NA HOME (index.html)
===================================================== */

#ultimos-anuncios {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-top: 1rem;
}

.anuncio-lista-item {
background: #1c1c1c;
border-radius: 1rem;
padding: 0.75rem;
border: 1px solid rgba(255, 180, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.anuncio-lista-item:hover {
transform: translateY(-4px);
box-shadow: 0 2px 8px rgba(255, 180, 0, 0.3);
}

.anuncio-lista-thumb img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 0.75rem;
margin-bottom: 0.45rem;
}

.anuncio-lista-info h3 {
color: #ffb400;
font-size: 1rem;
margin: 0 0 0.2rem;
}
/* =====================================================
   DETALHE DO ANÚNCIO (anuncio.html) — versão final
   Foto grande em cima + thumbs alinhadas + info à direita
   ===================================================== */

.anuncio-detalhe {
  max-width: 1100px;
  margin: 24px auto 48px;
  padding: 0;
}

/* grid: galeria à esquerda, dados à direita */
.anuncio-detalhe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: flex-start;
}

/* bloco da galeria (foto principal + thumbs) */
.anuncio-galeria {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* foto principal */
.anuncio-galeria-main img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 0.9rem;
  display: block;
}

/* thumbs em baixo da principal */
.anuncio-galeria-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.anuncio-galeria-thumbs img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 2px solid transparent;
  background: #000;
  cursor: pointer;
}

.anuncio-galeria-thumbs img.is-active {
  border-color: var(--gold);
}

/* bloco de dados do anúncio (lado direito) */
.anuncio-dados {
  font-size: 0.9rem;
}

.anuncio-detalhe-titulo {
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
}

.anuncio-detalhe-preco {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.4rem;
}

.anuncio-detalhe-meta {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 0.35rem;
}

/* descrição em baixo do card */
.anuncio-descricao-bloco {
  margin-top: 1.5rem;
}

.anuncio-descricao-bloco h2 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.anuncio-descricao-texto {
  margin: 0;
  font-size: 0.9rem;
}

/* botão WhatsApp */
.btn-whatsapp {
  display: inline-block;
  background: #25d366;
  color: #022c22;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  text-decoration: none;
  margin-top: 0.6rem;
}

.btn-whatsapp:hover {
  filter: brightness(1.03);
}

/* responsivo */
@media (max-width: 800px) {
  .anuncio-detalhe-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   FIX 3 – Botões do ADMIN (cores e pílula)
   =========================================== */

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.admin-actions .btn {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.18s ease;
}

/* Ver anúncio – dourado */
.admin-actions .btn-view {
  background: #ffb400;
  color: #1a1a1a;
}

/* Publicar – verde */
.admin-actions .btn-publicar {
  background: #16a34a;
  color: #ffffff;
}

/* Em análise – azul */
.admin-actions .btn-analise {
  background: #2563eb;
  color: #ffffff;
}

/* Ocultar – cinza escuro */
.admin-actions .btn-ocultar {
  background: #4b5563;
  color: #ffffff;
}

/* Marcar como apagado – laranja */
.admin-actions .btn-apagar {
  background: #f97316;
  color: #ffffff;
}

/* Apagar definitivamente – vermelho */
.admin-actions .btn-delete {
  background: #dc2626;
  color: #ffffff;
}

.admin-actions .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.admin-actions .btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
/* ===========================================
   2) BOTÕES DO ADMIN – cores e formato “pílula”
   (usa .admin-anuncio-acoes que já tens no HTML)
   =========================================== */

.admin-anuncio-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.admin-anuncio-acoes .btn {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.18s ease;
}

/* VER ANÚNCIO – dourado */
.admin-anuncio-acoes .btn-ver,
.admin-anuncio-acoes .btn-view {
  background: #ffb400;
  color: #1a1a1a;
}

/* PUBLICAR – verde */
.admin-anuncio-acoes .btn-publicar {
  background: #16a34a;
  color: #ffffff;
}

/* EM ANÁLISE – azul */
.admin-anuncio-acoes .btn-analise {
  background: #2563eb;
  color: #ffffff;
}

/* OCULTAR – cinza escuro */
.admin-anuncio-acoes .btn-ocultar {
  background: #4b5563;
  color: #ffffff;
}

/* MARCAR COMO APAGADO – laranja (estado "apagado" mas reversível) */
.admin-anuncio-acoes .btn-apagado {
  background: #f97316;
  color: #ffffff;
}

/* APAGAR DEFINITIVAMENTE – vermelho forte */
.admin-anuncio-acoes .btn-apagar,
.admin-anuncio-acoes .btn-delete {
  background: #dc2626;
  color: #ffffff;
}

.admin-anuncio-acoes .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.admin-anuncio-acoes .btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* ===========================================
   3) Ajuste fino do "3 fotos" na thumb
   (só para garantir posição certinha)
   =========================================== */

.anuncio-thumb {
  position: relative;
}

.thumb-photos-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.7rem;
}
/* ===========================================
   HOTFIX FINAL — GALERIA DO ANÚNCIO
   Deixar só miniaturas pequenas na .anuncio-galeria
   =========================================== */

.anuncio-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  justify-content: flex-start;
}

.anuncio-galeria img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  display: block;
}
/* ===========================================
   HOTFIX FINAL – Detalhe do anúncio
   Foto grande + miniaturas por baixo
   =========================================== */

/* Ignorar qualquer grid antigo e empilhar tudo */
.anuncio-detalhe-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Foto principal sempre em cima, 100% largura */
.anuncio-detalhe-capa {
  width: 100%;
}

.anuncio-detalhe-capa img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 0.9rem;
  display: block;
}

/* Galeria de miniaturas – por baixo da foto principal */
.anuncio-detalhe-galeria,
.anuncio-galeria {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.anuncio-detalhe-galeria img,
.anuncio-galeria img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 1px solid var(--stroke);
  cursor: pointer;
}

/* Info (título, preço, botão, descrição) vem depois */
.anuncio-detalhe-info {
  width: 100%;
  margin-top: 0.75rem;
}
/* =====================================================
DETALHE DO ANÚNCIO — estrutura actual (anuncio.html)
===================================================== */

.anuncio-detalhe {
  max-width: 1100px;
  margin: 24px auto 48px;
  padding: 0 1rem;
}

/* Grid principal: galeria à esquerda + dados à direita */
.anuncio-detalhe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: flex-start;
}

/* BLOCO GALERIA (esquerda) */
.anuncio-galeria {
  min-width: 0;
}

/* Foto principal */
.anuncio-galeria-main {
  border-radius: 0.9rem;
  overflow: hidden;
  background: #000;
}

.anuncio-galeria-main img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* Thumbs POR BAIXO da foto principal */
.anuncio-galeria-thumbs {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.anuncio-galeria-thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 2px solid transparent;
  cursor: pointer;
  background: #000;
}

.anuncio-galeria-thumbs img:hover {
  opacity: 0.9;
}

.anuncio-galeria-thumbs img.is-active {
  border-color: var(--gold);
}

/* BLOCO DADOS (direita) */
.anuncio-dados {
  min-width: 0;
}

.anuncio-detalhe-titulo {
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
}

.anuncio-detalhe-preco {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.4rem;
}

.anuncio-detalhe-meta {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 0.45rem;
}

/* Botão WhatsApp já existe, só garantimos estilo */
.btn-whatsapp {
  display: inline-block;
  background: #25d366;
  color: #022c22;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  text-decoration: none;
}

.btn-whatsapp:hover {
  filter: brightness(1.03);
}

/* Bloco descrição */
.anuncio-descricao-bloco {
  margin-top: 1.8rem;
}

.anuncio-descricao-bloco h2 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

.anuncio-descricao-texto {
  font-size: 0.9rem;
  color: var(--text);
}

/* Responsivo: em ecrãs pequenos, empilha tudo */
@media (max-width: 800px) {
  .anuncio-detalhe-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   LAYOUT FINAL DO DETALHE DO ANÚNCIO (anuncio.html)
   ===================================================== */

/* Grid: galeria à esquerda, dados à direita */
.anuncio-detalhe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

/* Galeria: coluna com capa + thumbs em baixo */
.anuncio-galeria {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Foto principal (capa) */
.anuncio-galeria-main img {
  width: 100%;
  max-height: 420px;
  border-radius: 0.9rem;
  object-fit: cover;
  display: block;
}

/* Thumbs por baixo da capa */
.anuncio-galeria-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.anuncio-galeria-thumbs img {
  width: 80px;
  height: 80px;
  border-radius: 0.45rem;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  background: #000;
}

.anuncio-galeria-thumbs img:hover {
  opacity: 0.9;
}

.anuncio-galeria-thumbs img.is-active {
  border-color: var(--gold);
}

/* Info do anúncio (coluna da direita) */
.anuncio-dados {
  font-size: 0.9rem;
}

.anuncio-detalhe-preco {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.3rem;
}

/* Responsivo: em ecrãs pequenos fica tudo em coluna */
@media (max-width: 800px) {
  .anuncio-detalhe-grid {
    grid-template-columns: 1fr;
  }
}
/* ===========================================
   OVERRIDE FINAL — Detalhe do anúncio
   Garante foto grande e thumbs certinhas
   =========================================== */

.anuncio-detalhe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
  gap: 1.5rem;
  align-items: flex-start;
}

/* Foto principal bem grande */
.anuncio-galeria-main img {
  width: 100% !important;
  height: 320px !important;   /* podes aumentar para 360px se quiseres */
  object-fit: cover !important;
  border-radius: 0.9rem;
  display: block;
}

/* Thumbs em baixo, todas iguais */
.anuncio-galeria-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.anuncio-galeria-thumbs img {
  width: 90px !important;
  height: 70px !important;
  object-fit: cover !important;
  border-radius: 0.45rem;
  border: 2px solid transparent;
  background: #000;
  cursor: pointer;
}

.anuncio-galeria-thumbs img.is-active {
  border-color: var(--gold);
}

/* Responsivo */
@media (max-width: 800px) {
  .anuncio-detalhe-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== FORÇAR REMOÇÃO DO CÍRCULO PRETO NAS THUMBS ===== */
.anuncio-thumb::before,
.anuncio-thumb::after,
.anuncio-lista-thumb::before,
.anuncio-lista-thumb::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* ===== FORMULÁRIO DE FILTROS EM GRELHA (ANUNCIOS.HTML) ===== */

.filtros-anuncios {
  margin-bottom: 1.5rem;
}

.filtros-anuncios form {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)   /* pesquisar */
    minmax(0, 1.2fr) /* categoria */
    minmax(0, 1.2fr) /* provincia */
    minmax(0, 1fr)   /* preço */
    minmax(0, 1fr);  /* ordenação / botão limpar */
  gap: 0.75rem;
  align-items: flex-end;
}

/* Campo de pesquisa um pouco mais largo */
.filtros-anuncios input[type="text"],
.filtros-anuncios input[type="search"] {
  width: 100%;
}

/* Botão "Limpar filtros" */
.filtros-anuncios .btn-limpar {
  width: 100%;
}

/* Responsivo: em ecrãs pequenos empilha em 2 colunas */
@media (max-width: 800px) {
  .filtros-anuncios form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filtros-anuncios .btn-limpar {
    width: auto;
  }
}

@media (max-width: 520px) {
  .filtros-anuncios form {
    grid-template-columns: 1fr;
  }
}
/* ===== REMOVER QUALQUER OVERLAY / CÍRCULO NAS THUMBS ===== */
.anuncio-thumb::before,
.anuncio-thumb::after,
.anuncio-lista-thumb::before,
.anuncio-lista-thumb::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Esconde qualquer elemento extra dentro da thumb (ex.: "3 fotos") */
.anuncio-thumb :not(img),
.anuncio-lista-thumb :not(img) {
  display: none !important;
}
/* ============================================================
   FORMULÁRIO DE FILTROS — 2 COLUNAS (Desktop) / 1 coluna (Mobile)
   ============================================================ */

.filtros-wrap {
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: 0.9rem;
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}

/* Grid de 2 colunas */
.filtros-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.5rem;
}

/* Inputs */
.filtros-grid input,
.filtros-grid select {
  width: 100%;
  padding: 0.65rem 0.7rem;
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.filtros-grid input:focus,
.filtros-grid select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,180,0,0.25);
}

/* Linha inteira (para "Ordenar por" e "Limpar filtros") */
.filtros-full {
  grid-column: 1 / -1;
}

/* Botões */
.btn-filtros {
  background: #2a2a2a;
  border: 1px solid #444;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.btn-filtros:hover {
  filter: brightness(1.15);
}

/* Responsivo — passa para 1 coluna */
@media (max-width: 720px) {
  .filtros-grid {
    grid-template-columns: 1fr;
  }
}
/* =======================
   Filtros do painel admin
   ======================= */

.admin-filtros {
  margin-bottom: 1.5rem;
}

.admin-filtros-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.admin-filtro-estado {
  flex: 0 0 190px;      /* curto à esquerda */
}

.admin-filtro-pesquisa {
  flex: 1 1 260px;      /* ocupa o resto à direita */
}

/* Mobile: empilha */
@media (max-width: 720px) {
  .admin-filtros-linha {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-filtro-estado,
  .admin-filtro-pesquisa {
    flex: 1 1 100%;
  }
}
/* ===========================
   Card de anúncio no painel admin
   =========================== */

.admin-anuncio {
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: 0.9rem;
  padding: 1rem 1.2rem 0.9rem;
  margin-bottom: 1rem;
}

/* Parte de cima: imagem + info lado a lado */
.admin-anuncio-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.admin-anuncio-img {
  flex: 0 0 260px;
}

.admin-anuncio-img img {
  width: 100%;
  border-radius: 0.75rem;
  display: block;
  object-fit: cover;
}

/* Informação à direita */
.admin-anuncio-info {
  flex: 1 1 260px;
  font-size: 0.9rem;
}

.admin-anuncio-id {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.admin-anuncio-preco {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--gold);
}

.admin-anuncio-meta {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Botões coloridos em linha logo abaixo */
.admin-anuncio-acoes {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* =======================
   LAYOUT CARD ADMIN
   Foto à esquerda + info à direita
   ======================= */

.admin-anuncio-main {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

/* bloco da imagem */
.admin-thumb-wrap {
  flex: 0 0 260px;          /* largura da área da foto */
}

.admin-thumb-img {
  width: 100%;
  height: auto;
  border-radius: 0.7rem;
  border: 1px solid var(--stroke);
  object-fit: cover;
}

/* bloco das informações à direita */
.admin-anuncio-info {
  flex: 1;
}

/* certifica que os botões ficam logo abaixo do texto, em linha */
.admin-anuncio-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

/* mobile: empilha tudo */
@media (max-width: 720px) {
  .admin-anuncio-main {
    flex-direction: column;
  }

  .admin-thumb-wrap {
    flex: none;
    width: 100%;
  }
}

/* Já tens as cores destes .btn-* definidas antes,
   por isso aqui só garantimos o layout */

@media (max-width: 800px) {
  .admin-anuncio-top {
    flex-direction: column;
  }

  .admin-anuncio-img {
    flex-basis: 100%;
  }
}
/* ==========================
   Layout do card no admin
   ========================== */
.admin-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--stroke);
}

.admin-card-img {
  flex: 0 0 280px; /* largura da imagem */
}

.admin-card-img img {
  width: 100%;
  border-radius: 0.6rem;
  border: 1px solid var(--stroke);
  object-fit: cover;
}

.admin-card-info {
  flex: 1; /* ocupa o espaço da direita */
  padding-top: 0.5rem;
}

.admin-card-botoes {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* mobile */
@media (max-width: 720px) {
  .admin-card {
    flex-direction: column;
  }

  .admin-card-img {
    width: 100%;
    flex: none;
  }
}
/* ===== Filtros genéricos (admin, etc.) ===== */
.filtros-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

.filtros-grid .form-label {
  margin-bottom: 0.35rem;
}

@media (max-width: 720px) {
  .filtros-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Layout dos cards no Painel Admin ===== */

.admin-anuncio-card {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem 1.1rem;
  border-radius: 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--stroke);
}

.admin-anuncio-main {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 1rem;
  align-items: flex-start;
}

/* thumb do admin */
.admin-thumb-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 0.8rem;
  overflow: hidden;
  background: #000;
}

.admin-thumb-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* badge "3 fotos" */
.admin-thumb-wrap .badge-fotos {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.75rem;
}

/* info à direita */
.admin-anuncio-info {
  font-size: 0.85rem;
}

.admin-anuncio-titulo {
  margin: 0 0 0.1rem;
  font-size: 1rem;
  font-weight: 600;
}

.admin-anuncio-preco {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--gold);
}

.admin-anuncio-meta {
  margin: 0 0 0.2rem;
  color: var(--text-dim);
}

.admin-anuncio-status {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}

/* linha de botões por baixo */
.admin-anuncio-acoes {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* responsivo: em ecrãs pequenos, empilha tudo */
@media (max-width: 800px) {
  .admin-anuncio-main {
    grid-template-columns: 1fr;
  }

  .admin-thumb-wrap {
    max-width: 100%;
  }
}
/* ===== Ajuste final admin layout ===== */

/* força as duas colunas a alinhar perfeitamente */
.admin-anuncio-main {
  display: grid;
  grid-template-columns: 260px 1fr !important;
  gap: 1.5rem;
  align-items: flex-start;
}

/* garante que o bloco de info nunca encolhe */
.admin-anuncio-info {
  width: 100%;
  max-width: 100%;
}

/* thumb grande mas fixa */
.admin-thumb-wrap {
  width: 100%;
  max-width: 100%;
}

/* botões organizados */
.admin-anuncio-acoes {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Em telemóvel, empilha */
@media (max-width: 768px) {
  .admin-anuncio-main {
    grid-template-columns: 1fr !important;
  }
}
/* ===== PLANOS & VANTAGENS ===== */
.planos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.plano-card {
  position: relative;
  padding-top: 1.25rem;
}

.plano-card.plano-destaque {
  border: 1px solid rgba(255, 180, 0, 0.6);
  box-shadow: 0 0 18px rgba(255, 180, 0, 0.15);
}

.plano-nome {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.plano-preco {
  margin: 0 0 0.45rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
}

.plano-limites {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}
.plano-escolha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.plano-radio {
  display: block;
  cursor: pointer;
}

.plano-radio input[type="radio"] {
  display: none;
}

.plano-radio-box {
  display: block;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  border: 1px solid #333;
  background: #151515;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
}

.plano-radio input[type="radio"]:checked + .plano-radio-box {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 180, 0, 0.4);
  transform: translateY(-1px);
}

/* ===== PAGAMENTO / CHECKOUT ===== */
.pagamento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.pagamento-resumo,
.pagamento-form {
  align-self: flex-start;
}

.pg-plano-nome {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.pg-plano-preco {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.pg-plano-det {
  font-size: 0.85rem;
}

@media (max-width: 800px) {
  .pagamento-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== PÁGINA DE PAGAMENTO ===== */
.pagamento-card {
  margin-top: 0.75rem;
}

.pagamento-resumo-plano {
  margin-bottom: 1rem;
}

.pagamento-preco {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
}

.pagamento-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}

.pagamento-opcao {
  font-size: 0.9rem;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}

.pagamento-opcao input {
  margin-top: 0.15rem;
}

.pagamento-divisor {
  margin: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--stroke);
}

.pagamento-msg {
  margin-top: 0.6rem;
  font-size: 0.8rem;
}
/* Página de detalhe do anúncio */
.anuncio-det-principal {
  margin-bottom: 1.5rem;
}

.det-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.det-plano-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #333;
  color: #fff;
  border: 1px solid #555;
}

.det-plano-badge.badge-destaque {
  background: #ffb400;
  color: #000;
}

.det-plano-badge.badge-pro {
  background: #ff6b00;
  color: #000;
}

.det-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 1.5rem;
}

.det-galeria {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.det-foto-principal {
  background: #111;
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.det-foto-principal img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.det-thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.det-thumb {
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

.det-thumb img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  display: block;
}

.det-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.det-preco {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffb400;
}

.det-meta {
  font-size: 0.9rem;
}

.det-descricao {
  margin-top: 0.5rem;
  line-height: 1.5;
}

.det-contacto {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-whats {
  background: #25d366;
  color: #000;
}

.det-acoes-dono {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Relacionados */
.anuncio-det-relacionados {
  margin-top: 1rem;
}

.anuncios-grid-rel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.anuncio-rel {
  background: #111;
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.anuncio-rel-foto img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.anuncio-rel-body {
  padding: 0.75rem 0.9rem 0.9rem;
}

.anuncio-rel-body h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.anuncio-rel-preco {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Responsivo */
@media (max-width: 768px) {
  .det-layout {
    grid-template-columns: 1fr;
  }

  .det-head {
    flex-direction: column;
    align-items: flex-start;
  }
/* Galeria de thumbnails no detalhe do anúncio */
.det-thumbs {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.det-thumb-img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #333;
  cursor: pointer;
  opacity: 0.8;
  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.det-thumb-img:hover {
  opacity: 1;
  transform: scale(1.03);
}

.det-thumb-img.ativo {
  border-color: #ffb400; /* dourado Topíssima */
  opacity: 1;
}
}
/* ===========================================
   Área do Utilizador — minha-conta.html
   =========================================== */

.conta-accoes {
  margin-top: 1.5rem;
}

.conta-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.conta-footer-acoes {
  margin-top: 1rem;
}

/* Botão principal (publicar anúncio) */
.conta-botoes .btn-primary {
  min-width: 210px;
  padding-inline: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb400, #ff8a00);
  color: #000;
  border: none;
  box-shadow: 0 0 18px rgba(255, 180, 0, 0.3);
}

/* Secundários — estilo “outline Topíssima” */
.conta-botoes .btn-outline {
  border-radius: 999px;
  border: 1px solid #ffb400;
  background: transparent;
  color: #ffb400;
  padding-inline: 1.2rem;
  font-weight: 500;
}

.conta-botoes .btn-outline:hover {
  background: rgba(255, 180, 0, 0.08);
}

/* Terminar sessão — discreto mas elegante */
.conta-footer-acoes .btn-ghost {
  border-radius: 999px;
  border: 1px dashed #666;
  background: transparent;
  color: #bbb;
  font-size: 0.85rem;
  padding-inline: 1.2rem;
}

/* ===========================================
   Meus anúncios — deixar os botões TOP
   =========================================== */

.anuncio-card-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* “Ver anúncio” em destaque */
.anuncio-card-acoes .btn:first-child {
  background: linear-gradient(90deg, #ffb400, #ff8a00);
  color: #000;
  border: none;
  font-weight: 600;
}

/* “Editar” como secundário elegante */
.anuncio-card-acoes .btn.btn-secondary {
  border-radius: 999px;
  border: 1px solid #555;
  background: #222;
  color: #eee;
  padding-inline: 1rem;
}

/* “Apagar” mais compacto e com cor de alerta */
.anuncio-card-acoes .btn.btn-danger {
  border-radius: 999px;
  background: #b00020;
  border: none;
  padding-inline: 0.9rem;
  font-size: 0.85rem;
}

/* Responsivo */
@media (max-width: 768px) {
  .conta-botoes {
    flex-direction: column;
    align-items: stretch;
  }

  .conta-botoes .btn,
  .conta-footer-acoes .btn {
    width: 100%;
    justify-content: center;
  }
}
/* Grelha 2 colunas para formulários (editar anúncio, etc.) */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.form-grid-2 .form-group {
  margin-bottom: 0; /* já temos o gap da grelha */
}

/* Em ecrãs muito pequenos continua tudo em 1 coluna */
@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}
/* ==========================
   ÁREA DO UTILIZADOR
   ========================== */
.conta-plano,
.conta-accoes {
  margin-top: 1.25rem;
}

.conta-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.conta-botoes .btn {
  min-width: 190px;
  justify-content: center;
}
/* ==========================
   MEUS ANÚNCIOS (ÁREA DO UTILIZADOR)
   ========================== */

.meus-anuncios-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.anuncio-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.anuncio-card-media {
  flex: 0 0 120px;
}

.anuncio-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

.anuncio-thumb-placeholder {
  background: #242424;
  color: #aaa;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anuncio-card-body {
  flex: 1;
}

.anuncio-titulo {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.anuncio-preco {
  color: var(--gold, #ffb400);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.anuncio-card-acoes {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Em ecrãs pequenos, o card torna-se vertical */
@media (max-width: 768px) {
  .anuncio-card {
    flex-direction: column;
  }

  .anuncio-card-media {
    flex: 0 0 auto;
  }

  .anuncio-thumb {
    width: 100%;
    height: auto;
  }
}
/* Mini-fotos na página Editar anúncio */
.edit-fotos-atuais {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.edit-foto-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.edit-thumb-img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #333;
}

.edit-foto-label {
  font-size: 0.85rem;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.edit-foto-label input[type="checkbox"] {
  accent-color: #ffb400;
}
.foto-actual-box {
  display: inline-block;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

.foto-actual-img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 0.25rem;
}

.foto-actual-controles {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.det-thumb-img.is-capa {
  outline: 2px solid #ffb400;
}
/* Grade de fotos na edição do anúncio */
#editFotosAtuais {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.edit-foto-item {
  width: 110px;
  background: #151515;
  border-radius: 12px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 0 1px #262626;
}

.edit-thumb-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.35rem;
}

.edit-foto-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.edit-foto-label input[type="checkbox"] {
  accent-color: #ffb400; /* dourado Topíssima */
}
/* =====================================================
   HOME — BLOCO "ÚLTIMOS ANÚNCIOS" (index.html)
   ===================================================== */

#ultimos-anuncios {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Card pequeno da home */
#ultimos-anuncios .anuncio-card.pequeno {
  width: 100%;
  margin: 0;
  padding: 0.9rem;
  border-radius: 18px;
  background: #1c1c1f;
  border: 1px solid rgba(255, 180, 0, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);

  display: flex;
  gap: 0.8rem;
  align-items: center;
}

/* Thumb dentro do card */
#ultimos-anuncios .anuncio-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #000;
}

#ultimos-anuncios .anuncio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Conteúdo do card (titulo, preço, whats, botão) */
#ultimos-anuncios .anuncio-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#ultimos-anuncios .anuncio-titulo {
  font-size: 0.95rem;
  margin: 0;
}

#ultimos-anuncios .anuncio-preco {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
}

#ultimos-anuncios .anuncio-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* botão "Ver anúncio" alinhado em baixo */
#ultimos-anuncios .btn {
  margin-top: 0.3rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
}

/* Mobile: 1 por linha e thumb maior */
@media (max-width: 600px) {
  #ultimos-anuncios {
    grid-template-columns: 1fr;
  }

  #ultimos-anuncios .anuncio-card.pequeno {
    flex-direction: column;
    align-items: flex-start;
  }

  #ultimos-anuncios .anuncio-thumb {
    width: 100%;
    height: 180px;
  }
}
/* =============================
   Grelha da página ANÚNCIOS
   (lista completa)
   ============================= */
#lista-anuncios {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Cada card ocupa 1 coluna da grelha */
#lista-anuncios .anuncio-card {
  width: 100%;
  margin: 0;
}

/* Miniatura dentro dos cards da lista */
#lista-anuncios .anuncio-card-media img,
#lista-anuncios .anuncio-card-media .anuncio-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

/* ============================
   PLANOS & VANTAGENS (planos.html)
   ============================ */

.planos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.plano-card {
  background: #1c1c1c;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 180, 0, 0.2);
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plano-header {
  margin-bottom: 0.6rem;
}

.plano-nome {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.plano-preco {
  margin: 0;
  font-weight: 700;
  color: var(--gold);
}

.plano-info {
  margin: 0.6rem 0 0.9rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.plano-info li + li {
  margin-top: 0.25rem;
}

.plano-cta {
  margin-top: auto;
}

.plano-cta .btn {
  width: 100%;
}

.plano-nota {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}
/* ===========================
   PÁGINA: PLANOS & VANTAGENS
   =========================== */

.page-planos {
  background: #050505;
  color: #f5f5f5;
  padding: 3rem 0 4rem;
}

.page-planos .page-width {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-planos .link-voltar {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #ff9f1c;
  text-decoration: none;
}

.page-planos .link-voltar:hover {
  text-decoration: underline;
}

.planos-intro h1 {
  font-size: 2.1rem;
  margin-bottom: 0.4rem;
}

.planos-intro p {
  font-size: 0.98rem;
  color: #bbbbbb;
}


/* GRID RESPONSIVA DOS PLANOS */
.planos-grid {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: 1 por linha */
  gap: 1.5rem;
  margin-top: 2rem;
}

/* >= 768px → 2 x 2 */
@media (min-width: 768px) {
  .planos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* >= 1200px → 4 na mesma linha */
@media (min-width: 1200px) {
  .planos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.plano-card {
  display: flex;
  flex-direction: column;
}

.plano-lista {
  flex: 1;              /* empurra o botão para baixo */
}

.btn-plano {
  margin-top: 1.25rem;
}

.plano-card {
  position: relative;
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem;
  background: radial-gradient(circle at top left, #222 0, #111 40%, #050505 100%);
  border: 1px solid #262626;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.plano-card h2 {
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}

.plano-preco {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffb347;
  margin-bottom: 0.8rem;
}

.plano-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  color: #dddddd;
}

.plano-lista li {
  margin-bottom: 0.35rem;
  position: relative;
  padding-left: 1rem;
}

.plano-lista li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff9f1c;
  position: absolute;
  left: 0;
  top: 0.55rem;
}

/* PLANO DESTAQUE (7 DIAS) */

.plano-destaque {
  border-color: #ff9f1c;
  box-shadow:
    0 0 0 1px rgba(255, 159, 28, 0.35),
    0 24px 48px rgba(0, 0, 0, 0.85);
  transform: translateY(-4px);
}

.plano-etiqueta {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0 0.9rem 0.9rem 0;
  background: linear-gradient(90deg, #ff9f1c, #ff4e00);
  color: #1a1a1a;
}

/* BOTÕES DOS PLANOS */

.btn-plano {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(90deg, #ff9f1c, #ff4e00);
  color: #1a1a1a;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn-plano:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.8);
  opacity: 0.95;
}

.btn-plano:active {
  transform: translateY(0);
  box-shadow: none;
}

/* COMO FUNCIONA */

.planos-como-funciona {
  margin-top: 3rem;
  padding: 1.5rem 1.5rem 1.3rem;
  border-radius: 18px;
  background: #101010;
  border-left: 3px solid #ff9f1c;
  border-top: 1px solid #222;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
}

.planos-como-funciona h2 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}

.planos-como-funciona ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: #d0d0d0;
}

/* FAQ – PERGUNTAS RÁPIDAS */

.planos-faq {
  margin-top: 2.5rem;
}

.planos-faq h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.planos-faq details {
  margin-bottom: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #101010;
  border: 1px solid #252525;
}

.planos-faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.planos-faq summary::-webkit-details-marker {
  display: none;
}

.planos-faq summary::after {
  content: "＋";
  float: right;
  font-size: 1rem;
  color: #ff9f1c;
}

.planos-faq details[open] summary::after {
  content: "－";
}

.planos-faq p {
  margin-top: 0.6rem;
  font-size: 0.93rem;
  color: #cccccc;
}

/* Links dentro do FAQ / texto */
.page-planos a {
  color: #ff9f1c;
}
.page-planos a:hover {
  text-decoration: underline;
}
.btn-plano {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  background: linear-gradient(90deg, #ff9f1c, #ff4e00);
  color: #ffffff !important; /* branco total */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* agora o texto "salta" */
  letter-spacing: 0.3px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-plano:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 100, 0, 0.45);
  opacity: 0.98;
}
/* ===========================
   PARCERIAS
   =========================== */

.page-parcerias main {
  background: #050505;
  padding: 3rem 0 4rem;
  color: #f5f5f5;
}

.parcerias-wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.parcerias-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.parcerias-hero p {
  font-size: 0.97rem;
  color: #bbbbbb;
  max-width: 700px;
}

.parcerias-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

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

.parceria-card {
  background: #101010;
  border-radius: 18px;
  border: 1px solid #252525;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.parceria-card h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.parceria-card ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.93rem;
  color: #cccccc;
}

.parcerias-pacotes {
  margin-top: 2.5rem;
}

.parcerias-pacotes ul {
  margin: 0.8rem 0 1.3rem;
  padding-left: 1.1rem;
  font-size: 0.93rem;
  color: #d0d0d0;
}

.parcerias-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
/* ===========================
   CONTACTOS — NOVO LAYOUT
   =========================== */

.contactos-cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.8rem;
}

@media (min-width: 900px) {
  .contactos-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background: #101010;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
}

.contact-card h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.contact-card a {
  color: #ffb400;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

.btn-contato-whatsapp {
  display: inline-block;
  background: linear-gradient(90deg, #ff9900, #ffb400);
  padding: .7rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  margin-top: .8rem;
  color: #000;
  text-align: center;
}
.page-width {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.4rem;
}
/* ===========================
   DETALHE DO ANÚNCIO
   =========================== */

.page-anuncio main {
  background: #050505;
  padding: 2.8rem 0 4rem;
  color: #f5f5f5;
}

.anuncio-wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.4rem;
}

.anuncio-layout {
  display: grid;
  gap: 1.8rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .anuncio-layout {
    grid-template-columns: 1.2fr 1fr;
  }
}

.anuncio-galeria {
  background: #101010;
  border-radius: 18px;
  border: 1px solid #252525;
  padding: 1rem;
}

.anuncio-img-principal {
  border-radius: 14px;
  background: #050505;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.anuncio-img-principal img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.anuncio-img-principal.vazio {
  color: #777;
  font-size: 0.9rem;
}

.anuncio-thumbs {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
}

.thumb-btn {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}

.thumb-btn img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  display: block;
}

.anuncio-info {
  background: #101010;
  border-radius: 18px;
  border: 1px solid #252525;
  padding: 1.6rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
}

.anuncio-info h1 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.5rem;
}

.anuncio-preco {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffb347;
  margin-bottom: 0.9rem;
}

.anuncio-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #cccccc;
}

.anuncio-meta li {
  margin-bottom: 0.25rem;
}

.anuncio-descricao h2 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.anuncio-descricao p {
  font-size: 0.93rem;
  color: #dddddd;
}

.anuncio-btn-whatsapp {
  margin-top: 1.2rem;
  width: 100%;
  text-align: center;
}
.anuncio-info {
  background: #111;
  border: 1px solid #292929;
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: 0px 14px 36px rgba(0,0,0,0.55);
}

.anuncio-info h1,
.anuncio-info .anuncio-preco,
.anuncio-info p,
.anuncio-info li {
  color: #f1f1f1;
}

.anuncio-bloco {
  background: #181818;
  border: 1px solid #2d2d2d;
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.3rem;
}

.anuncio-bloco h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  color: #ffb347;
  font-size: 1rem;
}
/* ===========================
   DETALHE DO ANÚNCIO — BLOCOS
   =========================== */

/* layout geral: esquerda (foto) + direita (info) */
.anuncio-layout {
  display: grid;
  gap: 1.8rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .anuncio-layout {
    grid-template-columns: 1.25fr 1fr;
  }
}

/* coluna direita em blocos */
.anuncio-dir {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* cada bloco de informação */
.anuncio-bloco {
  background: #111;
  border: 1px solid #292929;
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

.anuncio-bloco h2 {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
  color: #ffb347;
}

.anuncio-bloco p {
  margin: 0.15rem 0;
  font-size: 0.93rem;
  color: #e3e3e3;
}

/* bloco específico do preço */
.anuncio-bloco-preco .anuncio-preco {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffb347;
}

/* botão WhatsApp em baixo, a largura total */
.anuncio-btn-whatsapp {
  margin-top: 0.3rem;
  width: 100%;
  text-align: center;
}
/* DETALHE DO ANÚNCIO – LAYOUT GERAL */
.det-layout {
  display: grid;
  gap: 1.8rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .det-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}
/* COLUNA DIREITA – INFO EM BLOCOS */

.det-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* BLOCO DO PREÇO */
.det-info .det-preco {
  background: #111111;
  border-radius: 14px;
  border: 1px solid #292929;
  padding: 1rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffb347;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
}

/* OUTROS CAMPOS (categoria, data, contacto, etc.) */
.det-info p:not(.det-preco) {
  background: #111111;
  border-radius: 14px;
  border: 1px solid #292929;
  padding: 0.7rem 1.1rem;
  font-size: 0.93rem;
  color: #e0e0e0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

/* LINK "Falar no WhatsApp" COMO BLOCO/BOTÃO */
.det-info a {
  margin-top: 0.4rem;
  display: inline-block;
  text-align: center;
  background: linear-gradient(90deg, #ff9f1c, #ff4e00);
  color: #ffffff;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

.det-info a:hover {
  opacity: 0.96;
  transform: translateY(-1px);
}
/* ===========================
   BANNER VERSÃO PILOTO
   =========================== */

.pilot-banner {
  background: radial-gradient(circle at top left, #ffb34722, #000000);
  border-bottom: 1px solid #ffb34733;
}

.pilot-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: #f5f5f5;
}

.pilot-text strong {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #ffb347;
  color: #000;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pilot-text span {
  color: #e0e0e0;
}

.pilot-extra {
  font-size: 0.82rem;
  color: #c0c0c0;
}

@media (min-width: 800px) {
  .pilot-banner-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.page-sobre main {
  background: #050505;
  padding: 3rem 0 4rem;
  color: #f5f5f5;
}

.sobre-wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.4rem;
}

.sobre-card h1 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.sobre-card h2 {
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.sobre-card p,
.sobre-card li {
  font-size: 0.95rem;
  color: #e0e0e0;
}
/* ===========================
   FOOTER UNIFORMIZADO
   =========================== */

.site-footer {
  background: #050505;
  border-top: 1px solid #1a1a1a;
  padding: 2rem 0 2.5rem;
  color: #d0d0d0;
  font-size: 0.92rem;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-links,
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.site-footer a {
  text-decoration: none;
  color: #bbbbbb;
  opacity: 0.9;
  font-weight: 500;
}

.site-footer a:hover {
  opacity: 1;
  color: #ffb347;
}

/* BOTÕES LEGAIS IGUAL AOS OUTROS */
.footer-btn {
  background: #111;
  border: 1px solid #292929;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  color: #bbbbbb !important;
  transition: 0.2s ease;
}

.footer-btn:hover {
  background: #ffb347;
  color: #000 !important;
  border-color: #ffb347;
  opacity: 1;
}

/* COPYRIGHT */
.footer-copy {
  font-size: 0.8rem;
  color: #777;
  margin-top: 0.5rem;
  text-align: center;
}
/* BOTÕES LEGAIS NO FOOTER */

.footer-legal-links a {
  display: inline-block;
  margin-right: 0.4rem;
  margin-top: 0.3rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #ffb347;
  font-size: 0.8rem;
  color: #ffb347;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-legal-links a:last-child {
  margin-right: 0;
}

.footer-legal-links a:hover {
  background: #ffb347;
  color: #000;
}
/* ===========================
   EDITAR ANÚNCIO – CARD
   =========================== */

.editar-card {
  margin-top: 1.5rem;
  padding: 1.6rem 1.8rem;
}

.editar-head h1 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}

.editar-sub {
  margin: 0 0 1.2rem;
  font-size: 0.9rem;
  color: #cfcfcf;
}
.editar-card {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.6rem 1.8rem;
}

.editar-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.editar-head-main h1 {
  margin: 0 0 0.3rem;
  font-size: 1.25rem;
}

.editar-sub {
  margin: 0;
  font-size: 0.9rem;
  color: #cfcfcf;
}
/* Botão WhatsApp — Contactos */
.btn-contato-whatsapp {
  display: inline-block;
  background: linear-gradient(90deg, #f7b500, #ffcc33);
  color: #000; /* TEXTO PRETO para contraste máximo */
  font-weight: 600;
  padding: 0.75rem 1.2rem;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(255, 204, 51, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* Hover */
.btn-contato-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 204, 51, 0.55);
  color: #000; /* mantém o contraste */
}
/* =========================================================
   BOTÃO WHATSAPP — PÁGINA CONTACTOS
   ========================================================= */
.btn-contato-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  background: linear-gradient(90deg, #f7b500, #ffcc33);
  color: #000; /* texto preto para máximo contraste */
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;           /* estilo PILL / redondo */
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(255, 204, 51, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.15);

  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

/* bolinha/ícone à esquerda */
.btn-contato-whatsapp .wa-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #25d366;              /* verde WhatsApp */
  color: #fff;
  font-size: 1rem;
}

/* texto dentro do botão */
.btn-contato-whatsapp .wa-pill-text {
  white-space: nowrap;
}

/* Hover / foco */
.btn-contato-whatsapp:hover,
.btn-contato-whatsapp:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(255, 204, 51, 0.6);
  filter: brightness(1.02);
  outline: none;
}

/* Em ecrãs pequenos, deixa o texto quebrar se for preciso */
@media (max-width: 480px) {
  .btn-contato-whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  .btn-contato-whatsapp .wa-pill-text {
    white-space: normal;
  }
}
/* Botões — Meus Anúncios */
.btn-ver {
  background: linear-gradient(90deg, #ffb100, #ff7b00);
  color: #000;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.25s;
}

.btn-ver:hover {
  box-shadow: 0 0 10px #ff9900;
  transform: scale(1.03);
}

/* Editar */
.btn-editar {
  background: linear-gradient(90deg, #009dff, #006bff);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.25s;
}

.btn-editar:hover {
  box-shadow: 0 0 10px #008cff;
  transform: scale(1.03);
}

/* Apagar */
.btn-apagar {
  background: linear-gradient(90deg, #ff3b3b, #c80000);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.25s;
}

.btn-apagar:hover {
  box-shadow: 0 0 10px #ff0000;
  transform: scale(1.03);
}
/* ============================= */
/* BOTÕES ADMIN — TOPÍSSIMA      */
/* ============================= */

.btn-admin-pub {
  background: linear-gradient(90deg, #22c55e, #15803d);
  color: white;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
}
.btn-admin-pub:hover { opacity: .85; }

.btn-admin-ana {
  background: linear-gradient(90deg, #eab308, #facc15);
  color: #000;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
}
.btn-admin-ana:hover { opacity: .85; }

.btn-admin-ocu {
  background: linear-gradient(90deg, #6b7280, #374151);
  color: #fff;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
}
.btn-admin-ocu:hover { opacity: .85; }

.btn-admin-del {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
  color: #fff;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
}
.btn-admin-del:hover { opacity: .85; }
/* ============================
   ADMIN
   ============================ */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.admin-stat-card {
  background: #181818;
  border-radius: 0.8rem;
  padding: 0.6rem 0.8rem;
}

.admin-stat-card .label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.admin-stat-card .value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0.15rem;
}

.admin-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.admin-filtros label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.admin-filtros select,
.admin-filtros input {
  background: #181818;
  border: 1px solid #333;
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  color: #fff;
  min-width: 180px;
}

.admin-filtros-actions .btn {
  background: var(--tc-gold, #f7a623);
  color: #000;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-table-wrapper {
  overflow-x: auto;
}

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

.admin-table th,
.admin-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #333;
}

.admin-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
}

.admin-acoes .btn-admin {
  border: none;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  margin-right: 0.2rem;
  cursor: pointer;
}

.btn-admin-pub {
  background: #1e8e3e;
  color: #fff;
}

.btn-admin-ana {
  background: #fbbc04;
  color: #000;
}

.btn-admin-ocu {
  background: #5f6368;
  color: #fff;
}

.btn-admin-del {
  background: #d93025;
  color: #fff;
}

.btn-admin:hover {
  filter: brightness(1.05);
}
.mini-foto {
  width: 55px;
  height: 45px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #333;
}

.sem-foto {
  width: 55px;
  height: 45px;
  background: #222;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #777;
  font-size: 12px;
}
/* ===========================
   ADMIN – miniatura & badges
   =========================== */

.admin-thumb {
  width: 56px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  background: #111827;
}

.admin-thumb.sem-foto {
  border: 1px solid #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Selo de estado (badge) */
.badge-estado {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.badge-estado-pub {
  background: #166534;
  color: #bbf7d0;
}

.badge-estado-ana {
  background: #854d0e;
  color: #fef9c3;
}

.badge-estado-ocu {
  background: #374151;
  color: #e5e7eb;
}

.badge-estado-apg {
  background: #7f1d1d;
  color: #fecaca;
}

/* Botões de estado com destaque activo */
.tc-btn-status {
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
  margin-right: 0.25rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  opacity: 0.95;
  transition: all 0.12s ease-out;
}

.tc-btn-status:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Estado activo */
.tc-btn-status.is-active {
  box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.7);
  transform: translateY(-1px);
}

/* Cores específicas por acção */
.btn-admin-pub {
  background: #22c55e;
  color: #022c22;
}

.btn-admin-ana {
  background: #eab308;
  color: #111827;
}

.btn-admin-ocu {
  background: #6b7280;
  color: #f9fafb;
}

.btn-admin-del {
  background: #ef4444;
  color: #f9fafb;
}
/* Placeholder quando o anúncio não tem fotos */
.anuncio-sem-foto {
  width: 100%;
  min-height: 220px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #2b2b2f, #1d1d21);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Botão desactivado (sem WhatsApp) */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Grid para "Mais anúncios desta categoria" */
.anuncios-lista.pequenos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

/* card mais compacto */
.anuncio-card-pequeno {
  padding: 0.8rem;
}

/* thumbnail menor */
.anuncio-thumb.pequeno {
  width: 110px;
  height: 80px;
  border-radius: 0.7rem;
  object-fit: cover;
  margin-right: 0.75rem;
}
/* Lista de anúncios relacionados (no detalhe) */
.relacionados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.relacionado-card {
  background: linear-gradient(135deg, #18181c, #111114);
  border-radius: 1rem;
  padding: 0.7rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.relacionado-thumb {
  width: 96px;
  height: 72px;
  border-radius: 0.6rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #222;
}

.relacionado-info h3 {
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.relacionado-info p {
  font-size: 0.8rem;
  margin: 0;
}

.relacionado-preco {
  font-weight: 600;
  font-size: 0.85rem;
}

.relacionado-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #ffb347;
}
/* ==========================================================
   PARTILHA DO ANÚNCIO — BOTÕES ESTILIZADOS
========================================================== */

.det-share-box {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.det-share-label {
  font-size: 0.95rem;
  color: #ffb34d; /* dourado topíssimo */
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.det-share-box button {
  display: block;
  width: 100%;
  border: 0;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 12px; /* 🔥 arredondado */
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.25s ease-in-out;
  letter-spacing: 0.3px;
}

/* Botão copiar link */
#btnShareCopy {
  background: #2b2b2b;
  color: #ffffff;
  border: 1px solid #444;
}
#btnShareCopy:hover {
  background: #444;
}

/* Botão WhatsApp */
#btnShareWhats {
  background: #25D366; /* verde WhatsApp */
  color: #fff;
}
#btnShareWhats:hover {
  background: #1da851;
}

/* Botão Facebook */
#btnShareFacebook {
  background: #1877f2;
  color: #fff;
}
#btnShareFacebook:hover {
  background: #0f5aca;
}
/* ==========================================================
   PARTILHA DO ANÚNCIO — BOTÕES ESTILIZADOS
========================================================== */

.det-share-box {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.det-share-label {
  font-size: 0.95rem;
  color: #ffb34d;
  margin-bottom: 0.7rem;
  font-weight: 600;
}

.det-share-box button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  border: 0;
  padding: 0.75rem 1rem;
  margin-bottom: 0.45rem;
  border-radius: 999px;        /* bem arredondado */
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.2s ease, opacity 0.2s ease;
  letter-spacing: 0.2px;
}

.det-share-box button .share-icon {
  font-size: 1.1rem;
}

/* animação leve no hover */
.det-share-box button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  opacity: 0.97;
}

/* botão: copiar link */
#btnShareCopy {
  background: #2b2b2b;
  color: #ffffff;
  border: 1px solid #444;
}
#btnShareCopy:hover {
  background: #3b3b3b;
}

/* botão: WhatsApp */
#btnShareWhats {
  background: #25d366;
  color: #ffffff;
}
#btnShareWhats:hover {
  background: #1da851;
}

/* botão: Facebook */
#btnShareFacebook {
  background: #1877f2;
  color: #ffffff;
}
#btnShareFacebook:hover {
  background: #0f5aca;
}

/* botão: Instagram Stories */
#btnShareInsta {
  background: radial-gradient(circle at 30% 30%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: #ffffff;
}
#btnShareInsta:hover {
  filter: brightness(1.08);
}

/* mensagem de feedback (copiado, etc.) */
.det-share-feedback {
  font-size: 0.85rem;
  color: #b5ffbd;
  margin-top: 0.3rem;
}
.sobre-page {
  color: #fff;
  padding: 40px 0;
}

.sobre-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: #1b1b1b;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.1);
}

.sobre-titulo {
  color: #ffb300;
  font-size: 2rem;
  margin-bottom: 20px;
}

.sobre-subtitulo {
  color: #ffb300;
  margin-top: 30px;
  margin-bottom: 10px;
}

.sobre-container p,
.sobre-container ul,
.sobre-container ol {
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 1.05rem;
}

.sobre-container ul li,
.sobre-container ol li {
  margin-bottom: 8px;
}

.sobre-final {
  margin-top: 30px;
  font-weight: bold;
  color: #ffb300;
}
.sobre-card {
  margin-top: 2rem;
}

.sobre-subtitulo {
  color: #ffb300;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
}

.sobre-final {
  margin-top: 2rem;
  font-weight: 600;
  color: #ffb300;
}
.termos-card {
  margin-top: 2rem;
  line-height: 1.6;
}

.termos-subtitulo {
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  color: #ffb300;
}

.termos-final {
  margin-top: 2rem;
  font-weight: 600;
  color: #ffb300;
}
* {
  box-sizing: border-box;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}
@media (max-width: 768px) {

  body {
    padding: 0;
    margin: 0;
  }

  .container {
    padding: 14px;
  }

  .cards,
  .anuncios-lista,
  .ultimos-anuncios {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .card,
  .anuncio-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

}
@media (max-width: 768px) {
  .ultimos-anuncios {
    justify-content: center;
  }
}
/* ================================
   Botão "Ver anúncio" – destaque
   ================================ */

.btn-ver-anuncio {
  background: linear-gradient(135deg, #f5b301, #ffcc33);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-ver-anuncio:hover {
  background: linear-gradient(135deg, #ffcc33, #f5b301);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(245, 179, 1, 0.35);
}

.btn-ver-anuncio:active {
  transform: scale(0.97);
}
/* ADMIN — Botão VER ANÚNCIO (classe exclusiva, sem conflitos) */
.btn-ver-anuncio{
  background: linear-gradient(135deg, #ffb703, #ffd166) !important;
  color: #111 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s ease;
}

.btn-ver-anuncio:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}