/* =====================================================================
   LocaLazer — linguagem visual das seções do site público
   ---------------------------------------------------------------------
   Carregado depois do styles.css. Reúne o que cada seção vinha
   reinventando: cabeçalho, trilho de cards, card de imóvel/serviço,
   chips e estado vazio.

   Prefixo .sec- para seção e .pcard para o card.
   ===================================================================== */

/* Cor, em duas regras:
   - Verde (--site-accent): marca, navegação, links, busca e estado selecionado.
   - Laranja (--site-brand): só ação de conversão ("Reservar", "Confirmar
     reserva") e peças promocionais. Se tudo é laranja, nada chama atenção. */
:root {
    --site-ink: #222222;
    --site-muted: #717171;
    --site-faint: #9a9a9a;
    --site-line: #e6e6e6;
    --site-soft: #f7f7f7;
    --site-brand: #f4623a;
    --site-brand-600: #e04d25;
    --site-green: #438F6A;
    --site-green-soft: #EEF6F2;
    --site-accent: var(--site-green);
    /* para texto: o verde base fica abaixo do contraste AA em letra pequena */
    --site-accent-600: #357456;
    --site-accent-700: #2b5f47;
    --site-accent-soft: var(--site-green-soft);
    --site-radius: 14px;
}

/* =====================================================================
   SEÇÃO — mesmo ritmo vertical e mesmo cabeçalho em toda a home
   ===================================================================== */

.sec {
    padding: 56px 0 24px;
}

.sec.sec--tint {
    background: var(--site-soft);
    padding-bottom: 56px;
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.sec-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--site-ink);
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.sec-sub {
    margin: 0;
    color: var(--site-muted);
    font-size: .95rem;
}

.sec-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--site-accent-600);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.sec-all:hover { color: var(--site-accent-700); }

/* =====================================================================
   TRILHO — grade no desktop, carrossel deslizável no celular
   ===================================================================== */

.rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.rail--4 { grid-template-columns: repeat(4, 1fr); }

.rail > li,
.rail-item { min-width: 0; }

@media (max-width: 991.98px) {
    .rail,
    .rail--4 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 767.98px) {
    /* Vira trilho horizontal com o próximo card aparecendo pela metade,
       que é o que sinaliza "dá para deslizar".

       A sangria sai do gutter do .container: com um valor fixo sobram
       pixels de cada lado e a página inteira ganha rolagem horizontal. */
    .rail,
    .rail--4 {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(-.5 * var(--bs-gutter-x, 1.5rem));
        padding-inline: calc(.5 * var(--bs-gutter-x, 1.5rem));
        /* O snap alinha o card à borda da área de rolagem e ignora o padding:
           sem isto o trilho já abria rolado e o 1º card colava na tela,
           desalinhado do título da seção. */
        scroll-padding-inline: calc(.5 * var(--bs-gutter-x, 1.5rem));
        padding-bottom: 8px;
    }

    .rail::-webkit-scrollbar,
    .rail--4::-webkit-scrollbar { display: none; }

    .rail > li,
    .rail-item {
        flex: 0 0 76%;
        scroll-snap-align: start;
    }

    .rail--4 > li,
    .rail--4 .rail-item { flex-basis: 62%; }
}

@media (max-width: 380px) {
    .rail > li,
    .rail-item { flex-basis: 84%; }

    .rail--4 > li,
    .rail--4 .rail-item { flex-basis: 70%; }
}

/* =====================================================================
   NAVEGAÇÃO INFERIOR (celular)
   ---------------------------------------------------------------------
   Mora aqui, e não num <style> dentro do partial da navbar: já se perdeu
   uma vez numa reescrita daquele bloco, e sem CSS o markup vira uma lista
   de links solta no topo da página.
   ===================================================================== */

.site-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* abaixo do convite de instalação (1052) e da navbar (1040) */
    z-index: 1035;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--site-line);
    /* laterais: no iPhone deitado a barra passa por baixo do entalhe */
    padding: 6px max(4px, env(safe-area-inset-right)) max(env(safe-area-inset-bottom), 6px) max(4px, env(safe-area-inset-left));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}

.site-bottom-nav .sbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 2px 4px;
    text-decoration: none;
    color: var(--site-muted);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.1;
    transition: color .15s ease;
}

/* A pílula fica só atrás do ícone: o estado ativo sem pintar o bloco todo */
.site-bottom-nav .sbn-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 28px;
    border-radius: 999px;
    transition: background .2s ease, transform .12s ease;
}

.site-bottom-nav .sbn-item:active .sbn-icon { transform: scale(.9); }

