/* --- Base Styles & Resets --- */
:root {
    /* Cores */
    --color-primary: #007bff;
    --color-secondary: #28a745; /* Verde WhatsApp */
    --color-text-dark: #2c3e50;
    --color-text-medium: #555;
    --color-text-light: #666;
    --color-background-light: #f8f9fa;
    --color-card-background: #fff;
    --color-border-light: #eee;
    --color-border-medium: #ddd;

    /* Espaçamento */
    --spacing-xs: 0.5em; /* 8px */
    --spacing-sm: 1em;   /* 16px */
    --spacing-md: 1.25em; /* 20px */
    --spacing-lg: 1.5em; /* 24px */
    --spacing-xl: 1em;   /* 16px */

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 50px; /* Para botões */

    /* Sombras */
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.08);
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-text-medium);
    background-color: var(--color-background-light);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- Ajustes para Mobile (Mobile-First) --- */
/* Estas regras se aplicam por padrão e são sobrescritas em telas maiores */

/* Container Principal do Detalhe: Remove o padding horizontal */
.imobi-detail-container {
    padding: var(--spacing-xl) 0; /* Vertical padding */
    max-width: 80em;
    margin: 0 auto;
}

.imobi-detail-container .content {
    padding: 0; /* Remove padding lateral para mobile */
}

/* Grid do Cabeçalho: Empilha os itens verticalmente em mobile */
.imobi-header-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Área de Mídia (Imagem Principal e Miniaturas): Remove padding, bordas arredondadas e sombra */
.imobi-media-area {
    width: 100%;
    background-color: var(--color-card-background);
    border-radius: 0; /* Remove bordas arredondadas */
    box-shadow: none; /* Remove sombra */
    overflow: hidden;
    padding: 0; /* Remove padding interno da área de mídia */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: relative;
}

/* Imagem Principal: Remove bordas arredondadas */
.imobi-main-visual {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    background-color: var(--color-border-light);
    border-radius: 0; /* Remove bordas arredondadas da imagem principal */
}

.imobi-main-visual img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Navegação da Imagem Principal (Setas): Esconde as setas no mobile */
.main-image-nav {
    display: none; /* ESCONDE AS SETAS EM MOBILE */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 1em 0.8em;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease, padding 0.2s ease;
    font-size: 1.5em;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
}

.main-image-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1em 1.2em;
}

.main-image-nav-prev {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.main-image-nav-next {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.imobi-main-visual .main-image-nav.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Galeria de Miniaturas (Swiper.js): Reduz o padding para quase zero, mantendo espaço para os botões do Swiper */
.imobi-gallery-thumbnails {
    width: 100%;
    position: relative;
    padding: 0 1em; /* Reduz padding lateral para 1em (16px) em cada lado */
    box-sizing: border-box;
}

.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto !important;
}

.imobi-thumb-item {
    display: block;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    height: 90px;
    width: 100px;
    min-width: 80px;
    position: relative;
    background-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.imobi-thumb-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.imobi-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.imobi-thumb-item:hover img {
    transform: scale(1.05);
}

.imobi-thumb-item.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

/* Botões de Navegação do Swiper (Miniaturas) */
.imobi-gallery-thumbnails .swiper-button-next,
.imobi-gallery-thumbnails .swiper-button-prev {
    color: var(--color-text-dark);
    top: 50%;
    transform: translateY(-50%);
    width: 2.5em;
    height: 2.5em;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
}

.imobi-gallery-thumbnails .swiper-button-next:hover,
.imobi-gallery-thumbnails .swiper-button-prev:hover {
    background-color: var(--color-card-background);
    box-shadow: var(--shadow-md);
}

.imobi-gallery-thumbnails .swiper-button-prev {
    left: 0.5em;
}

.imobi-gallery-thumbnails .swiper-button-next {
    right: 0.5em;
}

.imobi-gallery-thumbnails .swiper-button-next::after,
.imobi-gallery-thumbnails .swiper-button-prev::after {
    font-size: 1.2em !important;
}

/* Card Financeiro: Remove bordas arredondadas e sombra */
.imobi-financial-sticky {
    width: 100%;
    background-color: var(--color-card-background);
    padding: var(--spacing-xl); /* Mantém padding interno para o conteúdo */
    border-radius: 0; /* Remove bordas arredondadas */
    box-shadow: none; /* Remove sombra */
    height: fit-content;
    margin-top: var(--spacing-xl); /* Espaço abaixo da área de mídia em mobile */
}

.imobi-financial-card h3 {
    font-size: 1.6em;
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--spacing-sm);
}

.imobi-financial-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.imobi-financial-card li {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: 1em;
    color: var(--color-text-medium);
    border-bottom: 1px dashed var(--color-border-light);
}
.imobi-financial-card li:last-of-type {
    border-bottom: none;
}

.imobi-financial-card .value {
    font-weight: 600;
    color: var(--color-text-dark);
}

.imobi-financial-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-medium);
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-text-dark);
}

