/*
 * archive.css — Hello Child Theme · Fase 3 · juliomartinscorretor.com.br
 * @version 1.0.175
 *
 * PARTE 1: Layout estrutural da Archive
 * PARTE 2: Chips e barra de filtros       ✅ Arquivo 13
 * PARTE 3: Cards                          ✅ Arquivo 13
 * PARTE 4: Mobile cockpit e ajustes       ← a adicionar (Arquivo 14)
 */

/* ═══════════════════════════════════════════════════════════════
   1. BODY — Grade estrutural da Archive
   grid-template-rows: header | filtros | conteúdo
   [v1.0.25] grid-template-columns: minmax(0,100%) — trava a coluna
   implícita do grid no viewport, impedindo que qualquer filho force
   body.scrollWidth > clientWidth (causa do scroll horizontal).
   ═══════════════════════════════════════════════════════════════ */

html:has(body.ref-page-archive) {
  overflow-x: hidden; /* belt-and-suspenders: bloqueia scroll no viewport */
}

body.ref-page-archive {
  --breadcrumb-bar-height: 36px; /* [v1.0.26] altura fixa da breadcrumb bar (anti-CLS) */
  display: grid;
  grid-template-rows: auto auto auto 1fr; /* [v1.0.26] header | breadcrumb | filtros | conteúdo */
  grid-template-columns: minmax(0, 100%); /* trava coluna no viewport */
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-bg-light);
}

/* ═══════════════════════════════════════════════════════════════
   2. BARRA DE FILTROS DESKTOP
   sticky abaixo do header · z-index 90 · visível ≥ 768px
   ═══════════════════════════════════════════════════════════════ */

.ref-filter-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  height: var(--filter-bar-height);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  /* Evita encolhimento no grid */
  min-height: var(--filter-bar-height);
  padding: 0 var(--space-4, 16px);
}

@media (min-width: 640px) {
  .ref-filter-bar {
    padding: 0 var(--space-6, 24px);
  }
}

@media (min-width: 1280px) {
  .ref-filter-bar {
    padding: 0 var(--space-12, 48px);
  }
}

.ref-filter-bar__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ref-filter-chips-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
  overflow: hidden;
  padding-left: 0;
}

.ref-filter-actions {
  border-left: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  height: 100%;
}

