/* =============================================================================
 * Sulminas — Página individual pública do imóvel (Fase 52C)
 * Carregado SÓ em single property (enqueue condicional no child).
 * 100% cosmético: não altera dados, SEO, Open Graph, queries, lógica nem JS do
 * Houzez. Não toca a toolbar Editar/SEO (F46C/F50) nem slider/lightbox.
 * Escopado a .property-detail-v3 (layout ativo do single).
 * ========================================================================== */

/* ---- Galeria: acabamento (sem mexer no slider/lightbox/JS) -------------- */
.property-detail-v3 .top-gallery-section img,
.property-detail-v3 .houzez-gallery-img img { border-radius: 10px; }
.property-detail-v3 .top-gallery-section { margin-bottom: 18px; }

/* ---- Topo: título limpo, preço destacado, endereço legível -------------- */
.property-detail-v3 .page-title-wrap { padding: 14px 0 !important; }
.property-detail-v3 .property-title-wrap h1,
.property-detail-v3 .page-title h1 {
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1f2937 !important;
}
.property-detail-v3 .page-title-wrap .item-price,
.property-detail-v3 .property-title-wrap .item-price,
.property-detail-v3 .mobile-property-title .item-price {
    font-weight: 800 !important;
    color: var(--smcp-green-ink) !important;   /* 59A: tom escuro p/ legibilidade sobre branco */
    letter-spacing: -.01em;
}
.property-detail-v3 .property-title-wrap .item-address,
.property-detail-v3 .page-title-wrap .item-address { color: #6b7280 !important; }

/* ---- Overview / características principais ------------------------------- */
.property-detail-v3 .property-overview-wrap { padding-top: 6px; }
.property-detail-v3 .property-overview-item { align-items: center; }

/* ---- Seções de conteúdo: espaçamento consistente ----------------------- */
.property-detail-v3 .property-section-wrap { margin-bottom: 28px; } /* 55A: 22→28px, mais respiro entre blocos (mobile mantém 16px) */
.property-detail-v3 .block-title-wrap { margin-bottom: 14px; }

/* ---- Form/box lateral de contato: premium + CTA evidente --------------- */
.property-detail-v3 .widget-property-form {
    border: 1px solid #eef2f6;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .08);
}
/* CTA principal (enviar mensagem) — Fase 59A: padrão CLEAN (branco + borda/texto
   verde; sem bloco chapado). Hover mantém branco, com borda mais escura + sombra. */
.property-detail-v3 .widget-property-form .houzez_agent_property_form.btn-secondary {
    background: #fff !important;
    border: 1.5px solid var(--smcp-green) !important;
    color: var(--smcp-green-ink) !important;
    font-weight: 700;
}
.property-detail-v3 .widget-property-form .houzez_agent_property_form.btn-secondary:hover {
    background: #fff !important;
    border-color: var(--smcp-green-hover) !important;
    color: var(--smcp-green-ink) !important;
    box-shadow: 0 4px 14px var(--smcp-green-soft);
}
/* WhatsApp: identidade institucional (#25d366), também CLEAN (branco + borda/texto) */
.property-detail-v3 .widget-property-form .hz-btn-whatsapp { background: #fff !important; border-color: #25d366 !important; color: #0f7a36 !important; } /* 59A: AA 5.44:1 */
.property-detail-v3 .widget-property-form .hz-btn-whatsapp:hover { background: #fff !important; color: #0f7a36 !important; border-color: #1ebe57 !important; box-shadow: 0 4px 14px rgba(37, 211, 102, .18); }

/* ---- Imóveis similares: leve polish (consistência com a Fase 52B) ------- */
.property-detail-v3 .similar-property-wrap .item-listing-wrap {
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: box-shadow .18s ease, transform .18s ease;
}
.property-detail-v3 .similar-property-wrap .item-listing-wrap:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    transform: translateY(-2px);
}
.property-detail-v3 .similar-property-wrap .item-header img { object-fit: cover; border-radius: 10px; }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .property-detail-v3 .page-title-wrap { padding: 8px 0 !important; }
    .property-detail-v3 .property-section-wrap { margin-bottom: 16px; }
    .property-detail-v3 .mobile-property-title .item-price { font-size: 20px !important; }
    .property-detail-v3 .widget-property-form { border-radius: 12px; }
    .property-detail-v3 .top-gallery-section { margin-bottom: 12px; }
}

/* =============================================================================
 * Fase 53B — aproximação do mockup premium (topo, galeria, card do corretor).
 * Cosmético; não toca slider/lightbox/JS nem a lógica do formulário.
 * ========================================================================== */

/* ---- 1) Topo: título à esquerda + preço destacado à direita ------------
   Estrutura nativa do v3: .property-header-wrap (flex, space-between) contém
   .property-title-wrap (coluna: título/endereço/tag) E ul.property-price-wrap
   (preço) como IRMÃS. Usamos o flex existente — sem position:absolute. */
@media (min-width: 768px) {
    .property-detail-v3 .property-header-wrap { gap: 24px; }
    .property-detail-v3 .property-price-wrap { flex-shrink: 0; }
    .property-detail-v3 .property-price-wrap .item-price { margin: 0; font-size: 28px; line-height: 1.1; white-space: nowrap; } /* 55A: 26→28px, mais destaque */
}

/* 67F: bloco "cidade + selo (VENDA/status)" numa única linha, alinhado À ESQUERDA,
   logo abaixo do título. Wrapper .smcp-loc-status criado no override do child
   (property-title.php) agrupando item-address + item-labels. Sem centralizar:
   .property-title-wrap permanece flex-column natural; o título fica acima. */
.property-detail-v3 .smcp-loc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}
.property-detail-v3 .smcp-loc-status .item-address      { margin: 0; }
.property-detail-v3 .smcp-loc-status .property-labels-wrap { margin: 0; }

