/* ---- VARIÁVEIS GLOBAIS E RESET ---- */
:root {
  --primary-color: #005D99; /* Azul escuro */
  --secondary-color: #00A3FF; /* Azul claro */
  --accent-color: #FFC107; /* Amarelo */
  --background-color: #F4F7F6;
  --text-color: #333;
  --card-bg: #FFFFFF;
  --border-color: #E0E0E0;
  --header-height: 60px;
  --nav-height: 65px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  overscroll-behavior-y: contain; /* Impede pull-to-refresh em Android Chrome */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---- LAYOUT PRINCIPAL (HEADER, MAIN, NAV) ---- */
header {
  background-color: var(--card-bg);
  height: var(--header-height);
  width: 100%;
  position: fixed; top: 0; left: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(0px, env(safe-area-inset-top)) 16px 0 16px;
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
}
header h1 { font-size: 20px; font-weight: 700; color: var(--primary-color); }
.header-logo { height: 40px; width: 40px; }
.header-action-btn {
  background: none; border: none; font-size: 24px; color: var(--primary-color); cursor: pointer;
}

main { padding-top: var(--header-height); padding-bottom: var(--nav-height); width: 100%; }

.bottom-nav {
  background-color: var(--card-bg);
  height: var(--nav-height);
  width: 100%;
  position: fixed; bottom: 0; left: 0;
  display: flex; justify-content: space-around;
  border-top: 1px solid var(--border-color);
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  z-index: 1000;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: none; flex-grow: 1;
  color: #888; text-decoration: none; font-size: 12px; gap: 4px; transition: color .2s ease;
  touch-action: manipulation;
}
.nav-btn i { font-size: 22px; }
.nav-btn.active, .nav-btn:hover { color: var(--primary-color); }
.nav-btn.active::after{
  content:""; width:32px; height:3px; border-radius:3px; background:var(--primary-color);
  display:block; margin-top:6px;
}

/* ---- VIEWS (LISTA E MAPA) ---- */
.view-hidden { display: none !important; }
#map-view, #map { height: calc(100vh - var(--header-height) - var(--nav-height)); width: 100%; }

/* ---- LISTA DE IMÓVEIS E BUSCA ---- */
.search-container {
  position: sticky; top: var(--header-height); z-index: 900;
  padding: 16px; background: var(--background-color);
}
#search-input {
  width: 100%; height: 50px; border-radius: 25px;
  border: 1px solid var(--border-color); padding: 0 20px 0 50px; font-size: 16px; font-family: inherit;
  outline: none;
}
.search-container i {
  position: absolute; left: 35px; top: calc(16px + 25px); transform: translateY(-50%); color: #aaa;
}
#property-list {
  display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 16px 16px;
}

.property-card {
  background-color: var(--card-bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex; flex-direction: column;
  content-visibility: auto; contain-intrinsic-size: 300px;
}
.property-card-image { width: 100%; height: 200px; object-fit: cover; background:#e9eef3; }
.property-card-content { padding: 16px; }
.property-card-content h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.property-card-content .location { font-size: 14px; color: #666; margin-bottom: 12px; }
.property-card-content .price { font-size: 20px; font-weight: 700; color: var(--primary-color); margin-bottom: 12px; }
.property-card-details {
  display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: #555;
  border-top: 1px solid var(--border-color); padding-top: 12px;
}
.property-card-details span { display: flex; align-items: center; gap: 6px; }

@media (min-width: 640px) { #property-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #property-list { grid-template-columns: repeat(3, 1fr); } }

/* ---- MODAL DE FILTROS ---- */
#filter-modal { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,.5);
  z-index: 2000; justify-content: center; align-items: center; opacity: 1; transition: opacity .3s ease; }
#filter-modal.modal-hidden { display: none; opacity: 0; pointer-events: none; }
#filter-modal:not(.modal-hidden) { display: flex; pointer-events: auto; }
.filter-modal-content {
  background-color: var(--card-bg); width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.filter-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; border-bottom: 1px solid var(--border-color);
}
#filter-modal-title { font-size: 20px; font-weight: 600; }
#filter-close-btn {
  background: none; border: none; font-size: 32px; font-weight: 300; cursor: pointer; touch-action: manipulation;
}
.filter-modal-body {
  flex-grow: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
}
.filter-modal-body label, .filter-modal-body legend { font-weight: 600; margin-bottom: 4px; }
.filter-modal-body input[type="number"], .filter-modal-body select {
  width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px;
}
.filter-modal-body input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: #e5e5e5; }
.filter-modal-body input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-color); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.filter-modal-body input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); border: 2px solid white;
}
.filter-modal-body fieldset { border: 1px solid var(--border-color); padding: 10px; border-radius: 8px; }
.filter-modal-body fieldset div { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.filter-modal-footer { display: flex; padding: 16px; border-top: 1px solid var(--border-color); gap: 12px; }
#filter-reset-btn, #filter-apply-btn {
  flex-grow: 1; padding: 14px; border-radius: 8px; border: none; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
#filter-reset-btn { background-color: #eee; color: var(--text-color); }
#filter-apply-btn { background-color: var(--primary-color); color: white; }

/* ---- Foco visível ---- */
:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.header-action-btn:focus-visible, .nav-btn:focus-visible, #filter-close-btn:focus-visible,
#filter-reset-btn:focus-visible, #filter-apply-btn:focus-visible, select:focus-visible,
input:focus-visible { box-shadow: 0 0 0 3px rgba(0,163,255,.25); border-color: var(--secondary-color); }

/* ---- Redução de movimento ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Dark mode opcional ---- */
@media (prefers-color-scheme: dark) {
  :root{
    --background-color:#101418; --card-bg:#12181f; --text-color:#e9edf1;
    --border-color:#1e2935; --primary-color:#4db2ff; --secondary-color:#8bd1ff;
  }
  .nav-btn { color:#9bb0c3; }
}

/* ---- Hover suave em desktop ---- */
@media (hover:hover){
  .property-card{ transition: transform .12s ease, box-shadow .12s ease; }
  .property-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
}

/* ---- Tipografia responsiva ---- */
@media (min-width: 768px){ html { font-size: 17px; } }
@media (min-width: 1280px){ html { font-size: 18px; } }