.ref-filter-actions .ref-btn,
.ref-filter-actions button {
  height: 40px;
  min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════════
   2b. BREADCRUMB BAR
   fina barra abaixo do header · fundo branco · border-bottom
   visível em todos os breakpoints em modo grid
   [v1.0.26] adicionada para desacoplar breadcrumbs do grid-inner
   ═══════════════════════════════════════════════════════════════ */

.ref-breadcrumb-bar {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: var(--breadcrumb-bar-height);
  overflow: hidden;           /* garante altura estável (anti-CLS) */
  display: flex;
  align-items: center;
  padding: 0 var(--space-4, 16px);
}

@media (min-width: 640px) {
  .ref-breadcrumb-bar {
    padding: 0 var(--space-6, 24px);
  }
}

@media (min-width: 1280px) {
  .ref-breadcrumb-bar {
    padding: 0 var(--space-12, 48px);
  }
}

/* Oculta no map-view mobile (grid-col também some — safe para display:none) */
body.ref-page-archive.is-map-view .ref-breadcrumb-bar {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   3. HEADER MOBILE DE FILTROS
   barra compacta visível apenas em mobile · oculta em desktop
   (não é position:fixed — A004 não se aplica)
   ═══════════════════════════════════════════════════════════════ */

.ref-mobile-filter-header {
  display: none;
  /* override em mobile abaixo */
  align-items: center;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  min-height: var(--filter-bar-height-mobile, 52px);
}

.ref-mobile-filter-header__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
}

.ref-mobile-filter-header__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ref-mobile-filter-header__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-mobile-filter-header__sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ref-mobile-filter-header__trigger {
  flex-shrink: 0;
  margin-left: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   4. CONTAINER PRINCIPAL
   flex · altura = viewport − header − filtros
   ═══════════════════════════════════════════════════════════════ */

.ref-archive-main {
  display: flex;
  height: calc(100dvh - var(--header-height) - var(--breadcrumb-bar-height) - var(--filter-bar-height)); /* [v1.0.26] subtrai breadcrumb-bar */
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   5. COLUNA GRID (60%)
   overflow-y na camada interna — footer-archive fixo na base
   ═══════════════════════════════════════════════════════════════ */

.ref-archive-grid-col {
  flex: 3;        /* ratio 3:2 = 60%, pode encolher */
  min-width: 0;   /* permite encolher abaixo do conteúdo */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-bg-light);
  /* [v1.0.26] container para container queries do plugin (gap e padding por breakpoint) */
  container-type: inline-size;
  container-name: ref-grid-col;
}

/* Área rolável: toolbar + grid de cards + paginação */
/* [v1.0.26] breadcrumbs movidos para .ref-breadcrumb-bar */
.ref-archive-grid-inner {
  flex: 1;
  overflow-y: auto;
  /* [v1.0.26] padding por breakpoint via CSS vars do plugin (tablet como base) */
  padding: var(--ref-grid-pad-top-tablet, 16px) var(--ref-grid-pad-lateral-tablet, 16px) var(--ref-grid-pad-bottom-tablet, 16px);
  /* [v1.0.26] C1: reserva espaço do scrollbar em ambos os lados — elimina assimetria */
  scrollbar-gutter: stable both-edges;
  /* Scrollbar discreta */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.ref-archive-grid-inner::-webkit-scrollbar {
  width: 6px;
}

.ref-archive-grid-inner::-webkit-scrollbar-track {
  background: transparent;
}

.ref-archive-grid-inner::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.ref-archive-grid-inner::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* [v1.0.35] Footer rolável: espaço acima equivalente ao padding entre cards e paginação */
.ref-archive-grid-inner .ref-footer-archive {
  margin-top: 32px;
}

/* ═══════════════════════════════════════════════════════════════
   6. COLUNA MAPA (40%)
   sticky · altura igual ao container principal
   ═══════════════════════════════════════════════════════════════ */

.ref-archive-map-col {
  flex: 2;        /* ratio 3:2 = 40% */
  min-width: 0;
  position: sticky;
  top: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-light);
}

/* Garante que o container Leaflet preencha a coluna */
.ref-archive-map-col>* {
  width: 100%;
  height: 100%;
}

.ref-archive-map-col > .ref-map-container {
  height: 100% !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. CHIPS ATIVOS MOBILE
   sobreposto ao mapa quando toggle mapa está ativo
   A004: position:fixed → visibility/opacity, NUNCA display:none
   ═══════════════════════════════════════════════════════════════ */

.ref-mobile-chips-active {
  position: fixed;
  top: calc(var(--header-height) + 52px);
  /* 52px = altura do mobile filter header */
  left: 0;
  right: 0;
  z-index: 85;
  padding: var(--space-2) var(--space-4);
  /* Oculto por padrão (A004) */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.ref-mobile-chips-active__scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.ref-mobile-chips-active__scroll::-webkit-scrollbar {
  display: none;
}

/* Visível quando mapa está ativo no mobile (classe adicionada por archive.js) */
body.ref-page-archive.is-map-view .ref-mobile-chips-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   8. BARRA INFERIOR MOBILE (botões fixos)
   A004: position:fixed → visibility/opacity, NUNCA display:none
   Oculta em desktop; visível em mobile via media query abaixo
   ═══════════════════════════════════════════════════════════════ */

.ref-mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  height: 56px;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  /* Oculto em desktop (A004) */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.ref-mobile-bottom-bar__toggle,
.ref-mobile-bottom-bar__contato {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-base);
  cursor: pointer;
  border: none;
  background: none;
  transition: background-color var(--transition-fast);
}

.ref-mobile-bottom-bar__toggle {
  color: var(--color-primary);
  border-right: 1px solid var(--color-border);
}

.ref-mobile-bottom-bar__toggle:hover {
  background-color: var(--color-bg-light);
}

.ref-mobile-bottom-bar__contato {
  color: var(--color-white);
  background-color: var(--color-teal);
}

.ref-mobile-bottom-bar__contato:hover {
  background-color: var(--color-teal-light);
}

/* ─── Ícones de toggle (archive.js alterna via body.is-map-view) ─── */
/* [v1.0.36] Fix: ícone deve combinar com o label (destino), não com o estado atual.
   Default (label="Ver Mapa"): mostra ícone de mapa.
   is-map-view (label="Ver Lista"): mostra ícone de lista. */
.ref-toggle-view__icon-list {
  display: none;
}

.ref-toggle-view__icon-map {
  display: block;
}

body.ref-page-archive.is-map-view .ref-toggle-view__icon-list {
  display: block;
}

body.ref-page-archive.is-map-view .ref-toggle-view__icon-map {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   9. SMARTPHONE ≤639px
   Toggle Lista/Mapa. Grid ocupa 100%, mapa oculto por padrão.
   [v1.0.23] Threshold ajustado de 767px para 639px.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

  /* Override altura da filter bar mobile */
  body.ref-page-archive {
    --filter-bar-height: 52px;
  }

  /* Barra de filtros desktop: oculta */
  .ref-filter-bar {
    display: none;
  }

  /* Header mobile filtros: visível */
  .ref-mobile-filter-header {
    display: flex;
  }

  /* Container principal: recalcula — [v1.0.43] remove --filter-bar-height do calc:
     display:none na .ref-filter-bar retira o elemento do grid, mas o cálculo ainda
     subtraía 52px, criando linha 4 (1fr) vazia que expunha o background do body
     como faixa fixa no rodapé. Sem a subtração, linhas 1+2+3 somam 100dvh exato. */
  .ref-archive-main {
    height: calc(100dvh - var(--header-height) - var(--breadcrumb-bar-height));
  }

  /* Grid: 100%, mapa oculto */
  .ref-archive-grid-col {
    flex: 0 0 100%;
    border-right: none;
  }

  .ref-archive-map-col {
    display: none;
  }

  /* Botões flutuantes: visíveis — [v1.0.28] pill shape + centralizado + compacto */
  .ref-mobile-bottom-bar {
    bottom: 25px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    height: auto;
    background: transparent;
    border-top: none;
    box-shadow: none;
    gap: 12px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* [v1.0.35] Fix A003+A008: wrapper sobe especificidade 0,1,0→0,2,0 para vencer
     Hello Elementor [type=button] (#CC3366 Bootstrap). Tokens --ref-* (A008). */
  /* [v1.0.38] Restaura altura original: padding vertical 0 + flex:1 deixa o
     container (height:56px; align-items:stretch) definir a altura dos botões. */
  /* [v1.0.39] min-height:56px explícito — Bootstrap pode sobrescrever align-self
     impedindo que o stretch do container funcione. min-height garante a altura
     independente do cascade. padding:0 20px mantém centralização via align-items. */
  .ref-mobile-bottom-bar .ref-mobile-bottom-bar__toggle {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: var(--font-size-sm, 13px);
    background-color: var(--ref-tipo-color, #008797);
    color: var(--ref-white, #FFFFFF);
    border: none;
    border-radius: 6px;
    padding: 0 20px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(0, 135, 151, 0.25);
  }

  .ref-mobile-bottom-bar .ref-mobile-bottom-bar__toggle:hover {
    background-color: #0099B0;
    box-shadow: 0 4px 16px rgba(0, 135, 151, 0.30);
    transition: background-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
  }

  .ref-mobile-bottom-bar .ref-mobile-bottom-bar__contato {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: var(--font-size-sm, 13px);
    background-color: #231F5C;
    color: var(--ref-white, #FFFFFF);
    border: none;
    border-radius: 6px;
    padding: 0 20px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(35, 31, 92, 0.25);
  }

  .ref-mobile-bottom-bar .ref-mobile-bottom-bar__contato:hover {
    background-color: #312d72;
    box-shadow: 0 4px 16px rgba(35, 31, 92, 0.35);
    transition: background-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
  }

  /* Padding para não ficar sob a bottom bar */
  /* [v1.0.45] valores controlados via REF Settings → Padding Vertical → Mobile */
  /* [v1.0.46] especificidade (0,2,0) para vencer container query Desktop que dispara */
  /* em 540-639px (container = 100% do viewport mobile) — mesma lógica da v8.0.137 */
  .ref-archive-grid-col .ref-archive-grid-inner {
    padding-bottom: var(--ref-grid-pad-bottom-mobile, 105px);
    padding-top: var(--ref-grid-pad-top-mobile, 86px);
  }

  /* Floating pill mobile — [v1.0.26] desce para baixo da breadcrumb-bar */
  .ref-mobile-filter-header {
    position: fixed;
    top: calc(var(--header-height) + var(--breadcrumb-bar-height) + 8px);
    left: 15px;
    right: 15px;
    z-index: 95;
    background: transparent;
    border: none;
    padding: 0;
    min-height: unset;
  }

  .ref-mobile-filter-header__pill {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08), 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 8px;
  }

  /* Estado mapa: pill sobe */
  body.ref-page-archive.is-map-view .ref-mobile-filter-header {
    top: 20px;
  }

  /* [v1.0.28] Zoom Leaflet: move de top-left para bottom-right no mobile map view
     Evita sobreposição com o pill mobile (que fica no topo).
     Bottom calculado: 25px (offset) + ~52px (bottom bar) + 13px (margem) = 90px */
  body.ref-page-archive.is-map-view .leaflet-top.leaflet-left {
    top: auto;
    left: auto;
    bottom: 90px;
    right: 16px;
  }

  /* [v1.0.33] Pill mobile: largura grid−30px, centralizado, SVG inline */
  .ref-mobile-filter-header {
    justify-content: center;
  }

  .ref-mobile-filter-header__pill {
    cursor: pointer;
    display: flex;
    width: 100%;
  }

  /* [v1.0.33] SVG direto no __trigger — affordance visual sem botão */
  .ref-mobile-filter-header__trigger svg {
    display: block;
    color: var(--ref-card-title-color, #231F5C);
  }

  /* Mapa cobre viewport inteira no map view */
  body.ref-page-archive.is-map-view .ref-archive-map-col {
    top: 0;
    bottom: 0;
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    height: auto;
    z-index: 80;
  }

  /* Header oculto no map view (A004) */
  /* [v1.0.34] Fix: display:none é atômico — elimina delay e escalonamento de GPU layers
     do toggle Grid→Mapa. Seguro para position:sticky (≠ position:fixed da bottom bar). */
  body.ref-page-archive.is-map-view .ref-header {
    display: none;
  }

  body.ref-page-archive.is-map-view .ref-archive-grid-col {
    display: none;
  }

}

/* ═══════════════════════════════════════════════════════════════
   10. TABLET / MOBILE LANDSCAPE — 640px–959px
   Ambos visíveis simultaneamente. Proporção 50%/50%.
   Grid 1 coluna (container query do plugin aplica automaticamente).
   Sem toggle, sem botões flutuantes.
   [v1.0.23] Novo breakpoint — substituiu 768–1023px toggle.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 640px) and (max-width: 959px) {

  .ref-archive-grid-col {
    flex: 1 1 0%;
    border-right: 1px solid var(--color-border, #E0E4EA);
  }

  .ref-archive-map-col {
    flex: 1 1 0%;
    display: block;
  }

  /* Filter bar: visível com segmento esquerdo vazio — apenas botões à direita */
  .ref-filter-bar {
    display: flex;
  }

  /* Oculta chips — segmento esquerdo vazio [v1.0.28] especificidade aumentada */
  .ref-filter-bar .ref-filter-chips-wrapper {
    display: none;
  }

  /* Alinha botões à direita e remove divisória (sem chips ao lado) */
  .ref-filter-actions {
    margin-left: auto;
    border-left: none;
  }

  /* Header mobile: oculto (filter bar assume o papel) */
  .ref-mobile-filter-header {
    display: none;
  }

  /* Sem botões flutuantes (ambos os painéis visíveis simultaneamente) */
  .ref-mobile-bottom-bar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Container: [v1.0.26] subtrai breadcrumb-bar */
  .ref-archive-main {
    height: calc(100dvh - var(--header-height, 64px) - var(--breadcrumb-bar-height, 36px) - var(--filter-bar-height, 90px));
  }

}

/* ═══════════════════════════════════════════════════════════════
   11. NOTEBOOK PEQUENO / TABLET HORIZONTAL — 960px–1279px
   Ambos visíveis. Proporção 60%/40%.
   Grid 2 colunas (container query do plugin aplica automaticamente).
   Barra de filtros desktop visível.
   [v1.0.23] Novo breakpoint — substituiu ≥1440px 3 colunas.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 960px) and (max-width: 1279px) {

  /* Proporção 60%/40% — mesma do default, mas explícita para clareza */
  .ref-archive-grid-col {
    flex: 3 1 0%;
  }

  .ref-archive-map-col {
    flex: 2 1 0%;
    display: block;
  }

  /* Barra de filtros desktop: visível */
  .ref-filter-bar {
    display: flex;
  }

  /* Header mobile filtros: oculto */
  .ref-mobile-filter-header {
    display: none;
  }

  /* Sem botões flutuantes */
  .ref-mobile-bottom-bar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

}

/* ═══════════════════════════════════════════════════════════════
   12. DESKTOP — ≥1280px
   Ambos visíveis. Proporção 60%/40%.
   Grid 3 colunas (container query do plugin aplica automaticamente).
   Barra de filtros desktop visível.
   [v1.0.23] Nova seção — substitui ≥1440px anterior.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {

  .ref-archive-grid-col {
    flex: 3 1 0%;
  }

  .ref-archive-map-col {
    flex: 2 1 0%;
    display: block;
  }

  /* Barra de filtros desktop: visível */
  .ref-filter-bar {
    display: flex;
  }

  /* Header mobile filtros: oculto */
  .ref-mobile-filter-header {
    display: none;
  }

  /* Sem botões flutuantes */
  .ref-mobile-bottom-bar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Container inner: ocupa 100% do espaço disponível dentro do filter-bar [v1.0.51] */
  .ref-filter-bar__inner {
    width: 100%;
  }

}


/* ═══════════════════════════════════════════════════════════════
   PARTE 2 — CHIPS E BARRA DE FILTROS
   Classes reais confirmadas em produção (11/03/2026)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   12. CHIPS WRAPPER — setas de paginação
   ═══════════════════════════════════════════════════════════════ */

.ref-filter-chips-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  border-right: none;
  position: relative;
}

.ref-filter-chips-scroll {
  flex: 1;
  display: flex;
  align-items: center;
  /* [v1.0.32] sem align-self:stretch nem height explícita — altura intrínseca (~50px)
     é centralizada pelo align-items:center do .ref-filter-chips-wrapper pai,
     mesmo mecanismo que centraliza as setas. */
  gap: var(--space-2); /* 8px */
  overflow-x: hidden;
  /* JS (archive.js) controla scroll paginado */
  padding: 0; /* [v1.0.52] removido 30px — setas agora são position:absolute */
  min-width: 0;
  scrollbar-width: none;
  margin-bottom: 0 !important; /* Corrige desalinhamento vertical (4.2) */
}

.ref-filter-chips-scroll::-webkit-scrollbar {
  display: none;
}

/* [v1.0.56] Oculto durante SSR para eliminar CLS de lockChipMinWidths().
   Todos os chips partem da largura mínima CSS e crescem quando JS aplica minWidth —
   visibility:hidden preserva o espaço de layout do filter bar (sem shift de elementos
   ao redor). lockChipMinWidths() adiciona .js-chips-ready ao revelar. */
.ref-filter-chips-scroll:not(.js-chips-ready) {
  visibility: hidden;
}

/* Botões de seta (prev/next) — [v1.0.29] redondos 32px, fundo branco, sombra suave */
/* [v1.0.29-b] A003: prefixo .ref-filter-chips-wrapper (0,2,0) supera button[type=button] do Hello Elementor (0,1,1) */
.ref-filter-chips-wrapper .ref-chip-prev,
.ref-filter-chips-wrapper .ref-chip-next {
  position: absolute; /* [v1.0.52] não ocupa espaço flex — chips preenchem 100% do wrapper */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3; /* acima do fade */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: unset;
  color: var(--ref-card-title-color, #231F5C);
  background: var(--ref-white, #FFFFFF);
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: box-shadow var(--transition-fast, 150ms ease);
  padding: 0;
  /* [v1.0.55] Fix B: position:absolute faz setas sobrepor chips durante SSR antes do JS
     rodar. initChipScroll() controla via .style.opacity após DOMContentLoaded —
     inline style sobrepõe esta regra CSS sem conflito. */
  opacity: 0;
  pointer-events: none;
}

.ref-filter-chips-wrapper .ref-chip-prev {
  left: 0; /* [v1.0.52] substitui order:-1 + margin-left */
}

.ref-filter-chips-wrapper .ref-chip-next {
  right: 0; /* [v1.0.52] substitui margin-right */
}

.ref-filter-chips-wrapper .ref-chip-prev:hover,
.ref-filter-chips-wrapper .ref-chip-next:hover {
  background: var(--color-bg-light, #F5F7FA); /* [v1.0.29-b] off-white padrão do tema */
  color: var(--ref-card-title-color, #231F5C); /* [v1.0.30-b] mantém SVG stroke=currentColor em ambos os estados */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* [v1.0.32] :active — mesmo visual do :hover (off-white + ícone azul)
   Supera button[type=button]:active do Hello Elementor: (0,2,1) > (0,1,2) */
.ref-filter-chips-wrapper .ref-chip-prev:active,
.ref-filter-chips-wrapper .ref-chip-next:active {
  background: var(--color-bg-light, #F5F7FA);
  color: var(--ref-card-title-color, #231F5C);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* [v1.0.32-b] :focus e :focus-visible — mesmo visual do :hover (off-white + ícone azul)
   Supera button:focus do Hello Elementor (style.min.css) que aplica #CC3366 após clicar.
   Especificidade nossa (0,3,0) > Elementor (0,2,0). */
.ref-filter-chips-wrapper .ref-chip-prev:focus,
.ref-filter-chips-wrapper .ref-chip-next:focus,
.ref-filter-chips-wrapper .ref-chip-prev:focus-visible,
.ref-filter-chips-wrapper .ref-chip-next:focus-visible {
  background: var(--color-bg-light, #F5F7FA);
  color: var(--ref-card-title-color, #231F5C);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  outline: none;
}

/* Oculta seta quando não há overflow (archive.js adiciona .is-hidden) */
.ref-filter-chips-wrapper .ref-chip-prev.is-hidden,
.ref-filter-chips-wrapper .ref-chip-next.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* [v1.0.52] Fade esquerda — gradiente branco→transparente
   Ativo quando JS adiciona .has-prev-overflow ao wrapper */
.ref-filter-chips-wrapper::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, var(--ref-white, #FFFFFF) 40%, transparent);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast, 150ms ease);
}

.ref-filter-chips-wrapper.has-prev-overflow::before {
  opacity: 1;
}

/* [v1.0.52] Fade direita — gradiente transparente→branco
   Ativo quando JS adiciona .has-next-overflow ao wrapper */
.ref-filter-chips-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to left, var(--ref-white, #FFFFFF) 40%, transparent);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast, 150ms ease);
}

.ref-filter-chips-wrapper.has-next-overflow::after {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════
   13. CHIPS DE FILTRO — .ref-input-group dentro da barra desktop
   Classes reais: div.ref-input-group, div.ref-input-group--deferred,
                  div.ref-range-group
   ═══════════════════════════════════════════════════════════════ */

/* Chip base — cada filtro é um chip */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-bottom: 0; /* [v1.0.32-c] neutraliza margin-bottom:24px de origem desconhecida (JS ou UA) */
  /* [v1.0.32] align-self:center removido — desnecessário quando o scroll
     tem altura intrínseca (align-items do wrapper centraliza o bloco inteiro) */
}

/* Label-chip: Tipo, Estágio, Preço, Área, Quartos, Suítes, Vagas, Banheiros */
.ref-filter-bar .ref-filter-chips-scroll .ref-label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 8px 16px !important;
  border: 1px solid var(--color-border, #E0E4EA) !important;
  border-radius: var(--radius-sm, 6px) !important;
  background-color: var(--color-white, #FFFFFF) !important;
  font-size: 13px;
  line-height: 1;
  min-height: 40px; /* Reduzido de 44px para 40px (4.3) */
  margin-bottom: 0 !important; /* [v1.0.51] neutraliza margin-bottom:6px do plugin ref-mobile */
  font-weight: 600;
  color: var(--color-primary, #231F5C) !important;
  text-transform: none !important;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: opacity var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease);
}

.ref-filter-bar .ref-filter-chips-scroll .ref-label::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: auto; /* [v1.0.133] seta empurrada para extremidade direita do chip */
  transition: transform var(--transition-fast);
}

.ref-filter-bar .ref-filter-chips-scroll .ref-label:hover {
  background-color: var(--color-bg-light, #F5F7FA) !important;
  opacity: 1 !important; /* sobrescrever o opacity:0.9 anterior */
}

/* [v1.0.47] Select-chip: Cidade e Bairro — overlay invisível sobre o label.
   O <select> cobre toda a área do chip via position:absolute (opacity:0).
   O <label> é a face visual; clicar em qualquer ponto abre o dropdown nativo. */
.ref-filter-bar .ref-filter-chips-scroll .ref-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* [v1.0.47] Hover transferido para o label via :has() — mouse fica sobre o select (z-index:1) */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group:has(.ref-select):hover .ref-label {
  background-color: var(--color-bg-light, #F5F7FA) !important;
  opacity: 1 !important;
}

/* [v1.0.47] Focus do select (teclado) refletido no label */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group:has(.ref-select:focus) .ref-label {
  border-color: var(--color-primary, #231F5C) !important;
  box-shadow: 0 0 0 2px rgba(35, 31, 92, 0.12) !important;
}

/* Chip com filtro ativo (.ref-filter-active adicionado por ref-filters.js) */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group.ref-filter-active .ref-label {
  background-color: var(--color-bg-light, #F5F7FA) !important; /* [v1.0.134] Fundo light para chip ativo */
  color: var(--color-primary, #231F5C) !important;            /* [v1.0.134] Texto navy para contraste */
  border-color: var(--color-border, #E0E4EA) !important;       /* [v1.0.135] Borda light padronizada */
}

/* [v1.0.48] Hover em chip ativo — fundo intermediário legível (texto navy sobre border-gray) */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group.ref-filter-active .ref-label:hover {
  background-color: #E5E7EB !important;
  color: var(--ref-card-title-color, #231F5C) !important;
}

/* [v1.0.49] Hover em chip ativo SELECT (Cidade/Bairro).
   O <select> opacity:0 intercepta o mouse — :hover no .ref-label nunca dispara.
   Solução: mesma técnica do hover não-ativo: :has() no grupo + .ref-select + hover. */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group.ref-filter-active:has(.ref-select):hover .ref-label {
  background-color: #E5E7EB !important;
  color: var(--ref-card-title-color, #231F5C) !important;
}

.ref-filter-bar .ref-filter-chips-scroll .ref-input-group.ref-filter-active .ref-select {
  background-color: var(--color-bg-light, #F5F7FA) !important; /* [v1.0.134] Fundo light para chip ativo */
  color: var(--color-primary, #231F5C) !important;            /* [v1.0.134] Texto navy para contraste */
  border-color: var(--color-border, #E0E4EA) !important;       /* [v1.0.135] Borda light padronizada */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23231F5C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Chip aberto — seta inverte (archive.js adiciona .is-chip-open) */
.ref-filter-bar .ref-filter-chips-scroll .ref-input-group.is-chip-open .ref-label::after {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════
   13. DROPDOWN PANEL — .ref-chip-panel (criado pelo JS-6)
   Oculto por padrão; exibido via .is-chip-open no .ref-input-group pai
   ═══════════════════════════════════════════════════════════════ */

/* Ocultar todos os elementos de controle na barra de chips */
.ref-filter-bar .ref-filter-chips-scroll .ref-checkbox-grid,
.ref-filter-bar .ref-filter-chips-scroll .ref-range-wrapper,
.ref-filter-bar .ref-filter-chips-scroll .ref-range-track-bg,
.ref-filter-bar .ref-filter-chips-scroll .ref-range-track-fill,
.ref-filter-bar .ref-filter-chips-scroll input[type="range"],
.ref-filter-bar .ref-filter-chips-scroll .ref-text-input,
.ref-filter-bar .ref-filter-chips-scroll .ref-btn-apply-inline,
.ref-filter-bar .ref-filter-chips-scroll .ref-btn-escolher,
.ref-filter-bar .ref-filter-chips-scroll .ref-btn-clear-chip {
  display: none !important; /* [v1.0.54] C8: supera .ref-text-input { display:block !important } global */
}

/* [v1.0.55] Fix A: PHP renderiza <span>até</span> dentro do div flex do range group.
   C8 oculta os .ref-text-input mas não o span. injectRangeInputs() remove o container
   no CSR (oldContainer.remove()), mas durante SSR o span fica visível e aumenta a largura
   do chip row, provocando overflow que faz a seta esquerda aparecer sobre o chip Cidade. */
.ref-filter-bar .ref-filter-chips-scroll .ref-range-group > div > span {
  display: none !important;
}

/* Wrapper do painel — portalizado em document.body (JS-9) */
.ref-chip-panel {
  display: none;
  position: fixed;
  z-index: 9999;
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-border, #E0E4EA);
  border-radius: 6px;
  box-shadow: var(--shadow-elevated, 0 4px 20px rgba(0,0,0,0.12));
  padding: var(--space-4, 16px);
  min-width: 220px;
}

/* Painel aberto — classe gerenciada por JS (não depende de ancestral) */
.ref-chip-panel.is-panel-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Range panel: mais largo */
.ref-chip-panel.is-panel-open:has(.ref-range-wrapper),
.ref-chip-panel.is-panel-open:has(.ref-range-inputs) {
  min-width: 280px;
}

/* Reexibir conteúdo dentro do painel aberto */
.ref-chip-panel.is-panel-open .ref-checkbox-grid,
.ref-chip-panel.is-panel-open .ref-text-input {
  display: block;
}

/* 
 * RANGE (Preço e Área) 
 * Oculta os slots do slider permanentemente. Mantém .ref-range-wrapper apenas para grid
 */
.ref-chip-panel.is-panel-open .ref-range-wrapper {
  display: block;
}

.ref-chip-panel.is-panel-open input[type="range"],
.ref-chip-panel.is-panel-open .ref-range-track-bg,
.ref-chip-panel.is-panel-open .ref-range-track-fill,
/* Força sumiço se gerado sem wrapper por conflito */
.ref-filter-chips-scroll input[type="range"],
.ref-filter-chips-scroll .ref-range-track-bg,
.ref-filter-chips-scroll .ref-range-track-fill {
  display: none !important;
}

/* Estilização base do painel de range para abrigar inputs */
.ref-range-wrapper {
  margin-top: var(--space-2);
}

/* Container flex flex-row para os min/max injetados/apresentados */
.ref-range-inputs-container {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Estilização individual de cada lado do range */
.ref-range-input-col {
  flex: 1;
}

.ref-range-input-label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.ref-text-input {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  height: auto !important;
  width: 100% !important;
  font-size: 13px !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  background-color: var(--color-white) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  /* Remove as setinhas de number input no Chrome/Edge/Safari */
  -moz-appearance: textfield;
}

.ref-text-input::-webkit-outer-spin-button,
.ref-text-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ref-text-input:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* Footer dos botões — row lado a lado */
.ref-filter-bar .ref-filter-chips-scroll .ref-chip-panel .ref-chip-panel__footer,
body > .ref-chip-panel .ref-chip-panel__footer {
  display: flex;
  gap: var(--space-2);
}

/* Botões dentro do painel */
.ref-chip-panel.is-panel-open .ref-btn-clear-chip,
.ref-chip-panel.is-panel-open .ref-btn-apply-inline,
.ref-chip-panel.is-panel-open .ref-btn-escolher {
  display: block;
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-base);
  cursor: pointer;
  text-align: center;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

/* Estilo botão Limpar */
.ref-chip-panel.is-panel-open .ref-btn-clear-chip {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.ref-chip-panel.is-panel-open .ref-btn-clear-chip:hover {
  background-color: var(--color-bg-light);
}

/* Estilo botão Aplicar / Escolher */
.ref-chip-panel.is-panel-open .ref-btn-apply-inline,
.ref-chip-panel.is-panel-open .ref-btn-escolher {
  background-color: var(--color-primary);
  border: none;
  color: var(--color-white);
}

.ref-chip-panel.is-panel-open .ref-btn-apply-inline:hover,
.ref-chip-panel.is-panel-open .ref-btn-escolher:hover {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   13-B. CHECKBOX CUSTOM STYLING
   appearance:none + ::after manual — accent-color é sobrescrito pelo Tailwind (BUG-6)
   ═══════════════════════════════════════════════════════════════ */

.ref-filter-bar input[type="checkbox"],
aside#ref-mobile-modal input[type="checkbox"] { /* [v1.0.54] .ref-mobile-modal-inner nunca existiu no HTML do cockpit */
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.ref-filter-bar input[type="checkbox"]:checked,
aside#ref-mobile-modal input[type="checkbox"]:checked { /* [v1.0.54] idem */
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ref-filter-bar input[type="checkbox"]:checked::after,
aside#ref-mobile-modal input[type="checkbox"]:checked::after { /* [v1.0.54] idem */
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Labels de checkbox dentro do dropdown — :has(input[type="checkbox"]) (fix BUG-3) */
.ref-chip-panel .ref-checkbox-grid .ref-checkbox-label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background-color: transparent !important;
  gap: var(--space-2) !important;
  padding: var(--space-1) var(--space-2) !important;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.ref-chip-panel .ref-checkbox-grid .ref-checkbox-label:has(input[type="checkbox"]):hover {
  background-color: var(--color-bg-light) !important;
}

/* ═══════════════════════════════════════════════════════════════
   13-C. RADIO PILLS — Quartos / Suítes / Vagas / Banheiros
   Mesmo container (.ref-checkbox-grid) que checkbox — diferenciado
   via input[type="radio"] vs input[type="checkbox"] filho (BUG-3)
   ═══════════════════════════════════════════════════════════════ */

/* Layout column para checkbox (lista vertical) */
.ref-chip-panel.is-panel-open .ref-checkbox-grid:has(input[type="checkbox"]) {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-1);
}

/* Layout row para radio (pills lado a lado) */
.ref-chip-panel.is-panel-open .ref-checkbox-grid:has(input[type="radio"]) {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Ocultar o input radio — o visual é o label inteiro */
.ref-chip-panel .ref-checkbox-grid input[type="radio"] {
  display: none;
}

/* Pill inativo — SOMENTE para radio */
.ref-chip-panel .ref-checkbox-grid .ref-checkbox-label:has(input[type="radio"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-white) !important;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.ref-chip-panel .ref-checkbox-grid .ref-checkbox-label:has(input[type="radio"]):hover {
  background-color: var(--color-bg-light) !important;
  border-color: var(--color-text-muted) !important;
}

/* Pill ativo — .is-active adicionado pelo plugin */
.ref-chip-panel .ref-checkbox-grid .ref-checkbox-label.is-active:has(input[type="radio"]) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}


/* ═══════════════════════════════════════════════════════════════
   13-D. TÍTULOS DE PAINEL + INPUTS DE TEXTO (RANGE)
   ═══════════════════════════════════════════════════════════════ */

/* Título do painel — injetado por JS-7 */
.ref-chip-panel__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Container dos campos de texto (range) — injetado por JS-8 */
.ref-range-inputs {
  display: flex;
  gap: var(--space-3);
}

.ref-range-input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.ref-range-input-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.ref-chip-panel .ref-range-input-text {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-white);
  text-align: left;
  outline: none;
  box-sizing: border-box;
}

.ref-chip-panel .ref-range-input-text:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(35, 31, 92, 0.12);
}


/* ═══════════════════════════════════════════════════════════════
   14. BOTÕES FIXOS DIREITA — cockpit trigger + contato
   A003: wrapper .ref-filter-actions garante especificidade > Hello Elementor
   ═══════════════════════════════════════════════════════════════ */

.ref-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  flex-shrink: 0;
  height: 100%;
}

/* Wrapper do cockpit trigger — neutraliza min-width inline do plugin */
.ref-filter-actions__cockpit-trigger {
  display: flex;
  align-items: center;
}

/* Override visual do botão do plugin (inline styles) — usa !important apenas onde necessário */
.ref-filter-actions__cockpit-trigger .ref-cockpit-trigger {
  border-radius: 6px !important;
  min-width: unset !important;
  padding: var(--space-2, 8px) var(--space-4, 16px) !important;
  font-size: var(--font-size-sm, 13px) !important;
  font-family: var(--font-family-base, 'Inter', sans-serif) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2, 8px) !important;
  white-space: nowrap;
  min-height: 36px;
}

/* [v1.0.54] C7 — Ocultar texto do botão cockpit até archive.js inicializar.
   Evita flash do texto estático do PHP (REF Settings) antes do JS escrever
   o valor correto. visibility:hidden preserva o espaço de layout (sem CLS).
   js-ready é adicionado por initFilterCounter() após updateCount() inicial. */
#ref-cockpit-count:not(.js-ready) {
  visibility: hidden;
}

/* Botão Contato (A003: seletor wrapper .ref-filter-actions) */
.ref-filter-actions .ref-filter-actions__btn-contato {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-5, 20px);
  background-color: var(--color-teal, #008797);
  color: var(--color-white, #FFFFFF);
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  font-family: var(--font-family-base, 'Inter', sans-serif);
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  transition: background-color var(--transition-fast, 150ms ease);
}

.ref-filter-actions .ref-filter-actions__btn-contato:hover {
  background-color: var(--color-teal-light);
}


/* ═══════════════════════════════════════════════════════════════
   15. COCKPIT — aside#ref-mobile-modal
   Plugin abre/fecha via classList: .is-open
   Oculto por padrão; visível quando .is-open
   ═══════════════════════════════════════════════════════════════ */

aside#ref-mobile-modal {
  /* Oculto por padrão (A004: não é position:fixed mas o cockpit usa position:fixed internamente) */
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

aside#ref-mobile-modal.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   15-B. COCKPIT INTERIOR — espelha design da filter bar
   [v1.0.54] CSS escopado a aside#ref-mobile-modal (especificidade
   maior que #ref-mobile-modal do inline PHP → !important prevalece).
   Zero alterações em plugin. Não afeta filter bar.
   ═══════════════════════════════════════════════════════════════ */

/* ── SELECT CHIPS (Cidade / Bairro) ──────────────────────────── */

/* Oculta o <label> texto acima do select — o select vira o elemento visual */
/* :has(.ref-select) garante que só atinge grupos de tipo select,
   não os grupos de checkbox (Tipo/Estágio) que ficam no mesmo .ref-group-selects */
aside#ref-mobile-modal .ref-input-group:has(.ref-select) .ref-label {
  display: none !important;
}

/* Select estilizado como chip (estado padrão) */
aside#ref-mobile-modal .ref-input-group .ref-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  padding: 8px 30px 8px 14px !important;
  border: 1px solid var(--color-border, #E0E4EA) !important;
  border-radius: var(--radius-sm, 6px) !important;
  background-color: var(--color-white, #FFFFFF) !important;
  color: var(--color-primary, #231F5C) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font-family-base, 'Inter', sans-serif) !important;
  min-height: 40px !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23231F5C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

/* Select — estado ativo: cidade/bairro selecionado (option ≠ "todos" checked).
   Detecção via :has() puro — sem JS adicional.
   Suporte: Chrome 105+, Firefox 121+, Safari 15.4+ */
aside#ref-mobile-modal .ref-input-group:has(.ref-select option:not([value="todos"]):checked) .ref-select {
  background-color: var(--color-primary, #231F5C) !important;
  color: var(--color-white, #FFFFFF) !important;
  border-color: var(--color-primary, #231F5C) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Select desabilitado (Bairro quando nenhuma cidade está selecionada) */
aside#ref-mobile-modal .ref-input-group .ref-select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── CHECKBOXES (Tipo de Imóvel / Estágio) ───────────────────── */
/* Aparência dos labels de checkbox — igual ao painel da filter bar.
   O checkbox em si já usa o estilo correto via Alteração 3 (correção seletor). */

aside#ref-mobile-modal .ref-checkbox-grid .ref-checkbox-label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background-color: transparent !important;
  gap: var(--space-2, 8px) !important;
  padding: var(--space-1, 4px) var(--space-2, 8px) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text, #374151) !important;
  border-radius: var(--radius-sm, 6px) !important;
  transition: background-color var(--transition-fast, 150ms ease) !important;
}

aside#ref-mobile-modal .ref-checkbox-grid .ref-checkbox-label:has(input[type="checkbox"]):hover {
  background-color: var(--color-bg-light, #F5F7FA) !important;
}

/* ── RADIO PILLS (Quartos / Suítes / Vagas / Banheiros) ─────── */
/* ref-filters.js já adiciona/remove .is-active nesses labels globalmente
   (syncRadioUI + click handler) — funciona em ambos os contextos. */

/* Ocultar radio nativo — o visual é o label inteiro (pill) */
aside#ref-mobile-modal .ref-checkbox-grid--inline input[type="radio"] {
  display: none !important;
}

/* Pill inativo */
aside#ref-mobile-modal .ref-checkbox-grid--inline .ref-checkbox-label:has(input[type="radio"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-full, 9999px) !important;
  border: 1px solid var(--color-border, #E0E4EA) !important;
  background-color: var(--color-white, #FFFFFF) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-primary, #231F5C) !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease) !important;
}

aside#ref-mobile-modal .ref-checkbox-grid--inline .ref-checkbox-label:has(input[type="radio"]):hover {
  background-color: var(--color-bg-light, #F5F7FA) !important;
  border-color: var(--color-text-muted, #6B7280) !important;
}

/* Pill ativo — .is-active adicionado pelo plugin (ref-filters.js) */
aside#ref-mobile-modal .ref-checkbox-grid--inline .ref-checkbox-label.is-active:has(input[type="radio"]) {
  background-color: var(--color-primary, #231F5C) !important;
  border-color: var(--color-primary, #231F5C) !important;
  color: var(--color-white, #FFFFFF) !important;
}

/* ── RANGE INPUTS (Preço / Área) ─────────────────────────────── */
/* Os inputs min/max já existem no HTML renderizado pelo PHP (render_range).
   No cockpit não passam por injectRangeInputs() (JS-8), então ficam como
   números brutos. Apenas CSS para estilizá-los igual à filter bar. */

aside#ref-mobile-modal .ref-range-group .ref-text-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--color-border, #E0E4EA) !important;
  border-radius: var(--radius-sm, 6px) !important;
  background-color: var(--color-white, #FFFFFF) !important;
  color: var(--color-text, #374151) !important;
  font-size: 13px !important;
  font-family: var(--font-family-base, 'Inter', sans-serif) !important;
  text-align: center !important;
  min-height: 36px !important;
}

aside#ref-mobile-modal .ref-range-group .ref-text-input:focus {
  outline: none !important;
  border-color: var(--color-primary, #231F5C) !important;
  box-shadow: 0 0 0 2px rgba(35, 31, 92, 0.12) !important;
}

/* "até" entre os inputs de range */
aside#ref-mobile-modal .ref-range-group > div > span {
  color: var(--color-text-muted, #6B7280) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   16. TOOLBAR DE RESULTADOS — .ref-results-toolbar
   Conta + ordenação acima do grid de cards
   ═══════════════════════════════════════════════════════════════ */

.ref-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* [v1.0.41] padding lateral = gap/2 do grid — alinha com borda dos cards */
  padding: var(--space-4) calc(var(--ref-card-gap, 20px) / 2) var(--space-3);
  gap: var(--space-4);
}

.ref-results-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ref-count-main {
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--color-primary);
}

.ref-count-details {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ref-sort-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ref-sort-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ref-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666680' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text);
  cursor: pointer;
}

.ref-sort-select:focus {
  outline: none;
  border-color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════
   17. BREADCRUMBS — nav.ref-breadcrumbs
   ═══════════════════════════════════════════════════════════════ */

/* [v1.0.26] padding zerado — a .ref-breadcrumb-bar já controla altura e alinhamento */
.ref-breadcrumbs {
  display: flex;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: 0;
  /* [v1.0.42] neutraliza margin-bottom:20px de origem externa (JetEngine/Elementor)
     que deslocava o breadcrumb 10px acima do centro da bar (Puppeteer: centerDiff=10px) */
  margin-bottom: 0;
  flex-wrap: wrap;
}

.ref-breadcrumbs a {
  color: var(--color-blue-link);
  text-decoration: none;
}

.ref-breadcrumbs a:hover {
  text-decoration: underline;
}

.ref-breadcrumbs__current {
  color: var(--color-text-muted);
}

/* Separador: substitui » do plugin por › (igual ao separador da single) */
body.ref-page-archive .ref-breadcrumbs__sep {
  font-size: 0;
}
body.ref-page-archive .ref-breadcrumbs__sep::after {
  content: '›';
  font-size: 0.875rem;
  color: var(--color-text-muted);
  vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════
   18. MOBILE — overrides Parte 2
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Toolbar de resultados: empilha em mobile */
  .ref-results-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }


}


/* ═══════════════════════════════════════════════════════════════
   19. GRID ITEMS — min-width para tracks 1fr iguais
   [v1.0.25] Seções 20-30 removidas — plugin gerencia todo CSS dos cards.
   Este único override impede que o min-content do item force track 1
   maior que 1fr (causava colunas desiguais: 349px / 227px / 227px).
   ═══════════════════════════════════════════════════════════════ */

.ref-archive-grid-col .jet-listing-grid__item {
  min-width: 0;
}


/* [v1.0.25] Seções 20-30 removidas.
   O plugin (ref-grid v8.0.128+) gerencia todo o CSS visual dos cards
   via container queries. REF Settings (gap, radius, padding) agora
   funcionam corretamente sem conflito com archive.css. */


/* ═══════════════════════════════════════════════════════════════
   20. FAVORITOS — page-favoritos.php
   Escopado em body.ref-page-favoritos — não afeta archive nem home.
   Toolbar (.ref-results-toolbar) herda estilos da Seção 16 — sem CSS adicional.
   ═══════════════════════════════════════════════════════════════ */

/* Layout principal */
body.ref-page-favoritos .ref-favoritos-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Cabeçalho */
body.ref-page-favoritos .ref-favoritos-header {
  padding: 40px 0 28px;
}

body.ref-page-favoritos .ref-favoritos-header__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--ref-card-title-color, #231F5C);
  margin: 0 0 8px;
  line-height: 1.2;
}

body.ref-page-favoritos .ref-favoritos-header__sub {
  font-size: 14px;
  color: var(--ref-tipo-color, #008797);
  margin: 0;
}

/* Estado vazio */
body.ref-page-favoritos .ref-favoritos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 48px 16px 32px;
  text-align: center;
}

body.ref-page-favoritos .ref-favoritos-empty__icon {
  color: var(--ref-card-title-color, #231F5C);
  opacity: 0.18;
  margin-bottom: 24px;
}

body.ref-page-favoritos .ref-favoritos-empty h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ref-card-title-color, #231F5C);
  margin: 0 0 12px;
}

body.ref-page-favoritos .ref-favoritos-empty p {
  font-size: 14px;
  color: var(--ref-tipo-color, #008797);
  margin: 0 0 32px;
  max-width: 360px;
  line-height: 1.6;
}

body.ref-page-favoritos .ref-favoritos-empty__btn {
  display: inline-block;
  background-color: var(--ref-card-title-color, #231F5C);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--ref-radius, 10px);
  text-decoration: none;
  transition: background-color 0.2s;
}

body.ref-page-favoritos .ref-favoritos-empty__btn:hover {
  background-color: var(--ref-tipo-color, #008797);
}

/* Oculta toolbar interno gerado por render_query() — o nosso já está acima */
body.ref-page-favoritos .ref-results-toolbar + .ref-results-toolbar {
  display: none;
}

/* Aviso localStorage — estado com itens e estado vazio */
body.ref-page-favoritos .ref-favoritos-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 32px;
  color: #666680;
}

body.ref-page-favoritos .ref-favoritos-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

body.ref-page-favoritos .ref-favoritos-notice p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  color: #666680;
}