/* Anúncio */


.destaque {
    position:         absolute;
    display:          flex;
    flex-flow:        row nowrap;
    justify-content:  center;
    align-items:      center;
    top:              10px;
    left:             10px;
    height:           auto;
    padding:          3px 10px;
    border:           2px solid white;
    border-radius:    19px;
    font-family:      Montserrat;
    font-size:        clamp(1.4rem, calc(1.2vw + .8rem), 1.5rem) !important;
    font-weight:      normal;
    line-height:      1;
    color:            white;
    background-color: rgba(var(--rgb-destaque), 0.8);
    pointer-events:   all;
}

#imovel .destaque {
    position:         static !important;
}

.qtd_imagens {
    position:         absolute;
    top:              260px;
    right:            15px;
    width:            70px;
    max-width:        70px;
    height:           26px;
    border:           2px solid white;
    border-radius:    16px;
    font-weight:      bold;
    line-height:      1.5;
    background-color: black;
    color:            white;
}

/* SLIDE DOS IMÓVEIS */
.img-slider {
    position: relative;
    aspect-ratio: 16 / 8;
    width: 100%;
}

.img-slider .swiper-slide .img-into-bg {
    display: block;     /* O object-fit e position vêm do style inline do PHP */
    width: 100%;
    height: 100%;
    /* Melhora a nitidez em redimensionamentos */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    /* Otimiza a renderização de bordas */
    filter: contrast(1.05) brightness(1.02);
    /* Garante que a imagem use toda a potência do hardware, evitanda que o navegador tente 'suavizar' demais e deixe embaçado */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Garante que o preloader fique centralizado sobre a imagem */
.swiper-slide {
    position: relative;
    overflow: hidden;
}

.swiper-button-prev,
.swiper-button-next {
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 50%;
    color: black;
    background-color: rgba(255, 255, 255, 0.3);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    border: 1px solid black;
    /* background-color: rgba(0, 0, 0, 0.8); */
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
    color: black;
    /* color: darkorange; */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px; /* aumenta o tamanho */
    font-weight: bold; /* deixa mais grossa */
    color: white; /* cor da seta */
    text-shadow:
            -1px -1px 0 black, /* canto superior esquerdo */
            1px  -1px 0 black, /* canto superior direito */
            -1px 1px  0 black, /* canto inferior esquerdo */
            1px  1px  0 black, /* canto inferior direito */
            -1px 0px  0 black, /* esquerda */
            1px  0px  0 black, /* direita */
            0px -1px  0 black, /* cima */
            0px  1px  0 black; /* baixo */
}

@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}

.swiper-pagination-bullet {
    /* Ajuste dos bullets internos */
    width: 10px;
    height: 10px;
    margin: 0 4px !important;
    border: 2px solid rgba(0, 0, 0, 0.4) !important;
    background: rgba(150, 150, 150, 0.4);
    opacity: 1 !important;
}
.swiper-pagination-bullet:hover {
    background-color: var(--hex-detalhes);
}

.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    border: 1px solid var(--hex-detalhes) !important;
    /* background-color: rgba(255, 140, 0, 0.5) !important; */
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    /* Remove o comportamento padrão do Swiper */
    z-index: 20 !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    bottom: 15px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    padding: 6px 12px;
    border-radius: 12px;
    transform: translateX(-50%) !important;
}

/* BOTÕES SOBREPOSTOS */
.overlay-elements {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* deixa o slide clicável */
}

.overlay-elements .destaque,
.overlay-elements .gerenciar,
.overlay-elements .botoes_imovel,
.overlay-elements .qtd_imagens {
    pointer-events: auto; /* permite clicar nos botões */
}


/* Controle de Paginação */


.linha {
    display:         flex;
    margin-bottom:   10px;
    justify-content: center;
}

.controles {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    align-items:     center;
    width:           auto;
    margin-bottom: 40px !important;
}

.botao {
    display:          flex;
    justify-content:  center;
    align-items:      center;
    width:            33px;
    height:           33px;
    margin:           0 10px;
    padding:          10px;
    border:           1px solid #000;
    border-radius:    50%;
    font-size:        23px;
    color:            black;
    background-color: white;
    cursor:           pointer;
}
.botao:hover:not(.botao_a, .botao_s) {
    color:            white;
    background-color: var(--hex-detalhes);
}

.botao I {
    margin-right: 0 !important;
}

.lista {
    width:         70px !important;
    height:        auto !important;
    margin-right:  5px !important;
    padding:       3px 10px 4px 10px !important;
    border-radius: 10px !important;
    font-family:   Montserrat;
}

.texto_pagina {
    width:       65px;
    font-family: Montserrat;
    color:       black;
}

.texto_imoveis {
    width:       198px;
    margin:      0 10px 0 2px;
    padding:     10px 0;
    font-family: Montserrat !important;
    text-align:  right;
    color:       black;
}

@media (max-width: 372px) {
    .controles {
        justify-content: space-between;
        padding:         0 20px;
    }

    .texto_imoveis {
        display:    inline-block;
        width:      100%;
        margin:     0 0 0 2px;
        text-align: center;

    }
}


/* Layout do grid de Imóveis Semelhantes */
#semelhantes .coluna_imagem {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

#semelhantes .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#semelhantes .coluna_imagem .box.box--pricing {
    height: auto !important;
    padding: 0 !important;
}

#semelhantes .coluna_imagem .box__wrapper.imovel {
    height: auto !important;
}

@media (max-width: 1800px) {
    #semelhantes .coluna_imagem {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        width: 33.333333%;
    }
}

@media (max-width: 1300px) {
    #semelhantes .coluna_imagem {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 798px) {
    #semelhantes .coluna_imagem {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 5px;
    }
}