/* ===============================
 Fastimob — style.css (Bootstrap 5)
 Tema baseado em rgb(196,239,252) #C4EFFC
=============================== */

/* -------- Core / Bootstrap overrides -------- */
:root{
  /* Brand */
  --brand-50:  #EAF9FE;
  --brand-100: #C4EFFC;
  --brand-300: #7ED8F3;
  --brand-600: #1AA4C7;   /* principal */
  --brand-650: #1590B0;   /* hover */
  --brand-750: #117A95;   /* active */
  --brand-800: #0697C3;   /* navbar/darks #0E6075 */

  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 26, 164, 199;
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-650);

  --fast-shadow: 0 6px 24px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);

  --nav-h: 64px;                 /* ajustado via JS */

  /* UI */
  --fm-border: #E5F4FA;
  --fm-radius: 14px;
  --fm-shadow: 0 6px 18px rgba(17,24,39,.07);
  --fm-shadow-sm: 0 3px 10px rgba(17,24,39,.06);

  /* Drawer (lista) */
  --drawer-max-width: 1120px;

  /* Detail */
  --detail-modal-max: 880px;            /* modal mais estreito */
  --detail-hero-min: 300px;              /* altura mínima da foto */
  --detail-hero-max: 560px;              /* altura máxima da foto */
  --detail-hero-vh: 56vh;                /* altura relativa (mais alto) */

  /* Ads */
  --ad-w: 680px;   /* largura máx do banner */
  --ad-h: 125px;   /* altura base do banner */
}

/* Botão primário */
.btn-primary{
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-650);
  --bs-btn-hover-border-color: var(--brand-650);
  --bs-btn-active-bg: var(--brand-750);
  --bs-btn-active-border-color: var(--brand-750);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
}
.btn-primary:focus{ box-shadow: 0 0 0 .25rem rgba(26,164,199,.25); }

/* Links */
a{ color: var(--bs-link-color); }
a:hover{ color: var(--bs-link-hover-color); }

