/* =========================================================
   TIMOB Site Template 03 - Dark Moderno
   Herda a estrutura do Template 01 e inverte a paleta.

   ATENÇÃO: O PHP injeta --surface-soft, --surface-strong,
   --dark e --line via <style> inline com cores claras.
   Por isso, todos os backgrounds escuros usam valores hex
   fixos (não var()) para garantir a aparência dark.
   ========================================================= */

@import url("../../../template-001/assets/css/style.css");

/* ── Valores dark fixos (não ficam em variáveis para evitar
   que o inline style do PHP os sobrescreva)               ─ */
:root {
  --ink:    #E6EDF3;
  --muted:  #8B949E;
  --shadow-sm: 0  4px 16px rgba(0,0,0,.40);
  --shadow-md: 0 12px 40px rgba(0,0,0,.50);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.60);
}

/* Cores de superfície usadas abaixo como literais:
   Superfície base    : #0D1117
   Painel / card      : #161B22
   Fundo forte / hover: #21262D
   Borda              : rgba(177,186,196,.10)             */

/* ── Base ────────────────────────────────────────────────── */
body {
  background: #0D1117;
  color: var(--ink);
}
.title-xl, .title-lg, .title-md { color: var(--ink); }
.lead { color: var(--muted); }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar { background: #010409; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  background: rgba(13,17,23,.96) !important;
  border-bottom: 1px solid rgba(177,186,196,.10) !important;
}
.nav a { color: var(--ink); }
.nav a:hover, .nav a.active {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.btn-outline {
  background: transparent;
  border-color: rgba(177,186,196,.20);
  color: var(--ink);
}
.btn-outline:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}
.btn-icon {
  background: #161B22;
  border-color: rgba(177,186,196,.15);
  color: var(--ink);
}
.mobile-menu {
  background: #161B22;
  border-top-color: rgba(177,186,196,.10);
}
.mobile-menu a {
  color: var(--ink);
  border-bottom-color: rgba(177,186,196,.10);
}
.mobile-menu a.active {
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* ── Hero ────────────────────────────────────────────────── */
/* hero::before é controlado pelo !important do inline PHP — ok, usa support color (#111827) */
.hero::after {
  background: linear-gradient(0deg, #0D1117 0%, rgba(13,17,23,0) 100%) !important;
}

/* ── Seções ──────────────────────────────────────────────── */
.section-soft { background: #161B22 !important; }

/* ── Search card ─────────────────────────────────────────── */
.search-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.search-tab {
  background: #21262D;
  border-color: rgba(177,186,196,.15);
  color: var(--ink);
}
.search-tab.active { border-color: transparent; }
.field label { color: var(--muted); }
.field input,
.field select,
.field textarea {
  background: #21262D;
  border-color: rgba(177,186,196,.15);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0,0,0,.30);
}
.search-footer { color: var(--muted); }
.advanced-search { border-top-color: rgba(177,186,196,.10); }

/* ── Stats ───────────────────────────────────────────────── */
.stat-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.stat-label { color: var(--muted); }
.stat-icon { background: rgba(255,255,255,.06); }

/* ── Property cards ──────────────────────────────────────── */
.property-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.property-media { background: #21262D; }
.property-title { color: var(--ink) !important; }
.property-location { color: var(--muted); }
.property-features {
  border-top-color: rgba(177,186,196,.10) !important;
  border-bottom-color: rgba(177,186,196,.10) !important;
}
.feature { color: var(--muted); }
.feature strong { color: var(--ink); }
.price small { color: var(--muted); }
.property-body { background: #161B22; }

/* ── About ───────────────────────────────────────────────── */
.check-list li { color: var(--ink); }
.check-list li::before { background: rgba(255,255,255,.06); }

/* ── Listing page ────────────────────────────────────────── */
.filter-panel {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.listing-toolbar {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.view-toggle {
  background: #21262D;
  border-color: rgba(177,186,196,.15);
}
.view-toggle button { color: var(--muted); }
.result-count { color: var(--muted); }
.pagination a {
  background: #161B22;
  border-color: rgba(177,186,196,.15);
  color: var(--ink);
}

/* ── Detail page ─────────────────────────────────────────── */
.detail-intro-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.detail-meta-row span {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink);
}
.detail-title { color: var(--ink) !important; }
.detail-intro-content p { color: var(--muted); }
.gallery {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.gallery-main { background: #21262D; }
.gallery-thumb { background: #21262D; }
.gallery-nav {
  background: rgba(13,17,23,.85) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--ink) !important;
}
.gallery-nav:hover {
  background: rgba(13,17,23,1) !important;
  color: #fff !important;
}
.content-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.content-card h2,
.content-card h3 { color: var(--ink); }
.info-box { background: #21262D !important; }
.info-box strong { color: var(--ink); }
.feature-list li {
  background: #21262D !important;
  color: var(--ink);
}
.feature-list li::before { background: rgba(255,255,255,.06); }
.sidebar-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.agent span { color: var(--muted); }
.agent-icon { background: #21262D; }
.property-description { color: var(--ink); }
.property-description h2,
.property-description h3,
.property-description h4 { color: var(--ink); }

/* ── Contact page ────────────────────────────────────────── */
.contact-form-card {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
}
.map-placeholder {
  background: #21262D !important;
  border-color: rgba(177,186,196,.10) !important;
  color: var(--muted);
}
.approx-map-card {
  background: linear-gradient(135deg, #161B22, #21262D) !important;
  border-color: rgba(177,186,196,.10) !important;
}
.approx-map-info h3 { color: var(--ink); }
.approx-map-info p { color: var(--muted); }
.approx-map-info strong {
  background: #21262D !important;
  border-color: rgba(177,186,196,.10) !important;
  color: var(--ink);
}
.approx-map-frame {
  background: #21262D;
  border-color: rgba(177,186,196,.10);
}
.region-card .region-map-frame {
  background: #21262D;
  border-color: rgba(177,186,196,.10);
}

/* ── Empty properties ────────────────────────────────────── */
.empty-properties {
  background: #161B22 !important;
  border-color: rgba(177,186,196,.10) !important;
  color: var(--muted) !important;
}
.empty-properties strong { color: var(--ink) !important; }

/* ── Footer (inline style já usa --site-support = dark) ─── */

/* ── Cores de brand usadas como TEXT/ÍCONE ───────────────────
   --brand-primary é uma cor escura configurada pelo usuário.
   Em fundo dark ela fica invisível. Usamos --brand-primary-soft
   (gerado pelo sistema de paleta, ~90% mais claro) que é injetado
   pelo PHP inline e é sempre uma cor clara/legível.              */

/* Eyebrow: o inline PHP injeta .eyebrow { color: !important }
   com especificidade (0,1,0). Usamos body .eyebrow (0,1,1)
   para vencer na cascata mesmo com !important igual.          */
body .eyebrow {
  color: var(--brand-primary-soft) !important;
}

/* Textos que usam brand-primary como cor */
.property-code  { color: var(--brand-primary-soft) !important; }
.price          { color: var(--brand-primary-soft) !important; }
.stat-number    { color: var(--brand-primary-soft) !important; }
.kicker         { color: var(--brand-primary-soft) !important; }
.link-button    { color: var(--brand-primary-soft) !important; }
.nav a:hover,
.nav a.active   { color: var(--brand-primary-soft) !important; background: rgba(255,255,255,.06) !important; }

/* Ícones que usam brand-primary como cor */
.feature .site-icon,
.property-location .site-icon,
.info-box .site-icon,
.result-count .site-icon,
.icon-heading .site-icon,
.topbar-link .site-icon,
.footer-links a .site-icon,
.map-placeholder-icon { color: var(--brand-primary-soft) !important; }

/* Stat icon: fundo sutil + ícone claro */
.stat-icon {
  background: rgba(255,255,255,.06) !important;
  color: var(--brand-primary-soft) !important;
}

/* Detail meta tags (tipo/finalidade do imóvel) */
.detail-meta-row span {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
}

/* Aproveitamento de cor primária-soft em links e bordas ativas */
.pagination a.active,
.pagination a:hover {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.search-tab.active {
  background: var(--brand-primary) !important;
  color: #fff !important;
}
.view-toggle button.active {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

/* Approx map: link interno */
.approx-map-info a { color: var(--brand-primary-soft) !important; }