/* Entrar/Conta (e Favoritos, para visitante) são botões: abrem painéis, não navegam */
.site-bottom-nav button.sbn-item {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.site-bottom-nav .sbn-item i {
    font-size: 20px;
    line-height: 1;
}

.site-bottom-nav .sbn-item.active {
    color: var(--site-ink);
    font-weight: 700;
}

.site-bottom-nav .sbn-item.active .sbn-icon {
    background: var(--site-accent-soft);
    color: var(--site-accent-600);
}

/* Aba "Conta": a inicial de quem está logado, no lugar do ícone */
.site-bottom-nav .sbn-avatar {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--site-green);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 991.98px) {
    /* Altura das barras de baixo: as abas ou, no detalhe do imóvel, a barra de
       ação que fica no lugar delas (.app-action-bar). As duas medem o mesmo. */
    :root { --bottom-bar-h: 62px; }

    .site-bottom-nav { display: grid; }

    body {
        /* O tema (styles.css) prende o body em height: 100%, a altura da tela:
           o conteúdo transbordava e o padding abaixo ficava no meio da página,
           com o fim do rodapé escondido atrás da barra. */
        height: auto;
        min-height: 100%;
        /* espaço para a barra não cobrir o fim do conteúdo */
        padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
        /* e o que flutua (aviso de cookies, convite do app, toasts) sobe acima dela */
        --llz-bottom-offset: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
    }
}

/* =====================================================================
   BARRA DE AÇÃO (celular)
   ---------------------------------------------------------------------
   Em páginas de detalhe ela ocupa o lugar das abas, como nos apps: preço à
   esquerda, ações à direita. A página inclui a _navbar com
   'bottomNav' => false para as abas não aparecerem junto.
   z-index igual ao das outras barras: modais e painéis passam por cima.
   ===================================================================== */

.app-action-bar { display: none; }

@media (max-width: 991.98px) {
    .app-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
        padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        background: rgba(255, 255, 255, .97);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-top: 1px solid var(--site-line);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    }
}

/* Preço: tocar leva às datas */
.app-action-bar__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: none;
    color: var(--site-ink);
    font-family: inherit;
    line-height: 1.25;
    text-align: left;
}

.app-action-bar__sub,
.app-action-bar__main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-action-bar__sub {
    font-size: .78rem;
    color: var(--site-muted);
}

/* sublinhado: é o convite para escolher ou trocar as datas */
.app-action-bar__link {
    color: var(--site-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.app-action-bar__main {
    font-size: 1.05rem;
    font-weight: 700;
}

.app-action-bar__main small {
    font-size: .8rem;
    font-weight: 400;
    color: var(--site-muted);
}

.app-action-bar__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #25D366;
    color: #fff;
    font-size: 1.25rem;
}

.app-action-bar__icon:hover { color: #fff; }

.app-action-bar__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--site-brand) 0%, #ff8c42 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(244, 98, 58, .28);
}

.app-action-bar__cta:hover { color: #fff; }
.app-action-bar__cta:active { transform: scale(.98); }

/* telas estreitas: o botão cede espaço para "a partir de · Escolher datas" */
@media (max-width: 380px) {
    .app-action-bar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .app-action-bar__cta { padding: 0 16px; }
}

/* =====================================================================
   CELULAR COMO APP: barra do topo e painel Perfil
   ---------------------------------------------------------------------
   Na mesma faixa da navegação inferior (< 992px) o #mainNav sai e entra a
   .app-bar. Na home e na busca ela é a pílula que abre a busca em tela
   cheia; nas outras páginas, voltar + título. Markup em site/partials/_navbar.
   ===================================================================== */

.app-bar { display: none; }

@media (max-width: 991.98px) {
    :root { --app-bar-h: 64px; }

    #mainNav { display: none !important; }

    .app-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1035;
        display: flex;
        align-items: center;
        gap: 10px;
        height: var(--app-bar-h);
        padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
        background: rgba(255, 255, 255, .97);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-bottom: 1px solid transparent;
        transition: transform .25s ease, border-color .2s ease;
    }

    .app-bar.is-scrolled { border-bottom-color: var(--site-line); }

    /* só a de título: some ao descer, volta ao subir */
    .app-bar.is-hidden { transform: translateY(-100%); }
}

.app-bar__brand {
    flex: 0 0 auto;
    display: block;
}

.app-bar__brand img {
    display: block;
    width: 40px;
    height: 40px;
}

/* ---------------------------------------------------- pílula de busca */

.app-pill {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 18px 0 16px;
    border: 1px solid var(--site-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    color: var(--site-ink);
    font-family: inherit;
    text-align: left;
    transition: transform .12s ease;
}

.app-pill:active { transform: scale(.985); }

.app-pill__icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.app-pill__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.app-pill__where,
.app-pill__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-pill__where {
    font-size: .9rem;
    font-weight: 600;
}

.app-pill__meta {
    font-size: .76rem;
    color: var(--site-muted);
}

/* ------------------------------------------------- voltar + título */

.app-bar__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--site-ink);
    font-size: 1.25rem;
    text-decoration: none;
}

.app-bar__icon:hover { color: var(--site-ink); }
.app-bar__icon:active { background: var(--site-soft); }

