/* ============================================================
   CASAPÊ — mapa dos imóveis (Leaflet). Carrossel EM CIMA, mapa
   exposto EMBAIXO; a base do carrossel MESCLA no topo do mapa.
   Move o mapa → o carrossel filtra pela área visível em tempo real.
   ============================================================ */

/* ============================================================
   FILTROS — pill flutuante + painel que desce do topo (auto-hide)
   Base de UX: 21st.dev "Flexi Filter Table" (barra multi-campo com
   busca + dropdowns), portada pra vanilla no tema Casapê.
   ============================================================ */

/* pill gatilho — topo-direito, simétrico ao badge de contagem */
.filtersToggle{
  position:absolute; top:14px; right:14px; z-index:650;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:var(--cream); border:none; cursor:pointer;
  padding:10px 17px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55);
  transition:transform .3s var(--ez), opacity .3s var(--ez), background .3s var(--ez);
}
.filtersToggle:hover{ transform:translateY(-2px); background:#000; }
.filtersToggle svg{ width:17px; height:17px; }
.listing--map.filters-open .filtersToggle{ opacity:0; pointer-events:none; transform:translateY(-8px); }

/* painel — card sutil ancorado SÓ do lado direito do mapa; campos empilhados.
   Desliza de leve pela direita; deixa o mapa e o zoom livres à esquerda. */
.filters{
  position:absolute; top:14px; right:14px; left:auto; z-index:640; margin:0;
  width:min(320px, calc(100% - 28px));
  max-height:calc(100% - 28px); overflow-y:auto;
  background:rgba(255,253,248,.97);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 30px 60px -28px rgba(41,33,16,.6);
  padding:14px 16px 16px;
  transform:translateX(14px); opacity:0; pointer-events:none;
  transition:transform .34s var(--ez), opacity .3s var(--ez);
}
.listing--map.filters-open .filters{ transform:translateX(0); opacity:1; pointer-events:auto; }

/* no modo cards o fundo atrás são fotos coloridas → card sólido pra manter
   os campos legíveis (no modo mapa fica o translúcido sobre o mapa claro) */
.listing--map:not(.map-on) .filters{
  background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* cabeçalho do card (título + fechar) */
.filters__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.filters__head b{ font-family:"Fraunces",serif; font-weight:500; font-size:16px; color:var(--ink); letter-spacing:.01em; }
.filters__close{ display:inline-flex; padding:5px; border:none; background:none; color:var(--ink-soft); cursor:pointer; border-radius:9px; transition:color .2s var(--ez), background .2s var(--ez); }
.filters__close:hover{ color:var(--ink); background:var(--cream-2); }
.filters__close svg{ width:18px; height:18px; }

/* campos empilhados em coluna, ocupando a largura do card */
.filters__in{ flex-direction:column; align-items:stretch; gap:12px; }
.filters .field{ width:100%; }
.filters .field select, .filters .field input{ width:100%; min-width:0; }
.filters .btn-buscar{ width:100%; justify-content:center; margin-left:0; margin-top:2px; }
.filters .chip-clear{ align-self:center; }

/* contagem de imóveis FLUTUANDO sobre o mapa — badge no canto sup. esquerdo */
.area-count{
  position:absolute; top:14px; left:14px; z-index:600; margin:0;
  pointer-events:none;
  font-family:"Fraunces",serif; font-weight:400; letter-spacing:0; line-height:1.1;
  font-size:clamp(1.05rem, 1.9vw, 1.55rem); color:var(--ink);
  background:rgba(247,241,230,.86);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  padding:9px 17px; border-radius:999px; border:1px solid var(--line);
  box-shadow:0 14px 34px -20px rgba(41,33,16,.55);
}
.area-count b{ font-weight:600; color:var(--gold-deep); }

/* ============================================================
   DOIS MODOS, alternados pelo toggle "Ver no mapa":
   • padrão (mapa OFF): fileira de cards; mapa oculto.
   • .map-on: mapa exposto; a fileira sobe da base ao escolher um pino.
   ============================================================ */
.listing--map{ position:relative; }
.listing--map .mapwrap{ display:none; }          /* mapa oculto no modo padrão */

/* ============================================================
   MODO MAPA (.map-on)
   ============================================================ */
.listing--map.map-on .mapwrap{
  display:block; position:absolute; inset:0; z-index:0; background:var(--cream-2);
}
.listing--map.map-on #mapa{ width:100%; height:100%; z-index:0; background:var(--cream-2); }
.mapwrap__hint{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  z-index:500; pointer-events:none;
  background:rgba(26,22,14,.82); color:var(--cream);
  font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:7px 14px; border-radius:999px; backdrop-filter:blur(6px);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6);
  opacity:0; transition:opacity .4s var(--ez);
}
.listing--map.map-on .mapwrap.is-ready .mapwrap__hint{ opacity:1; }
.listing--map.map-on.cf-open .mapwrap__hint{ opacity:0; }   /* some quando a fileira abre */

/* fileira na BASE, escondida por padrão; sobe (slide) quando uma casa é
   selecionada (.cf-open). Os cards flutuam sobre o mapa.
   No mapa os cards são HORIZONTAIS (largos e baixos): ocupam pouca altura,
   sobra mais mapa; ~5 à vista. */
.listing--map.map-on .cf{
  position:absolute; bottom:0; left:0; right:0; z-index:400;
  --cf-card: clamp(200px, 27vw, 240px);
  --cf-gap: 16px;
  padding:0;
  pointer-events:none;                 /* os vãos deixam o mapa passar */
  transform:translateY(120%); opacity:0;
  transition:transform .44s var(--ez), opacity .4s var(--ez);
}
.listing--map.map-on.cf-open .cf{ transform:translateY(0); opacity:1; }
.listing--map.map-on .cf__head{ display:none; }              /* sem setas sobre o mapa */
.listing--map.map-on .cf__row{ padding:10px calc(50% - var(--cf-card) / 2) 12px; pointer-events:auto; }
.listing--map.map-on .cf-card{ pointer-events:auto; }

/* no mapa: card VERTICAL compacto (foto em cima), pra ocupar pouca altura */
.listing--map.map-on .cf-card__ph{ aspect-ratio:16/10; }
.listing--map.map-on .cf-card__body{ padding:10px 13px 12px; }
.listing--map.map-on .cf-card__bairro{ font-size:16px; }
.listing--map.map-on .cf-card__cidade{ font-size:11.5px; }
.listing--map.map-on .cf-card__feats{ margin-top:5px; gap:11px; font-size:11.5px; }
.listing--map.map-on .cf-card__feats svg{ width:14px; height:14px; }
.listing--map.map-on .cf-card__price{ margin-top:6px; gap:8px; }
.listing--map.map-on .cf-card__area{ font-size:12px; }
.listing--map.map-on .cf-card__val{ font-size:16.5px; }
/* bairro em 1 linha no mapa → altura do card consistente */
.listing--map.map-on .cf-card__bairro{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* com o carrossel aberto, o toggle "Ver no mapa" sai do centro-base (senão cobre
   o preço do card central) pro canto inferior-esquerdo, que está livre */
.listing--map.cf-open + .mapToggle{ left:16px; right:auto; transform:none; }
.listing--map.cf-open + .mapToggle:hover{ transform:translateY(-2px); }

/* o card central (sincronizado com o pino destacado) ganha realce */
.listing--map.map-on .cf-card.is-center .cf-card__inner{
  box-shadow:0 26px 54px -22px rgba(41,33,16,.62);
}

/* ============================================================
   TOGGLE "Ver no mapa" — pill flutuante no rodapé-centro da tela
   ============================================================ */
.mapToggle{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:1200; display:inline-flex; align-items:center; gap:11px;
  background:var(--ink); color:var(--cream); border:none; cursor:pointer;
  padding:11px 10px 11px 18px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55);
  transition:transform .3s var(--ez), background .3s var(--ez);
}
.mapToggle:hover{ transform:translateX(-50%) translateY(-2px); }
.mapToggle svg{ width:17px; height:17px; }
.mapToggle__sw{
  width:36px; height:21px; border-radius:999px; background:rgba(255,255,255,.24);
  position:relative; transition:background .3s var(--ez); flex:none;
}
.mapToggle__sw::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .3s var(--ez);
}
.mapToggle[aria-pressed="true"] .mapToggle__sw{ background:var(--gold); }
.mapToggle[aria-pressed="true"] .mapToggle__sw::after{ transform:translateX(15px); }