/* 67F mobile: título no topo; cidade + selo na mesma linha, à esquerda (quebra limpa
   se faltar espaço). .mobile-property-title é bloco full-width → sem risco de centralizar. */
@media (max-width: 767.98px) {
    .property-detail-v3 .mobile-property-title { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; column-gap: 12px; width: 100%; }
    .property-detail-v3 .mobile-property-title .page-title           { order: 1; flex: 0 0 100%; }
    .property-detail-v3 .mobile-property-title .item-address         { order: 2; margin: 0; }
    .property-detail-v3 .mobile-property-title > .d-flex             { order: 3; margin: 0; } /* wrapper do selo (VENDA) ao lado da cidade */
    .property-detail-v3 .mobile-property-title .item-price-wrap      { order: 4; flex: 0 0 100%; margin-top: 6px; }
    .property-detail-v3 .mobile-property-title .mobile-property-tools { order: 5; flex: 0 0 100%; }
}
/* tag de finalidade + localização mais elegantes */
.property-detail-v3 .label-status { border-radius: 6px; font-weight: 700; letter-spacing: .02em; }
.property-detail-v3 .property-title-wrap .item-address { font-size: 14px; color: #6b7280; }

/* ---- 2) Galeria: border-radius da 52C. A redução de ALTURA e o fix do
   FOUC/salto foram feitos na Fase 54B (ver bloco no fim do arquivo), via
   aspect-ratio consistente — NÃO via max-height. */

/* ---- 3/4) Card do corretor premium (Fase 54B): wrapper .smcp-agent-card --
   O override (agent-form.php) envolve avatar+nome (.agent-details) + CRECI +
   WhatsApp num .smcp-agent-card, que é o card escuro. O .agent-details interno
   fica transparente (herda o card). Classe própria, CSS só na single. */
.property-detail-v3 .widget-property-form .smcp-agent-card {
    background: #0f172a;
    border-radius: 12px;
    padding: 20px;                                  /* 55A: 18→20px, respiro interno */
    margin: 0 0 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .22);  /* 55A: profundidade premium */
}
.property-detail-v3 .widget-property-form .smcp-agent-card .agent-details {
    background: transparent; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 14px;
}
/* Caso multi-corretor (is_single_agent=false): vários .agent-details empilhados
   no mesmo card — respiro/divisória entre eles para não ficarem colados. */