.app-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--site-ink);
}

/* ------------------------------------------------------ painel Perfil */

.app-sheet.offcanvas-bottom {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    /* o partial cai direto num .row, e o .row > * daria padding lateral */
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
}

.app-sheet__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 12px;
}

.app-sheet__avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--site-green-soft);
    color: var(--site-green);
    font-size: 1.2rem;
    font-weight: 700;
}

.app-sheet__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.app-sheet__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--site-ink);
}

.app-sheet__sub {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    color: var(--site-muted);
}

/* uma linha só vale para o e-mail de quem está logado; frase pode quebrar */
.app-sheet__sub--wrap { white-space: normal; }

.app-sheet__close {
    flex: 0 0 36px;
    align-self: flex-start;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--site-soft);
    color: var(--site-ink);
}

.app-sheet__body { padding: 4px 12px 16px; }

.app-sheet__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 8px 16px;
}

.app-sheet__intro-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--site-accent-soft);
    color: var(--site-accent-600);
    font-size: 1.2rem;
}

.app-sheet__intro p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--site-muted);
}

.app-sheet__auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 8px 14px;
}

.app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    /* também serve em <button>: sem a borda e o fundo cinza do navegador */
    border: 0;
    border-radius: 12px;
    background: none;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.app-btn--primary,
.app-btn--primary:hover {
    background: var(--site-green);
    color: #fff;
}

.app-btn--outline,
.app-btn--outline:hover {
    border: 1px solid var(--site-ink);
    color: var(--site-ink);
}

.app-menu {
    display: flex;
    flex-direction: column;
}

.app-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--site-ink);
    font-family: inherit;
    font-size: .98rem;
    text-align: left;
    text-decoration: none;
}

.app-menu__item:hover { color: var(--site-ink); }
.app-menu__item:active { background: var(--site-soft); }

.app-menu__item > .bi:first-child {
    width: 24px;
    font-size: 1.2rem;
    text-align: center;
}

.app-menu__item > span { flex: 1 1 auto; }

.app-menu__chevron {
    color: var(--site-faint);
    font-size: .9rem;
}

.app-menu__item--highlight {
    margin-bottom: 8px;
    padding: 0 14px;
    background: var(--site-green-soft);
    font-weight: 600;
}

.app-menu__item--highlight,
.app-menu__item--highlight:hover,
.app-menu__item--highlight .app-menu__chevron { color: var(--site-green); }

.app-menu__item--danger {
    margin-top: 6px;
    border-top: 1px solid var(--site-line);
    border-radius: 0;
}

.app-menu__item--danger,
.app-menu__item--danger:hover { color: #c0392b; }

/* =====================================================================
   TRILHO DE CATEGORIAS (home): tipo de imóvel + comodidades, com ícone
   ===================================================================== */

.cat-rail {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 4px 0 2px;
}

.cat-rail::-webkit-scrollbar { display: none; }

/* Centraliza quando cabe. Quando não cabe, as margens automáticas viram
   zero e o trilho rola desde o primeiro item (justify-content: center
   cortaria o começo). */
.cat-rail > :first-child { margin-left: auto; }
.cat-rail > :last-child { margin-right: auto; }

.cat-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    padding: 8px 10px 10px;
    border-radius: 12px;
    color: var(--site-muted);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color .15s ease, background .15s ease;
}

.cat-item i {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--site-ink);
    opacity: .72;
}

@media (hover: hover) {
    .cat-item:hover {
        color: var(--site-ink);
        background: var(--site-soft);
    }

    .cat-item:hover i { opacity: 1; }
}

.cat-item:active { background: var(--site-soft); }

.cat-sep {
    flex: 0 0 1px;
    align-self: center;
    height: 36px;
    margin-inline: 6px;
    background: var(--site-line);
}

/* Desktop: com mouse ninguém descobre que dá para rolar de lado, então
   o trilho quebra linha e mostra tudo. */
@media (min-width: 992px) {
    .cat-rail {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        overflow: visible;
    }

    .cat-rail > :first-child,
    .cat-rail > :last-child { margin-inline: 0; }
}

/* toque: o esmaecido à direita diz "tem mais" */
@media (max-width: 991.98px) {
    .cat-rail {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }
}

@media (max-width: 767.98px) {
    /* sangra até a borda da tela; o scroll-padding é pelo mesmo motivo do .rail */
    .cat-rail {
        margin-inline: calc(-.5 * var(--bs-gutter-x, 1.5rem));
        padding-inline: calc(.5 * var(--bs-gutter-x, 1.5rem));
        scroll-padding-inline: calc(.5 * var(--bs-gutter-x, 1.5rem));
    }

    .cat-item {
        min-width: 64px;
        padding: 6px 6px 8px;
    }

    .cat-item i { font-size: 1.35rem; }
}

