/* ═══════════════════════════════════════════════════════════════════════════
   FAVORITOS DO VISITANTE (sfav-*) — vale para todos os modelos de site

   "Salvar imóvel" sem cadastro: a lista mora no `localStorage` do navegador de
   quem visita. Nada disso toca o banco, e por isso funciona igual em todos os
   modelos sem nenhuma configuração do corretor.

   O visual aqui é **de propósito neutro** (pastilha escura + coração vermelho),
   e não pintado com a cor da marca: o coração vermelho é a convenção universal
   de "salvo", e uma marca clara (amarelo, bege) deixaria o estado ligado
   invisível. Quem usa a cor do corretor é a página /imoveis-salvos/, que tem
   contexto de template para calcular contraste.

   O botão é INJETADO por `assets/js/favoritos.js` — os modelos não precisam
   escrever nada. Ver docs/favoritos-do-visitante.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Coração sobre a foto do imóvel ──
   O canto é escolhido em tempo de execução (ver `cantoLivre` no JS): cada
   modelo enfeita esse espaço do seu jeito, e o mesmo modelo chega a mudar de
   canto entre a home e o catálogo. As quatro classes abaixo são os destinos
   possíveis; o padrão (sem classe) é o canto superior direito. */
.sfav-btn {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 6;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #55585f;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    transition: transform .2s ease, color .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.sfav-btn:hover { transform: scale(1.1); color: #e0245e; }
.sfav-btn.is-on { color: #e0245e; }
.sfav-btn.is-on i { animation: sfavPulso .34s ease; }
.sfav-btn:focus-visible { outline: 3px solid #e0245e; outline-offset: 2px; }

@keyframes sfavPulso {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* td = topo/direita · be = baixo/esquerda · te = topo/esquerda · bd = baixo/direita */
.sfav-btn--td { top: .7rem;  right: .7rem; bottom: auto;  left: auto; }
.sfav-btn--be { top: auto;   right: auto;  bottom: .7rem; left: .7rem; }
.sfav-btn--te { top: .7rem;  right: auto;  bottom: auto;  left: .7rem; }
.sfav-btn--bd { top: auto;   right: .7rem; bottom: .7rem; left: auto; }

/* ── Botão "Salvar" da página do imóvel ──
   Injetado ao lado de "Compartilhar", clonando as classes daquele botão para
   herdar o visual de cada modelo. Só o estado ligado é pintado aqui. */
.sfav-acao.is-on { color: #e0245e !important; border-color: #e0245e !important; }

/* ── Pastilha flutuante "Salvos" ──
   Só aparece depois que o visitante salva o primeiro imóvel. Fica embaixo à
   ESQUERDA porque o canto direito já é disputado pelo botão de voltar ao topo
   e pelo widget de atendimento. */
.sfav-flutuante {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 900;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    border-radius: 999px;
    background: #16181d;
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .65);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sfav-flutuante.is-visivel { display: inline-flex; }
.sfav-flutuante:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .75); }
.sfav-flutuante i { color: #e0245e; font-size: .95rem; }
.sfav-flutuante__n {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e0245e;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* No celular a pastilha sobe, para não cobrir barras fixas inferiores. */
@media (max-width: 900px) {
    .sfav-flutuante {
        left: 14px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        padding: .62rem .95rem;
        font-size: .82rem;
    }
    /* A página do imóvel do modelo 6 (`pd-page`) tem barra de conversão fixa no
       rodapé; a pastilha sobe para não encostar nela. */
    body.pd-page .sfav-flutuante {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

/* ── Aviso do limite ── */
.sfav-aviso {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    z-index: 9998;
    max-width: min(92vw, 420px);
    padding: .85rem 1.15rem;
    border-radius: 14px;
    background: #16181d;
    color: #fff;
    font-family: inherit;
    font-size: .86rem;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}

.sfav-aviso.is-visivel { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .sfav-btn, .sfav-flutuante, .sfav-aviso { transition: none; }
    .sfav-btn.is-on i { animation: none; }
}

@media print {
    .sfav-btn, .sfav-flutuante, .sfav-aviso, .sfav-acao { display: none !important; }
}