/* Tokens de altura do chrome da página. Antes eram consumidos sem nunca terem sido definidos
   em lugar nenhum do projeto, então sempre caíam no fallback do var(). */
:root {
    --header-height: 70px;
    --filters-height: 62px;
    --mapa-mobile-altura: 42vh;   /* altura do mapa fixo no topo, no mobile */
}

/* Layout split - lista 55%, mapa 45% (Airbnb-like) */
#mapa-layout {
    display: flex;
    height: calc(100dvh - var(--header-height) - var(--filters-height));
    overflow: hidden;
}
#mapa-lista {
    width: 55%;
    overflow-y: auto;
    padding: 12px 16px;
    border-right: 1px solid #e8ebf0;
}
#mapa-container { width: 45%; position: relative; }
#map { width: 100%; height: 100%; }

/* Em telas grandes o mapa GANHA espaço, não perde: é a página do mapa.
   A lista continua confortável — a 2560px sobram ~1150px para 3 cards de ~380px. */
@media (min-width: 1200px) {
    #mapa-lista { width: 50%; }
    #mapa-container { width: 50%; }
}
@media (min-width: 1600px) {
    #mapa-lista { width: 45%; }
    #mapa-container { width: 55%; }
}

/* ===== Filter Bar ===== */
.mapa-filters-bar {
    position: sticky; top: 0; z-index: 999;
    background: #fff;
    border-bottom: 1px solid #e8ebf0;
    box-shadow: 0 1px 8px rgba(8, 18, 43, .06);
}
.mapa-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

/* Filter groups: label + input */
.mapa-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mapa-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    margin: 0;
}
.mapa-filter-select {
    width: auto;
    min-width: 120px;
    font-size: 13px;
    border-radius: 8px;
    border-color: #e0e3e8;
    padding: 6px 28px 6px 12px;
    color: #08122b;
    background-color: #f8f9fb;
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
}
.mapa-filter-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(241, 76, 39, .12);
    outline: none;
}

/* Range inputs */
.mapa-filter-range {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mapa-filter-input {
    width: 80px;
    font-size: 13px;
    border-radius: 8px;
    border-color: #e0e3e8;
    padding: 6px 10px;
    color: #08122b;
    background-color: #f8f9fb;
    transition: border-color .2s, box-shadow .2s;
}
.mapa-filter-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(241, 76, 39, .12);
    outline: none;
}
.mapa-filter-input::placeholder {
    color: #b0b5be;
    font-size: 12px;
}
.mapa-filter-sep {
    color: #c5c5c5;
    font-size: 12px;
    user-select: none;
}

/* Chip pills for checkboxes */
.mapa-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.mapa-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1.5px solid #dde1e7;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #5a6377;
    cursor: pointer;
    user-select: none;
    transition: all .2s ease;
    background: #fff;
    margin: 0;
}
.mapa-filter-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.mapa-filter-chip:has(:checked) {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.mapa-filter-check {
    display: none;
}

/* Clear button */
.mapa-filter-clear {
    border: none;
    background: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all .15s;
    white-space: nowrap;
}
.mapa-filter-clear:hover {
    color: var(--brand);
    background: var(--brand-soft);
}

/* ===== Botão Buscar nesta área ===== */
#btn-buscar-area {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 900; background: #fff; color: #08122b;
    border: 1.5px solid #c5c5c5; border-radius: 20px;
    padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    transition: all .2s ease;
}
#btn-buscar-area:hover {
    background: var(--brand); color: #fff; border-color: var(--brand);
    box-shadow: 0 4px 16px rgba(241, 76, 39, .25);
}

/* ===== Marcadores de preço ===== */
.mapa-marker-preco {
    background: #fff; border: 2px solid #08122b; border-radius: 20px;
    padding: 3px 9px; font-size: 11px; font-weight: 700; color: #08122b;
    white-space: nowrap; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.mapa-marker-preco:hover, .mapa-marker-preco.active {
    background: var(--brand); color: #fff; border-color: var(--brand);
    transform: scale(1.12); z-index: 1000 !important;
}

/* ===== Card destaque bidirecional ===== */
.pc-col.is-active .pc-card {
    box-shadow: 0 0 0 2px var(--brand), 0 8px 24px rgba(0,0,0,.10);
    transform: translateY(-2px);
}

/* ===== Botão "Ver no mapa" no footer do card ===== */
.pc-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1.5px solid #dde1e7;
    border-radius: 6px;
    background: #fff;
    color: #5a6377;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
    box-sizing: border-box;
}
.pc-map-btn .fa {
    font-size: 11px;
    color: var(--brand);
}
.pc-map-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}
.pc-map-btn:active {
    transform: scale(.96);
}
/* Densidade de colunas: a lista ocupa 45-55% da tela, então as classes col-* do Bootstrap
   (calculadas sobre o viewport) deixam os cards estreitos demais. A 1920px, 4 colunas davam
   210px por card. Aqui a escala é calibrada sobre a largura real do painel. */
@media (min-width: 576px) {
    #mapa-cards-grid .pc-col { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 1600px) {
    #mapa-cards-grid .pc-col { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 2400px) {
    #mapa-cards-grid .pc-col { flex: 0 0 25%; max-width: 25%; }
}
/* Card estreito: no footer, mantém só o ícone do botão de mapa */
@media (min-width: 576px) and (max-width: 1599px) {
    .pc-map-btn span { display: none; }
    .pc-map-btn { padding: 5px 8px; }
    .pc-auction-tag { font-size: 10px; padding: 2px 6px; }
}
/* Footer dos cards do mapa: permite wrap em telas estreitas */
#mapa-lista .pc-footer {
    flex-wrap: wrap;
    gap: 4px;
}