/* =====================================================================
   GRADE — para páginas de listagem
   ---------------------------------------------------------------------
   Diferente do .rail: aqui não vira carrossel no celular. Numa listagem a
   pessoa quer ver tudo rolando para baixo, não deslizar de lado.
   ===================================================================== */

.grid-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.grid-cards > li { min-width: 0; }

@media (max-width: 991.98px) {
    .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 767.98px) {
    .grid-cards { gap: 14px; }
}

@media (max-width: 420px) {
    .grid-cards { grid-template-columns: 1fr; }
}

/* Páginas internas: espaço para a navbar fixa.
   No desktop a navbar mede padding (10px x2) + altura do logo = 84px; abaixo
   de 992px é a .app-bar (--app-bar-h). O valor abaixo é isso mais um respiro.

   Escrito como .sec.sec--page de propósito: o modificador precisa pesar mais
   que a base. Com um `.sec--page` simples, o `.sec { padding: ... }` do bloco
   responsivo lá no fim do arquivo vencia por vir depois, o recuo virava 36px
   e o conteúdo entrava por baixo da navbar no celular. */
.sec.sec--page {
    padding-top: 108px;
    padding-bottom: 56px;
    /* com poucos resultados, o fundo não termina no meio da tela */
    min-height: 70vh;
}

@media (max-width: 991.98px) {
    .sec.sec--page { padding-top: calc(var(--app-bar-h, 64px) + 24px); }

    /* Espaçador das telas de reserva e de senha. No tema era uma faixa verde de
       88px atrás da navbar verde antiga; com a barra do topo branca e mais
       baixa, sobrava uma tira verde. Agora é só o recuo da barra. */
    header.header-simple {
        padding: var(--app-bar-h, 64px) 0 0;
        background: none;
    }
}

@media (max-width: 767.98px) {
    .sec.sec--page {
        padding-top: calc(var(--app-bar-h, 64px) + 20px);
        padding-bottom: 36px;
    }
}

/* =====================================================================
   PÁGINA INTERNA — cabeçalho, voltar, filtros e paginação
   ---------------------------------------------------------------------
   O cabeçalho nasceu nos favoritos (.fav-head) e subiu para cá quando a
   listagem de serviços precisou do mesmo.
   ===================================================================== */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--site-line);
}

.page-head-text { min-width: 0; }

.page-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--site-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}

.page-cta:hover { background: var(--site-accent-600); color: #fff; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--site-muted);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}

.back-link:hover { color: var(--site-ink); }

/* Barra de filtros: busca + selects, no mesmo desenho dos chips */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 22px;
}

.filter-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.filter-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--site-muted);
    pointer-events: none;
}

.filter-input,
.filter-select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--site-line);
    border-radius: 999px;
    background: #fff;
    color: var(--site-ink);
    font-size: .9rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.filter-input { padding: 0 16px 0 42px; }

.filter-select {
    flex: 0 1 190px;
    width: auto;
    padding: 0 38px 0 16px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23717171' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    cursor: pointer;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--site-ink);
    box-shadow: 0 0 0 3px rgba(34, 34, 34, .08);
}

.filter-submit {
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--site-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

.filter-submit:hover { background: var(--site-accent-600); }

.filter-clear {
    color: var(--site-muted);
    font-size: .86rem;
    font-weight: 500;
    text-decoration: underline;
    white-space: nowrap;
}

.filter-clear:hover { color: var(--site-ink); }

.result-count {
    margin: -8px 0 16px;
    color: var(--site-muted);
    font-size: .86rem;
}

/* Paginação do Bootstrap nas cores do site (o padrão é azul) */
.site-pagination {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.site-pagination .pagination { gap: 6px; margin: 0; flex-wrap: wrap; justify-content: center; }

.site-pagination .page-link {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-line);
    border-radius: 999px !important;
    background: #fff;
    color: var(--site-ink);
    font-size: .88rem;
    font-weight: 600;
    box-shadow: none;
}

.site-pagination .page-link:hover { background: var(--site-soft); color: var(--site-ink); }

.site-pagination .page-item.active .page-link {
    background: var(--site-ink);
    border-color: var(--site-ink);
    color: #fff;
}

.site-pagination .page-item.disabled .page-link { opacity: .45; background: #fff; }

@media (max-width: 767.98px) {
    .page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding-bottom: 16px;
        margin-bottom: 18px;
    }

    .filter-search { flex-basis: 100%; }
    .filter-select { flex: 1 1 0; min-width: 0; }
    .filter-submit { flex: 1 1 100%; }
}

/* =====================================================================
   CARD de imóvel e de serviço
   ===================================================================== */

.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.pcard:hover { color: inherit; }

.pcard-media {
    position: relative;
    border-radius: var(--site-radius);
    overflow: hidden;
    background: #f0f0f0;
    aspect-ratio: 4 / 3;
}

.pcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

@media (hover: hover) {
    .pcard:hover .pcard-media img { transform: scale(1.05); }
}

/* Sem foto: um bloco com o ícone, para os cards não ficarem de alturas
   diferentes nem aparecer uma moldura vazia */
.pcard-media--empty {
    display: grid;
    place-items: center;
    background: var(--site-green-soft);
    color: var(--site-green);
}

.pcard-media--empty i { font-size: 2rem; opacity: .7; }

/* Selo no canto da imagem (nota, tipo de cobrança, etc.) */
.pcard-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--site-ink);
    font-size: .74rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    white-space: nowrap;
}

