/* Carrossel de fotos dos cartões de imóvel (listagem interna e site público).
   Ocupa a moldura inteira da foto; quem dá o tamanho é a moldura. */
.oi-carrossel { position: absolute; inset: 0; }

.oi-carrossel__trilho {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.oi-carrossel__trilho::-webkit-scrollbar { display: none; }

.oi-carrossel__slide {
    flex: 0 0 100%; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
}
.oi-carrossel__slide img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

.oi-carrossel__seta {
    position: absolute; top: 50%; z-index: 3;
    width: 1.9rem; height: 1.9rem; border-radius: 9999px; border: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24, 24, 27, .6); color: #fff; cursor: pointer;
    transform: translateY(-50%);
    opacity: 0; transition: opacity .2s, background-color .2s;
}
.oi-carrossel__seta svg { width: .9rem; height: .9rem; }
.oi-carrossel__seta:hover { background: rgba(24, 24, 27, .85); }
.oi-carrossel:hover .oi-carrossel__seta,
.oi-carrossel__seta:focus-visible { opacity: 1; }
/* Na tela de toque não há hover: as setas ficam sempre à vista. */
@media (hover: none) { .oi-carrossel__seta { opacity: 1; } }
.oi-carrossel__seta--ant { left: .5rem; }
.oi-carrossel__seta--prox { right: .5rem; }

.oi-carrossel__conta {
    position: absolute; bottom: .625rem; right: .625rem; z-index: 3;
    padding: .125rem .5rem; border-radius: .375rem;
    background: rgba(24, 24, 27, .7); color: #fff;
    font-size: 10px; font-weight: 600; line-height: 1.5;
    pointer-events: none;
}