/*
 * CSS do carousel de imagens do imovel.
 * Tudo dentro de .carousel-imovel-wrap para nao colidir com classes do
 * Bootstrap 5.3 (ou qualquer outro CSS da pagina).
 */

.carousel-imovel-wrap {
    --altura-base: 320px;
    --altura-ativa: 390px;
}

@media (min-width: 2000px) {
    .carousel-imovel-wrap {
        --altura-base: 400px;
        --altura-ativa: 520px;
    }
}

.carousel-imovel-wrap * {
    box-sizing: border-box;
}

.carousel-imovel-wrap .container-imagens {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ===== preloader geral (some quando o carousel termina de montar) ===== */
.carousel-imovel-wrap .preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--altura-ativa);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .25s ease;
}
.carousel-imovel-wrap .preloader.escondido {
    opacity: 0;
    pointer-events: none;
}
.carousel-imovel-wrap .spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #ddd;
    border-top-color: #888;
    border-radius: 50%;
    animation: carousel-imovel-girar .8s linear infinite;
}
@keyframes carousel-imovel-girar {
    to { transform: rotate(360deg); }
}

/* ===== spinner individual por foto ===== */
.carousel-imovel-wrap .slide-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 3px solid rgba(0,0,0,.12);
    border-top-color: rgba(0,0,0,.4);
    border-radius: 50%;
    animation: carousel-imovel-girar .8s linear infinite;
    transition: opacity .2s ease;
}
.carousel-imovel-wrap .slide-spinner.escondido {
    opacity: 0;
    pointer-events: none;
}

/* ===== Splide ===== */
.carousel-imovel-wrap .splide {
    opacity: 0;
    transition: opacity .25s ease;
}
.carousel-imovel-wrap .splide.pronto {
    opacity: 1;
}

.carousel-imovel-wrap .splide__track {
    /* folga vertical exata pro scale nao ser cortado pelo overflow:hidden */
    padding: calc((var(--altura-ativa) - var(--altura-base)) / 2) 0 !important;
}

.carousel-imovel-wrap .splide__list {
    align-items: center;
}

.carousel-imovel-wrap .splide__slide {
    height: var(--altura-base);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    position: relative;
    z-index: 1;
    transition: opacity .3s ease, transform .3s ease;
}

.carousel-imovel-wrap .splide__slide.is-active {
    opacity: 1;
    /* mesma proporcao final (altura-ativa / altura-base), mas via transform:
       nao muda a caixa de verdade, entao nao "empurra" os vizinhos nem
       distorce a largura da imagem */
    transform: scale(calc(var(--altura-ativa) / var(--altura-base)));
    z-index: 2;
}

/* no mobile (breakpoint definido no JS, mesmo valor aqui) nao tem
   destaque de imagem central - todas as fotos ficam do mesmo tamanho,
   igual a rolagem livre que o site ja tinha */
@media (max-width: 767px) {
    .carousel-imovel-wrap .preloader {
        height: 50vh;
    }
    .carousel-imovel-wrap .splide__slide,
    .carousel-imovel-wrap .splide__slide.is-active {
        height: 50vh;
        opacity: 1;
        transform: none;
    }
}

.carousel-imovel-wrap .item-carousel {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #ddd;
}

.carousel-imovel-wrap .item-carousel img.carousel-img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
    cursor: pointer;
}

.carousel-imovel-wrap .lupa {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    color: #fff;
    background: rgba(0,0,0,.4);
    border-radius: 50%;
    padding: 5px;
    font-size: 15px;
    z-index: 2;
    cursor: pointer;
}
.carousel-imovel-wrap .lupa span{font-size:20px;}

.carousel-imovel-wrap .splide__arrow {
    background: rgba(0,0,0,.35);
}
.carousel-imovel-wrap .splide__arrow svg {
    fill: #fff;
}

/* sem lupa no mobile - o zoom la acontece por duplo toque, nao clique */
@media (max-width: 767px) {
    .carousel-imovel-wrap .lupa {
        display: none;
    }
}

/* sem setas no mobile - o padrao la e arrastar */
@media (max-width: 767px) {
    .carousel-imovel-wrap .splide__arrow {
        display: none;
    }
}

.carousel-imovel-wrap .slider-counter{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 50px;
	z-index: 2;
	color: #fff;
	text-shadow: 0 0 3px #000;
	margin:0;
}

/* ===== overlay de zoom por pinca (mobile, via Hammer.js) ===== */
.carousel-imovel-wrap .contenedor-zoom {
    position: fixed;
    top: 0; bottom: 0; right: 0; left: 0;
    background: #000000c7;
    color: #fff;
    z-index: 1002;
    display: none;
}
.carousel-imovel-wrap .contenedor-zoom .contenedor-zoom-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.carousel-imovel-wrap .contenedor-zoom .contenedor-zoom-img img {
    width: 100%;
}
.carousel-imovel-wrap .contenedor-zoom .close-contenedor-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    z-index: 1001;
    font-size: 1rem;
    background: #00000070;
    padding: 10px;
    border: none;
    border-radius: 4px;
    display: flex;
}