.pcard-badge i { color: var(--site-ink); font-size: .72rem; }
.pcard-badge--left { right: auto; left: 10px; }

.pcard-body {
    padding: 12px 2px 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------
   Variante com superfície.

   O card "cru" (imagem solta sobre o branco) funciona na home, onde há
   fundo, seções e muita coisa em volta. Numa página de listagem, sozinho
   no branco, ele fica com cara de inacabado — ainda mais quando a foto
   não carrega. Aqui ele ganha borda, fundo e sombra.
   --------------------------------------------------------------------- */

.pcard--surface {
    background: #fff;
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

@media (hover: hover) {
    .pcard--surface:hover {
        border-color: #d5d5d5;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
        transform: translateY(-2px);
    }
}

.pcard--surface .pcard-media {
    border-radius: 0;
    /* foto menos dominante que o 4:3 do trilho da home */
    aspect-ratio: 3 / 2;
}

.pcard--surface .pcard-body { padding: 14px 16px 16px; }

.pcard-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--site-ink);
    margin: 0 0 3px;
    line-height: 1.35;
    /* nomes de tamanhos diferentes não podem desalinhar os cards */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard-meta {
    margin: 0 0 8px;
    color: var(--site-muted);
    font-size: .86rem;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pcard-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.pcard-tags span {
    font-size: .72rem;
    font-weight: 500;
    color: var(--site-green);
    background: var(--site-green-soft);
    border-radius: 999px;
    padding: 3px 9px;
}

.pcard-foot {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.pcard-price strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--site-ink);
}

.pcard-price small {
    color: var(--site-muted);
    font-size: .82rem;
}

.pcard-note {
    color: var(--site-muted);
    font-size: .78rem;
    white-space: nowrap;
}

/* =====================================================================
   CHIPS (categorias, filtros rápidos)
   ===================================================================== */

.chips-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 0 18px;
    padding-bottom: 2px;
}

.chips-rail::-webkit-scrollbar { display: none; }

@media (max-width: 767.98px) {
    .chips-rail {
        margin-inline: calc(-.5 * var(--bs-gutter-x, 1.5rem));
        padding-inline: calc(.5 * var(--bs-gutter-x, 1.5rem));
    }
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--site-line);
    background: #fff;
    color: var(--site-ink);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}

.chip:hover {
    border-color: var(--site-ink);
    background: var(--site-soft);
    color: var(--site-ink);
}

.chip.is-active {
    border-color: var(--site-accent);
    background: var(--site-accent-soft);
    color: var(--site-accent-600);
    font-weight: 600;
}

/* =====================================================================
   ESTADO VAZIO
   ===================================================================== */

.sec-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--site-muted);
    border: 1px dashed var(--site-line);
    border-radius: var(--site-radius);
}

.sec-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    opacity: .5;
}

.sec-empty p { margin: 0; }

/* =====================================================================
   RESPONSIVO DA SEÇÃO
   ===================================================================== */

@media (max-width: 767.98px) {
    .sec { padding: 36px 0 16px; }
    .sec.sec--tint { padding-bottom: 36px; }

    .sec-title { font-size: 1.35rem; }
    .sec-sub { font-size: .86rem; }
    .sec-head { margin-bottom: 14px; }

    .sec-empty { padding: 36px 18px; }
}

/* =====================================================================
   CONTA — entrar e criar conta
   ---------------------------------------------------------------------
   Card branco sobre o cinza das páginas internas, no desenho do checkout
   (.co-card). No celular o card some e o formulário ocupa a tela, como
   num app.

   Campo: .auth-field envolve rótulo, controle e .auth-error. O erro
   aparece com .is-invalid no .auth-field; o @error do Blade e o JS da
   página põem a classe nos dois, no .auth-field e no input.
   ===================================================================== */

.auth-page { background: var(--site-soft); }

.auth-shell {
    max-width: 440px;
    margin: 0 auto;
}

.auth-shell--wide { max-width: 720px; }

.auth-card {
    padding: 32px;
    background: #fff;
    border: 1px solid var(--site-line);
    border-radius: 16px;
}

.auth-head { margin-bottom: 24px; }

.auth-title {
    margin: 0 0 4px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--site-ink);
}

.auth-lead {
    margin: 0;
    color: var(--site-muted);
    font-size: .95rem;
}

/* ------------------------------------------------------------- avisos */

.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.45;
}

