/* ---------------------------------------------------
   Theme tokens + modern polish layer.
   Loaded before style.css/header.css, which now reference
   these custom properties instead of hardcoded hex values.
--------------------------------------------------- */

:root {
  --color-primary: #1A1A1A;       /* preto grafite, igual ao fundo do escudo da logo */
  --color-primary-dark: #0A0A0A;  /* utility bar / dark backgrounds, replaces #1c1c1c */
  --color-accent: #D4AF37;        /* dourado da logo (Prime Motors), CTAs e preço */
  --color-ink: #1F2937;           /* body text, replaces #111111 */
  --color-muted: #64748B;         /* secondary text, replaces #666666 */
  --color-bg-soft: #F7F9FA;
  --shadow-card: 0 8px 24px rgba(10, 10, 10, 0.10);
  --shadow-card-hover: 0 14px 32px rgba(10, 10, 10, 0.20);
  --radius-card: 12px;
}

/* ---- Hero: darken image so text stays legible ---- */
.hero-section .hs-item {
  position: relative;
}
.hero-section .hs-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.75) 100%);
}
.hero-section .hs-item .row {
  position: relative;
  z-index: 1;
}

/* ---- Property cards: soft shadow + hover lift ---- */
.property-item {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  background: #ffffff;
}
.property-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.property-item .pi-pic {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.pt-price {
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* ---- Buttons: match new palette ---- */
.search-btn,
.site-btn,
.cta-btn {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #1A1A1A !important;
  font-weight: 700;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.search-btn:hover,
.site-btn:hover,
.cta-btn:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
}

/* ---- "Invista no seu futuro" icons: Font Awesome instead of PNG ----
   .cf-pic keeps the template's existing 80px white circle (style.css);
   this just centers the glyph inside it and colors it with the brand. */
.chooseus-features .cf-item .cf-pic {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chooseus-features .cf-item .cf-pic i {
  font-size: 30px;
  color: var(--color-primary);
}

/* ---- Stats section: swap icon accent to warm accent for variety ---- */
.stats-section .stat-item i {
  color: var(--color-accent);
}

/* ---- Property cards v2: ID badge / EXCLUSIVIDADE ribbon / price overlay ---- */
.property-card-v2 {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #ffffff;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  margin-bottom: 30px;
  display: block;
}
.property-card-v2:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.pcv2-media {
  display: block;
  position: relative;
  height: 230px;
}
.pcv2-id {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.pcv2-excl {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e63946;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
}
.pcv2-price {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px 0 0 0;
  text-align: right;
  line-height: 1.3;
}
.pcv2-price small {
  display: block;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.pcv2-body {
  padding: 16px 18px 18px;
}
.pcv2-body h5 {
  margin-bottom: 4px;
  font-size: 17px;
}
.pcv2-body h5 a {
  color: var(--color-ink);
  font-weight: 700;
}
.pcv2-body h5 a:hover {
  color: var(--color-primary);
}
.pcv2-sub {
  color: var(--color-muted);
  font-size: 13px;
  margin-bottom: 14px;
}
.pcv2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.pcv2-stats span {
  font-size: 12.5px;
  color: var(--color-ink);
  display: flex;
  align-items: center;
}
.pcv2-stats i {
  color: var(--color-primary);
  margin-right: 7px;
  width: 14px;
  text-align: center;
}

/* ---- Reserva espaço à direita pra os cards não ficarem atrás do botão flutuante do WhatsApp ---- */
@media (min-width: 992px) {
  .latest-property-section .property-filter {
    padding-right: 100px;
  }
}
/* ---- ÚLTIMOS IMÓVEIS (5 colunas): a margem de centralização do container já
   afasta os cards do botão do WhatsApp em telas largas, sobrando espaço em branco
   demais com os 100px acima — reduz só aqui pra ficar mais largo ---- */
@media (min-width: 1400px) {
  #ultimos-imoveis .property-filter,
  #destaques-vendas .property-filter,
  #destaques-aluguel .property-filter,
  #catalogo-imoveis .property-filter {
    padding-right: 30px;
  }
}

/* ---- Usa mais a largura da tela em monitores grandes (o container padrão do Bootstrap
   trava em 1140px e sobra muito espaço em branco dos dois lados em telas wide) ---- */
@media (min-width: 1400px) {
  .latest-property-section .container,
  #lista-imoveis-grid .container {
    max-width: 1600px;
  }
}

/* ---- ÚLTIMOS IMÓVEIS / DESTAQUES VENDAS / DESTAQUES ALUGUEL (home) / catálogo (imoveis.php):
   5 cards por linha no desktop, não 3 ---- */
@media (min-width: 1200px) {
  #ultimos-imoveis .property-filter > div,
  #destaques-vendas .property-filter > div,
  #destaques-aluguel .property-filter > div,
  #catalogo-imoveis .property-filter > div,
  #lista-imoveis-grid .property-filter > div {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #ultimos-imoveis .property-filter > div,
  #destaques-vendas .property-filter > div,
  #destaques-aluguel .property-filter > div,
  #catalogo-imoveis .property-filter > div,
  #lista-imoveis-grid .property-filter > div {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* ---- Filtro de categorias (MixItUp) na home: destaque do item ativo ---- */
.property-controls ul li.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---- Página de detalhes do imóvel: cards modernos + galeria arredondada ---- */
.property-details-section .fp-slider {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.property-details-section .fp-slider .fp-item {
  height: 480px;
}
.property-details-section .pd-text,
.property-details-section .pd-widget,
.property-sidebar .single-sidebar {
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.property-details-section .pd-title .label.c-red {
  background: #e63946;
}
.property-details-section .pd-board .tab-board .tab-content .tab-details,
.property-details-section .pd-board .tab-board .tab-content .tab-desc {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.property-details-section .pd-board .tab-board .nav-tabs {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
}
.property-sidebar .single-sidebar {
  margin-bottom: 24px;
}
.property-sidebar .single-sidebar .top-agent .ta-item {
  background: var(--color-bg-soft);
  border-radius: var(--radius-card);
}
.property-sidebar .single-sidebar .sf-slider .sf-item {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.property-details-section .review-form textarea,
.property-details-section .review-form input {
  border-radius: 8px;
}
.property-details-section .review-form .site-btn {
  border-radius: 8px;
}

/* ---- Paginação do catálogo de imóveis: cor da marca em vez de preto padrão ---- */
.paginacao .btn-outline-dark {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.paginacao .btn-outline-dark:hover,
.paginacao .btn-outline-dark.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* ---- Testimonial cards: subtle card treatment ---- */
.testimonial-item {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: #ffffff;
}
.ta-rating i {
  color: var(--color-accent);
}

/* ---- Home: busca sobre foto (substitui a antiga "Invista no seu futuro") ---- */
.home-search-section {
  padding: 0 0 60px;
}
.hss-media {
  position: relative;
  min-height: 560px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
.hss-card {
  margin-left: 8%;
  width: 100%;
  max-width: 440px;
  background: rgba(247, 249, 250, 0.97);
  padding: 44px 40px;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.25);
}
.hss-card h4 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.25;
  margin-bottom: 24px;
}
.hss-tabs {
  display: flex;
  margin-bottom: 20px;
  border: 1px solid var(--color-primary-dark);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}
.hss-tab {
  border: none;
  background: #ffffff;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 26px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.hss-tab.active {
  background: var(--color-primary-dark);
  color: #ffffff;
}
.hss-field {
  margin-bottom: 16px;
  overflow: hidden; /* contém o float do widget .nice-select, senão a altura do card colapsa */
}
.hss-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.hss-field label i {
  color: var(--color-primary);
  margin-right: 4px;
}
.hss-field select,
.hss-field input {
  width: 100%;
  height: 44px;
  border: none;
  border-bottom: 1px solid #D8DEE2;
  background: transparent;
  padding: 0 4px;
  font-size: 14px;
  font-style: italic;
  color: var(--color-muted);
  box-sizing: border-box;
}
.hss-field select:focus,
.hss-field input:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
/* select vira widget .nice-select via JS (main.js roda $('select').niceSelect() em
   todo o site) — sem essas regras ele fica float:left/width:auto e quebra o layout */
.hss-field .nice-select {
  display: block;
  float: none;
  width: 100%;
  height: 44px;
  line-height: 42px;
  border: none;
  border-bottom: 1px solid #D8DEE2;
  border-radius: 0;
  background: transparent;
  padding: 0 4px;
  font-size: 14px;
  font-style: italic;
  color: var(--color-muted);
}
.hss-field .nice-select .list {
  width: 100%;
  box-sizing: border-box;
}
.hss-field .nice-select:active,
.hss-field .nice-select.open,
.hss-field .nice-select:focus {
  border-bottom-color: var(--color-primary);
}
.hss-field-row {
  display: flex;
  gap: 20px;
}
.hss-field-row .hss-field {
  flex: 1;
  min-width: 0; /* permite o input encolher em vez de estourar/cortar o placeholder */
}
.hss-btn {
  width: 100%;
  border: none;
  border-radius: 4px;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 0;
  margin-top: 8px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.hss-btn:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .hss-media {
    min-height: 0;
    padding: 40px 0;
  }
  .hss-card {
    margin: 0 16px;
    max-width: none;
  }
}

/* ---- Categorias (SUV/Hatch/Sedan/Picape): style.css usa float:left com
   largura fixa de 20% pensada pra sempre ter 5 itens — com menos de 5
   categorias cadastradas, sobra espaço vazio à direita em vez de centralizar.
   Seletor com 2 classes vence a especificidade do style.css (1 classe)
   mesmo carregando antes dele. ---- */
.categories-section .cs-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.categories-section .cs-item-list .cs-item {
  float: none;
}