/* Form focus states */
.form-control:focus, .form-select:focus{
  border-color: var(--brand-600);
  box-shadow: 0 0 0 .2rem rgba(26,164,199,.15);
}
.form-check-input:checked{
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

/* -------- Base / Body -------- */
body{
  background:#F4FBFE;
  color:#222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------- Navbar / Topbar -------- */
.navbar-ace{
  background: var(--brand-800);
  box-shadow: 0 2px 10px rgba(14,96,117,.22);
}
.navbar-ace .navbar-brand{ font-weight:700; letter-spacing:.2px; }

/* Centralização dos botões “Aluguel/Vendas” */
.navbar .container{ position: relative; }
#topbar-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  z-index: 1;
}
@media (max-width: 767.98px){
  #topbar-center{
    position: static;
    translate: 0;
    transform: none;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* Espaço entre os dois botões no btn-group */
#topbar-center .btn-group > .btn + .btn{ margin-left: .5rem; }

/* Dimensão/estilo dos botões topo */
#topbar-center .btn-group .btn{
  padding:.42rem .85rem;
  font-weight:600;
  border-radius:6px;
}

/* Botões transparentes na navbar escura */
.btn-ace-inv{
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 6px !important;
  padding: .42rem .85rem;
  font-weight: 600;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.btn-ace-inv:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}
.btn-ace-inv:focus,
.btn-ace-inv:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 .16rem rgba(255,255,255,.22) !important;
}
.btn-ace-inv.active{
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

/* garante centralização mesmo com itens na direita */
.navbar .navbar-collapse{ justify-content: flex-end; }

/* -------- Espaçamento sob a navbar -------- */
.nav-spacer{ height: calc(var(--nav-h, 64px) - 8px); }
@media (max-width: 767.98px){ .nav-spacer{ display:none; } }

/* Controles mobile logo abaixo da navbar fixa */
.under-nav{ margin-top: calc(var(--nav-h, 64px) + 2px); }
#btnToggleFilters{ min-width:180px; }

/* -------- Sidebar / Filters -------- */
.filters{
  background:#fff;
  border:1px solid var(--fm-border);
  border-radius:12px;
  padding:16px;
  box-shadow: var(--fast-shadow);
}
.filters .section-title{
  font-weight:700;
  font-size:.9rem;
  color:#3d3d3d;
  margin-top:6px;
  margin-bottom:6px;
}
.filters .btn-group .btn{ font-weight:600; }

/* Desktop/tablet: filtros sticky e roláveis */
@media (min-width: 992px){
  .filters{
    position: sticky;
    top: calc(var(--nav-h, 64px) + 8px);

    max-height: calc(100vh - var(--nav-h, 64px) - 24px);
    max-height: calc(100dvh - var(--nav-h, 64px) - 24px);

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    scrollbar-gutter: stable;
  }
}

/* Modo compacto para tablets com pouca altura (paisagem, iPad/Android) */
@media (min-width: 992px) and (max-height: 760px){
  .filters{ padding: 12px; }
  .filters .section-title{ margin-top:4px; margin-bottom:4px; }
  .filters .btn-group .btn{ padding: .28rem .5rem; }
}


/* -------- Result header (contador + ordenar) -------- */
#resultHeader{ margin-top: 8px; }
@media (min-width:768px){ #resultHeader { margin-top: 0 !important; } }
#pathHint{ color:#6b7280; }
#resultTitle{ line-height:1.2; }
#resultTotal{ font-weight:800; }

/* -------- Cards de resultado -------- */
.results-list{ display:block; }
.card-result{
  background:#fff;
  border:1px solid var(--fm-border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:16px;
  box-shadow: var(--fast-shadow);
}
.card-result .media-left .thumb-wrap{
  position:relative; width:100%; height:260px; overflow:hidden; background:#eee;
}
.card-result img.thumb{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block; background:#eee;
}
/* Ribbon “Sem foto” */
.card-result .ribbon{
  position:absolute; top:8px; left:8px;
  background:#9e9e9e; color:#fff; padding:4px 8px; border-radius:6px; font-size:12px;
}
/* Botão coração (favoritar) */
.card-result .heart{
  position:absolute; top:8px; right:8px;
  background:#fff; border-radius:50%; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #eee; color: var(--brand-600);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-result .heart:hover{ transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16,24,40,.12); }
/* Métricas */
.card-result .icons span{
  display:inline-flex; align-items:center; gap:6px; color:#6e6e6e;
}

/* ====== CTA dos cards ====== */
/* base dos CTAs */
.btn-cta{
  padding:.55rem 1rem;
  font-weight:300;
  border-radius:999px;
  transition: all .2s ease-in-out;
}

/* botão cinza claro (Ver detalhes) */
.btn-light.btn-cta{
  background-color:#e9ecef;
  color:#333 !important;
  border:1px solid #dee2e6;
}
.btn-light.btn-cta:hover,
.btn-light.btn-cta:focus {
  background-color: var(--brand-50);   /* leve azul bem claro */
  border-color: var(--brand-600);      /* destaca a borda */
  color: var(--brand-600) !important;  /* texto azul, não branco */
}

/* NÃO forçar cor em todo .btn-cta dentro do card para não brigar com btn-primary */
.card-result .btn-cta{ border-radius:999px; } /* apenas mantém o formato */

/* WhatsApp como btn-primary com texto/ícone brancos (todos os estados) */
.card-result .btn-primary.btn-cta,
.card-result .btn-primary.btn-cta:hover,
.card-result .btn-primary.btn-cta:focus,
.card-result .btn-primary.btn-cta:active{
  color:#fff !important;
}
.card-result .btn-primary.btn-cta i{ color:inherit !important; }

/* -------- Loader / “Carregar mais” -------- */
.loader{
  display:none; align-items:center; gap:8px; color:#6b7280; justify-content:center; padding:10px 0;
}
.loader.show{ display:flex; }

/* -------- Ads -------- */
.ad-slot{ margin:18px 0 22px; display:block; }

/* Centraliza o bloco e limita largura do banner */
.ad-slot--db{ display:flex; justify-content:center; }
.ad-slot--db .ad-inner{
  background:#fff;
  border:1px solid var(--fm-border);
  border-radius:12px;
  padding:10px;
  min-height:unset;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}

/* Rótulo “Publicidade” */
.ad-slot--db .ad-label{
  position:absolute; top:8px; left:10px;
  background: var(--brand-50);
  color: var(--brand-800);
  border-radius:999px; padding:2px 8px; font-size:11px;
}

/* Figura do banner: 680x125 por padrão (ou use --w/--h inline) */
.ad-slot--db .ad-media{
  width: min(var(--ad-w, 680px), 100%);
  max-width: var(--ad-w, 680px);
  margin: 6px auto;
  aspect-ratio: calc(var(--ad-w, 680) / var(--ad-h, 125));
  background:#fbfdff;
  border:1px solid #e8eef8;
  border-radius:10px;
  overflow:hidden;
}

/* Imagem contida e centralizada */
.ad-slot--db img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
}

/* -------- Drawer (modal lateral da LISTA) -------- */
#drawer .modal-dialog{
  position: fixed;
  top: var(--nav-h, 64px);
  height: calc(100vh - var(--nav-h, 64px));
  right: 0;
  left: auto;
  margin: 0;
  width: min(96vw, var(--drawer-max-width));
  max-width: 100%;
  transform: translateX(100%);
}
#drawer.show .modal-dialog{ transform: translateX(0); }
#drawer.fade .modal-dialog{ transition: transform .25s ease; }
#drawer .modal-content{
  height:100%;
  background:#fff;
  border:1px solid var(--fm-border);
  border-radius: var(--fm-radius) 0 0 var(--fm-radius);
  box-shadow: var(--fm-shadow);
  overflow:hidden;
}
#drawer .modal-body{
  height: calc(100% - 60px);
  padding: 12px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width:767.98px){
  #drawer .modal-dialog{ width:100vw; max-width:100vw; }
}