.auth-notice--error { background: #fdecea; color: #9b2c1f; }
.auth-notice--success { background: var(--site-accent-soft); color: var(--site-accent-700); }

/* ------------------------------------------------------------- campos */

.auth-field { margin-bottom: 16px; }

.auth-label {
    display: block;
    margin-bottom: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--site-ink);
}

.auth-label small {
    font-size: .8rem;
    font-weight: 400;
    color: var(--site-muted);
}

/* 16px: menos que isso o iOS dá zoom ao focar */
.auth-input.form-control,
.auth-input.form-select {
    height: 48px;
    padding-left: 14px;
    border-color: #cfcfcf;
    border-radius: 12px;
    color: var(--site-ink);
    font-size: 1rem;
}

.auth-input.form-control { padding-right: 14px; }

.auth-input.form-select {
    padding-right: 40px;
    background-position: right 14px center;
}

.auth-input.form-select:disabled {
    background-color: var(--site-soft);
    color: var(--site-faint);
}

.auth-input::placeholder { color: var(--site-faint); }

/* Sem o ícone de alerta do Bootstrap: a borda e a mensagem já avisam, e ele
   ficava por cima do botão de mostrar a senha */
.auth-input.form-control.is-invalid {
    border-color: #c0392b;
    background-image: none;
    padding-right: 14px;
}

.auth-error {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: #c0392b;
    font-size: .84rem;
    line-height: 1.4;
}

.auth-field.is-invalid .auth-error { display: flex; }

.auth-hint {
    margin: 6px 0 0;
    color: var(--site-muted);
    font-size: .82rem;
}

.auth-field.is-invalid .auth-hint { display: none; }

.auth-hint--warn { color: #7a5300; }

/* Senha: botão de mostrar dentro do campo */
.auth-password { position: relative; }

.auth-password .auth-input.form-control,
.auth-password .auth-input.form-control.is-invalid { padding-right: 52px; }

.auth-eye {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--site-muted);
    font-size: 1.1rem;
}

.auth-eye:hover { color: var(--site-ink); background: var(--site-soft); }
.auth-eye:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 0; }

.auth-strength {
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--site-line);
    overflow: hidden;
}

.auth-strength > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #c0392b;
    transition: width .25s ease, background-color .25s ease;
}

.auth-strength[data-level="2"] > span { background: #e0a100; }
.auth-strength[data-level="3"] > span { background: var(--site-accent); }

/* ------------------------------------------------- links e botões */

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
    font-size: .9rem;
}

.auth-row .form-check { margin: 0; }
.auth-row .form-check-label { color: var(--site-ink); }

.auth-link {
    color: var(--site-accent-600);
    font-weight: 600;
    text-decoration: none;
}

.auth-link:hover {
    color: var(--site-accent-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-btn {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.auth-card .app-btn--outline:hover { background: var(--site-soft); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: var(--site-muted);
    font-size: .85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--site-line);
}

.auth-switch {
    margin: 16px 0 0;
    text-align: center;
    color: var(--site-muted);
    font-size: .92rem;
}

.auth-legal {
    margin: 12px 0 0;
    text-align: center;
    color: var(--site-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.auth-legal a { color: var(--site-ink); text-underline-offset: 2px; }

.auth-foot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0;
    color: var(--site-muted);
    font-size: .82rem;
    text-align: center;
}

/* ------------------------------------------------ criar conta: tipo */

.auth-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-fieldset > legend {
    float: none;
    width: auto;
    padding: 0;
}

.auth-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.auth-option { position: relative; }

/* fora da tela, mas ainda focável pelo teclado (display: none tirava o foco) */
.auth-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-option label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid #cfcfcf;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
    .auth-option label:hover { border-color: var(--site-ink); }
}

.auth-option__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--site-soft);
    color: var(--site-ink);
    font-size: 1.05rem;
    transition: background .15s ease, color .15s ease;
}

.auth-option__title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--site-ink);
}

.auth-option__text {
    font-size: .8rem;
    line-height: 1.4;
    color: var(--site-muted);
}

.auth-option__check {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--site-accent);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.auth-option input:checked + label {
    border-color: var(--site-accent);
    box-shadow: inset 0 0 0 1px var(--site-accent);
    background: var(--site-accent-soft);
}

.auth-option input:checked + label .auth-option__icon {
    background: var(--site-accent);
    color: #fff;
}

.auth-option input:checked + label .auth-option__check { opacity: 1; }

.auth-option input:focus-visible + label {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------- criar conta: blocos */

.auth-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--site-line);
}

.auth-section__title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--site-ink);
}

.auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 16px;
}

@media (min-width: 768px) {
    .auth-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bloco opcional recolhido (endereço): o título do bloco abre e fecha */
.auth-more > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--site-ink);
}

.auth-more > summary::-webkit-details-marker { display: none; }

.auth-more > summary small {
    font-size: .85rem;
    font-weight: 400;
    color: var(--site-muted);
}