/* ===== Popup compacto ===== */
.mapa-popup-card { width: 220px; font-size: 12px; }
.mapa-popup-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px 6px 0 0; }
.mapa-popup-body { padding: 8px 10px; }
.mapa-popup-preco { font-size: 14px; font-weight: 700; color: #08122b; }
.mapa-popup-desc { font-size: 11px; color: #555; margin: 4px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mapa-popup-link {
    display: block; text-align: center; background: var(--brand); color: #fff;
    padding: 5px; border-radius: 4px; font-weight: 600; font-size: 12px;
    text-decoration: none; margin-top: 6px;
}

/* ===== Skeleton ===== */
.mapa-skeleton-card { background: #f0f0f0; border-radius: 10px; height: 100%;
    min-height: 220px; animation: skeletonPulse 1.4s ease-in-out infinite; }
@keyframes skeletonPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ===== Header da lista ===== */
#mapa-lista-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0 12px; border-bottom: 1px solid #eee; margin-bottom: 12px;
    font-size: 13px; color: #555;
}
.mapa-autosearch-toggle { display: inline-flex; gap: 6px; align-items: center;
    font-size: 12px; color: #444; cursor: pointer; user-select: none; }
#mapa-has-more { font-size: 11px; background: #fff5f0; border: 1px solid #fde0d4;
    color: var(--brand); padding: 3px 10px; border-radius: 10px;
    display: inline-block; margin-bottom: 8px; }

/* ===== SEO intro ===== */
.mapa-h1 { font-size: clamp(18px, 3vw, 26px); font-weight: 700; color: #08122b; margin: 0 0 4px; }
.mapa-sub { font-size: 14px; color: #666; margin: 0; max-width: 680px; }

/* ===== Favorite heart on map cards ===== */
#mapa-lista .pc-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(255, 255, 255, .85);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #c5c5c5;
    transition: all .2s ease;
    backdrop-filter: blur(4px);
}
#mapa-lista .pc-fav:hover {
    color: var(--brand);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
#mapa-lista .pc-fav[data-value="true"] {
    color: var(--brand);
}

/* ===== Mobile: lista fullscreen + botão flutuante ===== */
@media (max-width: 768px) {
    /* Map-first: numa página chamada "Mapa", o mapa precisa estar visível no load.
       Antes ele nascia display:none e só aparecia depois de tocar no botão flutuante. */
    #mapa-layout { flex-direction: column; height: auto; overflow: visible; }
    /* order: no DOM a lista vem antes do mapa (bom para SEO/leitor de tela); no mobile
       invertemos visualmente para o mapa ficar no topo, sem mexer na ordem do HTML. */
    #mapa-container {
        order: -1;
        width: 100%;
        height: var(--mapa-mobile-altura);
        display: block;
        position: sticky;
        top: var(--filters-height);
        z-index: 500;
    }
    #mapa-lista { order: 0; width: 100%; border-right: none; overflow-y: visible; }

    .mapa-filter-row { gap: 6px; padding: 6px 0; }
    .mapa-filter-group { width: 100%; }
    .mapa-filter-select { flex: 1; min-width: 0; }
    .mapa-filter-input { width: 60px; }
    .mapa-filter-chip { font-size: 11px; padding: 3px 10px; }

    /* O botão agora EXPANDE o mapa para tela cheia (não é mais "revelar"). */
    body.mapa-show-map #mapa-container {
        position: fixed; inset: 0; height: 100dvh; z-index: 1100;
    }
    body.mapa-show-map #mapa-lista, body.mapa-show-map .mapa-filters-bar { display: none; }
}
#btn-mobile-toggle-map {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 1200; background: #08122b; color: #fff; border: 0;
    border-radius: 24px; padding: 10px 20px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ===== Modo teaser (visitante sem sessao / plano sem mapa) =====
   Reusa .pc-register e .ch-cta-main de style-listagem-cidade.css, que a view ja carrega. */
#mapa-cta-slot:empty, #mapa-teaser-cidades:empty { display: none; }

.mapa-cta { max-width: none; margin: 4px 0 16px; }
.mapa-cta p { margin-bottom: 12px; }
.mapa-cta .mapa-cta-btn { cursor: pointer; }

.mapa-teaser-h2 {
    font-size: 15px; font-weight: 700; color: #08122b;
    margin: 4px 0 10px; padding-top: 4px;
}
.mapa-teaser-lista { list-style: none; padding: 0; margin: 0; }
.mapa-teaser-lista .cx-top-item { margin-bottom: 6px; }
.mapa-teaser-lista .cx-top-item a {
    display: block; padding: 8px 12px; border-radius: 8px;
    background: var(--stat-bg, #f8f9fb); border: 1px solid var(--stat-border, #e8ebf0);
    color: #30426a; font-size: 13px; text-decoration: none;
    transition: border-color .15s, background .15s;
}
.mapa-teaser-lista .cx-top-item a:hover {
    border-color: var(--brand); background: var(--brand-soft);
}
.mapa-teaser-lista .cx-top-item strong { color: var(--brand); font-weight: 700; }

/* Filtros desabilitados no teaser: sinaliza que dependem de acesso. */
body.mapa-modo-teaser .mapa-filter-row { opacity: .55; }
body.mapa-modo-teaser .mapa-filter-select,
body.mapa-modo-teaser .mapa-filter-input,
body.mapa-modo-teaser .mapa-filter-chip { cursor: not-allowed; }