/* ---------- pino de preço ---------- */
.cf-pin-wrap{ background:transparent !important; border:0 !important; }
.cf-pin{
  position:absolute; bottom:0; left:0;
  transform:translate(-50%, -100%);
  display:inline-block; white-space:nowrap;
  background:var(--ink); color:var(--cream);
  font:600 12px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.55);
  cursor:pointer;
  transition:background .2s var(--ez), transform .12s var(--ez);
}
.cf-pin::after{                         /* biquinho apontando o ponto */
  content:""; position:absolute; left:50%; bottom:-5px;
  width:9px; height:9px; background:inherit;
  border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  transform:translateX(-50%) rotate(45deg);
}
.cf-pin:hover{ transform:translate(-50%,-108%); }
.cf-pin.is-on{
  background:var(--gold-deep); color:#fff;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 12px 26px -8px rgba(120,86,20,.7);
}
.cf-pin.is-on{ z-index:1000; }

/* ---------- popup (mini-card) ---------- */
.leaflet-popup.cf-pop-wrap .leaflet-popup-content-wrap{
  border-radius:14px; padding:0; overflow:hidden;
  box-shadow:0 24px 50px -22px rgba(41,33,16,.7);
}
.leaflet-popup.cf-pop-wrap .leaflet-popup-content{ margin:0; width:220px !important; }
.leaflet-popup.cf-pop-wrap .leaflet-popup-tip{ background:#fff; }
.cf-pop img{ width:100%; height:118px; object-fit:cover; display:block; }
.cf-pop__b{ padding:11px 13px 13px; }
.cf-pop__tipo{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--gold-deep); margin-bottom:5px;
}
.cf-pop__price{ font-family:"Fraunces", serif; font-weight:500; font-size:18px; color:var(--ink); letter-spacing:-.01em; }
.cf-pop__price .mes{ font-size:.62em; font-weight:600; color:var(--ink-soft); }
.cf-pop__loc{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 11px; }
.cf-pop__cta{
  display:inline-block; background:var(--ink); color:var(--cream);
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600;
  transition:background .25s var(--ez);
}
.cf-pop__cta:hover{ background:#000; }

/* controles do Leaflet no tom do site */
.leaflet-bar a{ color:var(--ink); }
.leaflet-bar a:hover{ color:var(--gold-deep); }
.leaflet-container{ font-family:"Plus Jakarta Sans", system-ui, sans-serif; }

@media (max-width:640px){
  .listing--map.map-on .cf{ --cf-card: clamp(200px, 60vw, 250px); }
  .mapToggle{ bottom:16px; }
  .area-count{ top:10px; left:10px; padding:7px 13px; font-size:clamp(.95rem, 4vw, 1.15rem); }
  .filtersToggle{ top:10px; right:10px; padding:9px 14px; }
  .filters{ top:10px; right:10px; width:calc(100% - 20px); padding:13px 14px 15px; }
}