.auth-more > summary .bi-chevron-down {
    margin-left: auto;
    color: var(--site-muted);
    transition: transform .2s ease;
}

.auth-more[open] > summary .bi-chevron-down { transform: rotate(180deg); }

.auth-more__body { padding-top: 16px; }

.auth-submit { margin-top: 24px; }

@media (max-width: 575.98px) {
    .auth-page { background: #fff; }

    .auth-card {
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .auth-title { font-size: 1.4rem; }

    .auth-choice { gap: 8px; }
    .auth-option label { padding: 12px; }

    /* formulário longo: o botão fica à mão enquanto a pessoa preenche */
    .auth-submit--sticky {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--site-line);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-strength > span,
    .auth-option label,
    .auth-option__icon,
    .auth-option__check,
    .auth-more > summary .bi-chevron-down { transition: none; }
}

/* =====================================================================
   MODAIS
   ---------------------------------------------------------------------
   Um desenho para todos os modais do site: cantos de 16px, título em
   tinta e o fechar redondo do painel Perfil. No celular (< 576px) o
   modal vira painel que sobe de baixo, como o .app-sheet: largura toda,
   cantos de cima arredondados, cabeçalho e rodapé fixos e o corpo rolando.

   Partial não estiliza .modal-content ou .modal-dialog soltos. Já foram
   três regras assim (altura de 350px, largura de 90%, padding), cada uma
   num partial, e juntas quebravam todo modal no celular.
   ===================================================================== */

.modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 16px;
    --bs-modal-header-padding: 18px 20px;
    --bs-modal-header-border-color: var(--site-line);
    --bs-modal-footer-border-color: var(--site-line);
    --bs-modal-padding: 20px;
}

/* Os modais moram dentro do .row do layout, e o .row > * dava padding
   lateral ao .modal: o painel ficava deslocado para um lado */
.row > .modal {
    padding-left: 0;
    padding-right: 0;
}

.modal-content { box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--site-ink);
}

/* fechar redondo, o mesmo do painel Perfil (.app-sheet__close) */
.modal-header .btn-close {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: -6px -8px -6px 12px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--site-soft);
    background-size: 12px;
    opacity: .75;
}

.modal-header .btn-close:hover { opacity: 1; }

.modal-footer .btn {
    min-height: 44px;
    padding-inline: 20px;
    border-radius: 12px;
    font-weight: 600;
}

/* botões do painel Perfil (.app-btn) no rodapé: dividem a largura */
.modal-footer > .app-btn { flex: 1 1 0; }

/* Texto corrido (FAQ, termos): pergunta ou seção em tinta, resposta em cinza */
.modal-prose {
    color: var(--site-ink);
    font-size: .92rem;
    line-height: 1.6;
}

.modal-prose h3 {
    margin: 24px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--site-ink);
}

.modal-prose h3:first-child { margin-top: 0; }

.modal-prose p {
    margin: 0 0 10px;
    color: var(--site-muted);
}

.modal-prose ul {
    margin: 0 0 10px;
    padding-left: 1.2rem;
}

.modal-prose li { margin-bottom: 6px; }
.modal-prose li ul { margin: 6px 0 0; }