.imobi-financial-total .total-value {
    color: var(--color-secondary);
    font-size: 1.3em;
}

.imobi-financial-actions {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.whatsapp-card-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--color-secondary);
    color: white;
    padding: 0.8em 1.5em;
    border-radius: var(--border-radius-lg);
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
    width: 100%;
    justify-content: center;
}
.whatsapp-card-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}
.whatsapp-card-button .fab {
    font-size: 1.3em;
}

/* --- Media Query para Desktop/Tablet (min-width: 52em) --- */
/* Estas regras restauram os estilos originais para telas maiores */
@media (min-width: 52em) {
    /* Container Principal do Detalhe: Restaura o padding horizontal */
    .imobi-detail-container .content {
        padding: 0 var(--spacing-xl);
    }

    /* Grid do Cabeçalho: Organiza os itens horizontalmente */
    .imobi-header-grid {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Área de Mídia: Restaura padding, bordas arredondadas e sombra */
    .imobi-media-area {
        flex-basis: 70%;
        max-width: calc(70% - var(--spacing-xl) / 2);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-lg);
    }

    /* Imagem Principal: Restaura bordas arredondadas */
    .imobi-main-visual {
        border-radius: var(--border-radius-sm);
    }

    /* Navegação da Imagem Principal (Setas): Reativa as setas para desktop */
    .main-image-nav {
        display: flex; /* MOSTRA AS SETAS EM DESKTOP */
    }

    /* Galeria de Miniaturas: Restaura o padding original */
    .imobi-gallery-thumbnails {
        padding: 0 2em;
    }

    /* Card Financeiro: Restaura bordas arredondadas e sombra */
    .imobi-financial-sticky {
        flex-basis: 30%;
        max-width: calc(30% - var(--spacing-xl) / 2);
        position: sticky;
        top: var(--spacing-xl);
        margin-top: 0; /* Remove a margem superior que foi adicionada no mobile */
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
    }

    /* Detalhes Abaixo da Mídia: Ajustes de fonte para desktop */
    .imobi-title {
        font-size: 2.5em;
    }

    .imobi-address {
        font-size: 1.1em;
    }
}

/* --- Detalhes Abaixo da Mídia (Ex: Badges, Título, Endereço - se aplicável) --- */
/* Mantenho esses estilos caso sejam usados em outras partes da página de detalhes. */
.imobi-details-below-media {
    background-color: var(--color-card-background);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin-top: var(--spacing-xl);
    z-index: 1;
}

.imobi-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.imobi-badges .badge {
    background-color: #e9ecef;
    color: #495057;
    padding: 0.4em 0.8em;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.imobi-title {
    font-size: 2.2em; /* Ajustado para melhor leitura em mobile */
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.imobi-address {
    font-size: 1em; /* Ajustado para melhor leitura em mobile */
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.imobi-address .fas {
    color: var(--color-primary);
}