.property-detail-v3 .widget-property-form .smcp-agent-card .agent-details + .agent-details {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.property-detail-v3 .widget-property-form .smcp-agent-card .agent-image img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; /* 55A: 58→60px */
    border: 2px solid rgba(255, 255, 255, .15);
}
.property-detail-v3 .widget-property-form .smcp-agent-card .agent-name,
.property-detail-v3 .widget-property-form .smcp-agent-card .agent-name a { color: #fff !important; font-weight: 700; }
.property-detail-v3 .widget-property-form .smcp-agent-card .agent-information li,
.property-detail-v3 .widget-property-form .smcp-agent-card a:not(.smcp-agent-wa) { color: #cbd5e1 !important; }
/* CRECI: selo discreto */
.property-detail-v3 .widget-property-form .smcp-agent-creci {
    margin-top: 12px; font-size: 12.5px; color: #cbd5e1;
    display: inline-flex; align-items: center; gap: 6px;
}
.property-detail-v3 .widget-property-form .smcp-agent-creci::before {
    content: "✓"; color: var(--smcp-green-bright); font-weight: 700;
}
/* WhatsApp dentro do card (CTA verde) */
.property-detail-v3 .widget-property-form .smcp-agent-wa {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 14px; height: 44px; border-radius: 10px;
    background: #25d366; color: #fff !important; font-weight: 700; text-decoration: none !important;
    transition: background .15s ease;
}
.property-detail-v3 .widget-property-form .smcp-agent-wa:hover { background: #1ebe57; color: #fff !important; }

/* Form limpo: inputs refinados + foco verde */
.property-detail-v3 .widget-property-form .form-control {
    border: 1px solid #e2e8f0; border-radius: 10px;
}
.property-detail-v3 .widget-property-form input.form-control { height: 46px; }
.property-detail-v3 .widget-property-form .form-control:focus {
    border-color: var(--smcp-green); box-shadow: 0 0 0 3px var(--smcp-green-soft);
}

/* Coluna lateral colada no topo (67C: 16px → 0px, conforme referência DevTools) */
@media (min-width: 992px) {
    .property-detail-v3 .bt-sidebar-wrap.houzez_sticky { top: 0px; }
}

/* ===================== Fase 54B ===================== */

/* ---- Galeria: reduz a altura e mitiga o salto COM SEGURANÇA ---------------
   Origem (tema pai, main.css): .top-gallery-section nasce 4/3 e, ao carregar o
   lightSlider, .slider-loaded vira aspect-ratio:auto (main.css:7929). Esse
   `auto` é INTENCIONAL: libera a altura para a tira de miniaturas (ul.lSGallery)
   aparecer ABAIXO da imagem, dentro da mesma .top-gallery-section (que tem
   overflow:hidden). Por isso NÃO travamos o estado .slider-loaded — fazê-lo
   recortaria as miniaturas (achado HIGH da revisão 54B).
   O que fazemos: reduzir o ratio do ESTADO BASE (pré-load/placeholder) e do
   slide (.lslide), mantendo placeholder e slide na MESMA proporção
   (object-fit:cover do pai preenche, sem distorção e sem salto da área da
   imagem). Pós-load a seção volta a `auto` (pai) e as thumbs aparecem normais.
   Escopado a >=769px: no mobile o pai já usa 4/3 (regra responsiva nativa,
   main.css:7985) e a deixamos intacta.
   Fase 55A: ratio calibrado 3/2 → 16/10 (1.6, mais baixo/elegante). Mesma
   estrutura segura (NÃO trava .slider-loaded, sem max-height, sem overflow novo)
   — só o valor mudou. Para afinar no navegador: trocar 16/10 por 16/9 (mais
   baixo) ou voltar a 3/2 — basta editar os dois valores abaixo. */
/* Ajuste: ALTURA FIXA ~386px no preview (antes era aspect-ratio 16/10, que
   crescia com a largura → muito alto em telas largas). Aplica SÓ ao slide
   principal (.lslide) e ao placeholder; object-fit:cover preenche sem distorcer.
   NÃO toca o lightbox (#property-lightbox fica fora do .top-gallery-section) nem
   as miniaturas (ul.lSGallery não são .lslide). A seção volta a aspect-ratio:auto
   para a tira de miniaturas continuar visível abaixo. */
@media (min-width: 769px) {
    .property-detail-v3 .top-gallery-section { aspect-ratio: auto; }
    .property-detail-v3 .top-gallery-section .lslide,
    .property-detail-v3 .top-gallery-section .lslide > a,
    .property-detail-v3 .gallery-featured-placeholder { height: 386px; aspect-ratio: auto; }
    .property-detail-v3 .top-gallery-section .lslide > a { display: block; }
    .property-detail-v3 .top-gallery-section .lslide img,
    .property-detail-v3 .gallery-featured-placeholder img {
        height: 386px; width: 100%; object-fit: cover; object-position: center;
    }
}
/* Mobile: altura confortável (valor inicial 300px, dentro de 280–320 pedido).
   object-fit:cover evita distorção; ajustável. Verificar no dispositivo. */
@media (max-width: 768px) {
    .property-detail-v3 .top-gallery-section .lslide,
    .property-detail-v3 .top-gallery-section .lslide > a,
    .property-detail-v3 .gallery-featured-placeholder { height: 300px; aspect-ratio: auto; }
    .property-detail-v3 .top-gallery-section .lslide > a { display: block; }
    .property-detail-v3 .top-gallery-section .lslide img,
    .property-detail-v3 .gallery-featured-placeholder img {
        height: 300px; width: 100%; object-fit: cover; object-position: center;
    }
}

/* ---- Tag de finalidade (topo): badge verde da marca -----------------------
   Escopado APENAS ao badge do topo (.property-title-wrap). As labels das
   miniaturas/galeria mantêm a cor nativa do status (Theme Options intocado). */
.property-detail-v3 .property-title-wrap .label-status {
    background-color: var(--smcp-green) !important;
    color: var(--smcp-green-on) !important;   /* 59A: texto escuro p/ contraste sobre #a8cf45 claro */
    border-radius: 999px;          /* 55A: pill premium (era 6px) */
    padding: 5px 14px;             /* 55A: respiro mais elegante (era 4px 12px) */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 12px;
    line-height: 1.4;
}

/* ---- Breadcrumb discreto --------------------------------------------------- */
.property-detail-v3 .breadcrumb-wrap { margin-bottom: 8px; }
.property-detail-v3 .breadcrumb { font-size: 12.5px; }
.property-detail-v3 .breadcrumb .breadcrumb-item,
.property-detail-v3 .breadcrumb .breadcrumb-item a { color: #9aa3af !important; }
.property-detail-v3 .breadcrumb .breadcrumb-item.active { color: #6b7280 !important; }

/* =============================================================================
 * Fase 56A — descrição editorial + imagens internas + form sticky premium
 * + DESIGN SYSTEM de verde (variáveis CSS).
 * Tudo cosmético e escopado a .property-detail-v3. Não toca conteúdo/SEO/JS/form.
 * ========================================================================== */

/* ---- Design system: verde OFICIAL #A8CF45 (Fase 59A) -----------------------
   Alinhado ao tema PAI (a cor primária do Houzez já é #a8cf45). Como #a8cf45 é
   um verde CLARO, o sistema separa papéis por CONTRASTE:
   - --smcp-green       (#a8cf45): MARCA — fundos de badge, bordas, ícones, acentos.
   - --smcp-green-ink   (escuro) : TEXTO legível sobre branco (preço, links, texto de botão) — AA.
   - --smcp-green-on    (escuro) : texto sobre fundo #a8cf45 (badges) — alto contraste.
   - --smcp-green-hover : hover de bordas/acentos (um pouco mais escuro que a marca).
   - --smcp-green-soft  : realces/foco discretos.
   WhatsApp (#25d366) = identidade institucional; fica fora do design system. */
.property-detail-v3 {
    --smcp-green:        #a8cf45;                 /* MARCA (= tema pai) */
    --smcp-green-ink:    #4f6e14;                 /* texto verde legível sobre branco (AA) */
    --smcp-green-hover:  #93b833;                 /* hover de bordas/acentos */
    --smcp-green-soft:   rgba(168, 207, 69, .18); /* foco/realces suaves */
    --smcp-green-on:     #243b04;                 /* texto escuro sobre fundo #a8cf45 (badges) */
    --smcp-green-bright: #a8cf45;                 /* acento claro sobre fundo escuro (card do corretor) */
}

/* ---- 1) Descrição: editorial e legível -----------------------------------
   Conteúdo do imóvel (post_content) foi inserido majoritariamente como <h3>.
   NÃO alteramos o conteúdo/tag/SEO — só calibramos o VISUAL para leitura. */
.property-detail-v3 .description-content {
    color: #374151;
    font-size: 16px;
    line-height: 1.75;
}
.property-detail-v3 .description-content h1,
.property-detail-v3 .description-content h2,
.property-detail-v3 .description-content h3,
.property-detail-v3 .description-content h4 {
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.75;
    color: #374151;
    margin: 0 0 10px;
}
.property-detail-v3 .description-content p { margin: 0 0 12px; }
.property-detail-v3 .description-content ul,
.property-detail-v3 .description-content ol { margin: 0 0 14px; padding-left: 20px; }
.property-detail-v3 .description-content li { margin-bottom: 6px; }
.property-detail-v3 .description-content strong { font-weight: 700; color: #1f2937; }
/* Links da descrição (Instagram/Youtube etc.) no verde da marca */
.property-detail-v3 .description-content a { color: var(--smcp-green-ink); font-weight: 600; text-decoration: none; }
.property-detail-v3 .description-content a:hover { color: var(--smcp-green-ink); text-decoration: underline; }

/* ---- 2) Imagens dentro da descrição: premium e contidas -------------------
   Não usar display:none (conteúdo/SEO). Só conter largura, arredondar e espaçar. */
.property-detail-v3 .description-content img,
.property-detail-v3 .property-description-content img {
    max-width: 100% !important;
    height: auto;
    border-radius: 12px;
    margin: 18px 0;
}
.property-detail-v3 .description-content .wp-caption,
.property-detail-v3 .description-content figure {
    max-width: 100% !important;   /* neutraliza width inline do WP */
    margin: 18px auto;
}
.property-detail-v3 .description-content .wp-caption-text,
.property-detail-v3 .description-content figcaption {
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
    text-align: center;
    margin-top: 6px;
}
/* Desktop: limita a largura visual da imagem interna (centralizada) p/ não
   competir com a galeria principal. Mobile fica 100% (sem este teto). */
@media (min-width: 992px) {
    .property-detail-v3 .description-content img,
    .property-detail-v3 .property-description-content img { max-width: 640px !important; display: block; margin-left: auto; margin-right: auto; }
    /* wrapper acompanha a imagem (640px) p/ a caption ficar alinhada, não a 100% */
    .property-detail-v3 .description-content .wp-caption,
    .property-detail-v3 .description-content figure { max-width: 640px !important; }
}

/* ---- 3) Form lateral sticky: bloco de conversão premium -------------------
   Mantém o sticky nativo (.bt-sidebar-wrap.houzez_sticky) e a lógica/AJAX/nonce.
   Só refina espaçamento, campos, termos e o botão "Ligar" (neutro elegante). */
.property-detail-v3 .widget-property-form { padding: 22px; }
.property-detail-v3 .widget-property-form .form-control { background: #fff; }
.property-detail-v3 .widget-property-form textarea.form-control,
.property-detail-v3 .widget-property-form .hz-form-message {
    min-height: 96px; border-radius: 10px; padding: 10px 12px; line-height: 1.5;
}
/* Termos de uso / privacidade: discreto e alinhado */
.property-detail-v3 .widget-property-form .gdpr-text-wrap,
.property-detail-v3 .widget-property-form .control--checkbox {
    font-size: 12.5px; color: #6b7280; line-height: 1.5;
}
.property-detail-v3 .widget-property-form .gdpr-text-wrap a { color: var(--smcp-green-ink); font-weight: 600; }
/* Botão "Ligar agora": secundário NEUTRO elegante (contraste com o verde do CTA) */
.property-detail-v3 .widget-property-form .hz-btn-call.btn-secondary-outlined {
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    background: #fff !important;
    font-weight: 600;
}
.property-detail-v3 .widget-property-form .hz-btn-call.btn-secondary-outlined:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1f2937 !important;
}

/* ===================== Fase 69K-C — Imóveis Semelhantes (MOBILE) =====================
 * Problema: no mobile, o preço dos cards de "Imóveis Semelhantes" aparece SOBRE a imagem
 * (`.item-price-wrap.d-md-none`, position:absolute global). O card já tem, no corpo, o
 * preço DESKTOP (`.item-price-wrap.d-none.d-md-flex`, escondido no mobile) logo antes da
 * cidade (`.item-address`). Correção (só < 768px): esconder o preço sobre a imagem e
 * MOSTRAR o preço do corpo na MESMA linha da cidade (cidade à esquerda, preço à direita),
 * via flex/order no `.item-body`. Escopado a `.similar-property-wrap` → não afeta cards
 * comuns das listagens, nem o widget Destaque (.widget-featured-property), nem a single
 * principal, nem o desktop. */
@media (max-width: 767.98px) {
    .similar-property-wrap .item-body { display: flex; flex-wrap: wrap; align-items: baseline; }
    .similar-property-wrap .item-body > * { flex: 0 0 100%; }
    .similar-property-wrap .item-body > .labels-wrap { order: 1; }
    .similar-property-wrap .item-body > .item-title  { order: 2; }
    .similar-property-wrap .item-body > .item-address {
        order: 3; flex: 1 1 auto; min-width: 0; margin-bottom: 0;
    }
    .similar-property-wrap .item-body > .item-price-wrap {
        order: 4; flex: 0 0 auto; margin: 0 0 0 auto;
        position: static !important; /* anula o position:absolute global → entra no fluxo flex */
    }
    .similar-property-wrap .item-body > .item-amenities { order: 5; margin-top: 6px; }
    /* Botão "Mais": estava position:absolute (sobrepondo a faixa do preço). Volta ao FLUXO
       (static) → cai na BASE do card, em linha própria, à direita, com largura natural. */
    .similar-property-wrap .item-body > .btn-item {
        order: 6; position: static !important;
        flex: 0 0 auto; align-self: flex-end; margin: 10px 0 0 auto;
    }
    /* mostra o preço do CORPO no mobile (vence o .d-none) e remove o preço de cima da imagem */
    .similar-property-wrap .item-body > .item-price-wrap.d-md-flex { display: flex !important; }
    .similar-property-wrap .item-header .item-price-wrap.d-md-none { display: none !important; }
}