@media (max-width: 575.98px) {
    .modal {
        --bs-modal-header-padding: 16px 20px;
        --bs-modal-padding: 16px;
    }

    /* O lugar do painel não depende do .show: ao fechar, o Bootstrap tira
       o .show antes do display: none, e um layout preso ao .show fazia o
       painel pular para o topo no meio da animação. */
    .modal-dialog,
    .modal-dialog.modal-dialog-centered,
    .modal-dialog.modal-dialog-scrollable {
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        margin: 0;
    }

    .modal.fade .modal-dialog { transform: translateY(100%); }
    .modal.show .modal-dialog { transform: none; }

    /* .modal na frente: pesa mais que o .co-modal e afins das páginas */
    .modal .modal-content {
        max-height: 92vh;
        max-height: 92dvh;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
    }

    .modal-header {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .modal-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* botões dividem a largura, na altura de toque do resto do site */
    .modal-footer { flex-wrap: nowrap; }

    .modal-footer > .btn { flex: 1 1 0; }

    .modal-footer .btn { min-height: 48px; }

    /* rótulo longo não cabe pela metade: um botão por linha, o principal em cima */
    .modal-footer.modal-footer--stack { flex-direction: column; align-items: stretch; }
    /* pesa mais que o .modal-footer > .app-btn: numa coluna, o flex-basis 0
       dele anulava a altura de 48px e achatava os botões */
    .modal-footer.modal-footer--stack > * { flex: none; }
}

/* =====================================================================
   COR DE AÇÃO NO BOOTSTRAP
   ---------------------------------------------------------------------
   O tema (styles.css) usa laranja como "primary": todo btn-primary,
   text-primary, link, foco e checkbox saía laranja. No site o primary vira o
   verde; o laranja fica no .btn-cta, só para conversão.
   ===================================================================== */

:root {
    --bs-primary: #438F6A;
    --bs-primary-rgb: 67, 143, 106;
    --bs-link-color: #357456;
    --bs-link-hover-color: #2b5f47;
}

.btn-primary {
    --bs-btn-bg: #438F6A;
    --bs-btn-border-color: #438F6A;
    --bs-btn-hover-bg: #357456;
    --bs-btn-hover-border-color: #357456;
    --bs-btn-focus-shadow-rgb: 67, 143, 106;
    --bs-btn-active-bg: #2b5f47;
    --bs-btn-active-border-color: #2b5f47;
    --bs-btn-disabled-bg: #438F6A;
    --bs-btn-disabled-border-color: #438F6A;
}

.btn-outline-primary {
    --bs-btn-color: #357456;
    --bs-btn-border-color: #438F6A;
    --bs-btn-hover-bg: #438F6A;
    --bs-btn-hover-border-color: #438F6A;
    --bs-btn-focus-shadow-rgb: 67, 143, 106;
    --bs-btn-active-bg: #357456;
    --bs-btn-active-border-color: #357456;
    --bs-btn-disabled-color: #438F6A;
    --bs-btn-disabled-border-color: #438F6A;
}

.text-primary { color: var(--site-accent-600) !important; }
.link-primary,
.link-primary:focus,
.link-primary:hover { color: var(--site-accent-600) !important; }

.form-control:focus,
.form-select:focus {
    border-color: #9cc9b3;
    box-shadow: 0 0 0 .25rem rgba(67, 143, 106, .2);
}

.form-check-input:focus,
.btn-close:focus { box-shadow: 0 0 0 .25rem rgba(67, 143, 106, .2); }

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--site-accent);
    border-color: var(--site-accent);
}

.form-range::-webkit-slider-thumb { background-color: var(--site-accent); }
.form-range::-moz-range-thumb { background-color: var(--site-accent); }

.dropdown-menu { --bs-dropdown-link-active-bg: var(--site-accent); }
.list-group {
    --bs-list-group-active-bg: var(--site-accent);
    --bs-list-group-active-border-color: var(--site-accent);
}
.progress { --bs-progress-bar-bg: var(--site-accent); }

/* navbar do desktop: página atual em tinta, com o sublinhado verde do partial */
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:active { color: var(--site-accent-600); }
#mainNav .navbar-nav .nav-item .nav-link.active { color: var(--site-ink) !important; }

/* Conversão: "Reservar", "Confirmar reserva". Laranja de propósito. */
.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--site-brand);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--site-brand-600);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--site-brand-600);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--site-brand);
    --bs-btn-focus-shadow-rgb: 244, 98, 58;
    background-image: linear-gradient(135deg, var(--site-brand) 0%, #ff8c42 100%);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(244, 98, 58, .28);
}

.btn-cta:hover { background-image: linear-gradient(135deg, var(--site-brand-600) 0%, #f97a2c 100%); }

/* =====================================================================
   TOQUE
   ===================================================================== */

/* Sem o flash cinza do WebKit no toque; o retorno vem dos :active de cada peça.
   manipulation tira a espera do "toque duplo para zoom" nos controles. */
html { -webkit-tap-highlight-color: transparent; }

a,
button,
input,
label,
select,
summary,
textarea,
[role="button"] { touch-action: manipulation; }

/* No toque o :hover "gruda" depois do tap: o card ficava ampliado ou
   levantado até tocar em outro lugar. Aqui zera o movimento só em telas sem
   mouse; cores e sombras de hover continuam. */
@media (hover: none) {
    .pcard--surface:hover,
    .promo-strip-card:hover,
    .promo-strip-card:hover .promo-img-wrapper img,
    .partner-circle:hover,
    .partner-circle:hover .partner-logo-round,
    .btn-join:hover,
    .btn-join:hover i,
    .tip-card:hover,
    .plano:hover,
    .btn-advertise-primary:hover,
    .btn-advertise-secondary:hover,
    .fav-remove:hover,
    .property-card:hover,
    .property-card:hover .property-image,
    .property-card .btn-outline-primary:hover,
    .property-card .btn-outline-danger:hover,
    .filter-toggle-btn:hover,
    .pagination-wrapper .page-link:hover,
    .property-tags .badge:hover,
    .scroll-indicator:hover,
    .amenity-item:hover,
    .gallery-item:hover img,
    .info-box:hover,
    .quick-amenity-badge:hover,
    .quick-link:hover i,
    .sidebar-actions .btn:hover,
    .rating-input label:hover,
    .rating-input label:hover ~ label {
        transform: none !important;
    }

    /* o pino do mapa é um quadrado girado: mantém a rotação, tira o zoom */
    .marker-pin:hover { transform: rotate(-45deg) !important; }
}