/* -------- Toast de compartilhamento -------- */
.share-toast{
  position: fixed; bottom:16px; left:50%;
  transform: translateX(-50%) translateY(10px);
  background:#111827; color:#fff; padding:8px 12px; border-radius:999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition: opacity .2s, transform .2s; z-index:9999; font-size:.9rem;
}
.share-toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* -------- Breadcrumb simples -------- */
.breadcrumb{
  padding:.28rem .5rem; margin-bottom:8px; background:#fff;
  display:inline-flex; gap:.35rem; border:1px solid var(--fm-border);
  border-radius:999px; box-shadow: var(--fm-shadow-sm);
}
.breadcrumb li{ display:inline; color:#607D8B; font-size:.85rem; }
.breadcrumb li+li:before{ content:"›"; padding:0 6px; color:#99AAB5; }

/* -------- Utilitários -------- */
.text-muted-2{ color:#6b7280 !important; }
.rounded-2xl{ border-radius:16px; }
.shadow-soft{ box-shadow: var(--fast-shadow); }

/* Esconde o FAB de “voltar ao topo” enquanto o modal está aberto */
body.modal-open #backToTopFab{ display:none !important; }

/* -------- Mobile tweaks -------- */
@media (max-width:767.98px){
  .card-result .media-right{ padding-top:12px !important; }
  #filtersCollapse .card-body .filters{ padding-bottom:8px; }
}

/* -------- Print -------- */
@media print{
  .navbar, #btnLoadMore, .ad-slot, .loader, #drawer, .share-toast{ display:none !important; }
  body{ background:#fff; }
  .card-result{ page-break-inside: avoid; }
}

/* -------- Topo colado sob a navbar (desktop) -------- */
@media (min-width: 768px){
  .container > .row:first-of-type{
    margin-top: calc(var(--nav-h, 64px) + 2px) !important;
  }
  .filters{
    top: calc(var(--nav-h, 64px) + 2px) !important;
  }
}

/* 3) No mobile continuamos usando a faixa under-nav */
@media (max-width: 767.98px){
  .under-nav{ margin-top: calc(var(--nav-h, 64px) + 2px) !important; }
}

/* ==========================================================
   DETAIL (dentro do Drawer) — modal menor + foto mais alta
   Escopo: .detail-scope
========================================================== */

/* Paleta/vars locais herdando a marca do site */
.detail-scope{
  --fm-bg: #f7f8fa;
  --fm-border: #e9eaee;
  --fm-soft: #f3f5f8;
  --fm-text: #1f2937;
  --fm-muted: #6b7280;
  --fm-radius: 14px;
  --fm-radius-sm: 10px;
  --fm-shadow: 0 6px 18px rgba(17, 24, 39, .07);
  --fm-shadow-sm: 0 3px 10px rgba(17, 24, 39, .06);
}

.detail-scope{ background: var(--fm-bg); color: var(--fm-text); }
.detail-scope .container-fluid{ max-width: 1120px; margin: 0 auto; }

/* Tipografia compacta */
.detail-scope h3 { font-size: 1.125rem; font-weight: 700; letter-spacing:.1px; }
.detail-scope h4 { font-size: 1rem;    font-weight: 600; letter-spacing:.1px; }
.detail-scope .breadcrumb { font-size: .8125rem; margin-bottom:8px; }
.detail-scope .hero-count { font-size: 11px; padding: 3px 6px; }
.detail-scope .badge-pill{ font-size: 11px; padding: .25em .5em; }
.detail-scope .form-control, 
.detail-scope .btn{ font-size: .95rem; }
.detail-scope .btn{ padding: .4rem .75rem; }
.detail-scope #descricao-imovel,
.detail-scope .box-endereco{ font-size: .9375rem; }

/* Cartões */
.detail-scope .box-endereco,
.detail-scope #contato > div{
  background:#fff !important;
  border:1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
  box-shadow: var(--fm-shadow);
}

/* Inputs */
.detail-scope .form-group{ margin-bottom: .6rem; }
@media (min-width: 576px){ .detail-scope .form-group{ margin-bottom: .75rem; } }
.detail-scope .form-control{
  border-radius: 10px;
  border-color: var(--fm-border);
}
.detail-scope .form-control:focus{
  border-color: var(--brand-600);
  box-shadow: 0 0 0 .2rem rgba(26,164,199,.15);
}

/* Alertas */
.detail-scope .alert{
  border: 1px solid var(--fm-border);
  border-radius: 12px;
  padding: .6rem .75rem;
  box-shadow: var(--fm-shadow-sm);
}

/* Botões unificados ao site */
.detail-scope .btn{
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
}
.detail-scope .btn-primary{
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-650);
  --bs-btn-hover-border-color: var(--brand-650);
  --bs-btn-active-bg: var(--brand-750);
  --bs-btn-active-border-color: var(--brand-750);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
  color:#fff;
}
.detail-scope .btn-primary:focus{ box-shadow: 0 0 0 .25rem rgba(26,164,199,.25); }
.detail-scope .btn-default{
  background:#fff;
  border:1px solid var(--fm-border, #E5F4FA);
  color:#0f172a;
}
.detail-scope .btn-default:hover{
  background: var(--brand-50);
  border-color: var(--brand-600);
  color: var(--brand-600);
}

/* Breadcrumb */
.detail-scope .breadcrumb{
  background:#fff;
  padding:.35rem .6rem;
  border:1px solid var(--fm-border);
  border-radius:999px;
  box-shadow: var(--fm-shadow-sm);
  display:inline-flex; gap:.35rem;
}
.detail-scope .breadcrumb li{ color: var(--fm-muted); }

/* Métricas (chips) */
.detail-scope .badge-pill{
  background:#eef2f7;
  border:1px solid #e3e8ef;
  color:#374151;
  padding:.28rem .55rem;
  border-radius:999px;
}
.detail-scope .iconline{ display:flex; gap:10px 12px; color:#6e6e6e; flex-wrap:wrap; }
.detail-scope .iconline i{ color:#64748b; margin-right:6px; }

/* Preço em destaque */
.detail-scope .price-strong{
  display:inline-block;
  padding:.15rem .45rem;
  background:#fff;
  border:1px solid var(--fm-border);
  border-radius:10px;
  box-shadow: var(--fm-shadow-sm);
}

/* Galeria — foto mais alta */
.detail-scope .drawer-hero-wrap{
  border-radius: var(--fm-radius);
  overflow:hidden;
  box-shadow: var(--fm-shadow);
  background: linear-gradient(180deg, #f2f4f7, #eaeef3);
}
.detail-scope .drawer-hero{
  width:100%;
  height: clamp(var(--detail-hero-min), var(--detail-hero-vh), var(--detail-hero-max));
  display:block;
  object-fit:cover;
  background:#f1f5f9;
}
.detail-scope .gal-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.05);
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.detail-scope .gal-nav:hover{ transform: translateY(-50%) scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.detail-scope .gal-prev{ left:12px; }
.detail-scope .gal-next{ right:12px; }
.detail-scope .hero-count{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.55); color:#fff;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
  font-size:12px;
}

/* Lightbox */
.detail-scope .lb-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center;
  z-index:2000; backdrop-filter: blur(2px);
}
.detail-scope .lb-overlay.open{ display:flex; }
.detail-scope .lb-img{ max-width:95vw; max-height:95vh; object-fit:contain; }
.detail-scope .lb-nav,
.detail-scope .lb-close{
  position:fixed; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: var(--fm-shadow);
  border:1px solid rgba(0,0,0,.06);
}
.detail-scope .lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.detail-scope .lb-next{ right:20px; top:50%; transform:translateY(-50%); }
.detail-scope .lb-close{ top:14px; right:18px; }

/* Drawer do DETAIL (quando a página é carregada dentro do modal) */
#drawer .modal-dialog{
  position: fixed; right: 0; left: auto; margin: 0;
  max-width: none;
  width: min(96vw, var(--detail-modal-max));
  top: var(--nav-h, 64px);
  height: calc(100vh - var(--nav-h, 64px));
}
@media (min-width: 1400px){
  #drawer .modal-dialog{ width: min(94vw, calc(var(--detail-modal-max) + 80px)); }
}
@media (min-width: 768px) and (max-width: 991.98px){
  #drawer .modal-dialog{ width: 96vw; }
}
@media (max-width: 767.98px){
  #drawer .modal-dialog{ width: 100vw; max-width: 100vw; }
}

/* Cabeçalho/rodapé */
#drawer .modal-content{
  background:#fff;
  border:1px solid var(--fm-border, #e9eaee);
  border-radius: var(--fm-radius, 14px);
  box-shadow: var(--fm-shadow, 0 6px 18px rgba(17,24,39,.07));
  height: 100%;
  overflow: hidden;
}
#drawer .modal-header, #drawer .modal-footer{
  border-color: var(--fm-border, #e9eaee);
  padding: 10px 14px;
}
#drawer .modal-title{ font-size: 1rem; font-weight: 700; }
#drawer .btn-close{ filter: none; opacity: .7; }
#drawer .btn-close:hover{ opacity: 1; }
#drawer .modal-body{
  padding: 12px 16px;
  height: calc(100% - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Backdrop global levemente suave */
.modal-backdrop.show{
  background-color: rgba(15, 23, 42, .45);
  backdrop-filter: blur(1.5px);
}

/* ===== DETAIL – bloco de contato/visita ===== */
.detail-scope #contato > div{
  background:#fff;
  border:1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow);
  padding:16px;
}

/* Grupo de abas (Falar / Agendar) */
.detail-scope .form-tabs .btn{
  min-width: 160px;
  border-radius: 8px !important;
}
@media (max-width: 575.98px){
  .detail-scope .form-tabs{
    width:100%;
  }
  .detail-scope .form-tabs .btn{
    flex:1 1 0%;
  }
}

/* Link de alternância dentro do formulário (discreto) */
.detail-scope .form-switch-link{
  margin-left:auto;
  padding: .25rem 0;
  font-weight:600;
  text-decoration:none;
  border:0;
  background:transparent;
  color: var(--brand-600);
}
.detail-scope .form-switch-link:hover{ color: var(--brand-650); text-decoration: underline; }

.btn.rounded-pill { border-radius: 999px; }

.price-row { margin-top: .25rem; }
.price-row .price { line-height:1; }

@media (max-width: 576px){
  .price-row .cta-row{
    width:100%;
    justify-content: flex-end;
  }
}


/* Corrige cor de fonte do botão WhatsApp (força branco) */
.btn-primary.btn-cta,
.btn-primary.btn-cta:hover,
.btn-primary.btn-cta:focus,
.btn-primary.btn-cta:active {
  color: #fff !important;      /* força texto branco */
}

.btn-primary.btn-cta i {
  color: #fff !important;      /* força ícone branco */
}